Bug #15127
closedHomepage accessibility enhancements
0%
Description
Matt noted in a forum post about whether the new homepage is WCAG 2.1 compatible.
I just did an accessibility audit and found a couple of issues:
- On desktop, it is not possible to use keyboard navigation to view the main nav's nested menu items. (Try using the
Tabkey to navigate under the "About" item for the main nav.) - We are missing some
roleandariaattributes for our HTML markup to make things visually and structurally better for screen readers.
I've pushed some updates to a new homepage-accessibility branch to address these issues. (See https://github.com/cuny-academic-commons/cac/compare/3b4f0a3...1a5c9a0.) I've slated this for the next 1.19.1 maintenance release.
Other than the WP admin bar, which has some tabindex issues that are out of our control, we are WCAG 2.1 compatible after these changes.
We could do a few things better with CSS to better outline when an element is in focus, but that's not imperative.
Related issues
Updated by Raymond Hoh over 2 years ago
Boone, have you had a chance to look at point 1? Specifically, these commits: https://github.com/cuny-academic-commons/cac/compare/3b4f0a3...8ee162c . I refactored the nav focus JS code so it would take the desktop menu into account, but could use a once-over from you.
The commit for point 2 moves the wp_footer() call to cac_sitewide_footer() so that the HTML markup for wp_footer() can be wrapped around the role='contentinfo' DIV : https://github.com/cuny-academic-commons/cac/commit/5ebe0c5603fdaea5aa87e669b5a1252f6ce11773 .
Updated by Boone Gorges over 2 years ago
- Status changed from New to Staged for Production Release
The commit for point 2 moves the wp_footer() call to cac_sitewide_footer() so that the HTML markup for wp_footer() can be wrapped around the role='contentinfo' DIV : https://github.com/cuny-academic-commons/cac/commit/5ebe0c5603fdaea5aa87e669b5a1252f6ce11773 .
This change makes sense to me at a glance.
Boone, have you had a chance to look at point 1? Specifically, these commits: https://github.com/cuny-academic-commons/cac/compare/3b4f0a3...8ee162c . I refactored the nav focus JS code so it would take the desktop menu into account, but could use a once-over from you.
Thanks for looking at this. I mostly copied the navigation JS out of Underscores, but I guess I didn't fully account for the changes I made for separate desktop and mobile nav elements. From what I can tell, your changes look good.
Updated by Boone Gorges over 2 years ago
- Status changed from Staged for Production Release to Resolved
Updated by Raymond Hoh 9 months ago
- Related to Bug #18495: bp-nelo Accessibility Fixes added