如何為 Web 可訪問性構(gòu)建應(yīng)用程序

1.使用語義HTML

使用 HTML 編程時，使用 標(biāo)簽或其他不一定具有特定含義或功能的通用標(biāo)簽來劃分信息似乎很容易和方便。然而，當(dāng)涉及到 Web 可訪問性時，這是一個很大的問題。例如，依賴輔助技術(shù)的用戶將難以理解具有未明確定義的層次結(jié)構(gòu)的信息流。相反，對部分、正文內(nèi)容、頁腳和界面的所有其他部分使用可導(dǎo)航的語義標(biāo)簽，以便輔助技術(shù)跟上。

語義 HTML 不僅可以幫助你的用戶，還可以幫助與你一起工作的每個人，同時提高你產(chǎn)品的整體質(zhì)量。

2. 在需要的地方使用 ARIA 標(biāo)簽

此外，HTML5 的強(qiáng)大功能有助于創(chuàng)建高度可導(dǎo)航的內(nèi)容。通過包含明確的地標(biāo)標(biāo)簽，我們可以創(chuàng)建可訪問的界面。但是，你仍然需要通過附加標(biāo)簽來闡明某些屬性。

這就是 aria 的用武之地。Aria-label 屬性定義了一個字符串，為你的內(nèi)容提供了一個不可見的標(biāo)簽。在其他語義語言失敗的地方使用這些標(biāo)簽，你可以幫助用戶和輔助技術(shù)等了解信息的功能和流動，并提高內(nèi)容的可訪問性。通過將這些方面集成到應(yīng)用程序的開發(fā)端，你將創(chuàng)建一個對所有用戶都運(yùn)行得更加流暢的應(yīng)用程序。

3.結(jié)構(gòu)清晰

從標(biāo)題到數(shù)據(jù)表，應(yīng)用程序的功能必須結(jié)構(gòu)清晰，才能發(fā)揮作用，這需要為設(shè)計的每個元素使用正確的標(biāo)簽和屬性。

正確的標(biāo)簽對于定義清晰的結(jié)構(gòu)至關(guān)重要。網(wǎng)絡(luò)爬蟲和輔助技術(shù)將需要這種定義的內(nèi)容層次結(jié)構(gòu)來理解他們正在查看的內(nèi)容。不要僅僅假設(shè)劃分標(biāo)簽和信息分離對系統(tǒng)有意義，你需要從主頁開始就有意義的內(nèi)容流，規(guī)劃你的應(yīng)用程序并相應(yīng)地定義每個元素。

4.提供鍵盤導(dǎo)航界面

結(jié)構(gòu)清晰的內(nèi)容的一個要素是它必須可以通過鍵盤進(jìn)行導(dǎo)航。用戶必須能夠通過你的系統(tǒng)進(jìn)行選項卡，提交內(nèi)容，滾動并使用他們正在使用的鍵盤界面進(jìn)行所有操作。這意味著你必須高度了解如何通過按下每個按鈕來索引和導(dǎo)航元素，讓鍵盤導(dǎo)航成為你網(wǎng)頁設(shè)計的主要內(nèi)容，你將擁有一款適用于更多用戶的應(yīng)用程序。

5.用替代文字補(bǔ)充多媒體內(nèi)容

然后是多媒體內(nèi)容的問題。那些有視覺或聽覺障礙的人將無法訪問某些內(nèi)容。這就是為什么必須使你的應(yīng)用程序與屏幕閱讀器兼容并在視頻和圖像方面提供替代文本的原因。

為視頻提供字幕和文字記錄，同時確保所有用戶都能順利加載頁面。因此，你將擁有幾乎任何人都可以享受的內(nèi)容。

6.選擇正確的字體

你在應(yīng)用程序中使用的字體樣式、大小和間距將決定你的內(nèi)容的可讀性。避免使用花哨的腳本字體和任何難以閱讀的東西，請選擇容易看的清晰無襯線字體，即使你覺得這些很無聊，用戶也會發(fā)現(xiàn)你的內(nèi)容更加美觀。

這些只是一些基線元素，它們可以大大有助于為你的應(yīng)用提供所需的可訪問性提升。但不要忽視你所包含的所有可訪問性功能的測試方面，利用有價值的工具來幫助你評估你的應(yīng)用程序的可訪問性。

為 Web 可訪問性實施此類功能和解決方案似乎令人生畏。請不要低估 Web 可訪問性在促進(jìn)你的應(yīng)用程序成功方面的力量，遵循這些提示和策略來改進(jìn)你的方法并獲得后續(xù)收益。