如何創(chuàng)建一個(gè)可訪問(wèn)的網(wǎng)站

既然我們已經(jīng)介紹了網(wǎng)站可訪問(wèn)性是什么并解釋了它的關(guān)鍵要素，那么讓我們來(lái)探討一下您可以做些什么來(lái)使您當(dāng)前或未來(lái)的網(wǎng)站更易于訪問(wèn)。

網(wǎng)站可訪問(wèn)性的改進(jìn)過(guò)程圍繞著我們上面提到的四個(gè)關(guān)鍵原則：可感知性、可操作性、可理解性和穩(wěn)健性。以下是如何在您的網(wǎng)站上加強(qiáng)這些元素中的每一個(gè)。

優(yōu)化可感知性

優(yōu)化您的網(wǎng)站以提高可感知性意味著針對(duì)有視覺(jué)障礙的用戶(hù)進(jìn)行調(diào)整。以下是您可以實(shí)現(xiàn)的解決方案：

包括替代文本

替代文本最常添加到網(wǎng)站的視覺(jué)元素（例如圖片）中，以便用戶(hù)可以了解圖片所描繪的內(nèi)容，以防圖片無(wú)法加載。

但是，替代文本對(duì)于有視覺(jué)限制的用戶(hù)同樣重要。確保您網(wǎng)站的所有關(guān)鍵視覺(jué)元素（例如徽標(biāo)和按鈕）都具有替代文本。

利用強(qiáng)烈的色彩對(duì)比

如上所述，對(duì)于有視覺(jué)障礙（例如色盲或視力有限）的用戶(hù)來(lái)說(shuō)，具有非對(duì)比或?qū)Ρ炔畹呐渖桨傅木W(wǎng)站可能難以感知。

根據(jù) WCAG 指南，設(shè)計(jì)您的網(wǎng)站，使您的網(wǎng)站前景元素（例如按鈕、菜單或圖形）的感知亮度至少比您網(wǎng)站背景顏色的感知亮度高 4.5 倍。

為基于時(shí)間的內(nèi)容提供替代格式

基于時(shí)間的內(nèi)容包括視頻、錄音、播客和其他形式的基于視覺(jué)或音頻的內(nèi)容。自然地，對(duì)于具有相應(yīng)殘疾的用戶(hù)來(lái)說(shuō)，這種類(lèi)型的內(nèi)容可能難以或者甚至不可能感知。

為確保他們能夠體驗(yàn)這些內(nèi)容，請(qǐng)?zhí)峁┝硪环N展示方式——例如視頻的字幕或錄音的文字記錄。

讓屏幕閱讀器可以訪問(wèn)您的網(wǎng)站

屏幕閱讀器是視力障礙者用來(lái)瀏覽網(wǎng)頁(yè)的最受歡迎的工具之一。

本質(zhì)上，屏幕閱讀器會(huì)掃描出現(xiàn)在用戶(hù)設(shè)備屏幕上的文本并大聲朗讀——例如，每當(dāng)用戶(hù)將鼠標(biāo)光標(biāo)懸停在一大段文本上時(shí)。這就是為什么在技術(shù)層面上讓屏幕閱讀器可以訪問(wèn)您的網(wǎng)站如此重要的原因。

優(yōu)化可操作性

網(wǎng)站可操作性差會(huì)影響有運(yùn)動(dòng)障礙或某些認(rèn)知障礙的人。以下是提高網(wǎng)站可操作性的方法：

避免快速閃爍或閃爍的內(nèi)容

為了讓可能有障礙或殘疾的用戶(hù)成功瀏覽您的網(wǎng)站，他們必須能夠安全地瀏覽它。

部分原因是確保您的網(wǎng)站上沒(méi)有任何快速閃爍或閃爍的視覺(jué)元素，因?yàn)樗赡軙?huì)導(dǎo)致癲癇發(fā)作。

但是，如果您確實(shí)有這樣的內(nèi)容并且它對(duì)您的網(wǎng)站來(lái)說(shuō)是必不可少的，請(qǐng)務(wù)必在內(nèi)容呈現(xiàn)給用戶(hù)之前放置一個(gè)扣押警告彈出窗口。

創(chuàng)建清晰的導(dǎo)航結(jié)構(gòu)

網(wǎng)站導(dǎo)航是網(wǎng)站可訪問(wèn)性和整體良好用戶(hù)體驗(yàn)的重要組成部分。

確保您的網(wǎng)站的導(dǎo)航結(jié)構(gòu)清晰且易于遵循，具有簡(jiǎn)單的導(dǎo)航菜單、高度可見(jiàn)的可點(diǎn)擊鏈接以及清楚地解釋每個(gè)頁(yè)面和小節(jié)用途的標(biāo)題。

實(shí)現(xiàn)僅鍵盤(pán)導(dǎo)航

許多運(yùn)動(dòng)能力有限的用戶(hù)僅使用計(jì)算機(jī)的鍵盤(pán)來(lái)瀏覽互聯(lián)網(wǎng)——例如使用 Tab 鍵在不同的可點(diǎn)擊元素之間切換以及使用 Enter 鍵作為點(diǎn)擊。

優(yōu)化可理解性

除了可感知的內(nèi)容和可操作的網(wǎng)站外，完全可訪問(wèn)性還包括可理解的內(nèi)容和網(wǎng)站元素。以下是如何優(yōu)化您的網(wǎng)站以提高可理解性：

編寫(xiě)直截了當(dāng)?shù)膬?nèi)容

過(guò)于復(fù)雜或難以理解的網(wǎng)頁(yè)內(nèi)容會(huì)增加您的跳出率，并影響您網(wǎng)站的可理解性。

在為您的網(wǎng)站制作內(nèi)容時(shí)，請(qǐng)使用目標(biāo)受眾可以理解的簡(jiǎn)單語(yǔ)言，并避免使用行話或過(guò)于口語(yǔ)化和特定文化的表達(dá)方式。

實(shí)施邏輯網(wǎng)站結(jié)構(gòu)

您的內(nèi)容不僅應(yīng)該易于理解，而且應(yīng)該以一種不會(huì)迷惑用戶(hù)的邏輯、簡(jiǎn)單、有條理的方式呈現(xiàn)。

要實(shí)現(xiàn)邏輯網(wǎng)站結(jié)構(gòu)，請(qǐng)遵循網(wǎng)頁(yè)設(shè)計(jì)和內(nèi)容呈現(xiàn)技術(shù)，例如 F 布局，其中網(wǎng)頁(yè)的內(nèi)容以 F 形圖案組織，遵循大多數(shù)用戶(hù)通常查看網(wǎng)頁(yè)的方式。

優(yōu)化穩(wěn)健性

最后，優(yōu)化健壯性或響應(yīng)性意味著使您的網(wǎng)站與 WCAG 定義的不同“用戶(hù)代理”（用于訪問(wèn) Web 內(nèi)容的工具，例如 Web 瀏覽器或某些輔助技術(shù)，例如上面提到的屏幕閱讀器）很好地配合使用。

為了讓您的網(wǎng)站能夠與這些工具很好地配合使用，HTML 代碼需要具有良好的格式，以便工具能夠正確解釋和顯示它。

這通過(guò)一個(gè)稱(chēng)為解析的過(guò)程來(lái)工作，在這個(gè)過(guò)程中，諸如網(wǎng)絡(luò)瀏覽器之類(lèi)的程序會(huì)掃描您網(wǎng)站的 HTML 代碼，將其劃分為單獨(dú)的組件（例如腳本或 /div 容器），并將這些組件以方式和順序顯示給用戶(hù)它們是用來(lái)展示的。

為確保屏幕閱讀器等工具能夠成功解析您網(wǎng)站的代碼，請(qǐng)確保所有元素都有清晰的開(kāi)始和結(jié)束標(biāo)記，并確保同一 HTML 標(biāo)記中沒(méi)有重復(fù)的 ID 或?qū)傩浴?br />