Project

General

Profile

Bug #15127

Homepage accessibility enhancements

Added by Raymond Hoh 5 months ago. Updated 4 months ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
Accessibility
Target version:
Start date:
2022-01-03
Due date:
% Done:

0%

Estimated time:

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:

  1. On desktop, it is not possible to use keyboard navigation to view the main nav's nested menu items. (Try using the Tab key to navigate under the "About" item for the main nav.)
  2. We are missing some role and aria attributes 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.

History

#1 Updated by Raymond Hoh 4 months 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 .

#2 Updated by Boone Gorges 4 months 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.

#3 Updated by Boone Gorges 4 months ago

  • Status changed from Staged for Production Release to Resolved

Also available in: Atom PDF