Proper Management of ARIA Attributes for Visually Hidden Elements

[jeromehardaway]

Description:
Our application currently utilizes various CSS techniques to visually hide elements from the user interface. While these techniques effectively hide content from sighted users, they may still be accessible to screen readers, potentially leading to a confusing experience for users who rely on these assistive technologies. To ensure our application is accessible and provides a seamless user experience for all users, including those using screen readers, we need to implement a systematic approach to manage the visibility of elements with respect to accessibility APIs.

Action Required:

• Conduct an audit across the application to identify all elements that are hidden using CSS techniques (such as opacity, height adjustments, text-indent, off-canvas methods, etc.).
• For each identified element that is initially hidden:
  • Ensure it is wrapped within an element with an aria-hidden="true" attribute to indicate that it should be hidden from assistive technologies.
  • When the element is meant to become visible (e.g., in response to user interaction), dynamically update the aria-hidden attribute to "false" to make it accessible to screen readers.
• For elements that toggle visibility, implement a JavaScript solution that dynamically changes the aria-hidden attribute based on their visibility state.

Additional Information:
This approach aims to maintain the integrity of our application's accessibility by ensuring that elements are only exposed to screen readers when they are intended to be part of the user's current context. By correctly managing the aria-hidden attribute, we can prevent screen readers from accessing content that is not meant to be visible, thus avoiding confusion and improving the navigation experience for users relying on these technologies.

Please prioritize this enhancement as part of our ongoing efforts to adhere to accessibility best practices and ensure our application is inclusive for all users. This will not only improve our compliance with accessibility standards but also enhance the overall user experience by making our application more navigable and understandable for users with disabilities.