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)