如何使UL列表中的按鈕可訪問？

在我的代碼中，我有一個存儲在無序列表中的按鈕列表。如果您啓用了屏幕閱讀器，並且您選擇了任何li元素，大多數閱讀器將從列表中的多少位（例如「List item 1，item 2 of 4」）中讀出您所在的元素。如何使UL列表中的按鈕可訪問？

我很好奇它是否可以合併這兩個，這樣，當你選項卡時，你可以選擇按鈕，但你也可以獲得屏幕閱讀器讀出的列表項信息。

下面是我當前的代碼（第一）示例代碼，第二個是隻是爲了說明屏幕閱讀器清濁2 4

<div> 
 
    This example shows that you tab straight to the button but don't get the list information 
 
    <ul> 
 
    <li><button onClick="alert('Button 1')">Button 1</button></li> 
 
    <li><button onClick="alert('Button 2')">Button 2</button></li> 
 
    <li><button onClick="alert('Button 3')">Button 3</button></li> 
 
    <li><button onClick="alert('Button 4')">Button 4</button></li> 
 
    </ul> 
 
</div> 
 
<div> 
 
    This example shows that if you add tab index on a list item you get the count of items in the list 
 
    <ul> 
 
    <li tabindex="0"><button onClick="alert('Button 1')">Button 1</button></li> 
 
    <li tabindex="0"><button onClick="alert('Button 2')">Button 2</button></li> 
 
    <li tabindex="0"><button onClick="alert('Button 3')">Button 3</button></li> 
 
    <li tabindex="0"><button onClick="alert('Button 4')">Button 4</button></li> 
 
    </ul> 
 
</div>

來源

2017-08-01 k2snowman69

注意：我一直在使用Windows講述到目前爲止 – k2snowman69

在Windows 10或較舊版本的Windows上的講述人？這可以造成很大的差異。你爲什麼不嘗試NVDA？ –

Windows 10 ......並且可悲的是，它是我們的客戶在Narrator中工作的要求，所以即使我使用它與NVDA一起工作，除非我爲解說員解決它並不重要。 – k2snowman69

你可以試試這樣的事情：

<ul role="toolbar"> 
 
    <li><button aria-setsize="4" aria-posinset="1">Button 1</button></li> 
 
    <li><button aria-setsize="4" aria-posinset="2">Button 2</button></li> 
 
    <li><button aria-setsize="4" aria-posinset="3">Button 3</button></li> 
 
    <li><button aria-setsize="4" aria-posinset="4">Button 4</button></li> 
 
</ul>

您也可以嘗試使用角色列表框而不是工具欄，從根本上來說，可以根據您的特定情況選擇最合適的一種。

請注意，在這兩種情況下，當按下標籤時，用戶將希望進入工具欄/列表框，然後在下一個標籤上離開它，而不是標籤到所有按鈕上。使用箭頭鍵在同一工具欄或列表框中從一個按鈕移動到另一個按鈕。

來源

2017-08-03 18:02:46 QuentinC

我希望有些東西不需要明確的詠歎調標籤標籤，但這是我不斷回來的解決方案。 – k2snowman69

如何使UL列表中的按鈕可訪問？

回答

相關問題