Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancing Accessibility by Correctly Tagging Non-Functional Icons and Spacers #566

Open
jeromehardaway opened this issue Mar 17, 2024 · 0 comments

Comments

@jeromehardaway
Copy link
Contributor

Description:
We have identified a series of elements within our application that are currently not optimally configured for accessibility, specifically concerning non-functional icons, SVGs, and images used as spacers or decorative elements. These elements, while contributing to the visual appeal or layout of our application, do not convey functional information and hence should not be accessible to screen readers or other assistive technologies. To align with accessibility best practices and ensure a seamless experience for all users, it is crucial to appropriately tag these non-functional elements.

Action Required:

  • Review the application to locate font icons, SVGs, or images used solely for decorative purposes, as spacers, or where their purpose is already described by adjacent content.
  • Apply a role="presentation" or role="none" attribute to each identified element. This change will signify to assistive technologies that these elements are purely decorative and do not contain content that needs to be conveyed to the user.
  • Specifically, for the 10 failed elements identified (such as various <i> tags with class attributes like "far fa-clock" and SVGs), ensure that these adjustments are promptly made.
  • Validate the changes to ensure that these elements are now correctly ignored by assistive technologies, improving the navigation and experience for users relying on these technologies.

Additional Information:
This task is vital for our commitment to creating an inclusive and accessible digital environment. By correctly tagging non-functional elements, we can provide a cleaner, more navigable experience for users utilizing assistive technologies, avoiding unnecessary distractions and confusion. This step also aligns with our goals of adhering to web accessibility standards and best practices.

Priority should be given to this enhancement, as it directly impacts user experience and our application's accessibility compliance. The effort to identify and adjust the tagging of these elements is a proactive measure towards a more inclusive application design and function.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

No branches or pull requests

2 participants