标签: wai-aria

在表单上，aria-labelledby属性可以单独工作还是需要标签标签？

示例：它像这样工作吗

aria-labelledby="Name"

被浏览器读取为“名称”？

虽然所有WAI-ARIA属性都有一个aria-前缀(如aria-labelledby或aria-required),但WAI-ARIA属性role却没有(我猜它aria-role会无效).这是什么原因？

我已经在Google上进行了搜索,但是虽然他们解释了很多关于如何使用和实现WAI-ARIA的内容,但他们似乎并没有谈论这个具体事实.

http://www.w3.org/TR/wai-aria-primer/ http://www.w3.org/TR/wai-aria/host_languages

当我必须添加ARIA属性和地标时,是否有一个简单的规则？

例如,我需要aria-checked输入类型复选框或收音机吗？或者我需要一个添加role="main"的<main>元素？我有一个添加role="navigation"到一个<nav>元素？

有一个列表,我可以看看我必须添加哪些ARIA地标和属性？

人们曾问过 aria-controls 与 aria-owns 之间的区别。aria-controls 是基于层次结构的父子关系，而 aria-owns 不是。

我想非常具体。aria-controls 究竟做了哪些 aria-owns 没有做的事情。

我看到规格"ARIA"1.0(https://www.w3.org/TR/wai-aria/)和即将发布的那些(第1.1节)(https://www.w3.org /TR/wai-aria-1.1/).

但我也看到文档是 - 稀疏和碎片化的,很难找到和理解.

对于普通人(即对于没有真正和迫切需要为残障人士编写代码的开发人员而言),首次研究ARIA属性还为时尚早吗？

例如,caniuse.com仅处理"普通"网络浏览器(http://caniuse.com/#search=role):我如何知道屏幕阅读器和其他辅助设备是否以及如何支持ARIA属性？

如果role属性不存在并且文档包含可见图形，我一直在尝试确定 SVG 标记的默认角色应该是什么。

使用 Chrome 的辅助功能工具，它告诉我角色是SVGRoot：

然而，这不是一个有效的 ARIA 角色，它是 Chrome 自己在内部使用的角色之一。

我已经能够通过此文档找到更多信息：WAI-ARIA 图形模块，它指示允许在 SVG 标签上使用哪些角色，但我似乎无法缩小哪个应该是默认角色的范围。

如果没有role提供有效的属性，用户代理应该默认 SVG 扮演什么角色？

<span class="phone" aria-label="phone number 9 4 9 . 5 5 5 . 1 2 3 4">949.555.1234</span>

这会打印页面上的电话号码。单击电话号码将按预期读取咏叹调标签，但是，如果我使用键盘箭头导航到电话号码，它会读取页面上输出的任何文本（“九百四十九期五百”... ) 在这种情况下，并且 aria-label 不受尊重。

使用 ChromeVox

另外值得一提的是，使用箭头键时，span 标签不会获得焦点。IE$("span").focus(function(){ // never gets here })

我有一些代码看起来或多或少是这样的（例如减少了）：

html {
  background: #eee;
}

section {
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  margin: 1em;
  padding: 1em;
}

[tabindex]:focus {
  outline: 1px dashed blue;
}

<section tabindex="0">
  <h1>
    Section 1
  </h1>
  <p>
    This section will be highlighted but it won't go inside as 
    nothing inside has tabindex. I don't want it to be read at all.
  </p>
</section>

<section tabindex="0">
  <h1>
    Section 2
  </h1>
  <p>
    This section will be highlighted and there is an element inside with …

我最近发现，当可聚焦元素中包含一些内容并分配有 aria-labelledby 属性时，MacOS 的 VoiceOver 不会读取标签内的内容，而是读取焦点组件的内容

在不同浏览器中尝试：在 Safari (11.1.1) 中按预期工作，但在 Chrome (76.0.3809.100) 中失败。还尝试改变两个元素的角色。

<p id="header">This text should be read</p>

<div tabindex="0" aria-labelledby="header">
  <span>Click me</span>
  <p>This text should not be read</p>
</div>

https://jsfiddle.net/2d9jn4hs/

当您在打开divVoiceOver 的情况下专注于声音时，我希望听到This text should be read但听到的Click me This text should not be read却是。

有什么建议吗？

我有一个简单的文本，它会更新一个动作，我希望屏幕阅读器可以宣布它。但我不希望该文本在网页上可见。我试过display: none和visibility: hidden，但似乎屏幕阅读器软件无法访问它们。我找到了一种方法来完成这项工作 - 即通过使用负 999999 值一直绝对定位元素，这将使其离开屏幕并从网页中隐藏。我不是这个解决方案的粉丝。有没有更优雅的方法来实现这一目标？

<span class="aria-invisible" aria-live="polite">5 selections have been made.</span>

.aria-invisible {
   display: none; //either of these two attributes
   visibility: hidden;
}