如何執行 WCAG 合規性的可訪問性審核

WCAG（Web 內容可訪問性指南）由萬維網聯盟 (W3C) 創建，是全球公認的可訪問性標準。

在本文中，我們概述了執行審核以驗證是否符合 WCAG 2.1 標準所需的任務。

可訪問性是為了確保更廣泛的受眾可以訪問您的網站內容和功能。

例如：

• 臨時無障礙障礙——有人丟了眼鏡！
• 設備問題 - 它們位於限制性設備上，例如手機
• 情境——明亮的陽光、黑暗的房間等
• 永久性殘疾——沒有視力、聽力、認知問題等。
• 帶寬問題 - 連接速度非常慢

如您所見，您需要考慮多種形式的殘疾。

WCAG 指南分為以下幾部分：

在瀏覽每個部分之前，這裡列出了您需要執行測試的內容：

1. 可感知

• 僅包含文本的瀏覽器選擇（例如 Lynx）
• 用於檢查 alt 標籤、標題等的工具（例如 ScreamingFrog）
• 屏幕閱讀器，例如 NVDA
• 網站可訪問性測試工具
• Chrome 開發工具
• 訪問一系列設備

這是為了確保內容可以以各種形式訪問。 例如，某人可以看到內容、收聽內容、使用觸摸來理解內容等。這還包括菜單和按鈕等用戶界面項目。

WAVE 可訪問性工具是可用於查找該領域問題的眾多工具之一：

在上面的例子中，頁面做得很好。 它只有 1 個錯誤和 5 個與顏色對比度問題有關的錯誤。

一個錯誤是此頁面未指示語言。

但是頁面上有很多好東西。 例如，在右側的圖像中，您可以看到 2 個以綠色突出顯示的元素，它們都使用“ARIA”標籤來幫助屏幕閱讀器理解此內容。 稍後我們將對此進行更多解釋。

讓我們來看看指南和成功標準。

準則 1.1 - 提供非文本內容的替代文本

是否有非文本內容的替代文本？

當屏幕上有非文本內容時，您需要驗證每個元素都有描述。

在我們給出示例之前，我想討論一下 ARIA，它是一種為元素提供附加描述的方式，並且只應在標準 HTML 不可用時使用。

當您使用 HTML 時，您會自動獲得鍵盤控制、焦點等，這是首選，但 ARIA 可以用作備份。

什麼是詠嘆調？

ARIA（可訪問的富互聯網應用程序）是一種描述無法使用標準 HTML 充分描述的內容的方式。 它的主要目的是用於屏幕閱讀器。 如果您可以使用標準 HTML，那麼這是最好的方法，因為它會自動為元素和鍵盤控件提供焦點。 當這不可能時，ARIA 是替代方案。

描述性圖像

描述性圖像是描述某種意義的東西。 例如，豐田普銳斯汽車的圖片。

如果您看不到圖片，那麼需要有一種方法來描述這張圖片所代表的內容，這就是 Alt 標籤的來源。

在 WordPress 等平台中，您可以在上傳圖片時添加 alt 標籤：

我們經常更新此 alt 標籤以確保包含相關關鍵字以用於 SEO 目的，但我們需要超越這一點。

Screaming frog 將對您網站上的所有圖像進行分析，並顯示哪些圖像沒有 alt 標籤、重複的 alt 標籤、太長的 alt 標籤或太短的 alt 標籤！

您還可以在圖像詳細信息旁邊查看圖像：

裝飾形象

裝飾圖像是用於增強設計的圖像，但圖像中沒有任何值得描述的東西！

裝飾圖像應使用 CSS 背景屬性，除非有充分的理由使用“img”標籤。 如果屏幕閱讀器看到 CSS 背景屬性，它就知道忽略圖像。

這是在澳大利亞的 My Emergency Doctor 網站中描述為背景圖像的圖像示例：

這是這背後的代碼：

因為這個圖像沒有被列為 <img> 它使用 role=img 讓屏幕閱讀器知道這是一個圖像。 它使用“Aria-label”對圖像進行良好準確的描述。 它還將圖像定義為“背景圖像”。

注意：如果你使用'img'標籤作為背景圖片，你需要定義一個空的alt標籤，例如alt=””

什麼時候應該使用 <img> 而不是背景色？

當圖像是內容的重要部分時，請使用 <img>。 例如，如果您有一個產品圖片，那麼這是 <img> 。 您還可以擁有僅用於裝飾目的的背景圖像的圖像，將這些圖像描述為圖像（將由 Google 索引）是沒有意義的。

在上面的示例中，您可能會質疑顯示的圖像是否應該定義為 img 但它是一張股票照片，他們決定將其定義為背景圖像而不是可以。

注意：<img> 是一個 HTML 標記，但 background-image 是您使用的 CSS 樣式。

用戶界面控件

有各種 UI 控件需要一些文本來描述它是什麼。

例如，按鈕或表單控件。

按鈕用於幫助完成一項功能。 它可能是一個只有一個圖標的按鈕和一個在按鈕中包含文本的按鈕。 兩者都可以區別對待。

使用 ARIA，您可以定義 'role=button'，但使用標準 HTML，您可以使用 <button> 標籤。 你應該使用哪一個？

這是一個按鈕示例，其中只有一個 X，它要求我們創建一個“aria-label”來描述按鈕的作用。

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

以下是您需要測試的典型 UI 控件列表：

如果您使用表單，則需要確保每個字段都正確標記。 這是一個良好標籤的示例：

<label for=”fname”>名字：</label><br>

<input type=”text” id=”fname” name=”fname”><br>

<label for=”lname”>姓：</label><br>

<輸入類型=”文本” id=”lname” name=”lname”>

</form>

注意：對於表格，您還應確保：

• 清楚地標記必填字段。 如果一個字段是強制性的，那麼它也需要在 html 中正確標記。
• 有用戶說明（通常在表格頂部）
• 用戶在填寫表單字段時出錯（例如，日期格式不正確，這是您需要輸入的內容）時會得到幫助。

驗證碼

這可能是非常有問題的，具體取決於它是如何實現的。 例如，當顯示圖片並要求您識別哪張圖片包含交通信號燈時！

我們將對實施情況進行審查並提出相關建議。

多媒體內容

視頻/音頻至少需要一個描述來識別視頻/音頻是關於什麼的。

鏈接

您要確保鏈接在頁面上清晰突出（例如不同的顏色），並且它們使用相關的錨文本和鏈接描述。

指南 1.2 – 基於時間的媒體

該區域旨在滿足需要更易於訪問的視頻和音頻內容。

是否有僅可用於預先錄製的音頻或僅用於視頻的轉錄？

視頻轉錄是將視頻的音頻翻譯成文本。 轉錄不包括描述視頻中顯示的視覺效果等內容的音頻信息。 這是分開處理的。

轉錄提示！

Rev.com 是一項出色的服務，可為您的音頻/視頻創建字幕/轉錄。 他們甚至為 Zoom 視頻提供實時字幕服務。

是否有可用於預錄音頻的字幕？

字幕是出現在視頻中的文本，用於告知用戶該人在說什麼。

是否有音頻描述或替代媒體（預先錄製） ？

當您觀看視頻時，字幕可能不足以描述視頻中顯示的內容。 這也是需要音頻描述的地方。

例如，音頻描述可以描述某人說話時背景中發生的事情，從而為用戶提供一些上下文。

這是一個包含音頻描述的轉錄示例。

這對您的網站訪問者來說非常有用，但對 SEO 也有好處！

選擇可訪問播放器的提示：

您要確保您使用的視頻播放器支持可訪問性所需的內容：

1. 支持隱藏式字幕
2. 音頻描述可以打開/關閉
3. 可以在媒體播放器上使用關鍵字控制
4. 媒體播放器適用於不同的設備和瀏覽器
5. 所有控件均可訪問。

有現場音頻的字幕嗎？

您的網站上通常不會有任何實時視頻或音頻內容，但如果您這樣做了，那麼您需要同時創建字幕，以便用戶在說話時看到顯示的字幕。

有一些工具可以自動為您的實時視頻和音頻添加字幕。

預先錄製的同步媒體是否有音頻描述？

這適用於包含視頻和音頻的媒體。 我們想要伴隨媒體的音頻信息。

準則 1.3 – 適應性 – 以軟件可以理解的格式呈現信息。

您需要確保以編程方式描述您可以通過查看某些內容以視覺方式解釋的內容，以便屏幕閱讀器等軟件可以正確解釋它。

內容是否有邏輯結構，是否易於理解該結構中每條內容的關係？

當您查看網頁時，您通常會看到標題、段落、粗體內容、表格等。當您查看表格的詳細信息時，您會看到標題，並且您可以清楚地看到哪一行與哪個標題相關。

以下是您需要查看的內容：

• 內容是否分為子標題？
• 是否在適當時使用列表、表格等？
• 整個內容中的其他結構元素是否使用了正確的 HTML？
• 是否根據需要使用了標籤和替代文本（例如在表單上？）

小費

一個好的起點是使用檢查有效 html 的驗證器工具（例如 W3.org html 驗證器）來測試您的網站。

這是一個以紅色顯示必填字段的表單示例。 這對於視覺用戶來說是可以的，但是對於使用盲文顯示器的人呢？

為了克服這個問題，“必填”這個詞也被添加到姓氏的標籤中，這是一個必填字段。

 <label for="lastname" class="required">姓（必填）：</label>
<input type="text" size="25" value=""/>
<style type="text/css">
  。必需的 {
    紅色;
  }
</style>

是否存在有意義的內容順序？

• 當您查看網頁時，您會看到一個導航欄，然後是一些內容、標題、子標題、文本段落。 您要確保以有意義的順序呈現。
• 使用標題樣式來指示部分的重要性。 您通常只有一個 <h1> 樣式來標識內容頁面，然後您可能有多個 H2、H3 等。
• 將導航與內容分開（例如，使用 <nav> 定義導航）
• 使用有效的 html

這是一個典型的有意義的標題結構：

當用戶無法感知形狀、大小或使用有關空間形狀或大小的信息時，他們能否理解內容？

解釋這一點的最簡單方法是舉個例子：

假設您有一個軟件產品功能比較表，當產品具有功能時，此列中會顯示菱形圖像。 這還不夠，您需要添加文本以指示此菱形所代表的內容。

該網站在縱向和橫向模式下是否運行良好？

網站需要能夠適應縱向或橫向模式而不會失去意義。

如果網站正確實施了響應式設計，那麼當您更改方向時，它會適應不同的視口（即根據屏幕尺寸選擇更合適的顯示）。

表格的輸入是否正確描述？

這樣做的目的是確保以編程方式有足夠的關於需要在表單中完成的任何字段的信息。

如果可能的話，可以啟用自動填充，這樣用戶就不必完成所有事情！

頁面上元素的用途可以通過編程來計算嗎？

這方面的一個例子是使用 ARIA 'role' 元素用於網站的各個部分。

例如，包含徽標/公司名稱等的橫幅可以描述為“角色=橫幅”。

或在電子郵件、姓名、地址等表單上使用輸入標籤。

這就是您在 HTML 中看到的方式：

<輸入類型=”電子郵件>

是否有任何圖表的文本版本？

如果有任何圖表類型的內容，您將需要一個表格來總結此內容的內容。

準則 1.4 – 看和聽內容

這是為了讓人們更容易看到和聽到內容。

當使用顏色來傳達信息時，是否有替代文本？

假設您有一個表單，並且必填字段顯示為紅色。

這對屏幕閱讀器來說意義不大！

但是您可以將“必需”一詞添加到表格中，如下例所示：

<label for=”lastname” class=”required”>姓氏（必需）：</label> <input id=”lastname” type=”text” size=”25″ value=””/> <style type= “文本/css”> .required { 顏色：紅色； } </style>

如果播放超過 3 秒，是否有暫停或停止音頻的機制？

如果您使用屏幕閱讀器並且同時自動播放視頻，您將聽到兩個聲音！

理想情況下，不會有解決此問題的視頻自動播放。

如果有自動播放，請確保它小於 3 秒，如果沒有，請確保有一種方法可以控制視頻播放的音頻。

背景中的文本和圖像/顏色之間是否有良好的對比？

我們都知道顏色在設計和品牌推廣中的重要性，但對於您網站的視障訪問者來說，顏色不會對他們的體驗產生太大影響。

例如，色盲的人看不出紅色、橙色、黃色和綠色之間的區別，你也需要迎合他們。

這裡的關鍵是要注意對比度，這是網站上最常見的可訪問性問題之一。

文本顏色與其背景之間是否有足夠的對比度？ 像顏色對比檢查器這樣的工具可以幫助您找出答案！

背景顏色在左邊，然後文本顏色在右邊。 分數在中間。

建議在文本較大時對比度至少為 4.5:1 或 3.1（例如 18 點或 14 點粗體）。

此外，請確保使用顏色以外的工具來傳達您網站上的重要內容和信息。

例如，您的主要 CTA 通常會由於使用戶注意到它的顏色而在頁面上彈出。 為了使 CTA 更易於訪問，您可以使用大小、位置、粗體、對比度，讓色盲的人注意到它們。

文本可以變大而您的網站仍然正常運行嗎？

一個明顯的例子就是放大屏幕上的文字來幫助有視力障礙的人。

但是，如果用戶增加了文本大小，您希望網站能夠正常運行。

例如，當用戶將文本放大到 400% 時，您需要確保沒有信息丟失。

這是來自 W3.org 的圖片。 我確定您不希望您的網站在放大文本時看起來像右邊的那個。

WCAG 2.1 的要求是您應該能夠毫無問題地放大 200%。

除非必要，否則是否避免使用文本圖像？

您可能有一個包含文本（例如您的公司名稱）的徽標，這是可以的。

但是文本圖像呢？

如果您有文本圖像，則至少必須提供一個描述它的標籤。

但是你最好避免使用這種類型的圖像，除非：

• 這是必不可少的
• 它是可定制的

網站是否響應？

向下滾動以查看完整的網頁是正常的，但不能向右或向左滾動。

當您從桌面移動到較小的設備時，屏幕應該會自動調整，這樣您仍然不必向右或向左滾動。

非文本內容是否有足夠的對比度？

相鄰顏色需要具有至少 3:1 的對比度

此要求適用於視力相對較低的人。

可以在不損失性能的情況下調整間距/行高嗎？

• 行高（行距）至少應為字體大小的 1.5 倍；
• 段落後的間距應至少為字體大小的 2 倍；
• 字母間距（跟踪）至少應為字體大小的 0.12 倍；
• 字間距至少應為字體大小的 0.16 倍。

內容是否在懸停或聚焦時正確顯示？

當您專注於一個元素（例如它的標籤）或將鼠標懸停在它上面時，您會看到其他內容。

例如，您將鼠標懸停在一個按鈕上並出現一個彈出窗口。

…或顯示子菜單。

此內容需要：

Dismissable – 例如，如果您單擊 Escape，則不再顯示內容。

Hoverable – 當您將鼠標懸停在內容上時，只要鼠標懸停在觸發器上，就會顯示內容。

持久 - 這是兩者的結合。 內容保持可見，直到用戶關閉它、用戶將鼠標移開或內容不再包含重要信息。

注意：這不適用於當您將鼠標懸停在某物（例如圖像）上時顯示 HTML 元素（例如標題）時。

字體是否可讀？

某些字體/字體比其他字體/字體更具可讀性。 有襯線或無襯線的偏好，但這不是強制性的。 他們的關鍵部分是它是可讀的。

2.可操作

這意味著用戶需要能夠通過與之交互來使用導航和用戶界面。 例如，他們可以使用鍵盤“操作”用戶界面。

準則 2.1 – 可使用鍵盤

許多用戶使用鍵盤而不是鼠標或觸控板，包括行動不便的用戶或使用屏幕閱讀器的用戶。

這就是為什麼必須通過鍵盤訪問您網站上的所有功能——鏈接、按鈕、表單和其他控件。

一切都可以通過鍵盤訪問嗎？

現在是停止使用鼠標而只使用鍵盤的時候了。

您正在檢查：

一切是否都遵循向前或向後的邏輯順序（使用製表符前進，使用製表符返回）。

當您在特定按鈕、部分等上時，您是否看到該元素被突出顯示？ 在下面的例子中，很明顯我們已經選擇了“文章”。

是否可以使用 Tab 鍵訪問所有內容，並且當您獲得焦點時按 Enter 鍵是否會激活操作？

注意：如果出現彈出窗口，您還需要能夠導航。

你能跳過標題嗎？

當您使用屏幕閱讀器時，您不希望它在每一頁上讀出相同的標題。 那會讓你發瘋。 因此，您應該能夠跳到“跳到內容鏈接”，按回車鍵，然後您的下一個選項卡將跳過該部分。

當您第一次訪問下面的網站時單擊選項卡時，您將位於“跳至內容”鏈接上。 如果按回車鍵，則直接進入內容。

如果您按下第二個選項卡，您將移至“跳至導航”鏈接。 如果您按 Enter 鍵，您將進入導航。

如果您再次按 Tab，您將移動到“跳至導航”。 如果您選擇此項，您將直接跳轉到導航。

如果有一個字符、標點、數字或符號用作快捷方式，則必須有一種方法可以禁用此快捷方式或將其更改為一個或多個不可打印字符。 唯一的另一個例外是只有當元素具有焦點時快捷方式才可用。

2.1.2 有沒有遇到鍵盤死機的情況（鍵盤陷阱） ？

您按自己的方式前往網站上的某個位置，您不能向前或向後按標籤。

這被稱為鍵盤陷阱。 隨著歌曲的發展……陷入陷阱，無法回頭……。

是否有替代使用字母實現的鍵盤快捷鍵的方法？

與依賴鍵盤導航的人一起使用字符鍵快捷鍵並不好，因為他們最終可能會誤按它。

所以我們需要提供一個替代方案。

a) 能夠將此角色重新映射到另一個快捷方式

乙）。 把它關掉

C）。 只有當您專注於此時，它才會處於活動狀態。 所以這意味著如果你使用快捷方式，除非你真的在上面，否則什麼都不會發生！

準則 2.2 – 足夠的時間

想像一下，如果您設置完成表單的時間限制，但只考慮沒有可訪問性需求的用戶。 這個時間限制可能太短了。

時間可調嗎？

關閉時間是理想的，但能夠延長它（即當接近時間限制時）或將其調整到新時間是可以的。

網站用戶可以暫停、停止或隱藏移動、閃爍或自動更新內容嗎？

如果它正在移動/閃爍或滑動並且它：

一個）。 自動啟動

乙）。 持續超過 5 秒

C）。 與其他內容同時呈現

然後是暫停、停止或刪除的機制。

自動更新內容也有同樣的問題。

準則 2.3 – 癲癇發作和身體反應

該指南是為了確保沒有設計任何可能導致癲癇發作或身體反應的東西。

屏幕上的“閃爍”是否符合準則？

第一條規則是避免任何閃爍的物體，但如果不可能，請確保它在任何一秒內閃爍不超過 3 次，或閃爍低於一般或紅色閃爍閾值。

指南 2.4 – 可導航

這是為了方便瀏覽網站。

你能跳過重複的塊嗎？

想像一下使用屏幕閱讀器，每次進入新頁面時都會讀出導航。 現在那可不好玩了。 所以你需要能夠跳過這些。 我之前舉了一個例子。

所有頁面的標題是否正確？

您需要在所有頁面上都有良好的描述性標題。 這有利於可訪問性，但也有利於 SEO。

您可以使用 Screaming Frog 在一處查看頁面標題：

焦點順序是否保留了意義？

如果您正在瀏覽內容，但您的標籤順序沒有意義，您需要解決此問題。

你能從鏈接文本中確定鏈接的目的嗎？

“單擊此處”不是很有幫助的錨文本。 您需要有描述鏈接將要指向的內容的詞語。

什麼是錨文本？

當您鏈接到您網站上的另一個頁面或外部網站時，錨文本是您看到的與您要發送人的頁面相關的可見文本。 與其只顯示鏈接，不如顯示實際文本。

定位網頁的方法不止一種嗎？

這裡有些例子：

• 站點地圖 - 擁有站點地圖上所有頁面的列表
• 快速鏈接——有快速鏈接可以訪問重要頁面
• 搜索 - 搜索以查找相關頁面

鍵盤焦點是否可見？

這個問題說明了一切！ 這也包含在較早的指南之一中。 當您切換到某個地方時，您需要能夠直觀地看到焦點在該區域。

頁眉、正文和頁腳是否明確定義？

輔助技術需要能夠清楚地識別頁眉、頁腳和正文。 有定義這些區域的 html 標籤。

準則 2.5 輸入方式

本指南適用於您可能無法使用鍵盤或鼠標進行導航的較新界面。 例如，在智能手機上，您可以滑動、捏合和縮放、點擊等。

使用多點或基於路徑的手勢的功能是否可以由單個指針操作而不使用手勢（除非必要）？

基於路徑的手勢是您需要在特定路徑中移動的位置。 例如，您向上滑動以訪問某些功能或向下滑動以訪問其他功能。 多點手勢是您使用兩個或多個接觸點來訪問功能，例如使用兩根手指捏合和縮放。

有沒有一種簡單的方法可以擺脫由單個指針發起的操作？

什麼是單指針？

在這裡，您可以通過與屏幕交互的一點來訪問功能，例如點擊、單擊、長按等。

以下至少一項必須為真：

• 沒有按下事件——當你按下按鈕時觸發
• Abort or Undo – 您使用一個向上事件（即，當指針釋放時啟用該功能）並且有一種中止方法。 例如，您正在用手指按壓某物，而不是直接抬起手指，而是將其滑動到屏幕的另一部分，並且功能被中止。
• 向上反轉 – 向上事件反轉向下事件
• 必不可少——完成向下事件的功能是必不可少的。

組件的可見標籤是否與該組件的編程名稱匹配？

如果視力正常的用戶使用文本來語音，則程序名稱將被讀出，如果這與可見標籤匹配，則會獲得更好的體驗。

通過運動或手勢操作的功能是否也可以由其他 UI 控件操作？

如果您搖晃或傾斜某物來控制它，您是否可以使用另一個 UI 控件來訪問此功能？

可以理解

這是為了確保頁面上使用的語言是可以理解的。

3.1 可讀

我們涵蓋以下內容：

頁面或頁面部分的語言是否可以通過編程方式確定？

您應該在任何頁面的開頭看到類似的內容。 “Lang”表示頁面的語言。

<html class=”ie ie7″ lang=”en-US”>

如果頁面上的語言發生變化，您也需要能夠識別它。

3.2 可預測

您希望您的 UI 以可預測的方式執行，這並不奇怪！

頁面上的導航順序是否相同？

除非用戶對導航進行更改，否則一頁上的導航位置在所有其他頁面上應相同。

組件、圖像等是否跨頁面一致命名？

如果您在一個頁面上有一個圖像，而在另一頁上有相同的圖像，那麼您希望圖像命名相同。

如果您有幾頁帖子，並且您將頁面命名為第 1 頁、第 2 頁、第 3 頁，這是一致的。 如果沒有意義，標籤不必相同，但必須保持一致。

3.3 輸入輔助

這是為了幫助用戶避免或從錯誤中恢復：

輸入錯誤——如果您輸入的內容不正確，您可能會在視覺上看到它是錯誤的，但還需要有文本來識別問題。

標籤——當用戶必須輸入文本時，會有一個相關的標籤來描述該字段。

輸入錯誤——如果用戶犯了錯誤，那麼會有關於如何修復它的建議。

錯誤預防——您應該能夠逆轉，獲得有關錯誤的一些反饋，或者能夠在提交之前進行確認。

4. 穩健

除了可訪問之外，您的內容還需要支持各種瀏覽器、技術等。

指南 4.1 兼容

這涉及使用各種用戶代理和輔助技術進行測試。 一個很好的初始測試是使用 W3C 標記驗證工具來查看是否有任何錯誤（即它驗證 html、xhml 等的結構/語法是否正確）。

這是一個輸出示例：

此外，您需要針對多個瀏覽器進行測試，以確保正確加載內容。

在純文本瀏覽器（例如​​ Lynx）中加載頁面也是值得的。

所有的數據都能正確解析嗎？

內容部分中是否有適當的開始和結束標記，以便輕鬆識別部分的開始和結束位置？

元素是否正確嵌套？

是否有重複的屬性或 id 使得難以區分元素？

輔助技術能否理解所有用戶界面控件？

以下是一些控件示例以及您需要弄清楚的內容：

• 複選框 - 是否選中？
• 焦點——什麼元素有焦點，這是否可以通過程序來理解（不僅僅是視覺上）？

用戶是否以不一定會中斷工作的方式了解未給予關注的狀態消息？

想像一下，如果您正在瀏覽一個頁面，並且在該頁面上，一個橫幅出現在網站頂部，宣布銷售。

表單設計是否正確？

要使表單可訪問，您需要確保啟用以下功能：

• 能夠使用選項卡在表單中導航
• 能夠使用選項卡在表單中導航

<表格>

<label for=”fname”>名字：</label><br>

<input type=”text” id=”fname” name=”fname”><br>

<label for=”lname”>姓：</label><br>

<輸入類型=”文本” id=”lname” name=”lname”>

</form>

• 明確標記的必填字段。 如果一個字段是強制性的，那麼它也需要在 html 中正確標記。
• 有用戶說明（通常在表格頂部）
• 用戶在填寫表單字段時出錯（例如，日期格式不正確，這是您需要輸入的內容）時會得到幫助。

概括

正如您所看到的，在運行全面的可訪問性審核時，需要涵蓋很多內容。 然而，這一切都得到了回報，它給您的業務帶來的好處很多——從建立積極的品牌形像到接觸更廣泛的受眾和改善您的搜索引擎優化。