Alt 標(biāo)簽是可應(yīng)用于圖像的簡短描述，使屏幕閱讀器能夠讀取有關(guān)頁面圖像的信息，這對(duì)于視力障礙者非常有幫助，另外當(dāng)圖像無法加載到用戶屏幕上時(shí)，會(huì)替代網(wǎng)頁上的圖像出現(xiàn)的書面文本內(nèi)容，并允許搜索引擎更好地抓取您的網(wǎng)站并對(duì)其進(jìn)行排名。

示例1：產(chǎn)品大圖的alt屬性內(nèi)容為alt=“Movement Golden Metal Eyeglass Frames”

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

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

?Aria-label屬性幫助定義標(biāo)記交互元素的字符串值，并為使用輔助技術(shù)的用戶提供有關(guān)文檔結(jié)構(gòu)的附加信息。

如果交互元素沒有可訪問的名稱，或者可訪問的名稱不準(zhǔn)確，并且 DOM 中沒有可通過該屬性引用的可見內(nèi)容，則該屬性可用于定義一個(gè)標(biāo)記該元素的aria-labelledby字符串a(chǎn)ria-label。設(shè)置它的交互元素。這為元素提供了可訪問的名稱。

示例1：對(duì)圖片按鈕進(jìn)行文本說明

評(píng)論圖片集，第一張圖片的aria-lable標(biāo)簽內(nèi)容為aria-lable="Gentry - customer photo from laura"，為第一張圖片客觀了可訪問的名稱。

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

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

示例3：對(duì)符號(hào)x的文本說明是close

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

示例：

按鈕的可訪問名稱是開始標(biāo)記和結(jié)束<button>標(biāo)記之間的內(nèi)容；

圖像的可訪問名稱是其alt屬性的內(nèi)容；

表單輸入的可訪問名稱是關(guān)聯(lián)<label>元素的內(nèi)容。

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

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

• 抽象角色由瀏覽器使用，不應(yīng)在代碼中使用。

• 文檔結(jié)構(gòu)角色提供頁面部分的描述（例如列表項(xiàng)、工具欄、文檔等）

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

• 小部件角色定義元素（例如警報(bào)、復(fù)選框、選項(xiàng)卡面板等）

? ? ? ? ? ??

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

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

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

Aria-labelledby可用于標(biāo)記元素的可見文本的情況, 非交互式元素或內(nèi)聯(lián)結(jié)構(gòu)角色一起使用，例如code、term或emphasis或其語義不會(huì)映射到輔助功能 API 的角色，包括presentation、none和hidden。

Aria-label標(biāo)簽示例：??

說明：如果第二個(gè)button里的可見文本內(nèi)容為send email，則不需要aria-label標(biāo)簽。

Aria-labelledby標(biāo)簽示例：?

?

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

Aria-describedby用于引用提供描述的較長內(nèi)容。

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

Aria-describedby示例：

? ? ?

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

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

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上安裝成功后，鼠標(biāo)所移動(dòng)到的位置，會(huì)出現(xiàn)橙色的邊框，如果帶耳機(jī)的話，會(huì)聽到邊框內(nèi)的內(nèi)容被大聲的朗讀出來，包括按鈕符號(hào)，字符符號(hào)等，幫助有視力障礙的人士提供便捷。

可設(shè)置：

1）僅朗讀我選擇的內(nèi)容 2）大聲朗讀關(guān)鍵動(dòng)作 3）朗讀所有內(nèi)容

缺點(diǎn)：

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

Chrome 屏幕閱讀器擴(kuò)展展示了僅使用 html 和 javascript 等 Web 技術(shù)構(gòu)建的功能齊全的 Web 屏幕閱讀器。該服務(wù)需要進(jìn)行設(shè)置來調(diào)整朗讀功能的工作強(qiáng)度。??

當(dāng)瀏覽器計(jì)算可訪問名稱時(shí)，該aria-labelledby屬性具有最高優(yōu)先級(jí)，它會(huì)覆蓋命名元素的其他方法，包括aria-label、其他命名屬性，甚至元素的內(nèi)容。

如示例：

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

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

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

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

按鈕：按鈕元素一樣沒有文本內(nèi)容:

無標(biāo)簽輸入：