Accessibility Rules (WCAG 2.1 AA)

This project must meet WCAG 2.1 AA guidelines.

Semantic Structure

• Use semantic HTML: <header>, <nav>, <section>, <article>, <footer>, <ul>, <li>
• Use ARIA roles only when native semantics are not possible (e.g. <div role="list">)

Images

• Informative images: use the custom <Img> component and pass the media prop, it includes the correct alt text
• Functional images/icons (used in buttons or links): use alt or aria-label to describe the action/purpose
• Decorative images/icons: use aria-hidden="true" and alt=""

Active State

• Use aria-current="page" or aria-current="location" for the current page (e.g. navigation, breadcrumbs)
• Use aria-current for styling: aria-current:font-semibold

Lists

• Use semantic HTML: <ul>, <ol>, <li>
• For custom components rendering lists, explicitly set ARIA roles:
  • role="list" on the container
  • role="listitem" on each item

Keyboard Navigation

• All functionality must be operable using only the keyboard
• Do not rely solely on hover, drag, or pointer events for core interactions

Aria Labels

• Do NOT hardcode strings for aria-label or visually hidden (sr-only) text
• Always use dynamic labels from the global state: labels.global['skipToMainContent']
• Select elements must have an accessible name (e.g. label tag or aria-label)