标签: wai-aria

我正在尝试aria-autocomplete使用jQuery在元素上设置属性.但是,当IE10在IE5 Quirks模式或IE7标准模式下运行时,会产生Member not found错误.

<input type="textbox" id="test" />?
$('#test').attr({"aria-autocomplete": "list"});?

有关演示,请参阅此jsFiddle.

我已经尝试了这里定义的各种其他ARIA属性:

HTML 5:标记语言(ARIA版)

有些产生相同的错误,有些则没有.

我无法在IE9中重现错误.

这是IE10中的错误吗？jQuery的？或者是否有其他原因导致我不理解？

我有一个包含Youtube视频的iframe,如下所示:

<iframe src="//www.youtube.com/embed/my-video" width="225" height="150"></iframe>

当我通过Chrome辅助功能审核运行网站时,我在iframe中收到以下错误:

[Severe] ARIA attributes which refer to other elements by ID should refer to elements which exist in the DOM (3)
See AX_ARIA_02 for more information.

知道如何解决这个问题吗？

====更新

我注意到了其他错误:

[Severe] Controls and media elements should have labels
See AX_TEXT_01 for more information.
<video class=?"video-stream html5-main-video" style=?"width:? 225px;? height:? 150px;? left:? 0px;? top:? -150px;? transform:? none;?">?</video>?

和

[Severe] Elements with ARIA roles must ensure required owned elements are present (3)
See AX_ARIA_08 for more information.
<div …

我的用户交互过程如下:

1. 向用户显示包含城市列表的下拉列表
2. 选择城市后,AJAX请求会获取城市中的所有建筑物,并将它们插入到div中(此AJAX请求会返回一个复选框列表)
3. 然后,用户可以选中/取消选中一个复选框,将城市添加到同一页面上的表格中.(这会动态插入/删除表行)

这是我的选择下拉列表:

<label for="city-selector">Choose your favorite city?</label>
  <select name="select" size="1" id="city-selector" aria-controls="city-info">
  <option value="1">Amsterdam</option>
  <option value="2">Buenos Aires</option>
  <option value="3">Delhi</option>
  <option value="4">Hong Kong</option>
  <option value="5">London</option>
  <option value="6">Los Angeles</option>
  <option value="7">Moscow</option>
  <option value="8">Mumbai</option>
  <option value="9">New York</option>
  <option value="10">Sao Paulo</option>
  <option value="11">Tokyo</option>
</select>

这是ajax div得到空白/填充:

<div role="region" id="city-info" aria-live="polite">
<!-- AJAX CONTENT LOADED HERE -->
</div>

这是放在ajax div中的复选框列表:

<fieldset id="building-selector" aria-controls="building-table">
  <legend>Select your favorite building:</legend>  
  <input id="fox-plaza" type="checkbox" name="buildings" value="fox-plaza">
  <label for="fox-plaza">Fox Plaza</label><br>
  <input id="chrysler-building" type="checkbox" name="buildings" value="chrysler-building"> …

在我的网站上，我有“卡片”，每张卡片都有许多元素（图像、文本、日期等）。这有点像 Twitter 中的推特卡片：

我希望整张卡片都是可点击的（应该是另一个页面的链接）。

目前，我将顶级元素作为<a>标签并使用aria-label，aria-describedby因此屏幕阅读器可以正确读取它。

<a
   href="/some-url"
   aria-label="Honda VFR. Price: $10,000. Kilometers: 10,000. Listed yesterday."
   aria-describedby="description-1"
   >
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/1983_Honda_Interceptor_VF750F.jpg/300px-1983_Honda_Interceptor_VF750F.jpg" alt="Honda VFR picture" height="100" />

  <p>Honda VFR</p>

  <div>
    <p>$10,000</p>
    <p>Kms: 10,000</p>
    <p>Date listed: yesterday</p>
    <p id="description-1">This bike is pretty great and a lot of other details go here</p>
  </div>
</a>

我考虑过这样做，aria-labelledby="title-id-1 price-id-1 distance-id-1"但我发现通过明确地创建一个摘要句子，它读起来更好。

我依赖于屏幕阅读器将忽略<a>标签内的所有内容（如果我有aria-label）这一事实。这是一个安全的赌注吗？

这一切似乎有点奇怪，但我想知道是否有任何具体原因我不应该这样做。

不幸的是，设计要求整个卡片都是可点击的，所以只制作特定部分的链接不是一种选择。

另一种选择是使用 div、aria 这样的角色和 JavaScript，这感觉像是在错误的方向上迈出了一步。

任何帮助深表感谢。

jsbin：https ://output.jsbin.com/kusawu

我看过一些示例和文档，它们将 aria 标签的第一个单词大写。为什么是这样？如果有两个字呢？

我正在我公司的网站上进行一些可访问性测试。我一直在使用 Mac 的 VoiceOver 工具和 Chrome 进行大部分屏幕阅读器测试。在大多数情况下，它已经起作用了，但是，今天我向自定义元素（主要使用 div 构建）添加了一些 ARIA 标签和角色，并且它似乎只在 Safari 中有效......

有没有其他人遇到过这个问题？关于是否有修复或解决方法的任何想法，以便它可以在任何浏览器上运行？

如果我的场景不够清楚，请告诉我，我会提供更多信息/细节。谢谢！

我正在努力为我的表单控件创建可访问的帮助文本。我计划用于aria-describedby将可访问的描述附加到字段。这种方法在这里讨论

虽然在我使用 ChromeVox 扩展程序和 Windows 10 屏幕阅读器进行的测试中，我发现这一点aria-describedby尚未公布，但它在浏览器和屏幕阅读器之间得到了很好的支持，所以我计划使用这种方法。

这也表明在某些情况下aria-describedby会被忽略或无法按预期工作，但这些情况非常具体，我通常对此表示同意。

\n

咏叹调所描述的内容可能并不总是向用户宣布，\n具体取决于他们的屏幕阅读器和导航方法。该属性\n 得到了很好的支持，但这并不意味着\xe2\x80\x99t 存在\xe2\x80\x99t 一些需要注意的事情：\n 可能不会由所有屏幕阅读器\n 朗读咏叹调所描述的内容，如果使用虚拟光标导航到按钮、链接或表单控件。当使用热键导航到某些元素时，JAWS 特别可能不会公布元素\xe2\x80\x99s\n 描述。当\n 通过访问的链接导航时，不会公布描述。\n 但是，当通过表单控件导航时，JAWS 应该公布描述。当按 Tab 键切换到链接时，JAWS 17 + IE 不会\xe2\x80\x99 宣布咏叹调所描述的内容（较新版本的 JAWS 已修复此问题）。如果\n 属性与 titlearia-scribedby 一起使用，并且用户通过虚拟光标或表单控件热键进行导航 ( F）。如果使用 Tab 键，两者都会被宣布。（IE11 过去在 aria-descriptedby 方面存在更大的问题。）当自动聚焦模式对话框中的元素时，TalkBack + Android Chrome 不会\xe2\x80\x99t\n 宣布任何由模式对话框内容描述的 aria-scribeddby对话。如果用户关闭了描述或提示文本，则不会公布任何关联的内容。\xe2\x80\x99。因此，理解 UI 所必需的任何内容都可以通过 aria 描述以外的方式获得，这一点至关重要。

\n

我想了解一下是否有些时候aria-describedby不会自动公布？之前的链接措辞似乎表明它只会根据要求宣布：

\n

通过使用 aria-descriptedby 引用字段的格式，可以根据请求向用户提供此信息。也就是说，它不会自动显示或朗读。例如，如果用户之前已被告知格式，或者存在大量具有相同格式的输入字段，则这是有意义的。

\n

我不明白“根据要求”是什么意思。我相信默认行为是在宣布标签和输入类型后宣布由文本描述的咏叹调。

屏幕阅读器会忽略空字符串吗？或者如果字符串为空，我应该避免将它们添加到元素中吗？

作为参考，这是 React 中的一个用例，您希望默认为空字符串以避免检查未定义：

<input
  id={id}
  value={value}
  {...(ariaLabel ? { 'aria-label': ariaLabel } : {})}
/>

密码输入具有显示/隐藏按钮是很常见的，但我在网上发现很少有关于与其相关的可访问性问题的内容 - 我是否应该将任何类型的 ARIA 属性附加到按钮或密码输入？是一个复选框还是一个触发JS的按钮也能达到很好的效果？

不知道我应该注意什么，作为一个不太熟悉但想要了解可访问性最佳实践的人。

我有一个简单的手风琴：

<div>
  <button aria-expanded='false' aria-controls='content'>
    Open accordion
  </button>
  <div id='content' aria-hidden='true'>
    This the accordion's hidden content.
  </div>
</div>

我使用 Javascript 打开/关闭手风琴并设置标签aria-*。

一切正常，但是当我在内容中添加链接时：

<div>
  <button aria-expanded='false' aria-controls='content'>
    Open accordion
  </button>
  <div id='content' aria-hidden='true'>
    This is the accordion's hidden content.
    <a href='https://www.google.com'>Go to Google</a>
  </div>
</div>

灯塔给了我这个：

[aria-hidden="true"] elements contain focusable descendents

在我看来，添加tabindex='-1'到a标签可以解决这个问题：

[aria-hidden="true"] elements contain focusable descendents

然而，这使得元素“不可选项卡”，这不利于可访问性。

我可以使用 JavaScript 手动查询手风琴内容中的所有a标签，但我什至不确定这是否真的解决了“问题”还是一个肮脏的解决方法？还有更好的选择吗？