Problem/Motivation

As a screenreader user, I need helpful ARIA landmarks so I can efficiently use the Drupal administration screens and jump to the correct parts of each page. The Seven theme for administration tasks needs ARIA landmarks to improve its accessibility.

Proposed resolution

Screenshots are attached showing the proposed ARIA landmarks to apply to different sections of the page on Drupal administration screens in the Seven theme.

The first screenshot shows the basic landmarks that should appear on every page. The second one shows internal landmarks on some pages that have multiple areas of tools. The third screenshot shows that the tabs (primary tabs and secondary tabs) should get a navigation landmark.

Remaining tasks

Based on the screenshots attached, the appropriate ARIA attributes should be added to the specified elements of the admin pages. This should be a simple job of adding appropriate markup into Seven theme template files.

User interface changes

None, except for screenreader users who will be able to navigate within a page using landmarks.

API changes

None.

(Thanks to David MacDonald who works with the W3C and attended the Montreal Drupal Accessibility Sprint for recommendations on these landmarks.)

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

bowersox’s picture

JohnAlbin’s picture

Shouldn't these ARIA landmarks be in the default templates too?

bowersox’s picture

@JohnAlbin, I suggest we handle the other themes and the default templates as a separate issue (one has not been opened yet, AFAIK). The reason is that they are actually more complex with many more regions that need landmarks (like sidebars, footer, and such). The Seven theme and administration screens are comparatively simple.

But if you feel otherwise, we could add specs here for all core themes and make this one mega-issue to add ARIA landmarks.

mgifford’s picture

Status: Needs work » Needs review
FileSize
1.3 KB

Let's see if this gets things moving.

mgifford’s picture

Issue tags: +aria

forgot to tag.

Anonymous’s picture

+1

mgifford’s picture

mgifford’s picture

Issue tags: +a11ySprint

tagging.

Status: Needs review » Needs work

The last submitted patch, seven-aria-landmark-roles-1643410-4.patch, failed testing.

mparker17’s picture

Status: Needs work » Needs review
FileSize
1.34 KB

The file the patch was affecting has moved to core/themes/seven/templates/page.tpl.php. Re-rolling.

mgifford’s picture

mgifford’s picture

Status: Needs review » Reviewed & tested by the community
FileSize
48.99 KB

This looks great. I just added a visual using https://addons.mozilla.org/en-us/firefox/addon/juicy-studio-accessibilit... and it's going to be a great addition!

mgifford’s picture

Status: Reviewed & tested by the community » Needs review
FileSize
1.53 KB

Drat, remembered when reviewing Bartik that we'd agreed to use role="contentinfo". Adding that now. Back to review.

mparker17’s picture

Cool, thanks Mike! :)

I'll definitely have to use that extension in the future!

mparker17’s picture

Assigned: Unassigned » mparker17

Assigning to me to review.

mparker17’s picture

Assigned: mparker17 » Unassigned
Status: Needs review » Reviewed & tested by the community

Sorry about the delay in getting this RTBC'd.

Everything's looking good!

catch’s picture

Status: Reviewed & tested by the community » Fixed

Looks sensible to me. Committed/pushed to 8.x.

mgifford’s picture

Great!

mparker17’s picture

Thanks!

mgifford’s picture

Adding link to #1913692: Convert Seven to HTML5 - not really a child issue, but related. Not sure why it wasn't done before.

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

Added additional information about tabs.