Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
To improve the accessibility of the Zen theme, we should include ARIA landmark roles in its markup.
ARIA roles are grouped into 4 categories. http://www.w3.org/TR/wai-aria/roles#roles_categorization Landmark roles are just one category, but we’ll start with them since they represent “regions of the page intended as navigational landmarks.”
Afterwards, we can look at Document Structure and Widget roles.
Comment | File | Size | Author |
---|---|---|---|
#21 | 1246540-21-aria-roles.patch | 4.06 KB | JohnAlbin |
#19 | add-aria-to-zen-1246540-18.patch | 4.72 KB | mgifford |
#5 | aria-landmark-roles-126540-0.patch | 3.69 KB | KrisBulman |
Comments
Comment #1
Everett Zufelt CreditAttribution: Everett Zufelt commentedWe do already have a tentative mapping of ARIA roles to Core blocks at #1183042: Regression: Add WAI-ARIA roles to Core blocks. Would love some feedback and hope that it helps out here as well. You will also note a couple of decisions that have yet to be made about implementing roles in D8.
Comment #2
KrisBulman CreditAttribution: KrisBulman commentedDo you want to add them via preprocess functions or directly in templates?
Comment #3
KrisBulman CreditAttribution: KrisBulman commentedJust saw comment #1, looks like that post has already done a lot of the heavy lifting, should be easy to add to Zen using that as a reference.
Comment #4
Everett Zufelt CreditAttribution: Everett Zufelt commentedOne of the reasons that I added the roles in preprocess functions for Core was so that they could be easily removed for themes that needed to be xhtml 1.0 compliant, as WAI-ARIA is non-compliant. However, adding the roles in templates would likely be my preferred method for a theme where I did not anticipate the roles needing to be removed.
Comment #5
KrisBulman CreditAttribution: KrisBulman commentedARIA landmark roles
patch attached includes the above roles
Comment #6
KrisBulman CreditAttribution: KrisBulman commentedComment #7
Everett Zufelt CreditAttribution: Everett Zufelt commentedThere is an issue around system/main wherein the main content region should likely carry role="main" and the system/main block should perhaps be without a role.
Other than that, there are likely some other things, not blocks, that require a role, such as primary and secondary links, etc.
Comment #8
KrisBulman CreditAttribution: KrisBulman commentedIf main is to be added to the content region, and the content region tpl.php is now bare ( region--bare.tpl.php - https://drupal.org/node/1245900 ), where would the
go?
Comment #9
mgiffordThis is exciting. I look forward to seeing ARIA in Zen.
What is the patch built on? Is it the Git repository for Zen?
Comment #10
KrisBulman CreditAttribution: KrisBulman commentedPatch was made for 7.x-5.x-dev under dev release branch in git
Comment #11
KrisBulman CreditAttribution: KrisBulman commentedAny thoughts on this? I think it's an important addition, it'd be nice to get the role=main location worked out
Comment #12
mgiffordI applied this patch to a fresh branch of Zen as pulled from:
git clone --branch 1245910-wip http://git.drupal.org/project/zen.git
This functionality is all applied from function zen_preprocess_block() which makes it easy to track
I wasn't able to find the output I expected from the template.php file. The code's there, but I should be able to easily see "role" in the source code and can't.
Comment #13
mgiffordForgot to tag this.
Comment #15
JohnAlbinActually, the page content's title isn't inside the content region. It is above that in the page.tpl.php. So role="main" should go in the page.tpl and maintenance-page.tpl.
Otherwise, the patch looks awesome.
Comment #17
mgiffordThanks John. Would be good to get this into Zen's framework. I also appreciate the related note here:
#1183042: Regression: Add WAI-ARIA roles to Core blocks
Comment #18
Everett Zufelt CreditAttribution: Everett Zufelt commentedAgreed with @JohnAlbin. Going to try to get role="main" in *page.tpl.php in Core.
Comment #19
mgiffordSo in the system module blocks, we'd be removing:
Add the role right to the page.tpl.php:
And likewise to the maintenance-page.tpl.php:
Comment #20
mgiffordPushing status.
Comment #21
JohnAlbinI changed the multiple
if
statements (which should have been if/else, btw) into a single switch. That makes the code much shorter.Also, note that in a PHP switch statement, when you hit a matching "case", execution will continue until you hit a
break;
statement and not until the nextcase
. So putting a break statement after each case may or may not be what you want to do. We're able to use this feature of switch/case to simplify this patch significantly and group multiple case statements together.I also added
role="navigation"
to the main and secondary menus in the page.tpl. And I added support for the blocks of Menu block module.Comment #22
JohnAlbinFound these interesting resources about mapping HTLM5 elements to ARIA roles.
http://www.paciellogroup.com/blog/misc/HTML5/aria-html5-proposal.html
http://dev.w3.org/html5/spec/content-models.html#wai-aria
Comment #23
Everett Zufelt CreditAttribution: Everett Zufelt commented"I also added role="navigation" to the main and secondary menus in the page.tpl."
Good idea, since these are not blocks and aren't otherwise covered.
Comment #24
mgiffordPatch applies nicely. Looks like those are great enhancements. Thanks John!
Comment #25
JohnAlbinI've added commits for Everett, Kris and Mike. Thanks!
Fixed! http://drupalcode.org/project/zen.git/commitdiff/94c5b27
Comment #26
mgiffordGreat John, thanks!
Comment #27
JohnAlbinActually, I see there are still some landmark roles we still need to add (breadcrumbs, for example). But, definitely, the bulk of the work is done.
Comment #28
JohnAlbinI've added role="banner" to the page.tpl's
<header>
tag and role="navigation" to the breadcrumbs. http://drupalcode.org/project/zen.git/commitdiff/d2eb80cI'm up for further improvements in Zen's ARIA support!
But I consider this fixed! Thanks again, everyone!