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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Everett Zufelt’s picture

We 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.

KrisBulman’s picture

Do you want to add them via preprocess functions or directly in templates?

function zen_preprocess_block(&$vars) {

  if ($vars['block']->module == 'menu') {
    $vars['attributes_array']['role'] = 'navigation';
  }

}
KrisBulman’s picture

Just 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.

Everett Zufelt’s picture

One 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.

KrisBulman’s picture

ARIA landmark roles

  • application
  • banner
  • complementary
    • aggregator
    • help
    • locale
    • poll
    • profile
    • system/poweredby
    • system/help
    • user/new
    • user/online
    • node/syndicate
  • contentinfo
  • form
    • user/login
  • main
    • system/main
  • navigation
    • blog
    • book
    • comment
    • forum
    • menu
    • shortcut
    • statistics
    • node/recent
    • system/menus
  • search
    • search

patch attached includes the above roles

KrisBulman’s picture

Status: Active » Needs review
Everett Zufelt’s picture

There 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.

KrisBulman’s picture

If 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

<?php print $attributes; ?>

go?

mgifford’s picture

This is exciting. I look forward to seeing ARIA in Zen.

What is the patch built on? Is it the Git repository for Zen?

KrisBulman’s picture

Patch was made for 7.x-5.x-dev under dev release branch in git

KrisBulman’s picture

Any thoughts on this? I think it's an important addition, it'd be nice to get the role=main location worked out

mgifford’s picture

I 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.

mgifford’s picture

Issue tags: +Accessibility

Forgot to tag this.

JohnAlbin’s picture

Status: Needs review » Needs work

There 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.

Actually, 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.

mgifford’s picture

Thanks 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

Everett Zufelt’s picture

Agreed with @JohnAlbin. Going to try to get role="main" in *page.tpl.php in Core.

mgifford’s picture

So in the system module blocks, we'd be removing:

        case 'main':
        $variables['attributes_array']['role'] = 'main';
        break;

Add the role right to the page.tpl.php:

    <div id="content" class="column" role="main"><div class="section">

And likewise to the maintenance-page.tpl.php:

      <div id="content" class="column" role="main"><div class="section">
mgifford’s picture

Status: Needs work » Needs review

Pushing status.

JohnAlbin’s picture

FileSize
4.06 KB

I 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 next case. 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.

JohnAlbin’s picture

Everett Zufelt’s picture

"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.

mgifford’s picture

Patch applies nicely. Looks like those are great enhancements. Thanks John!

JohnAlbin’s picture

Status: Needs review » Fixed

I've added commits for Everett, Kris and Mike. Thanks!

Fixed! http://drupalcode.org/project/zen.git/commitdiff/94c5b27

mgifford’s picture

Great John, thanks!

JohnAlbin’s picture

Status: Fixed » Active

Actually, 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.

JohnAlbin’s picture

Status: Active » Fixed

I've added role="banner" to the page.tpl's <header> tag and role="navigation" to the breadcrumbs. http://drupalcode.org/project/zen.git/commitdiff/d2eb80c

I'm up for further improvements in Zen's ARIA support!

But I consider this fixed! Thanks again, everyone!

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