标签: wai-aria

我已经在 google chrome light house 中为我的角度应用程序运行了可访问性测试，并收到以下错误

我添加了“aria-labelledby”，但似乎不起作用。谁能帮我解决这个问题。下面是给我这个错误的html代码。

<div class="heading form-group col-md-4 col-xs-12">
     <label for="fuels">Fuel Filter</label>
     <ng-select class="oss-ngselect" [items]="fuelType" bindLabel="name"
           placeholder="View All" [(ngModel)]="searchPremiseFuelType" [dropdownPosition]="'bottom'" 
           id="fuels" name="fuels" (change)="changeFuelType(searchPremiseFuelType.type)"
           aria-labelledby="fuels">
     </ng-select>
</div>

我们的网站上有一个表单，其中包含在用户输入时使用 JavaScript 进行验证的字段（onChange 事件）。错误消息以红色文本显示在字段输入下方。

目前，我们使用 aria-descriptedby 和 aria-invalid 属性将消息呈现给 NVDA。屏幕阅读器会正确地宣布字段何时无效，但不会宣布字段何时再次有效。我们的测试团队强调这是有问题的。

我们还研究了将 role="alert" 添加到错误字段，但这似乎会在该字段无效时导致“双声” - 它会因为 role="alert" 而宣布错误一次，并再次因为咏叹调描述。

处理这个问题的正确/推荐方法是什么？

如果图像标记必须位于标记内,并且具有兄弟范围,则显示的内容与/ img元素的alt/title标记中的内容相同.

没有重复数据

如何使用aria-labelledby属性获取可访问性.

<a href="/project/image.jpg" title="photo caption" alt="photo caption">
 <img src="/image/thumb.jpg" alt="photo caption"/>
</a>

<span id="pc_1">photo caption</span>

我希望这个问题能帮助我理解咏叹调特定属性和常规html属性如何在可访问性中发挥作用.Alt tag vs aria-labelledby.

是否可以仅为屏幕阅读器制作元素？我知道我可以为所有设备制作一个不可列表的元素(tabindex="-1"),但是有类似的东西aria-tabindex吗？所以我可以做以下事情:

<input type="text" tabindex="-1" aria-tabindex="0" />

我需要这个,因为客户想对于一些普通的HTML输入一个奇特的GUI,所以我想使自己的投入非tabbable(视觉用户谁可以使用GUI),而且使tabbable非视觉用户(然后谁可以简单地对HTML输入进行操作,并且可以隐藏GUI aria-hidden="true").

更新

我在这个标题为"可访问,键盘友好的自定义选择菜单 " 的博客中找到了解决我的特定问题的解决方案(为视觉键盘和鼠标用户提供了一个精美的GUI,同时又不影响屏幕阅读器用户的体验):

诀窍是将原生select元素放置在花哨的GUI(视觉上隐藏使用opacity: 0)之上,它本身将接收到的点击传播到操纵本机的自定义JS select.这样GUI就不需要是可聚焦的,这解决了我这个特例的问题.即使是文本浏览器也会享受完整的体验.

我不知道这个技巧可以扩展到更复杂的花式GUI多远,但它绝对是个好主意.

如果 HTML5<div>元素需要一个role="button"属性来确保可访问性审核中的成功结果（成功标准 4.1.2 [名称、角色、值]..div 在 UI 中充当按钮），那么它是否还需要一个有效的name属性（通常对于 a 来说是无效的 HTML5 div）。

如果答案是否定的 - 我可以添加哪些其他可访问性友好属性来描述 div 按钮并满足标准？一个简单的title属性或aria-label?

我收到了这个错误

错误:元素输入上属性类型的错误值无线电.

尝试在https://validator.w3.org/nu/#file上验证以下HTML时

<fieldset>
<p class="city" id="citypref">Generally, I would prefer to live in...</p>
<br>
<label for="la" id="laLabel">
<br>
<input type="radio" name="city" id="la" value="la" aria-required="false" aria-labelledby="laLabel" role="radiogroup" >Los Angeles, California</label>
<br>
<label for="boston" id="bostonLabel">
<input type="radio" name="city" id="boston" value="boston" aria-required="false" aria-labelledby="bostonLabel" role="radiogroup" >Boston, Massachusetts</label>
<br>
<label for="both" id="bothLabel">
<input type="radio" name="city" id="both" value="both" aria-required="false" aria-labelledby="bothLabel" role="radiogroup" >Both</label>
<br>
<label for="neither" id="neitherLabel">
<input type="radio" name="city" id="neither" value="neither" aria-required="false" aria-labelledby="neitherLabel" role="radiogroup" >Neither</label>
<br>
</fieldset>

有小费吗？

我开始研究可访问性.aria-labelledby和aria-describe在Chrome和Firefox中运行良好,但在IE浏览器中没有被NVDA正确阅读.

<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div>div 3</div>
<button aria-labelledby="div1 div2 buttonName1"><span id="buttonName1">Test1</span></button>
<br>
<button aria-describedby="div1 div2 buttonName2"><span id="buttonName2">Test2</span></button>

在努力跟上HTML5时,我确保使用W3验证工具验证我的所有标记.最近,我开始将role元素添加到元素中.但是,我已经注意到以下警告弹出一次又一次:

button元素不需要这个角色button.

navigation元素不需要这个角色nav.

但在同样的道理,关于HTML ARIA W3C的网站上,它指出的button角色是适用于<button>元件和将navigation角色是仅适用于<nav>元素.

这让我role想到了HTML5角色所需的属性吗？我有什么方法需要使用它们？

我有一个这样的div： <div class="whatever">17:03</div>

当有人使用屏幕阅读器将鼠标悬停在该文本上时，我希望它阅读“17 分 3 秒”

这样做的标准做法是什么？

我有链接指向页面中的部分.为了提高可访问性,我已将属性添加role="button"到这些中,因为我的理解是这些链接在页面内,只是转到一个部分.但我不确定这样做是否合适.

<ul>
  <li><a role="button" href='#section1'>Go to section 1</a></li>
  <li><a role="button" href='#section2'>Go to section 2</a></li>
</ul>

<div style="height:15rem"></div>

<h2 id='section1'>Section 1</h2>

<div style="height:15rem"></div>

<h2 id='section2'>Section 2</h2>

我面临着aria和可访问性aria标签的问题。

那是我的问题：

打开页面后，我需要屏幕阅读器阅读标题，然后停止阅读页面的其余部分。我需要屏幕阅读器停在那里，并在用户使用TABS导航后继续阅读。

有人知道这是否可能吗？