WordPress主題應該生成每個人都可以使用的頁面，包括那些看不到或使用鼠標的頁面。默認WordPress主題以相當方便的方式生成內容，但作為主題開發人員，您需要在自己的主題中維護這些可訪問性標準。雖然網頁可訪問性可能是一個復雜的問題，但它只歸結為四個原則 - 內容必須是： - 感覺到 內容必須適用于所有人 - 無論使用什么用戶代理或用戶感覺不到。 - 可操作 用戶必須能夠有效地移動和操作最終的站點，而不管他們是否使用鼠標。 - 可以理解 內容應以支持理解的方式呈現，包括支持為屏幕閱讀器用戶構建網站的心理模型。同樣地，網站的操作（導航菜單，鏈接，表單等）應該很容易理解。構建一個包含已知用戶行為（如主要內容區域中的下劃線鏈接）的主題有助于此方面。 - 強大的 在廣泛的用戶代理中，內容必須同樣可用。禁用的用戶可以使用一系列硬件和軟件解決方案（通常稱為“輔助技術”）來允許他們訪問網絡，包括屏幕閱讀和語音識別軟件;盲文閱讀器和開關（單輸入設備）。 考慮到這四個原則設計的主題應有助于創建一個可訪問的網站。 ## 標題 這不應該需要說明，但標題不僅僅是大而大膽的文字。它們是將內容分解為邏輯子部分的重要方式，并可能被屏幕閱讀器用戶依賴。 JAWS屏幕閱讀器（例如）可以自動創建任何給定頁面的標題列表。這允許其用戶以類似的方式“掃描”頁面內容，使得目標人員可以快速向下滾動頁面。 因此，重要的是，標題標簽在邏輯上使用，而不是用于任何表示或搜索引擎優化（SEO）效果。包含二十個H1標題的頁面可能會產生良好的，理論上的SEO，但它幾乎破壞了標題標簽的實際使用 - 將復雜的頁面分解成子部分。 顯然，使用標題標記會因模板而異，但是在構建主題文件時，請盡量保持標題的預期用途。檢查您的標題結構的一種方法是使用Firefox的Web Developer工具欄的“信息”菜單下的“查看文檔大綱”工具來檢查頁面。 ## 圖片 如果可能，應使用CSS包含裝飾圖像。 將圖像添加到模板標記中的位置，確保它們包含適當的alt屬性。 主題中的裝飾圖像可能包括： - 與標題文字一起使用的橫幅或標題圖像 - 伴隨導航文字鏈接的圖像 主題中的非裝飾性圖像可能包括： - 替換標題文字的橫幅或標題圖片 - 用于代替導航文本的圖像 - Alt文字 - 裝飾圖像（null alt） - 非裝飾圖像（適當的alt - 至少有1個示例） 要測試您的模板標記中的圖像是信息豐富的還是純粹的裝飾，請使用簡單的替代文本決策樹來檢查圖像是否正確使用alt屬性。 ## 跳過鏈接 跳過鏈接提供了一種機制，使用戶可以在輸入任何給定的頁面時直接導航到內容或導航。 例如，當生成的頁面標記中的內容是最上面的，菜單標記低于頁面時，跳過鏈接可能允許用戶“跳到導航”。 在主導航菜單在頁面標記中最上方的情況下，將使用“跳到內容”鏈接。 在具有多個菜單和內容區域的設計中，可以使用多個跳過鏈接 - 例如： - 跳到主導航欄 - 跳到二級導航 - 跳到頁腳 這些鏈接可能最初使用適當的CSS技術放置在屏幕之外，但應保持屏幕閱讀器用戶可用，并可在視線鍵盤導航儀的焦點上可見。 # Links ##鏈接文本 鏈接文本應描述它鏈接到的資源 - 即使文本從上下文中讀出。 一些輔助軟件掃描頁面以獲取鏈接，并將其作為簡單列表呈現給用戶。 在這些情況下，所有鏈接都將從上下文中讀出。 所以鏈接中使用的文本很重要。 不應該將鏈接用作鏈接。 避免重復的非上下文文本字符串，如多個“閱讀更多”鏈接。 使用像： ``` <?php the_content( the_title('', '', false) . __('Continue reading', 'theme_text_domain') ); ?> ``` 或者，如果您在the_content（）之外生成鏈接，請嘗試以下操作： ``` <?php printf( __('%1$s%2$s%3$s - read more', 'theme_text_domain'), '<span>', get_the_title(), '</span>');?> ``` >[danger] 請注意，在每種情況下，鏈接的唯一部分（即帖子標題）正在呈現。 這將進一步增強在鏈接被讀取的情況下的可訪問性。 然而，只要隱藏方法將文本提供給屏幕閱讀器（例如使用絕對定位或CSS文本縮進屬性）將其移離屏幕，則可以將文章標題隱藏在“閱讀更多”鏈接中 。 事實上，這種方法可能會對其他用戶群體帶來積極的好處，通過減少可見的屏幕雜亂。 ## 鏈接突出顯示 除Opera之外，大多數現代瀏覽器中的默認焦點都顯得非常無用。 這意味著一旦看到的鍵盤導航器就可以快速地變成“丟失”，因為它們不能很容易地區分哪個鏈接具有當前焦點。 提供良好：重點和：主動鏈接突出顯示（在導航菜單和其他地方）是一個非常簡單的解決方案。 在“投資回報率”方面，它極大地提高了視力鍵盤導航，而您的努力卻極少。 這也很容易測試。 只需將鼠標放在一邊，然后嘗試挑選主題中的頁面。 如果你容易迷路，別人也會迷路。 嘗試復制您當前的：hover造型，看看是否有幫助。 ## Link 下劃線 一般來說，如果鏈接在導航菜單之外，應該加下劃線。 單獨使用顏色來區分鏈接是不夠的，因為每個人都不能察覺顏色。 下劃線鏈接意味著用戶不必“鼠標擦洗”一頁或播放“猜測哪個文本是鏈接”。 還要考慮刪除下劃線作為您的懸停/主動/聚焦造型的一部分，以確保您不依賴于顏色。 ## Form 標記 一旦遇到`<form>`標簽，屏幕閱讀器軟件就可以自動地從讀取模式切換到交互式的表單模式。在這種形式模式中，軟件可能不會渲染與表單控件沒有明確關聯的文本，因此任何使用普通的`<p> </ p>`標簽的文本都可能會被忽略。為了提取所有重要信息，屏幕閱讀器用戶可能需要在表單中進行兩次通過，以提取所有視覺信息 - 一次在表單模式中，然后再次以閱讀模式。這是一個重要的可及性障礙。 因此，所有形式（包括主題的注釋格式）都應確保`<form> </ form>`標簽中的所有內容都通過`<label>`標簽，其屬性和id屬性在相關的輸入標簽內。避免在表單塊中使用純文本（例如.inside`<p> </ p>`標簽）。 到目前為止，在將多個標簽與單個表單控件相關聯時，沒有報告任何問題，因此，如果需要，可以使用“多標簽”方法。 ## 表格提交 提交后的回復（包括任何錯誤消息）應始終是可察覺的。 如果可能，應在提交后頁面的頂部生成錯誤消息，以便用戶立即意識到任何問題。 讀取上下文時，錯誤消息也應該是有意義的。 ## 單輸入表單 僅具有單個輸入（例如標準搜索表單）的表單可以將關聯的輸入標簽放置在屏幕之外，以確保標簽文本可用于屏幕閱讀器用戶。 ## 標題屬性 不要依靠title屬性來傳達信息。 該屬性可能不適用于所有用戶（例如，語音識別（VR）軟件用戶）。 如果信息足夠重要，可以添加為清晰的文本，以便每個人都可以看到它。 ## 可讀性 有時，您可以做的最簡單的事情是創建一個更易讀的頁面。 從屏幕讀取比閱讀打印頁面要困難得多。 擁擠的文字，大量的圖片和太多的信息使得頁面很難閱讀。 一些通用的設計技巧包括： - 白色空間是你的朋友。 將其用作減少分心的工具。 - CSS line-height屬性可以增加段落文本的可讀性。 - CSS letter-spacing屬性可以增加標題和較大文本的可讀性。 - 將導航元素定位在邏輯位置，并且不允許它們侵入頁面的主要內容區域。 - 確保所有字體都足夠大，以便可讀取。 - 如果您使用自定義字體，請將其嵌入到主題中，這樣您就不會依賴第三方網站進行字體傳送。 如果您真的需要第三方網站的字體，請檢查文本是否仍然可讀，如果字體不可用。 ## 顏色 全頻譜色盲模擬大約有10％的互聯網用戶在看到顏色，特別是那些患有色盲癥的患者中有問題。 最常見的色盲形式影響紅/綠光譜。 受影響的用戶可以將紅色，橙色，黃色和綠色感知為單色，其余顏色被感知為藍色，逐漸變為紫色。 在罕見形式的條件下，藍色和粉紅色可能占主導地位，或者患者可能無法察覺任何顏色 - 所有顏色都減少到灰色陰影。 只要有可能，使用色盲模擬器檢查您的設計調色板，避免單獨使用顏色來區分重要元素。 ## 對比 具有視力障礙的游客可能喜歡較高的對比度頁面，而閱讀困難者可能需要較低的對比度。 盡量達到合理平衡，避免極端。 請記住，當它們包含文本或用于代替文本時，對比度級別也適用于圖像。 只要有可能，使用顏色對比工具來查看您的主題中的前景/背景對比度。 您應該達到的最小對比度是4.5:1。 但是，請盡量避免對比度很高，因為這些可能會對使用屏幕放大鏡的人造成像素化問題。 ## jQuery & JavaScript 您仍然可以在可訪問的主題中使用jQuery。 只是不要依賴它來做任何主要的功能。 通過瀏覽主題的輸出進行測試，同時在瀏覽器中禁用JavaScript。 網站是否仍然有效？ 在實現jQuery幻燈片等時，請檢查它們是否可以由鍵盤單獨導航。 使用ARIA確實在未來的發展方面提供了一些好處，但是再次不應該依賴于當前時間。 還注意到，使用ARIA屬性將導致標記驗證失敗，但使用ARIA比瞄準100％驗證更有價值。 在所有與腳本相關的事情中，旨在逐步增強和優雅的退化。 ## 驗證 驗證你的主題的標記和CSS。 驗證仍然是確保您的主題頁面在整個Web軟件范圍內顯示出最佳優勢的最佳方式。 大多數人會通過一個網站來描述“作者 - >查看器”的通信，但實際上它實際上是“作者 - >機器（服務器） - >機器（瀏覽器） - >查看器”。 由于其核心是機器機器通信，所以遵循相關規范（盡可能地）最大化有效的通信是有意義的 - 無論使用最終用戶代理來查看站點。 也就是說，驗證解析器只是那個愚蠢的軟件。 例如，ARIA將導致驗證失敗，但仍然是創建可訪問主題的最佳方式。 總是用最好的判斷力，如有疑問，請問... ## 輔助功能測試工具 這里的一個警告字。 與使用嚴格二進制“右/錯”方法運行的標記和CSS驗證器不同，可訪問性驗證器必須嘗試并審核復雜場景。 因此，他們的報告可能包括假陽性和/或陰性。 再次，不要害怕在這些情況下使用你最好的判斷或問問。 有很多與輔助功能相關的資源（包括論壇）可以幫助。 ## 跨瀏覽器測試 一切手段，在您首選的瀏覽器中開發您的主題，但請記住檢查其在當前版本的Internet Explorer，Firefox，Chrome，Opera和Safari中的輸出。那些使用Mac內置屏幕閱讀器VoiceOver的人可能沒有選擇使用除Safari以外的任何東西。語音識別軟件Dragon Naturally Speaking的用戶可能會依靠Internet Explorer來有效地瀏覽網頁。由于其眾多內置的輔助功能，Opera是殘疾人用戶中受歡迎的瀏覽器選擇。 在大多數情況下，殘疾用戶完全有能力優化他們的硬件和軟件以滿足他們的具體需求。您的工作 - 作為主題開發人員，是確保在一系列現代網絡瀏覽器上查看時，頁面內容不會被加擾，隱藏或丟失。顯然，并不是所有的瀏覽器都會以完全相同的方式顯示一個給定的頁面，但很少有一個可訪問性的問題。然而，大多數現代瀏覽器可以以有效和令人愉快的方式顯示有效的頁面。不要瞄準像素完美。這樣瘋狂！相反的目的是在每個測試瀏覽器中有吸引力，有效，可導航的網站。 ## 產生新的Windows或Tabs 產生新的窗口打破瀏覽器的“后退”按鈕，留下一些瞄準的鍵盤導航員擱淺，沒有任何返回原始頁面的方法。 因此，請避免鏈接和其他打開新窗口或選項卡的元素。 如果真的，真的，必須產生一個新的窗口或選項卡，以明文形式發出警告（最好是鏈接或控件文本的一部分），以便用戶做出明智的選擇。 ## 自動播放和動畫 如果有可能，避免使用動畫內容。 1997年，日本電視上的卡通將700多名兒童帶到醫院，其中包括約500人緝獲（引證）。未經用戶明確許可，不得播放任何聲音。 自動播放適用于： - 聲音 - 為屏幕閱讀器用戶創造問題，他們可能會發現其軟件的輸出被網站的音頻淹沒。 - 動畫（Flash或.gif圖像） - 可能會在某些情況下觸發癲癇發作。 - 幻燈片 - 可能會為屏幕閱讀器用戶（誰呈現不斷變化的內容）和瞄準的鍵盤導航器（誰可能無法移動通過幻燈片）創建問題。 - 其他特殊效果 - 已知會引起癲癇發作的墜雪等影響。 如果您絕對必須具有（1）自動啟動的移動或音頻內容，（2）持續超過5秒，并且（3）與其他內容并行呈現，請確保有一個易于操作的機制可暫停，停止，或隱藏它。還要確保視覺動畫在任何一秒鐘內不會閃爍三次以上。 ## Tabindexing 在任何情況下，都應避免tabindex屬性（在特定情況下除負號tabindex之外）。 作為主題開發者，您不是確定任何一個人想要移動到下一個網站的最佳人選。 只有用戶可以做出決定，所以不要試圖劫持他們的瀏覽器。 只要一個頁面內的自然標簽順序是合乎邏輯的，并且可以很容易地感知到，大多數用戶完全有能力整理自己的導航需求 - 非常感謝。 ## 訪問鍵 再次 - 理論上的一個好主意 - 但實際上，實施時往往是一個完整的災難。 除了用戶沒有關于哪些快捷方式在網站上做什么的信息外，使用除數字鍵之外的任何東西都可能會在用戶自己的瀏覽軟件中劫持快捷鍵。 ## 使WordPress可訪問 使WordPress可訪問是WordPress無障礙組的官方博客，致力于改進核心WordPress和相關項目的可訪問性。 我們的目標是為WordPress核心，主題和插件開發人員提供可訪問性建議，反饋和幫助。 任何人都可以加入討論。 您還可以通過電子郵件或通過訂閱Feed發表帖子和評論來關注討論。 如果您在更正式的基礎上加入我們，我們也會非常高興。 # 資源 ## General - W3C Web Accessibility Initiative ‘How To Meet WCAG2.0’ Quick Reference - Make WordPress Accessible - Accessites.org — general articles on web accessible design. - Accessify Forum - Evaluation, Repair, and Transformation Tools for Web Content Accessibility ## 對比度和顏色測試 - Vischeck — Online color blindness simulator - Contrast Analyser for Windows and Mac — free desktop tool with color blindness simulators. - Sim Daltonism — a color blindness simulator for Mac OS X. - Alternative Color Contrast Analyzer — provides a warning for high contrasts. ## Toolbars - WAVE — Firefox accessibility evaluation tool. - Firefox Accessibility Extension — check the use of structural markup in a page. - Web Developer Toolbar for Firefox — adds various web developer tools to the browser.