Brand Guidelines

Accessibility Guidelines

Ghid complet de accesibilitate pentru farme.ro - WCAG AA/AAA compliance

De ce Accesibilitatea este Importantă

Accesibilitatea asigură că toți utilizatorii, indiferent de abilități, pot accesa și utiliza platforma farme.ro.

Pentru farme.ro, accesibilitatea înseamnă conectarea tuturor la produsele locale tradiționale, inclusiv persoanele cu dizabilități vizuale, motorii sau cognitive.

Contrast Requirements

WCAG Standards

WCAG AA

Minimum contrast ratio: 4.5:1 for normal text, 3:1 for large text

WCAG AAA

Enhanced contrast ratio: 7:1 for normal text, 4.5:1 for large text

Examples

Good Contrast

Text on background - meets AA standards

Poor Contrast

Text too light - fails contrast check

Typography & Readability

Minimum Sizes

  • • Body text: minimum 16px (1rem)
  • • Line height: minimum 1.5 (150%)
  • • Letter spacing: adequate for readability

Best Practices

  • • Use bold for headings (font-weight: 600-700)
  • • Avoid 100% uppercase for more than 3 words
  • • Maintain consistent spacing between paragraphs
  • • Use semantic HTML (h1-h6, p, etc.)

Focus States

Standard Focus Ring

Link with focus

DO

  • • Always provide visible focus indicators
  • • Use ring-2 ring-ring for consistency
  • • Ensure focus is keyboard accessible

DON'T

  • • Don't remove focus outlines
  • • Don't use outline: none without ring
  • • Don't make focus too subtle

Keyboard Navigation

Tab Order

  • • Tab: Move forward through interactive elements
  • • Shift+Tab: Move backward
  • • Enter/Space: Activate buttons and links
  • • Arrow keys: Navigate within components (menus, lists)

Skip to Content

Always provide a "Skip to main content" link for keyboard users to bypass navigation.

Motion Accessibility

prefers-reduced-motion

Respect user preferences for reduced motion:

@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

Best Practices

  • • Provide fallbacks for animations
  • • Keep animations subtle and purposeful
  • • Don't rely on motion to convey information

Forms Accessibility

We'll never share your email address

Requirements

  • • Always use <label> for form inputs
  • • Use aria-describedby for help text
  • • Use role="alert" for error messages
  • • Use aria-invalid="true" for error states

Summary - DO / DON'T

DO

  • ✓ Maintain WCAG AA contrast ratios
  • ✓ Provide visible focus indicators
  • ✓ Use semantic HTML
  • ✓ Test with keyboard navigation
  • ✓ Include alt text for images
  • ✓ Respect prefers-reduced-motion
  • ✓ Use ARIA labels when needed

DON'T

  • ✗ Don't remove focus outlines
  • ✗ Don't use color alone to convey information
  • ✗ Don't ignore contrast requirements
  • ✗ Don't create keyboard traps
  • ✗ Don't use placeholder as label
  • ✗ Don't auto-play videos with sound
  • ✗ Don't use tiny click targets (<44px)