ARIA内部的辅助导航＆＃34;主要＆＃34;

Question

我对ARIA完全不熟悉，所以如果这是一个愚蠢的问题，请保持温和。如果包含侧边栏，给容器div赋予“main”的作用是否合适？如果我的容器div中有一个导航元素浮动，将向容器div添加ARIA角色“main”混淆屏幕阅读器或者这样可以吗？

以下是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>

Answer 1

我提供了一个刚问的问题的链接，my answer covers大部分内容。

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

的正确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 landmark example

克里斯说

  

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

跳过链接和导航“菜单”是两回事。是的，如果您在获取主要内容之前只有一个简短的导航或获得焦点的内容（链接，表单控件，tabindex='1'的内容），您可能无法跳过链接。虽然WAI-ARIA得到了大部分辅助技术的支持，但并不是每个用户都能接触到它。因此，使用屏幕阅读器访问主要内容的人可以使用Landmark导航或其他方法来实现目标，不使用鼠标的人（身体残疾人）仍然需要多次按 Tab 。跳过链接应该始终可见，或者在获得焦点时变得可见。

回复OP's comment

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

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

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

Answer 2

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