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

Accessibility bug #3

Open
RobJacobson opened this issue Oct 5, 2021 · 0 comments
Open

Accessibility bug #3

RobJacobson opened this issue Oct 5, 2021 · 0 comments

Comments

@RobJacobson
Copy link

Great course! I'm loving my pro membership!

I noticed a bug wrt. a11y issues. It might be too late to correct here, since the video is already recorded, but perhaps you could keep these issues in the back of your head for future courses.

Problem: If a user tries to navigate around the final webpage using the tab key, the tab key will "skip over" the hamburger button (if visible) and the "load more" button, making this webpage inaccessible.

Reasons: The two "buttons" are just divs (not anchor links or buttons). Chrome does not interpret them as "clickable."

Ways to fix:

  1. Good: Use anchor tags with href="#" (the href is necessary to be "clickable").
  2. Better: Use a tag instead, which "just works." This is also more semantic since -- on a real website -- these would trigger some UI interaction via JS, not link to another page.

References:
https://a11y-style-guide.com/style-guide/section-general.html#kssref-general-buttons
https://accessibility.princeton.edu/how/develop

Food for thought: Could you consider creating a class that teaches a11y issues? These issues never seem to get covered by the major web-dev Youtubers.

FWIW, both of these Chrome extensions are fun ways to "audit" a website for a11y issues. I'm surprised at how many errors they flag, even on major websites.

  1. WAVE accessibility extension
  2. Microsoft's Accessibility Insights for Web various websites.

Keep up the great work!

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

No branches or pull requests

1 participant