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.

Comments

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.

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';
  }
}

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.

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.

StatusFileSize
new3.69 KB

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

Status:Active» Needs review

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.

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?

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

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

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

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

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.

Issue tags:+accessibility

Forgot to tag this.

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.

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

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

StatusFileSize
new4.72 KB

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

Status:Needs work» Needs review

Pushing status.

StatusFileSize
new4.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.

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

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

Status:Needs review» Fixed

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

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

Great John, thanks!

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.

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.