ARIA屏幕閱讀器-如何讀取角色名稱？

Question

我試圖使我的Web應用程序更易於訪問，而我想做的一件事就是創建一個角色組，並且應該以一種特殊的方式讀取其中的內容。 對於用戶界面上的ex，它看起來像一個菜單欄

TITLE
Button1 Button2 Button3

的HTML看起來像

<div class="tab-content-header" role="menubar">
          <span id="{{label}}">{{label}}</span>
          <button type="button" class="btn btn-primary">button1</button>
          <button type="button" class="btn btn-primary">button2</button>
</div>

我希望屏幕閱讀器僅關注按鈕，並閱讀“ button1按鈕，標題”和“ button2按鈕，標題”。

Answer 1

在回答您的問題之前，請注意，您使用的是role="menubar"但是其中沒有任何項目包含role="menuitem ”。 我建議您通讀ARIA Authoring Practices 1.1中的菜單欄模式 ，因為它也定義了您需要實現的鍵盤操作。 此外，在大多數情況下，使用ARIA定義菜單是一種告訴用戶其行為類似於系統菜單欄的方法。 如果您不符合必要的交互條件，則會使用戶感到困惑。

現在，屏幕閱讀器將宣布<button>的可訪問名稱作為元素中的文本： <button>Accessible Name</button>

如果您希望它宣布一些其他文本，則可以使用aria-describedby ，盡管會在暫停后宣布。

因此，這可能會為您提供所需的東西：

<span id="Desc">Description text</span>
<button aria-describedby="Desc">Button Text</button>

現在，您聲明要按特定順序讀取某些內容，並且只希望讀取按鈕，並且您的問題是希望讀取角色名稱。 這些都是令人困惑的要求，所以我不確定我是否解決了您的目標。

話雖如此，請謹慎聲明屏幕閱讀器用戶應如何體驗您的內容。 與根本不執行任何操作相比，經常使用ARIA來增強作者的理想閱讀順序會使頁面難以訪問。 因此，請務必與實際用戶進行測試。