刪除列表項的可訪問性

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> 

插入一個pr oper ng-controller根據您的需要，並設置一個標誌變量來檢查列表項是否已被刪除。

禁用（x）的組標誌設置爲false用於與ID項x 的IsEnabled（x）的返回true，如果該標誌爲真

PS。你將不得不編碼這些功能