如何標記WCAG 2.0合規性的按鈕？

Question

在爭取WCAG 2.0合規性方面，我發現了關於按鈕正確處理的各種信息，特別是要考慮按鈕可訪問和兼容的要求。

標記<button>的適當方法是什么？ 他們需要具備哪些屬性或組合？

我的按鈕分為三類：

1. 具有描述其預期操作的文本的按鈕。 （例如“了解更多”以啟動包含更多產品信息的模態）
2. 具有不描述其操作的文本的按鈕。 （例如“X”或標題為手風琴內容部分的文字）
3. 沒有描述其預期操作或其他內容的文本的按鈕。 （例如，切換旋轉木馬上下文的圖標/圖像）

例如，在上面3的簡單示例中： http ： //codepen.io/ga-joe/pen/ggeLeW

是否可以為沒有文本的按鈕添加aria-label屬性？ 是否始終需要name和/或value ？ 請發送幫助！ 謝謝！

這些似乎是相關的WCAG指南：

• https://www.w3.org/TR/WCAG20/#text-equiv-all
• https://www.w3.org/TR/WCAG20/#navigation-mechanisms-refs
• https://www.w3.org/TR/WCAG20/#ensure-compat-rsv

Answer 1

這些問題總是取決於背景。 讓我試試一下sans上下文。

1. <button>Learn More</button>只要在上下文中有人會理解他們將會學到更多內容，就可以解決問題。 通常，按鈕前面有一些描述性文本。 但是，如果它只是將某人帶到另一個頁面而不是觸發模態，我會使用鏈接。

2. <button aria-label="Close">&#215;</button>表示關閉按鈕（我使用×的字符實體，它比x更對稱。再次，如果按鈕位於頂部模態（例如），可能與其標題相鄰，那么這可能就足夠了。

3. <button aria-label="Image 1">[icon]</button>可用於旋轉木馬。 請注意，如果字體未下載，則可能會丟失字體圖標。 對於IE11和舊版Edge，Windows背景圖像將在Windows高對比度模式（WHCM）中消失。 aria-label不會幫助WHCM用戶。 可能最好使用圖像（甚至是SVG）及其alt屬性，這意味着您不需要aria-label 。

您不需要name屬性。 它沒有任何用處。

不要使用role="button"屬性。 該角色自動成為<button>元素的一部分。 如果你指定另一個角色，那么你就有一個大問題。

絕對不要使用title屬性。 這弊大於利。

Answer 2

具有描述其預期操作的文本的按鈕。 （例如“了解更多”以啟動包含更多產品信息的模態）

即使我們不是在談論鏈接，您也可以閱讀WCAG 2.4.9鏈接目的（僅限鏈接）的建議。 在上下文中可以理解文本“了解更多”，但是對於需要屏幕放大鏡的低視力用戶，例如，可能難以從按鈕文本本身理解該動作。

例如，文本了解更多關於“公共汽車上的輪子”似乎更合適。

具有不描述其操作的文本的按鈕。 （例如“X”或標題為手風琴內容部分的文字）

我在另一篇文章中回答了這個問題： 什么是詠嘆調標簽，我應該如何使用它？

您必須同時使用aria-label （對屏幕閱讀器有用）和title屬性（對於使用可能需要更多支持的標准瀏覽器的標准用戶）：

<button
    aria-label="Back to the page"
    title="Close" onclick="myDialog.close()">X</button>

沒有描述其預期操作或其他內容的文本的按鈕。 （例如，切換旋轉木馬上下文的圖標/圖像）

同樣的推理可以適用於這一點。 但對於盲人來說，將旋轉木馬向左或向右移動是一種不同的體驗，有時是無用的。 如果他們可以忽略他們看到的旋轉木馬，不丟失任何內容，使用鍵盤或他們的輔助技術導航，那么你正在做的事情。

此外，您必須永遠不要忘記， accessibility不僅針對盲人用戶，還針對兒童，老年人，有認知或敏感殘疾的人。 例如， aria-label永遠不足以在需要時幫助那些人。 他們沒有屏幕閱讀器，也沒有閱讀HTML源代碼。

在用戶使用“語音識別軟件”的情況下（是的，它們不是很多，但讓我們改善他們的生活），沒有任何可見的文本也會導致困難。