Accessibility improvements

[sennap]

Accessibility Improvements

Description

There are several areas within the eShop application that can be improved to enhance accessibility for all users. This issue aims to address and implement necessary changes to comply with accessibility standards and ensure a better user experience for individuals with disabilities.

Areas of Improvement

1. Keyboard Navigation:

   • Ensure all interactive elements are accessible via keyboard.
   • Provide visible focus indicators for all focusable elements.

2. Screen Reader Compatibility:

   • Add appropriate ARIA labels to all interactive elements.
   • Ensure all images have descriptive alt text.
   • Review and improve the structure and hierarchy of headings.

3. Color Contrast:

   • Adjust color schemes to ensure sufficient contrast between text and background.
   • Review and update the color contrast ratio to meet WCAG 2.1 AA standards.

4. Form Accessibility:

   • Add labels to all form fields.
   • Ensure error messages are accessible and clearly associated with the relevant fields.

5. Content Scaling:

   • Ensure the application is fully functional and readable when zoomed to 200% or more.
   • Verify that text resizing does not cause layout issues.

Steps to Reproduce

1. Navigate through the eShop application using only the keyboard.
2. Use a screen reader to interact with the application.
3. Check color contrast ratios using a contrast checker tool.
4. Inspect form elements for labels and error message associations.
5. Zoom in on various pages and ensure content remains accessible and readable.

Expected Behavior

• All interactive elements should be accessible via keyboard with visible focus indicators.
• The application should be fully compatible with screen readers, providing meaningful and descriptive information.
• Text and background colors should have sufficient contrast.
• Form fields should have clear labels and accessible error messages.
• The application should remain functional and readable even when content is scaled up.

Additional Information

• Refer to the WCAG 2.1 guidelines for detailed accessibility requirements.
• Utilize tools such as Axe, Lighthouse, and NVDA for testing and validation.

---

Feel free to customize this issue further based on specific needs or additional details.