Accessibility bug #3
Description
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:
- Good: Use anchor tags with
href="#"(the href is necessary to be "clickable"). - 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.
- WAVE accessibility extension
- Microsoft's Accessibility Insights for Web various websites.
Keep up the great work!