在导航栏上使用“aria-expanded”是否有意义?

时间:2017-02-15 15:51:39

标签: html5 twitter-bootstrap-3 accessibility semantic-markup wai-aria

经过十年的中断,我再次将我的脚趾浸入网络开发中。它似乎仍然是一个非常令人困惑的不断变化的标准堆栈,使得不清楚哪些浏览器支持什么和最佳实践是什么。

目前,我正专注于使用new semantic elements of HTML5。我发现ASP.NET Core默认的Bootstrap模板没有使用导航栏的<nav>元素,因此正在研究如何正确应用它。

default navbar template in Bootstrap 确实建议使用<nav>。但是,我对应用于它的aria-expanded属性背后的目的感到困惑。在learning about the benefits it offers to screen readers之后(指示导航栏是否折叠,在这种情况下,当屏幕尺寸很小时,即智能手机)时,我仍然感到困惑的是它是否应该在那里。 (以及whether or not aria-controls should be applied,它不在默认的引导程序模板中。)

让我解释一下:

  • 这些咏叹调属性中的一些似乎在描述视觉行为。向无视的人描述一些他们看不到的东西甚至是否有意义?
  • 在正确应用<nav><main>语义元素的情况下,屏幕阅读器已经掌握了所有必要的信息,以便快速跳过导航栏(相当于将其隐藏起来近视)?

更好的选择是将导航切换机制完全隐藏到无视者?在这里我的问题是,如何解决这个问题。可以隐藏按钮using role="presentation" and/or aria-hidden="true"吗?

2 个答案:

答案 0 :(得分:1)

使用您在https://getbootstrap.com/examples/navbar/引用的示例,它需要aria-expanded

在较大的视口中,&#34;下拉&#34;菜单隐藏所有子项。它们不仅在视觉上隐藏,而且对屏幕阅读器也是隐藏的。 aria-expanded有助于向用户提供上下文是否有更多可用内容,并且还提供了关于后续制表位可能带给用户的位置的一些线索。

在较窄的视口中,导航变为汉堡包,这仍然适用。这是因为它也适用于汉堡包本身。

这个上下文非常重要,因为aria-controls支持是大便(引用Heydon)。

有些菜单中的每个项目都可以通过标签显示,即使在视觉上没有。在这种情况下,aria-expanded并不那么重要,但aria-controls会有更多价值。

另外,对于有视力的键盘用户,该菜单需要更好:focus突出显示,并且在窄视口中需要更好的菜单与徽标的DOM序列(通过我的观点)。

答案 1 :(得分:0)

  

这些咏叹调属性中的一些似乎在描述视觉行为。向无视的人描述一些他们看不到的东西是否有意义?

该问题应该是第一个出现在任何ARIA教程中的问题。

  

在正确应用<nav><main>语义元素的情况下,屏幕阅读器已经掌握了所有必要的信息,以便快速跳过导航栏(相当于将其隐藏起来近视)?

这是第二次。

编辑:当我读到这些问题时,我想&#34;那家伙已经理解了所有问题&#34;。 ARIA教程很少回答这些问题,因为它们依赖于上下文,但在使用ARIA之前,询问这些问题必须是第一步。 EG。图像轮播是为盲人提供非常不同的用户体验。为&#34;之前的&#34;提供aria-controls属性按钮不会为基于视觉效果的系统提供更多智能。 ARIA不是神奇的灵丹妙药。

ARIA可能被视为一种神奇药水,适合那些想要获取无法获取的东西的人。在许多情况下,它将被不明智地使用。

aria-expanded 可以为屏幕阅读器提供良好的用户体验,告知是否可以打开元素以显示更多元素(例如下拉菜单)。

您无法直接在aria-expanded元素上应用nav,因为必须在交互元素(如button)上设置它,以通知此控件同一容器内的另一个元素的可见性(可以是 nav)。

我能看到的更好的选择是不隐藏任何东西以帮助不使用屏幕阅读器的人。它不是以小屏幕分辨率折叠导航栏,而是完全可以:

  1. 始终显示
  2. 显示一个持久性菜单图标以跳转到菜单栏(或暂时在视口内显示)
  3. 这样可以滚动到菜单栏(对于不了解具有三条平行线的图标可能指示的人),让屏幕阅读器用户列出所有内部链接。

    当然,如果您构思Web应用程序而不是简单的Web站点,情况就会大不相同,而ARIA在这种情况下可能会更有用。