可訪問性：sr-only 或 aria-label

Question

來自 MDN ：

在下面的示例中，按鈕的樣式看起來像典型的“關閉”按鈕，中間有一個 X。 由於沒有任何內容表明按鈕的目的是關閉對話框，因此 aria-label 屬性用於為任何輔助技術提供標簽。

 <button aria-label="Close" onclick="myDialog.close()">X</button>

根據 Bootstrap 文檔：

僅使用 .sr 將元素隱藏到除屏幕閱讀器之外的所有設備

所以我想我也可以寫：

<button onclick="myDialog.close()"><span class="sr-only">Close</span>X</button>

在 Bootstrap 項目中，我如何選擇更喜歡的項目？

Answer 1

在 MDN 示例中，屏幕閱讀器只會說出“關閉”這個詞，因為aria-label會覆蓋按鈕中的文本。 即使您在沒有 Bootstrap 的情況下重新使用代碼，這也將起作用。

在您的示例中，屏幕閱讀器會說“關閉 x”，因為您沒有采取任何措施來向屏幕閱讀器隱藏“x”。 您還添加了一個文本節點，然后用一個類隱藏它。

我將使用 MDN 中的示例。

Answer 2

類sr-only類用於整個文本內容塊，這些內容只對使用屏幕閱讀器的人有用，應該對其他人隱藏。

我正在處理的應用程序示例提供了有關在 Web 應用程序中使用可訪問控制器的說明：

<div class="sr-only">
  When voting with the text-to-speech audio, use the accessible
  controller to navigate your ballot. To navigate through the
  contests, use the left and right buttons. To navigate through
  contest choices, use the up and down buttons. To select or
  unselect a contest choice as your vote, use the select button.
</div>

在您的示例中，您只想為屏幕閱讀器提供不同的文本內容。 要回答您的具體問題，請使用 MDN 示例。

我已經使用 aria-labels 提示屏幕閱讀器何時添加暫停，必要時通過在標題后綴句點或逗號來添加暫停（更多關於在屏幕閱讀器中暫停以獲取輔助功能）：

<h1 aria-label="Hello World.">
  Hello World
</h1>