如何使用aria-labelledby for * ng在Angular2中为屏幕阅读器公告提供可访问性

Angular2可访问性问题：屏幕阅读器Nvda工具公告如下。员工姓名彼得请求复选框未选中未选中如何使用aria-labelledby for * ng在Angular2中为屏幕阅读器公告提供可访问性

应该宣布汤姆第二个值员工姓名彼得请求复选框，预期结果：未选中员工姓名汤姆请求复选框。如何解决这个问题？

employees array in component.ts file as below. 
employees= [ 
    { "id":1, "name": "Peter", "age":32}, 
    { "id":2, "name": "Tom", "age":28} 
    ]; 

component.html file as below: 
<div class="row"> 
     <div class="col-md-6"> 
      <label id="empName">Employee Name</label> 
     </div> 
     <div class="col-md-6"> 
      <label id="request">request</label> 
     </div> 
    </div> 

    <div *ngFor="let emp of employees; let i = index;" class="row"> 
     <div class="col-md-6"> 
      <span id="name">{{emp.name}}</span> 
     </div> 
     <div class="col-md-6"> 
      <input type="checkbox" aria-labelledby="empName name request" /> 
     </div> 
    </div>

来源

2017-09-03 Kiran Kumar

我相信你的问题是，这个跨度线

<span id="name">{{emp.name}}</span>

记住ID只能属于一个元素，所以当你将第一个跨度名字的ID只能参照第一这是彼得。如果您再次使用该ID，它仍然会引用peter。

为了解决这个问题，我改变了span以将id绑定到emp.name字符串。现在，第一个跨度将会有一个id = Peter，第二个跨度将会有一个id = Tom。

<span id="{{emp.name}}">{{emp.name}}</span>

接下来，您必须调整您的复选框输入以将aria属性绑定到字符串表达式。请务必留下单引号之间的空间，这样的字符串表达式将会有空格一旦拼接完成

<input type="checkbox" [attr.aria-labelledby]="'empName ' + {{emp.name}} + ' request'"/>

这会给你你正在寻找的辅助作用。用Nvda工具测试它。

P.S 在这些变化影响你的css id = name的情况下，我建议保留名称作为类。这样每个跨度仍然可以访问相同的CSS。

来源

2017-09-06 01:26:12 overboard182

我自己想出了解决方案。通过使用索引，生成唯一的ID，然后在aria-labelledby中传递该ID。这样的事情。

{{emp.name}} [attr.aria-labelledby] = “ '名称 - ' + i” 的

由于

来源

2017-09-06 21:47:42

如何使用aria-labelledby for * ng在Angular2中为屏幕阅读器公告提供可访问性

回答

相关问题