Managing Tabindex for Dynamically Visible Elements

[jeromehardaway]

Description:
We have identified a need to improve the accessibility of elements within our application that are dynamically shown and hidden using various CSS techniques. Elements hidden through methods such as opacity changes, height adjustments, text-indentation, or off-canvas positioning can still be reached via keyboard navigation unless properly managed. To ensure a coherent and accessible keyboard navigation experience, especially for users relying on assistive technologies, it is crucial that these elements are not focusable when hidden and become focusable when made visible.

Action Required:

• Audit the application to identify all elements that are made visible or hidden dynamically using CSS manipulations like opacity, height, text-indent, off-canvas positioning, etc.
• For each identified element that is initially hidden:
  • Add a tabindex="-1" attribute to make it unfocusable by keyboard navigation.
• Implement a mechanism to dynamically change the tabindex attribute to 0 when the element becomes visible, making it focusable. Similarly, when the element is hidden again, its tabindex should revert to "-1".
• Ensure this behavior is consistently applied across all such elements to maintain uniform accessibility standards throughout the application.

Additional Information:
This task is vital for enhancing the usability of our application for keyboard users and those utilizing screen readers, ensuring that they can navigate efficiently and intuitively. By managing the tabindex property of dynamically shown and hidden elements, we prevent users from tabbing into elements that are not meant to be interacted with, thereby improving the overall user experience and accessibility of our application.

Please consider this task a priority as it directly impacts our commitment to accessibility and our goal of providing an inclusive digital environment for all users. Implementing these changes will help us align more closely with accessibility guidelines and standards, ensuring our application is accessible and navigable for everyone.