Alt 標簽是可應用于圖像的簡短描述，使屏幕閱讀器能夠讀取有關頁面圖像的信息，這對于視力障礙者非常有幫助，另外當圖像無法加載到用戶屏幕上時，會替代網頁上的圖像出現的書面文本內容，并允許搜索引擎更好地抓取您的網站并對其進行排名。

示例1：產品大圖的alt屬性內容為alt=“Movement Golden Metal Eyeglass Frames”

示例2：<img src="pupdanceparty.gif" alt="小蘋果舞蹈">? ? ? ??

WAI-Aria（Web Accessibility Initiative） — 可訪問的無障礙富互聯網應用程序標簽，可以添加到html元素的屬性，以便為輔助技術（例如屏幕閱讀器）提供有關該元素的用途和功能的附加信息，html將Aria文本內容做為輔助功能標簽，為使用輔助技術的用戶提供無法使用可見標簽的不可見標簽，即可用于讓聽力或視力障礙等殘障人士更方便地訪問您的網站。

?Aria-label屬性幫助定義標記交互元素的字符串值，并為使用輔助技術的用戶提供有關文檔結構的附加信息。

如果交互元素沒有可訪問的名稱，或者可訪問的名稱不準確，并且 DOM 中沒有可通過該屬性引用的可見內容，則該屬性可用于定義一個標記該元素的aria-labelledby字符串aria-label。設置它的交互元素。這為元素提供了可訪問的名稱。

示例1：對圖片按鈕進行文本說明

評論圖片集，第一張圖片的aria-lable標簽內容為aria-lable="Gentry - customer photo from laura"，為第一張圖片客觀了可訪問的名稱。

示例2：對折疊菜單按鈕的文本說明是menu

?<button aria-label="menu" class="hamburger"></button>

示例3：對符號x的文本說明是close

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

示例：

按鈕的可訪問名稱是開始標記和結束<button>標記之間的內容；

圖像的可訪問名稱是其alt屬性的內容；

表單輸入的可訪問名稱是關聯<label>元素的內容。

如果以上三個選項都不可用，或者默認的可訪問名稱不合適，可考慮使用屬性aria-label來定義元素的可訪問名稱。

ARIA 組件包含三種主要類型：ARIA 角色、ARIA 狀態和 ARIA 屬性。ARIA 角色定義 UI 元素的類型并說明它的用途。它們又分為 4 個子類別：

• 抽象角色由瀏覽器使用，不應在代碼中使用。

• 文檔結構角色提供頁面部分的描述（例如列表項、工具欄、文檔等）

• 地標角色將頁面分為不同的部分，以便更好地導航（例如表單、橫幅、主要、搜索等）

• 小部件角色定義元素（例如警報、復選框、選項卡面板等）

? ? ? ? ? ??

Alt替代文本可以添加到任何圖像資源中，用于描述該圖像的外觀和功能。Aria Label僅為屏幕閱讀器上沒有可見文本的元素提供文本替代，如熱點、按鈕、圖表、圖形，為用戶提供更多的上下文和描述。

WCAG 2.0 在1.1.1非文本內容中指出，應為非文本內容（例如圖像）提供替代文本，以便屏幕閱讀器等輔助技術可以告知用戶圖像描繪的內容。alt 屬性應始終用于為 HTML 中的 img 元素提供文本替代。aria 屬性可用作附加文本替代項，但不能取代 alt 屬性的要求。??

Aria-label可用于標記元素的文本不可見的情況, 例如鏈接、視頻、表單控件、地標角色和小部件角色,在 DOM 中不可見時，提供可訪問的名稱。

Aria-labelledby可用于標記元素的可見文本的情況, 非交互式元素或內聯結構角色一起使用，例如code、term或emphasis或其語義不會映射到輔助功能 API 的角色，包括presentation、none和hidden。

Aria-label標簽示例：??

說明：如果第二個button里的可見文本內容為send email，則不需要aria-label標簽。

Aria-labelledby標簽示例：?

?

Aria-labelledby應引用為元素提供易于訪問的名稱的簡短文本。

Aria-describedby用于引用提供描述的較長內容。

如果 DOM 中沒有元素提供適合交互元素的可訪問名稱的簡短標簽，則使用aria-label來定義交互元素的可訪問名稱。

Aria-describedby示例：

? ? ?

Title對使用鼠標的人非常有用，當鼠標懸停在元素上時，title屬性將顯示元素的文本替代內容。但對于僅使用鍵盤的用戶來說則不可用，如某些屏幕閱讀器，瀏覽器組合可能不支持該屬性（如IE 11 和 NVDA）。

如果使用該title屬性來提供附加信息，最好同時使用aria-label或alt標簽。

Title和aria-label融合的示例：

<button aria-label="Back to the page" title="Close" > X </button>

Screen Reader：

https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn

在谷歌chrome上安裝成功后，鼠標所移動到的位置，會出現橙色的邊框，如果帶耳機的話，會聽到邊框內的內容被大聲的朗讀出來，包括按鈕符號，字符符號等，幫助有視力障礙的人士提供便捷。

可設置：

1）僅朗讀我選擇的內容 2）大聲朗讀關鍵動作 3）朗讀所有內容

缺點：

你不能暫停使用這個插件，除非刪除它。

Chrome 屏幕閱讀器擴展展示了僅使用 html 和 javascript 等 Web 技術構建的功能齊全的 Web 屏幕閱讀器。該服務需要進行設置來調整朗讀功能的工作強度。??

當瀏覽器計算可訪問名稱時，該aria-labelledby屬性具有最高優先級，它會覆蓋命名元素的其他方法，包括aria-label、其他命名屬性，甚至元素的內容。

如示例：

<button aria-label="Blue" aria-labelledby="color">Red</button>

<span id="color">Yellow</span>?

在此示例中，該可訪問名稱是“Yellow”，而不是Blue。

在 Vue 中，aria-*屬性也像任何其他 HTML 屬性一樣對待，可以綁定到靜態屬性或動態變量（使用前綴:aria-label），按鈕元素沒有文本內容。? ??

按鈕：按鈕元素一樣沒有文本內容:

無標簽輸入：