3

我对 ARIA 完全陌生，所以如果这是一个愚蠢的问题，请保持温和。如果容器 div 包含侧边栏，是否适合赋予容器 div 的“主”角色？如果我的容器 div 中有一个 nav 元素浮动，那么在容器 div 中添加“main”的 ARIA 角色是否会混淆屏幕阅读器，或者这样可以吗？

在此处输入图像描述

下面是一个 HTML 示例来进一步解释。

<div id="container" role ="main">
    <h1>Content Here</h1>
    <nav id="sidebar">
        <ul>
            <li><a href="foo.com">Foo Item 1</a></li>
            <li><a href="foo.com">Foo Item 2</a></li>
            <li><a href="foo.com">Foo Item 3</a></li>
        </ul>
    </nav>
    <p>More content</p>
</div>
4

2 回答 2

4

我提供了一个刚刚提出的问题的链接，我的回答涵盖了大部分问题。

由于您使用的是 HTML5，因此您会自动使用带有<main>标签的 HTML 5.1。<div role="main">由于某些 HTML5 标签默认具有某些 WAI-ARIA 属性，因此可以替换。

正确的 HTML 标记

<div id="container" role ="main">
    <h1>Content Here</h1>
    <nav id="sidebar">
        <ul>
            <li><a href="foo.com">Foo Item 1</a></li>
            <li><a href="foo.com">Foo Item 2</a></li>
            <li><a href="foo.com">Foo Item 3</a></li>
        </ul>
    </nav>
    <p>More content</p>
</div>

将会

<main>
 <nav role="navigation"> 
  <ul>
   <li><a href="foo.com">Foo Item 1</a></li
   <li><a href="foo.com">Foo Item 2</a></li>
   <li><a href="foo.com">Foo Item 3</a></li>
  </ul>
 </nav>
 <section>
  <h1>Content</h1>
  <p>....</p>
 </section>
</main>

或者把导航弹出到外面，用<div role=complementary>. 看看这个WAI-ARIA 地标示例

克里斯说

导航跳过链接（替代方案）通常很笨重，要么破坏页面的视觉效果，要么创建奇怪的键盘导航，其中包含隐藏的链接，除非它们有焦点。如果您的侧边栏很短，和/或有助于页面内容，sy 通过提供其他页面内容的大纲，我建议它是可以接受的。

跳过链接和导航“菜单”是两个不同的东西。是的，如果您在进入主要内容之前只有一个简短的导航或获得焦点的东西（链接、表单控件、带有 的东西tabindex='1'），那么您可能会在没有跳过链接的情况下侥幸逃脱。虽然 WAI-ARIA 得到了很大一部分辅助技术的支持，但它并不是向每个用户公开的。因此，使用屏幕阅读器访问您的主要内容的人可以使用 Landmark 导航或其他方法到达那里，不使用鼠标的人（身体残疾）仍然需要Tab多次按下。跳过链接应该始终可见，或者在获得焦点时变得可见。

回复OP 的评论

从技术上讲，此时我们正在谈论语义，而 convo 可能无处可去。真正的区别很小，除非你对东西超级铁杆，否则不会破坏任何东西。在内部包含元素 4（应该是<aside>）<main>意味着此内容专门针对页面的主题。外部，表示该元素适用于整个网站。

有人会误解吗？也许吧，但如果你使用好的语言，这应该不是什么大问题。

如果我把它放在外面，人们会完全错过它吗？当然，但这在任何设计中都是可能的。您可以使用 WAI-ARIA 角色navigation/complementary来捕捉以这种方式浏览的人。使用标题是另一回事。

于 2013-07-13T21:02:15.633 回答
1

这取决于您的导航栏有多“不方便”，以及导航栏的内容是什么。“主要”角色背后的意图是通过为 AT 提供给定页面“内容”开始的地标来规避导航跳过链接的需要。导航跳过链接（替代方案）通常很笨重，要么破坏页面的视觉效果，要么创建奇怪的键盘导航，其中包含隐藏的链接，除非它们有焦点。如果您的侧边栏很短，和/或有助于页面内容，sy 通过提供其他页面内容的大纲，我建议它是可以接受的。但是，如果侧边栏中有很多链接，并且它们不是您认为是页面“内容”一部分的链接，您应该将主要角色放置在靠近页面内容部分的位置。一般来说，将可访问性视为可用性的扩展，并根据您的最佳判断来确定最适合您的“主要”角色的位置。只要您出于正确的目的使用给定的角色，您的问题就没有事实上正确的答案。Aria 角色肯定存在不恰当的用法，但您概述的两种用法对于“主要”都是完全可以接受的。

于 2013-07-12T19:17:43.893 回答