HTML5 and multiple ARIA roles

Question

What is the best practice when I need to make a choice between several suitable ARIA roles for a region of the page?

I have a kind of sidebar similar to the tiny feed ticker on Facebook. As it happens, it is double wrapped for styling reasons:

<aside class="ticker">
  <div class="ticks">
    <!-- <article> elements here -->  
  </div>
</aside>

I feel that the correct role for .ticker is "complementary", as it is next to a larger news feed, but in the same time I think it is also a "log", as stories come and go. Because I happen to have two elements to use, it it acceptable to give each a different role, even though one is the only child of the other?

Answer 1

The role 'complementary' is a landmark role, meaning users of assistive technologies can use the keyboard to navigate between different landmarks on the page. So effectively it facilitates browsing. The Paciello Group Blog explains ARIA landmarks clearly.

In contrast the role 'log' is a widget role, which according to the WAI-ARIA specification means assistive technologies should switch from browsing mode to application mode, and pass keyboard events through to the web application.

So the roles have different functions; 'complementary' facilitates finding the ticker, and 'log' facilitates interacting with it. Both should enhance the accessibility of the page, so both should be used.

So the roles you have chosen are correct, and nesting them as you have done, is the best solution.

To get the ticker to announce updates other ARIA properties and states are required. Gez Lemon has a good primer on those attributes related to live regions.