1

我正在处理网页上的可访问性，我遇到了这个我找不到答案的问题。鉴于我有一个项目列表和通过单击项目旁边的垃圾图标删除每个项目的选项（见附图），我如何确保屏幕阅读器 (JAWS) 等辅助技术可以正确关联每个垃圾带有正确项目的图标。

这与 WCAG 2.0 相关： 1.3.1 信息和关系：通过演示传达的信息、结构和关系可以通过程序确定或以文本形式提供。（甲级）

代码可能是这样的：

<ol>
<li id="item-1">Item-1</li>
<li id="item-2">Item-2</li>
<li id="item-3">Item-3</li>
</ol>

<a id="a1" onclick="removeItem('item-1');" title="Delete item"><img alt="Delete item" src="trash.gif"></a>
<a id="a2" onclick="removeItem('item-2');" title="Delete item"><img alt="Delete item" src="trash.gif"></a>
<a id="a3" onclick="removeItem('item-2');" title="Delete item"><img alt="Delete item" src="trash.gif"></a>

包含 3 个项目的列表。每个项目都可以删除。

4

1 回答 1

0

如果你使用 AngularJS，这很简单

<ol>
<li id="item-1" ng-show="isEnabled(1)">Item-1</li>
<li id="item-2" ng-show="isEnabled(2)">Item-2</li>
<li id="item-3" ng-show="isEnabled(3)">Item-3</li>
</ol>

<a id="a1" ng-click="disable(1)" title="Delete item"><img alt="Delete item" src="trash.gif"></a>
<a id="a2" ng-click="disable(2)" title="Delete item"><img alt="Delete item" src="trash.gif"></a>
<a id="a3" ng-click="disable(3)" title="Delete item"><img alt="Delete item" src="trash.gif"></a>

ng-controller根据您的需要插入一个适当的，并设置一个标志变量以检查列表项是否已被删除。

disable(x)为 ID 为 x 的项目将该标志设置为 false 如果标志为真， isEnabled(x)返回真

PS。您将不得不对这些功能进行编码

于 2016-02-10T15:19:43.650 回答