HTML5和多个ARIA角色

时间:2013-12-12 21:41:35

标签: html5 article wai-aria

当我需要在页面区域的几个合适的ARIA角色之间做出选择时,最佳做法是什么?

我有一种类似于Facebook上的微小饲料自动收报机的侧边栏。碰巧的是,由于样式原因,它是双重包装的:

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

我觉得.ticker的正确角色是“互补的”,因为它旁边是一个更大的新闻源,但与此同时我认为它也是一个“日志”,因为故事来来去去。因为我碰巧有两个要素可供使用,即使一个人是另一个人的唯一孩子,也可以给每个人一个不同的角色吗?

1 个答案:

答案 0 :(得分:3)

“互补”角色是一个具有里程碑意义的角色,这意味着辅助技术的用户可以使用键盘在页面上的不同地标之间导航。因此有效地促进了浏览。 Paciello Group Blog清楚地解释了ARIA的标志性建筑。

相比之下,角色'log'是一个widget角色,根据WAI-ARIA specification,辅助技术应该从浏览模式切换到应用模式,并将键盘事件传递给Web应用程序。

所以角色有不同的功能; “互补”有助于找到自动收报机,“日志”便于与之互动。两者都应该增强页面的可访问性,因此两者都应该使用。

因此,您选择的角色是正确的,并且按照您的方式嵌套它们是最佳解决方案。

要让股票代码宣布更新,需要其他ARIA属性和状态。 Gez Lemon有good primer on those attributes related to live regions