如何提高網站的可訪問性？

banq發表於2018-10-30
網站

這篇文章的目的是：
  1. 為什麼可訪問性很重要
  2. 使網站可訪問
  3. 測試可訪問性

關於可訪問性的錯誤觀念
可訪問性影響所有使用者，而不僅僅是那些有特定障礙的使用者。接受這一點意味著實現可訪問性就是建立壓力案例。壓力案例指的是影響任何一個人的任何醫療或任何情境狀況，無論是什麼場景時間點。一些常見的壓力案例原因是：

  • 老年
  • 慢性疾病如關節炎
  • 在外面有一個太陽眩光
  • 藥物或睡眠不足造成的認知障礙
  • 需要使用具有不同裝置的站點
  • 慢的WiFi
  • 地板有什麼東西跑過

其中只有一些僅適用於那些有特殊殘疾的人。這很重要，因為它將您的可訪問性概念從“因為只有一些人有X殘疾並不重要”轉變為“我們需要覆蓋所有使用者的壓力情況”。這有助於其他人更好地瞭解為什麼可訪問性如此重要。這也是為什麼在與其他人談論它時，最好稱之為“壓力案例”。

更多關於輔助功能的引數
如果上述內容不起作用，那麼從業務角度來看：

  • 輔助功能擴充套件了App的潛在受眾，增加了利潤和吸引力。
  • 可訪問性減少了需要幫助的客戶援助資源，可以在其他地方再投資。
  • 輔助功能可以保護您免受潛在的法律責任（至少在美國，作為美國殘疾人法案的一部分）。只要看看全國盲人聯合會訴Target公司的法庭案件, 該案例幫助確立了法律要求無障礙的廣泛使用的網站的先例。

這些論點很適合說服你，表明無障礙對公司有利，無論是賺錢還是省錢。

Web可訪問性的四個關鍵
最廣泛接受的可訪問性規則是Web內容和可訪問性指南2.0，或簡稱WCAG 2.0。它們是任何技術介面的通用規則，這也是它們如此受歡迎的原因之一。他們在定義可訪問性方面也很全面。
WCAG 2.0的四個主要原則是首字母縮略詞POUR - Perceivable，Operable，Understandable和Robust：

1. Perceivable可感知
簡單地說，可感知意味著不同的壓力情況不會阻止使用者閱讀，觀看或收聽您的內容。

  • 排版：可感知的內容必須是可讀的！更易讀的簡單方法是給文字和背景顏色足夠的對比度，以便視力不好或光線不好的人仍然可以閱讀它。出於同樣的原因，排版也應該傾向於更大的尺寸，並且易於調整尺寸。甚至可能是因為很多人試圖一次閱讀一個螢幕，不能太近，需要更大版面才可以一次閱讀更多文章。
  • 圖片：可感知影像最重要的是alt文字。這樣盲人或無法透過慢的無線網路載入影像的人仍然會對影像的基本概念有所瞭解。也永遠不應該將重要文字作為影像的一部分。
  • 音訊和影片：音訊和影片內容都會帶來更多壓力。有聽力障礙的人，在非常大聲或安靜的地方，或只是喜歡閱讀，不能或不會聽。影片指令碼是最簡單的解決方案，但字幕也要適合。


2.Operable可操作
這意味著不同的壓力情況不會阻止使用者訪問所有頁面和阻止他們填寫表單。

介面和導航：
 使用者應該能夠與他們需要的東西進行互動，例如：

  • 連結到其他頁面
  • 表格填寫
  • 要點選的按鈕
  • 設定在門口的陷阱
  • 在網站上移動或傳送/接收資訊的任何其他內容。

鍵盤導航：鍵盤導航涵蓋了許多壓力情況 - 螢幕閱讀器，搖晃的運動控制，與頭暈和肌肉控制相關的醫療問題，不可靠的滑鼠墊，或僅僅是個人偏好。在文字編輯器中，您可依靠鍵盤快捷鍵快速工作，從而進行Web瀏覽。

漸進式增強：有助於處理壓力情況，即使某些或所有樣式都失敗，事情仍應可操作。在不支援較新CSS功能的舊瀏覽器上，表單不應該不可用 - 它們看起來更簡單或更粗糙，但仍然可以工作。漸進增強有助於從堅如磐石的可操作基礎開始，並在可能的情況下新增可用功能。您無法控制使用者的瀏覽器，您只能為他們的選擇做好準備。

3.Understandable可理解
可理解性比其他要點更容易理解：壓力案例不會阻止使用者理解網站的預期含義。這有助於涵蓋與使用者如何解釋您網站的訊息相關的認知壓力案例。

簡單明瞭：正如喬治卡林經常提出的那樣，最好的語言是簡單，誠實和直接的。用誇大術語寫作會讓使用者厭惡，雖然看起來令人印象深刻。直截了當的寫作是可理解的，可以幫助使用者建立對您網站的信任。否則他們不太可能注意或買你賣的東西。

避免假設：許多網站元素都假設使用者已經理解了它們的含義。例如，假設“星形”圖示表示喜歡。這對你來說很明顯，但你永遠不會知道它對使用者有多麼明顯。這可能不是由於認知壓力案例，文化壓力案例或僅僅是網路新手。永遠不要依賴隱含的象徵意義。新增標題或副標題可以快速，輕鬆，無限地訪問，以確保它們被理解。如果設計師畏縮，不要害怕堅持自己的立場。

4.Robust健壯
意味著壓力情況不會阻止使用者從各種裝置訪問內容。

語義標記:這是製作可作為整體訪問的健壯內容的最佳方式。對於網路，這意味著：

  • 語義HTML標記
  • 正確使用aria標籤
  • 邏輯上排序DOM元素
  • 伺服器端呈現以確保正確傳遞


如果CSS無法載入，這使得內容對鍵盤導航，螢幕閱讀器甚至是可用的介面都很友好，還有更多！語義，可訪問的標記使您可以訪問可訪問的網站。

響應式設計
考慮裝置種類和螢幕尺寸，例如：
  • 智慧手錶（可能）
  • 手機
  • 平板
  • 大型外接顯示器
  • 投影儀螢幕
  • 電影螢幕

與其他型別相比，螢幕尺寸可能會影響Web應用程式，尤其是隨著漸進式Web應用程式的興起。雖然沒有任何網站可以在如此多的尺寸上獲得相同的體驗或者畫素逐個相同，但它們仍然可以使用且功能齊全。

測試可訪問性
使用一個或多個工具自動測試：

  • 顏色對比
  • 語義HTML
  • 不需要的div元素
  • 翻譯文字
  • ARIA和其他可訪問性屬性，如標題

自動測試涵蓋了至少75％的可訪問性問題。但只有一個條件：必須儘早在專案中新增可訪問性測試。

輔助功能測試有助於衡量與壓力情況相關的因素，但不能測量實際壓力情況。有些可以模擬基本操作，例如點選元素，但這還不夠。在撰寫本文時，最好的方法是自己重新建立壓力案例。一些開始的建議是：
  • 使用鍵盤導航
  • 使用鍵盤和螢幕閱讀器導航
  • 使用手機
  • 在強烈的陽光下使用手機
  • 減慢您的網際網路連線速度
  • 打破一些或全部CSS
  • 讓不熟悉網站的人瀏覽並執行基本任務
  • 使用灰度濾色鏡（用於色盲）
  • 只用一隻手
  • 在握手時使用，以模擬關節炎或肌肉疼痛
  • 疲倦（或醉酒）時使用或模擬認知障礙
  • 在街上奔跑的同時使用，被追逐報復的自由怪物追趕

建議是製作一份不同壓力情況的清單，並儘可能多地涵蓋從最重要到最不重要的情況。這樣，如果您無法重新建立它們，那麼至少可以獲得影響最多使用者的那些。

永遠不要忘記無障礙
可訪問性與資料庫管理，應用程式架構，資料安全性或遠端鎮靜劑槍一樣重要 - 如果沒有它們，它們很快就會分崩離析，可能會火上澆油。
可悲的是，你的早期教育和稀缺的大學課程都沒有充分關注它。因此，您需要自己繼續研究可訪問性方法，為其提供案例，及早將其提交給應用程式，對其進行測試以及與他人共享該資訊。

 

相關文章