Question

我正在使用网页上的辅助功能，我遇到了这个我无法找到答案的。鉴于我有一个项目列表以及通过单击项目旁边的垃圾图标来删除每个项目的选项（参见附图），我如何确保屏幕阅读器（JAWS）等辅助技术能够正确地关联每个垃圾箱带有正确项目的图标。

这与WCAG 2.0有关： 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

代码可能是这样的：

<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>

A list with 3 items. Each item can be deleted.

Answer 1

如果您使用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，并设置一个标志变量以检查是否已删除列表项。

禁用（x）为ID为x的项目设置该标志为false isEnabled（x）如果标志为真则返回true

PS。你将不得不编码这些功能

删除列表项的可访问性

1 个答案: