WCAG 2.1於2018年發(fā)布，引入了幾個(gè)新的成功標(biāo)準(zhǔn)，從而增強(qiáng)了Web可訪問(wèn)性。本文重點(diǎn)介紹“名稱標(biāo)籤”（2.5.3），這是標(biāo)記用戶界面組件的關(guān)鍵方面。我們將探討常見(jiàn)的陷阱，解決方案和最佳實(shí)踐。

了解成功標(biāo)準(zhǔn)

成功標(biāo)準(zhǔn)是一個(gè)可檢驗(yàn)的，技術(shù)不足的陳述，定義可訪問(wèn)性的合規(guī)性。 “名稱標(biāo)籤”評(píng)估組件的視覺(jué)標(biāo)籤是否匹配其程序化名稱。它是WCAG 2.1的“可操作”類別的一部分，專門(mén)針對(duì)輸入方式。重要的是，WCAG 2.1與WCAG 2.0向後兼容。

名稱標(biāo)籤：Visual vs.編程

WCAG 2.5.3（級(jí)別A）指出：“對(duì)於帶有文本或文本圖像的標(biāo)籤的用戶界面組件，該名稱包含視覺(jué)上呈現(xiàn)的文本?！?/p>

這樣可以確保視覺(jué)上呈現(xiàn)的標(biāo)籤與組件的程序化名稱（可訪問(wèn)名稱）之間的一致性。這種一致性對(duì)於諸如屏幕閱讀器和語(yǔ)音識(shí)別軟件之類的輔助技術(shù)的用戶至關(guān)重要。視覺(jué)和程序化名稱不需要相同，但必須共享一個(gè)共同的相關(guān)術(shù)語(yǔ)（例如，“提交”和“提交表單”）。差異會(huì)造成混亂並阻礙可訪問(wèn)性。

輔助技術(shù)的影響

考慮HTML觸點(diǎn)表格。使用語(yǔ)音識(shí)別的用戶可能會(huì)遇到一個(gè)帶有視覺(jué)文本“發(fā)送”的按鈕，但是“提交”的編程名稱。這種不匹配是失敗的。用戶依賴於視覺(jué)標(biāo)籤，無(wú)法使用語(yǔ)音命令激活按鈕。匹配視覺(jué)和程序化名稱（在兩種情況下“發(fā)送”）都可以解決此問(wèn)題。如果aria-label不增加任何值，則將其刪除是可取的。

屏幕讀取器用戶還可以從一致的標(biāo)籤中受益。聽(tīng)到與他們看到的類似的文字可增強(qiáng)可用性。相反，不匹配的標(biāo)籤可能會(huì)導(dǎo)致通過(guò)語(yǔ)音輸入或混淆通過(guò)屏幕讀取器導(dǎo)航的用戶意外激活控件。該標(biāo)準(zhǔn)不適用於缺乏視覺(jué)標(biāo)籤的組件。

代碼示例：故障狀態(tài)和更正

本文介紹了三個(gè)失敗方案：

1. 口語(yǔ)和視覺(jué)標(biāo)籤之間的斷開(kāi)連接。
2. 標(biāo)籤不匹配由於“可訪問(wèn)的隱藏”跨度，在口語(yǔ)標(biāo)籤中添加了額外的文本。
3. 帶有aria-labelledby標(biāo)籤的輸入，該輸入未能在口語(yǔ)和視覺(jué)標(biāo)籤之間建立相關(guān)性。

這些示例突出了常見(jiàn)錯(cuò)誤。然後，本文為每種情況提供了更正的代碼段。

一項(xiàng)2020年的WebAIM研究表明，在420萬(wàn)種表格投入中，有55％的標(biāo)籤不正確。

使用適當(dāng)?shù)臉?biāo)籤輸入配對(duì)<label></label>元素至關(guān)重要，但是通過(guò)aria-label程序化名稱（可訪問(wèn)的名稱）同樣重要。之間的不一致<label></label>文本和aria-label為認(rèn)知障礙和語(yǔ)音輸入用戶的用戶創(chuàng)建認(rèn)知超負(fù)荷。

標(biāo)籤位置和文本特異性

本文闡明，如果象徵性地而不是字面意思，則文本不被視為視覺(jué)標(biāo)籤。經(jīng)常將圖像用作文本的豐富文本編輯器舉例說(shuō)明了這一點(diǎn)。

為了保持一致性，視覺(jué)上的標(biāo)籤應(yīng)視為標(biāo)籤文本。最佳放置指南包括：

• 文本輸入和下拉列表的左側(cè)。
• 複選框和無(wú)線電按鈕的權(quán)利。
• 內(nèi)部按鈕或選項(xiàng)卡，或下方圖標(biāo)按鈕。

如果不是像徵性的，標(biāo)點(diǎn)符號(hào)和資本化的微小變化是可以接受的。

沒(méi)有視覺(jué)標(biāo)籤的組件被排除在此成功標(biāo)準(zhǔn)之外。

適當(dāng)標(biāo)籤的好處

一致的標(biāo)籤允許語(yǔ)音輸入用戶無(wú)縫激活控件，從而消除了猜測(cè)。包容性設(shè)計(jì)使所有用戶受益，創(chuàng)造更愉快，更容易獲得的體驗(yàn)。

結(jié)論和測(cè)試

本文總結(jié)了WCAG 2.5.3，儘管看起來(lái)很簡(jiǎn)單，但仍強(qiáng)調(diào)了其重要性。它突出顯示了A級(jí)的合規(guī)性要求：確保編程名稱包含視覺(jué)上呈現(xiàn)的文本。

可以使用瀏覽器開(kāi)發(fā)人員工具（Chrome DevTools，F(xiàn)irefox開(kāi)發(fā)人員工具）或Wave和AX（例如Wave和AX）進(jìn)行測(cè)試。遵守此標(biāo)準(zhǔn)，儘管看似很小，但可顯著提高所有用戶的可訪問(wèn)性。

以上是WCAG 2.1中的新功能：名稱標(biāo)籤的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！