如何設計無障礙網站（完整指南）

無論您經營的是電子商務網站還是網路開發業務，您都希望吸引儘可能多的訪客訪問您的網站。這意味著要通過優先考慮網站的可訪問性，確保儘可能多的人可以使用您的網站。

網站的可訪問性包括確保每個人都能使用您的網站，包括那些有殘疾和障礙的人。您可以利用各種資源、工具和技巧，讓建立包容性網站變得更加容易。

在這篇文章中，我們將介紹關於網站可訪問性的所有知識：為什麼它如此重要，如何檢查網站當前的可訪問性水平（和障礙），以及設計高可訪問性網頁的完整指南。

什麼是網站無障礙性？

網站的可訪問性是指殘障人士可以使用網站的程度。這包括盲人或低視力者、聾人或重聽者、行動不便者、認知障礙者以及其他殘疾人士。這包括設計網站，使其內容可供所有人使用，包括可能使用螢幕閱讀器、語音識別軟體或專用輸入裝置等輔助技術的人。

這一理念不僅僅是幫助個人。它是關於擁抱網路使用者的多樣性，並認識到平等訪問網際網路的重要性。通過優先考慮可訪問性，您不僅可以擴大受眾範圍，還可以促進包容性和社會責任。

網站的可訪問性也符合各種法律標準，如美國的《美國殘疾人法案》（ADA）和全球的類似立法。這些法律要求某些網站，尤其是公共機構和企業的網站，必須對殘疾人無障礙，以避免歧視。

誰來管理和執行網站無障礙規則和法律？

管理和執行網站無障礙規則和法律的責任由不同的政府和非政府組織分擔，每個組織都在建立和維護本文後面將介紹的無障礙標準方面發揮著重要作用。

• 政府和政府機構。在美國，司法部（DOJ）主要負責執行《反歧視法》，其中包括網站無障礙規則。其他國家也有自己的政府機構來監督類似的法律法規。
• 國際標準組織。全球資訊網聯盟（W3C）制定了《網頁內容可訪問性指南》（WCAG），這是一套國際公認的標準，概述瞭如何讓殘疾人更容易訪問網頁內容。這些準則被廣泛接受為網路無障礙的基準，並經常在法律要求中被引用。
• 宣傳團體和非政府組織。非營利組織和倡導團體積極推動網站無障礙化，通常會提供資源、進行稽覈，有時還會推動對違規網站採取法律行動。
• 法律系統。法律系統通常會介入不遵守網站無障礙法律的案件。可以對不符合規定標準的組織提起訴訟和採取法律行動，特別是《美國殘疾人法案》規定的標準。法律訴訟可以開創重要的先例，為今後無障礙規則的執行制定標準。

值得注意的是，網路無障礙環境在不斷變化。我們都有責任瞭解最新的新聞、法律發展以及影響網站管理員的其他變化。

什麼是網站無障礙標準？

根據 WCAG，在建立無障礙網站時必須遵循四項原則。這些原則規定，網站必須

• 可感知。訪問者必須能夠感知或理解並知曉網站上的內容和資訊。比如，可以訪問alt文字。
• 可操作。訪問者必須能夠不受干擾地使用網站的每一部分。一個佈局合理、條理清晰的導航選單可以實現這一點。
• 可理解性。網站上的所有內容，無論是書面的還是以其他方式呈現的，都應易於理解。簡潔明瞭的語言和乾淨整潔的頁面可以用來傳達資訊。
• 穩健。網站的基礎（如 HTML 程式碼）應易於所有訪問者閱讀和理解，包括螢幕閱讀器等輔助技術。另一個例子是針對手機和平板電腦等各種裝置優化網站。

網上無障礙障礙示例

這些常見的障礙會妨礙殘疾使用者訪問網站或與網站互動。以下是一些障礙示例及其對使用者的影響。

• 圖片缺少alt文字。如果網站上的圖片沒有替代文字（alt 文字），視障使用者使用的螢幕閱讀器就無法解讀圖片的內容。這會導致使用者無法理解或錯過關鍵資訊。
• 鍵盤導航不足。許多有運動障礙的使用者依賴鍵盤導航而不是滑鼠。不支援鍵盤導航或佈局複雜的網站會讓這些使用者無法訪問。
• 色彩對比度差。文字和背景顏色對比度不足會使有視覺障礙（包括色盲）的使用者難以閱讀網站內容。這可能會使某些使用者幾乎看不到文字。
• 非描述性連結文字。在連結文字中使用 “點選此處 ”這樣含糊不清的短語，無法提供足夠的連結目的地資訊，尤其是對於脫離上下文瀏覽連結的螢幕閱讀器使用者而言。
• 音訊和視訊內容缺乏字幕或文字說明。耳聾或重聽使用者依賴於音訊和視訊內容的字幕或文字稿。如果沒有這些，他們可能會錯過關鍵資訊。
• 複雜和不一致的導航。不連貫或過於複雜的網站導航會讓人感到困惑，尤其是對有認知障礙的使用者而言。簡單、可預測和一致的導航有助於更好地理解和使用。
• 有時間限制的內容和互動。超過一定時間就會消失的內容或需要快速互動的內容可能會對有認知障礙或運動障礙的使用者造成障礙，因為他們可能需要更多的時間來閱讀或與內容互動。
• 使用專業術語或複雜語言。過於複雜的語言或行業術語對於有認知障礙的使用者或母語不是網站語言的使用者來說，可能是一個很大的障礙。

為什麼要優先考慮網站的可訪問性

據世界衛生組織（WHO）估計，全球有 15% 的人口（多達 10 億人）患有殘疾。隨著壽命的延長，殘疾率也在不斷上升，導致慢性健康狀況加劇。殘障人士理應能夠獲得與非殘障人士相同的資訊，這就是為什麼我們所有人都必須共同努力，使數字內容具有無障礙性，並努力消除網上無障礙性的障礙。

作為網站所有者，重要的是要確保您沒有排斥殘障人士，即使是在無意中。美國殘疾人權利法》是一部民權法律，禁止企業和組織基於殘疾原因進行歧視，因此，如果您的網站不是人人都能訪問，您就可能陷入法律糾紛！但是，法律合規性並不是您在設計網站時將可訪問性放在首位的唯一原因。

研究表明，更具多樣性和包容性的公司，其財務回報高於行業平均水平的可能性高達 35%。

無障礙網站設計不僅能讓殘障人士輕鬆瀏覽網站，其設計原則還能切實改善網站所有訪問者的使用者體驗。

建立一個無障礙網站並不難，也不耗時。只需採取幾個簡單的步驟，就能大大提高網站的可訪問性。這樣，您就可以在擴大受眾範圍的同時，為網路無障礙做出貢獻。您甚至可以激勵其他人也這樣做！

如何檢查網站的網路無障礙性

在介紹設計無障礙網站的技巧和步驟之前，我們最好先了解一下您的網站目前的狀況–它在無障礙標準和最佳實踐方面的表現如何，以及您可能需要通過更改或重新設計來克服哪些無障礙障礙。

檢查網站可訪問性的方法有很多種。下面我們就來探討幾種最簡單、最常用的方法。

使用線上可訪問性檢查器

檢查網站可訪問性的最快、最簡單的方法之一是使用線上可訪問性檢查器，如 WAVE Web 可訪問性評估工具 。

WAVE 是一套評估工具，您可以用它來評估您的網頁和內容，使它們更便於殘障人士訪問。WAVE 工具可檢查是否符合 WCAG 等無障礙標準，但如果您想更進一步，也可以方便人工稽覈您的內容。

要使用 WAVE，只需在“網頁地址”欄位中輸入要評估的網頁 URL，然後點選箭頭按鈕。WAVE 就會生成一份報告，顯示該網頁上的任何錯誤或潛在的可訪問性問題。您還可以為 Chrome、Firefox 和 Edge 安裝 WAVE 瀏覽器擴充套件，直接在網頁瀏覽器中測試可訪問性。

除錯誤報告外，WAVE 還會提供反饋，告訴您如何改進網頁以提高其可訪問性。例如，它可以指出哪些圖片缺少alt文字，哪些結構元素的組織方式可能會讓網站訪問者感到困惑。

安裝無障礙瀏覽器擴充套件

WAVE 並不是唯一一個可以自動檢查網站無障礙問題的瀏覽器外掛，您還可以下載並使用許多其他外掛。在 Chrome 瀏覽器和 Firefox 瀏覽器中，可訪問的富網際網路應用（ARIA）擴充套件是一個很受歡迎的選擇。

ARIA DevTools 擴充套件是一個免費的開源無障礙資源，允許使用者自定義與網頁內容互動的方式。ARIA 旨在提高網頁對殘障人士的可用性，並使網頁更易於螢幕閱讀器等輔助技術訪問。

ARIA 通過提供一系列屬性來提高網站 HTML 元素的可訪問性。例如，“aria-label”屬性可以作為以其他方式無法訪問的元素的標記，而“aria-describedby ”屬性則可用於提供解釋。

要使用 ARIA 擴充套件，請從瀏覽器的擴充套件市場安裝。在開始執行之前，您可能需要啟用它。

手動檢查常見的無障礙問題

另一種檢查無障礙問題的方法是使用手動方法。當然，這可能比使用線上工具和擴充套件程式更耗時。

不過，如果進行手動檢查，可能會比某些數字工具更徹底。另外，這種方法是免費的，所有網站所有者都可以使用。

如果您決定手動查詢可訪問性問題，您可能需要使用一份檢查表來幫助您開始並確保儘可能徹底。WebAIM 提供了一份全面的 WCAG 2 檢查表，其中包含以下條目：

• 所有人（包括殘障人士）都可以訪問所有內容。
• 所有圖片都正確標註了替代文字。
• 僅使用鍵盤即可瀏覽網站。
• 網站上的所有視訊或音訊內容都有文字說明或字幕。
• 網站沒有可能導致閱讀困難的色彩對比。
• 網站內容可由多種使用者代理（包括輔助技術）解讀。
• 內容不需要特定的輸入型別，如僅觸控或僅鍵盤，但支援其他輸入型別（如在移動裝置上使用鍵盤）。

聘請網路可訪問性專家稽覈您的網站

如果您有資源，第四個選擇是聘請專家稽覈您的網站。這通常是對網站可訪問性進行最全面審查的最佳方式，對於那些希望將可訪問性作為其線上業務核心價值的人來說，這尤其是一個不錯的選擇。

如何設計無障礙網站（完整指南）

現在到了有趣的部分：設計和構建網站，讓每個人都能輕鬆使用和瀏覽。開始網站無障礙之旅令人興奮，以下步驟將指導您完成設計過程，並幫助確保您的網站符合法律要求和技術標準，使所有使用者都能訪問。讓我們開始吧。

1. 確保網站允許鍵盤導航

鍵盤導航是網站無障礙的基石。許多使用者，尤其是有運動障礙的使用者，依靠鍵盤而不是滑鼠來瀏覽網站。確保您的網站支援鍵盤導航，就能讓更多使用者（包括依賴輔助技術的使用者）訪問網站。

最佳實踐：

• 確保網站的選項卡順序符合邏輯。這意味著當使用者按下 Tab 鍵時，焦點應按照合理的順序（通常是按照頁面的視覺佈局）在互動元素中移動。
• 當使用者使用鍵盤導航時，要有清晰的視覺指示器顯示當前哪個元素擁有焦點。這可以是邊框、顏色變化或其他明顯的風格變化。
• 在每個頁面的頂部加入“跳轉到主要內容”連結。這可以讓依賴鍵盤的使用者繞過重複的導航連結，直接訪問主要內容。
• 如果您的網站使用下拉選單，請確保它們可以使用鍵盤命令進行導航和啟用。這包括能夠展開和摺疊選單以及選擇其中的專案。
• 使用自定義鍵盤快捷方式可以提高可用性，但要注意不要與現有的瀏覽器或螢幕閱讀器快捷方式相沖突。為使用者明確記錄自定義快捷方式。
• 確保鍵盤使用者不會被網站的任何部分卡住。他們應能僅使用鍵盤瀏覽所有元素。

2. 讓內容易於觀看和聆聽

要讓有視覺和聽覺障礙的使用者也能訪問您的網站，就必須確保網站內容易於觀看和聆聽。這包括盲人、低視力者、色盲者、聾人或重聽者。

最佳做法：

• 在文字和背景之間使用高對比度的顏色組合，確保文字易於閱讀。避免使用衝突色或混合色。同時，使用易讀的字型大小和樣式。
• 使用對比度檢查器等線上工具幫助你選擇高對比度的調色盤，以實現良好的視覺可讀性。
• 確保用顏色傳達的資訊在沒有顏色的情況下也能使用，比如通過文字標籤或圖案。這對色盲使用者尤為重要。
• 允許使用者在不破壞網站佈局的情況下調整文字大小。
• 對於視障使用者，應確保任何音訊內容都清晰明瞭，節奏明快，描述性強，足以傳達所有必要的資訊。
• 使用 ARIA（可訪問的富網際網路應用）角色和地標。這可以幫助螢幕閱讀器使用者更有效地理解佈局和瀏覽內容，尤其是在複雜的網路應用程式中。

3. 提供文字替代

文字替代方案可以讓視覺和聽覺殘障人士訪問網站的非文字內容。這些替代文字提供了通過影象、視訊和音訊檔案傳達的資訊的等效文字，確保所有使用者（包括使用螢幕閱讀器或其他輔助技術的使用者）都能獲取相同的資訊。

另一個好處是，alt 文字可以幫助優化網站，使其在搜尋引擎中的可見度更高。您可以用它來加入與圖片相關的經常被搜尋的關鍵術語。

最佳實踐：

• 網站上的每張圖片都應有相應的alt文字，以準確、簡潔地描述圖片的內容或功能。該描述應與圖片向視力正常的使用者傳達的資訊或目的相同。
• 在 WordPress 中通過媒體庫為圖片新增 alt 文字。
• 為視訊提供字幕，字幕不僅要描述語音內容，還要描述其他相關聲音和非語音資訊。轉錄文字也很重要，它提供了所有音訊內容的文字版本，包括口語和其他相關聲音。
• 對於視訊，應包括敘述視覺資訊的音訊描述。這一點對於視覺內容所包含的重要資訊無法僅通過音訊傳達的內容尤為重要。
• 確保所有連結和按鈕都以文字為基礎，或有文字替代，以便螢幕閱讀器使用者清楚它們的功能。避免將影象作為傳達重要操作或連結的唯一手段。
• 對於圖表和圖形等複雜的視覺內容，應提供基於文字的摘要或說明，解釋所展示的資料或資訊。
• 表單等互動式元素應有清晰的描述性標籤。這有助於使用者瞭解每個表單欄位的用途以及如何與之互動。

4. 以適應性強的方式組織和結構化內容

以適應性強的方式組織和構建內容，有助於確保所有使用者，無論他們以何種方式訪問網站，都能以連貫、合乎邏輯的方式接收資訊。這種方法對依賴螢幕閱讀器等輔助技術的使用者和有認知障礙的使用者都有好處，因為他們可能會覺得複雜的佈局或不一致的結構令人困惑。

最佳實踐：

• 使用 HTML5 語義元素，如<header>、<footer>、<nav>、<article> 和 <section> 來清晰地組織內容。這些元素可為輔助技術提供上下文，使其能夠向使用者傳達網頁的結構和佈局。
• 使用標題（H1、H2、H3 等）對內容進行分層和邏輯結構化。確保標題具有描述性，並能清晰顯示後面的內容。
• 靈活設計網站佈局。這意味著它應能適應不同的螢幕尺寸和方向，而不會丟失資訊或功能。這對於需要放大的低視力使用者或使用移動裝置訪問網站的使用者尤為重要。
• 如果使用表格顯示資料，請確保用行和列標題正確標註。避免將表格用於佈局目的，因為這會讓螢幕閱讀器使用者感到困惑。
• 使用有序（編號）和無序（專案符號）列表對相關專案進行分組。這有助於螢幕閱讀器傳達內容的結構和組織。

5. 提供消費時基媒體的其他方式

時基媒體包括音訊和視訊內容。聾人、聽力障礙者、盲人或低視力者需要其他方式來獲取定時媒體。

最佳實踐：

• 為所有視訊內容提供封閉式字幕。字幕應準確反映有聲對話，並描述對理解內容非常重要的相關非對話音訊提示，如音樂或音效。
• 為音訊和視訊內容建立文字說明。
• 在視訊中加入音訊描述，對視訊的視覺效果進行敘述。
• 確保網站上使用的媒體播放器可以訪問。媒體播放器應可使用鍵盤導航和操作，其功能（如播放、暫停和調節音量）應清晰標註，螢幕閱讀器使用者應可理解。
• 對於關鍵的視訊內容，可以考慮提供手語翻譯。這可以是一個單獨的視訊軌道，也可以是視訊中的畫中畫顯示，提供口語內容的手語翻譯。
• 包括控制播放速度、暫停、後退或快進內容的選項。這種靈活性對有認知障礙、學習障礙或需要更多時間處理視聽資訊的使用者尤其有益。
• 從 WordPress 5.6 開始，您可以使用網路視訊文字跟蹤格式（WebVTT）功能為 WordPress 視訊新增標題和字幕。要使用該功能，只需在頁面上插入一個視訊塊，然後在水平導航選單中選擇文字軌按鈕即可。

6. 精心設計表單

許多網站都需要表單，從聯絡資訊到線上購買，表單無所不能。設計合理的表單可確保所有使用者都能輸入資訊、做出選擇，並瞭解提交過程中可能出現的任何錯誤。

最佳做法：

• 每個表單欄位都應有一個清晰的描述性標籤，並通過程式與欄位連結。這樣可以幫助螢幕閱讀器使用者瞭解所需的資訊型別。
• 當使用者出錯時，如遺漏必填欄位或輸入無效資料，應清楚地識別錯誤並用文字加以說明。這有助於使用者瞭解需要更正的內容。
• 確保表單的製表符順序符合邏輯順序，使使用者可以使用鍵盤以可預測的方式瀏覽表單欄位。
• 當使用者在表單中切換時，應該有明顯的提示，例如邊框或背景顏色的變化，表明當前哪個欄位是焦點。
• 使用欄位集和圖例對相關欄位進行分組。這對螢幕閱讀器使用者特別有幫助，因為它提供了上下文，有助於理解不同欄位之間的關聯。
• 如果您的表單包含下拉選單、覈取方塊或自定義控制元件，請確保它們完全無障礙，並且可以使用鍵盤導航和選擇。
• 必要時，為欄位提供說明或示例，尤其是那些需要特定格式資料的欄位，如日期或電話號碼。
• 如果表單有填寫時間限制，請為使用者提供延長時間的方法，因為有些使用者可能需要更多時間來閱讀和填寫表格。
• 確保表單可在不同裝置和螢幕尺寸下使用，特別是對於可能放大或使用移動裝置的使用者。
• Formidable Forms 等外掛內建了有用的輔助工具。

7. 讓訪客有足夠的時間瀏覽網站

有些網站訪問者可能閱讀速度較慢、有認知或學習障礙，或者使用輔助技術，需要更多時間來瀏覽和解釋內容。確保他們有足夠的時間閱讀、觀看和使用網站上的所有內容。

最佳實踐：

• 如果您的網站有時間限制的功能或內容（如定時測驗、會話超時表單或旋轉木馬），請為使用者提供調整、延長或禁用它們的方法。
• 對於任何移動、閃爍或滾動的內容，以及自動更新的資訊（如新聞快報），提供允許使用者暫停、停止或隱藏的控制。
• 避免在沒有使用者啟動的情況下自動更新內容，因為這會讓螢幕閱讀器使用者感到無所適從。
• 如果需要超時（如銀行網站出於安全原因），應在超時前警告使用者。這樣他們就有機會在不丟失資料的情況下延長會話時間。

8. 避免閃爍或閃動內容

避免閃爍或閃動的內容可以讓那些容易因閃爍的燈光或圖案而導致癲癇發作的使用者更容易訪問你的網站，這種情況被稱為光敏性癲癇。此外，快速閃爍的內容可能會分散使用者的注意力，甚至讓使用者感到痛苦，從而造成不愉快或無法訪問的網路體驗。

最佳做法：

• 原則上應避免在一秒鐘內閃爍超過三次的內容。這條準則是《網頁內容可訪問性指南》（WCAG）的一部分，有助於降低發作的風險。
• 如果您的網站必須包含閃爍或閃爍的內容（出於藝術或資訊方面的原因），請在顯示內容之前提供明確的警告。這可以讓對照片敏感的使用者避免接觸此類內容或做好準備。
• 注意網頁設計中的動畫和過渡效果。確保它們是微妙的，不涉及閃爍或快速移動。儘可能提供減少或關閉動畫的選項。
• 不要使用閃動內容來吸引眼球，可以考慮使用大膽的顏色、圖案或靜態圖形等替代方法，這些方法同樣有效，但不會給使用者帶來風險。
• 如有疑問，請諮詢網站可訪問性專家，他們可以檢查網站是否存在潛在問題，並提出更安全的替代方案。

9. 提供清晰的導航

清晰的導航是網路無障礙的基石。它能讓所有使用者（包括殘障使用者）在網站上輕鬆找到自己的位置。良好的導航尤其有利於殘疾使用者和依賴輔助技術的使用者。清晰、可預測的導航結構可以幫助使用者瞭解他們在網站上的位置，如何到達他們想要的目的地，以及如何返回之前訪問過的頁面。

最佳實踐：

• 保持整個網站導航佈局的一致性。一致性有助於使用者學習並記住如何瀏覽網站，減少混亂和挫敗感。
• 將相關的導航專案組合在一起。這可以通過條理清晰的選單、清晰的欄目標題或提供網站結構概覽的網站地圖來實現。
• 確保所有選單都可通過鍵盤導航和螢幕閱讀器訪問。這包括下拉選單和其他動態內容。
• 對於有多層內容的網站，應使用麵包屑路徑。這可以為使用者提供從主頁到當前位置的清晰路徑，並幫助使用者輕鬆導航回到之前的部分。
• 實施強大的搜尋功能，尤其是對於大型網站。這可以讓使用者快速查詢資訊，而無需瀏覽多個頁面。

10. 使內容清晰易懂

讓網站內容清晰易懂可以幫助有殘疾、學習困難或母語不是網站語言的訪問者。清晰、直觀的內容可確保更多受眾獲取資訊，並幫助所有使用者快速掌握預期資訊或操作。

最佳做法：

• 用通俗易懂的語言撰寫內容。避免使用複雜的句子、行話和專業術語。如果需要使用專業術語，應提供簡單的解釋或詞彙表。
• 使用標題和小標題，合理安排內容結構。這有助於使用者（尤其是使用螢幕閱讀器的使用者）理解版面佈局，更容易找到資訊。
• 保持段落和句子簡短，切中要害。這種結構使內容更容易閱讀和理解。
• 使用要點或編號列表將資訊分解成易於管理和消化的片段。這對說明或複雜資訊尤其有用。
• 保持網站佈局和設計的一致性。字型、顏色和風格的一致性有助於使用者更好地理解和瀏覽內容。
• 在適當的情況下，使用圖片、圖示或圖表來支援文字。視覺輔助工具可以幫助更清晰地傳達複雜的資訊，並使處理視覺資訊比處理文字更有效的使用者受益。
• 讓“行動號召 ”按鈕或連結清晰明瞭。使用者應該能夠理解點選它們會發生什麼。

11. 編寫有用的錯誤提示資訊

有效的錯誤資訊可以引導使用者解決他們遇到的問題，這對殘疾使用者尤為重要，因為他們可能會發現理解和糾正錯誤更具有挑戰性。清晰、翔實的錯誤資訊有助於防止使用者產生挫敗感，確保所有使用者都能成功地與網站進行互動並完成預期操作。

最佳做法：

• 錯誤資訊應明確說明問題所在。避免使用含糊不清或技術性語言，以免讓使用者感到困惑。例如，不要說“輸入無效”，而是具體說明問題所在，如“電子郵件地址格式不正確”。
• 儘可能將錯誤資訊與建議的解決方案或接下來的步驟配對。例如，如果必填欄位為空，錯誤資訊應提示使用者填寫該欄位。
• 在視覺上突出顯示發生錯誤的欄位或區域。這可以通過改變邊框顏色、新增圖示或使用文字樣式來實現。這對有視覺障礙的使用者特別有幫助。
• 在錯誤資訊中使用友好、非技術性的語氣。這種方法可以減少使用者的挫敗感和焦慮感，尤其是對於那些在瀏覽網站時已經很吃力的使用者。
• 將錯誤資訊放置在靠近出錯點的位置，最好是在相關表單欄位的上方或旁邊。這樣可以讓使用者（包括使用螢幕閱讀器的使用者）更容易找到並理解錯誤。
• 確保螢幕閱讀器使用者可以訪問錯誤資訊和指示器。使用 ARIA 角色和屬性來傳達錯誤的存在和性質。
• 在整個網站中使用一致的方法來識別和顯示錯誤。一致性有助於使用者理解和預測錯誤的傳達方式。
• 對於複雜或重複出現的錯誤，提供額外的幫助選項，如客戶支援聯絡資訊。

12. 編寫可解析的 HTML

最後，編寫可被網路瀏覽器和輔助技術解析或正確處理的 HTML。結構良好、有效的 HTML 程式碼可以讓螢幕閱讀器和其他輔助工具準確解釋並向使用者傳達內容。這種做法對於建立一個具有包容性且人人都能瀏覽的網路環境至關重要。

最佳實踐：

• 堅持使用標準 HTML 標記，避免使用專有標記或屬性。這樣可以確保所有瀏覽器和輔助技術都能普遍理解您的 HTML 程式碼。
• 合理安排 HTML 文件的結構。使用合理的 HTML 元素順序，並確保標題（<h1> 到 <h6>）、段落（<p>）、列表（<ul>,<ol>,<li>)）等元素以及其他標準元素的使用得當。
• 使用 HTML5 語義元素，如（header>、<footer> 、<article> 、<section> 和<nav>）來定義網頁結構。
• 使用 HTML 驗證器檢查程式碼是否有錯誤或不一致之處。有效的 HTML 更容易被瀏覽器和輔助技術正確解釋。
• 將內容、樣式和行為分開。樣式使用外部 CSS，行為使用外部 JavaScript 檔案，而不是內聯樣式或指令碼。這種分離有助於保持 HTML 的簡潔、可讀性和可訪問性。
• 使用有意義的標題標籤和元描述來傳達頁面的目的。
• 使用 <html> 標籤中的 lang 屬性宣告頁面的語言。這有助於螢幕閱讀器正確發音。

小結

網路可訪問性的不斷改進值得慶祝。畢竟，如果您執行的是 WordPress 網站，您就想讓儘可能多的人訪問，包括殘障人士。幸運的是，設計一個無障礙網站完全在您的能力範圍之內。

在這篇文章中，我們討論了許多策略，您可以用來設計一個更便於所有訪客瀏覽和使用的網站。例如，您可以確保您的網站對鍵盤導航友好，以便與輔助技術相容。您還可以為所有視覺媒體使用alt文字和視訊轉錄。最重要的是，當您遵循我們的指南時，您將支援更公平的網路體驗，確保您的網站可供儘可能多的人使用。