Comply with "European Accessibility Act (EAA)"

[Manuel-Innovapps]

nopCommerce 4.90.x

EAA will be enforced starting June 28, 2025. It requires websites to be far more accessible for screen readers and users with disabilities. I'm aware you guys have already implemented a lot over the last few releases, but sadly / luckily there is more coming.

Here is a quick ChatGPT search for what needs to be done (ignore the german question):

https://chatgpt.com/share/67dd0096-3144-8009-8f04-8e1e189227ca

Technical Implications for Web Development

1. Compliance with WCAG 2.1 (Level AA)
   The BFSG requires that websites conform to the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA. This includes:
   • Text Alternatives: All non-text content (images, icons, etc.) must have meaningful alt text.
   • Keyboard Accessibility: All interactive elements must be fully operable via keyboard alone.
   • Contrast Ratios: Minimum contrast of 4.5:1 for normal text, 3:1 for large text.
   • Resizable Text: Content must remain readable and functional when zoomed to 200%.
   • Focus Indicators: Clear visual indicators for focused elements (e.g., inputs, buttons).
   • Semantic HTML: Use proper tags like <button>, <nav>, <main>, <header> to assist screen readers.
2. ARIA Roles and Attributes
   Use WAI-ARIA (Accessible Rich Internet Applications) when semantic HTML is not enough:
   • Use role="dialog" or aria-modal="true" for modals.
   • aria-label, aria-labelledby, aria-describedby for accessibility of custom components.
3. Accessible Forms
   • Every <input> should have an associated <label>.
   • Use aria-invalid and aria-describedby for validation messages.
   • Proper tab order (tabindex) to ensure logical navigation.
4. Error Identification and Recovery
   • Inform users of errors clearly and suggest corrections.
   • Use live regions (e.g., aria-live="polite") for dynamic feedback without disrupting flow.
5. Multimedia Accessibility
   • Videos must have captions and ideally audio descriptions.
   • Audio content should have a transcript.
   • Controls must be accessible (e.g., play/pause via keyboard).
6. Navigation and Structure
   • Clear headings structure (<h1> to <h6>) in a logical order.
   • Provide skip links (e.g., "Skip to main content") for screen reader users.
7. Responsive and Flexible UI
   • No information should be lost on smaller screen sizes.
   • Layouts must support reflow and not require horizontal scrolling (especially for text blocks).

[AndreiMaz]

@Manuel-Innovapps The chat link doesn't work ("Unable to load conversation"). Could you please share it here

[Manuel-Innovapps]

Sorry, updated the link.