a11yproject / a11yproject.com

The A11Y Project is a community-driven effort to make digital accessibility easier.
https://a11yproject.com
Apache License 2.0
3.71k stars 551 forks source link

Inaccessibility : The titles of the posts' highlight are custom links which do not receive keyboard focus. #1532

Closed peternjugunamwaura closed 1 year ago

peternjugunamwaura commented 1 year ago

Thank you for reporting a bug. Please fill out the following information:

Bug description

The title of the posts below the heading "Learn the fundamentals and principles behind accessible design" on the home page do not receive keyboard focus. Examples of these titles include:- "Testing Accessibility" and "Introduction to Web Accessibility". The titles act as links that lead to the individual posts.

Expected outcome

Ensure that all interactive elements receive keyboard focus. For custom elements such as these titles, add attributes tabindex="0" and role="link".

Steps to reproduce

  1. Open https://www.a11yproject.com/ on Google Chrome.
  2. Press TAB key to navigate to the link "Explore Resources".
  3. Using the TAB key verify if the next link which is "Testing Accessibility" receives keyboard focus.

Technical info

The code reference for the element with the bug is <h3 class="u-font-size-body-medium c-homepage-card__title" onclick="location.href='/resources/testing-accessibility/'">Testing Accessibility</h3>. Since this heading has an onclick listrener that changes the URL, it should have a role of a link. Furthermore, to ensure that it receives keyboard focus, it should an attribute tabindex=0. The compliant code example would therefore be:- <h3 tabindex="0" role="link" class="u-font-size-body-medium c-homepage-card__title" onclick="location.href='/resources/testing-accessibility/'">Testing Accessibility</h3>

What device were you using when you encountered the bug?

Laptop

What operating system were you using? What version is the operating system?

Windows 10

What web browser were you using? What version is the web browser?

Google Chrome 111.0.5563.65

Assistive technology and version (optional)

No AT.

Additional information

Screenshot_30

Terms

[ ] I have read, and agree to follow this project's Code of Conduct

ericwbailey commented 1 year ago

This is an intentional design. The other links provide an accessible name for the link, and the onClick is done to remove redundant links from tabbing, rotor, and other forms of interactive content navigation.

In the future, please:

Peter-Peter254 commented 1 year ago

Thanks. will do