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