Bug #15127: Homepage accessibility enhancements - CUNY Academic Commons - CUNY Graduate Center - Project Tracking System

Actions

Copy link

Bug #15127

closed

Homepage accessibility enhancements

Added by Raymond Hoh almost 3 years ago. Updated almost 3 years ago.

Status:

Resolved

Priority name:

Normal

Assignee:

Raymond Hoh

Category name:

Accessibility

Target version:

1.19.1

Start date:

2022-01-03

Due date:

% Done:

Estimated time:

Deployment actions:

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 Tab key to navigate under the "About" item for the main nav.)
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.

Related issues

Actions

Copy link

Updated by Raymond Hoh almost 3 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 .

Actions

Copy link

Updated by Boone Gorges almost 3 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.

Actions

Copy link