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

Ensuring Accessibility of Figure Elements with Proper Role and Alt Attributes #567

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

Comments

@jeromehardaway
Copy link
Contributor

Description:
We have identified instances within our application where <figure> elements, used primarily for displaying images, are not fully optimized for accessibility. To enhance our application's accessibility and ensure compliance with best practices, <figure> elements containing images need to be correctly marked with a role="none" attribute. Additionally, it's crucial that the images contained within these <figure> elements provide descriptive alt text for the benefit of users utilizing assistive technologies.

Action Required:

  • Audit the application for <figure> elements that contain images but do not currently specify a role="none" attribute. Specifically, address the 3 failed elements identified:
    1. <figure> element with an image from "post-bootcamp_phteel.jpg".
    2. <figure> element with an image from "combat-to-code_pnmrth.png".
    3. <figure> element with an image from "devsecops_mxck8o.png".
  • For each <figure> element identified, ensure that the role="none" attribute is added to exclude it from assistive technologies' focus, as it primarily serves a decorative or supporting role to the content.
  • Verify that each image within the <figure> elements has an appropriate alt attribute that accurately describes the image content. This description is essential for screen reader users to understand the image's context and relevance to the surrounding content.

Expected Outcome:
Implementing these changes will significantly improve the accessibility of our application, making content more navigable and understandable for users relying on screen readers. By providing descriptive alt text for images and correctly tagging <figure> elements, we help ensure that our application is inclusive and accessible to a wider audience, aligning with our commitment to digital accessibility standards and practices.

This task prioritizes the clarity and accessibility of visual content within our application, enhancing the user experience for individuals who rely on assistive technology to interact with digital content.

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