只要花 60 秒瞭解「無障礙網站」概念
Your Website + Accessibility = BFF —— Jenn Lukas
前言
「網站」是一種資訊傳播的方式,我們製作網站最普遍的目的是為了將「資訊」傳播出去。比如說現今大多數公司會建置自己的官方網站,去傳達公司理念、服務項目、聯絡方式…等等,這些都在資訊的涵蓋範圍。
那你有聽過無障礙網站嗎?
無障礙網站又稱為可訪問的網站,難道還有不可訪問的網站嗎?
無障礙網站
無障礙網站又稱為 Web Accessibility
常以關鍵字 a11y
來代表無障礙技術,它是 Accessibility 的縮寫,代表網頁可訪問性,許多其他繁中翻譯會譯為可親性、可及性。這系列文章將以「可訪問性」代表 Accessibility、「無障礙」作為 Web Accessibility 的代稱。
縮寫方式
= A(ccessibilit)y
= 以 A 為開頭,以 Y 結尾, A 與 Y 之間總共有 11 個字元!
發音
可以唸作 A-one-one-Y 或是 A-eleven-Y,在業界也有人會唸作 ally 或是 alley 的發音。
其餘還有很多同樣形式的縮寫:如 g11n(globalization)、i18n(Internationalization)L10n(Localization)、p13n(personalization)、k8s(Kubernetes)等。
用愛開發,實踐「無障礙」
無論使用者是否有任何機能的低下、無論使用者使用何種方式與何種裝置瀏覽,無障礙的實踐將確保網站的內容以較多元、彈性的方式呈現,能夠提供給「所有人」瀏覽,有助於資訊能更廣泛地傳遞到更多人手中,拓展對不同能力的人的適應性。
重要性,你怎麼看?
不可訪問的網站其實真的很多。
訪問性通常不是我們在設計、建置網站時的第一件事情,在某些問題出現以前,我們通常不會考量到隱形的需求。舉例一個情境:當我們處於產品開發週期的測試階段,某位使用者無法閱讀螢幕的文字,去瞭解才發現世界上男性中有 8% 的色盲。(從 WHO 了解視力障礙數據)
有些國家法律規定政府、教育機構、企業網站要符合無障礙的規範,以保障人權,訪問性的問題會在產品生命週期中蔓延,也會引發訴訟的問題。而且無障礙問題通常會出現在產品進入後期或是完成後,這時要從零導入「無障礙」實踐恐怕需要負擔更高額的成本。
再繼續往下之前,讓我們先來想想「障礙」的定義到底是什麼。
來思考「障礙」的定義
一個人有多種不同機能障礙的可能,「障礙(Disabled)」是一種相對的且會變動的狀態,也是一個事實的描述,是你的能力在所處「環境」下是否有辦法互動發揮作用而定。
在中文翻譯上,「無障礙」這個詞彙挺容易讓人直接聯想成:「喔!我們要做無障礙網站,那就是為了身心障礙人士瀏覽專用而設計嗎?」
無障礙網頁設計所設定的受惠者是「所有人」,與通用設計的理念相符,剛好其中有些特別的使用族群需要使用科技輔助工具(AT,全名為 Assistive Technology 如 NVDA、JAWS)、輔助功能(如 iOS 的 VoiceOver、Android 的 TalkBack)來瀏覽網頁,能力一般的人有時也有想要縮放網頁內容的需求,因此網頁在設計及開發時,設計上再細心一點,實作上注意細節就能增加網站的無障礙。讓我們用同理心、包容心和愛,盡可能達到「讓所有人瀏覽網站時都能享有獲得相同的資訊的權利」這個目標。
以人類的機能來區分障礙類型
-
物理,肢體上的障礙
開發基本原則:大多數的肢體障礙者都可以透過鍵盤瀏覽網站,所以開發時專注鍵盤的可訪問性。
- 創傷:
- 肢體損壞
- 脊髓損傷
- 疾病與先天性疾病:
- 腦癱
- 關節炎
- 帕金森氏症
- 創傷:
-
認知,學習和神經系統的障礙
- 記憶力不佳
- 解決問題的能力
- 注意力不集中:自閉症、過動症(ADHD)
- 閱讀與言語理解困難
- 癲癇
- 動暈症(如暈車、暈船)
-
聽覺
開發基本原則:影片提供字幕或是手語翻譯、專注於螢幕閱讀器的可訪問性。
- 輕度:無法聽到 30 分貝以下的聲音。
- 中度:無法聽到 50 分貝以下的聲音。
- 重度:無法聽到 80 分貝以下的聲音。主要透過手語溝通。
- 嚴重:無法聽到 95 分貝以下的聲音。主要透過手語溝通。
-
視覺
開發基本原則:提升顏色對比度、填寫替代文字、減少顏文字的使用、確保超連結文字的提示性、超連結的路徑不要寫無意義的 JavaScript(
href="javascript: void;"
)、勿僅靠顏色作為傳達重要訊息的唯一方式、資訊結構順序設計、文字不要壓在圖上…等。- 色盲
- 色弱
- 失明
- 近視
- 青光眼
- 白化症
- 年邁的老人
還有一些是屬於暫時性或環境的障礙,比如網路速度不佳的問題、我們因為車禍導致手臂受傷而暫時無法使用滑鼠。
現實生活有哪些透過輔助技術消彌障礙的情境?
- 近視配戴眼鏡或隱形眼鏡
- 長者配戴老花眼鏡
- 地面止滑設計防止行人跌倒
- 編輯器使用程式碼自動完成工具
… 多到不勝枚舉,因為習慣有輔助科技及輔助技術的協助,讓我們忽略自己的生活情境,也常需要透過外力協助去解決我們的問題。
體驗一下!讓開發者也有「色盲」
這邊舉一個小例子,讓各位感受一下色盲在觀看網頁時的感覺:
import React from 'react';
import MenuItem from '../shared/menu';
import ItemMenu from '../shared/menu';
const App = () => (
<>
<MenuItem title="Home" />
<MenuItem title="About" />
<ItemMenu title="FAQ" />
<MenuItem title="Gallery" />
<ItemMenu title="Signup" />
<MenuItem title="Contact Us" />
</>
);
export default App;
色盲的人永遠也不知道正常的人眼中看到的世界,就像正常人也永遠無法看到色盲人眼中的世界。若把「色盲瀏覽網頁」以「開發者觀看程式碼」來比喻的話就長上面這個樣子,原來是這麼難以閱讀。
開發無障礙網頁的好處
很多企業都開始重視起無障礙網站,因為實踐無障礙網站的過程,還可以達成以下優點
- 提高 SEO 搜尋引擎排名(看看這篇的內容)
- 吸引更廣泛的受眾、拓展市場機會
- 展示社會責任
- 提高易用性(Usability)
- 編寫更清晰的程式碼
- 降低產品成本:避免日後產品迭代時才需要從零導入無障礙的窘境
- 協助網路速度慢的使用者訪問
看完文章後,對於無障礙網站的觀念是不是有更多的認識跟釐清了呢?
就跟著接下來的篇幅一起實踐可訪問的網站吧!
Reference
- Cognitve - WebAIM
- Visual - WebAIM
- Auditory - WebAIM
- Assistive - WebAIM
- Seizure - WebAIM
- React Rally 2019 @YouTube
- What is Web Accessibility in 60 seconds! - Google Women Techmaker
- Blindness and vision impairment - WTO
- 設計師 YR Cheng 聊聊 Accessibility
- Wikipedia - Accessibility
- Myth: Accessibility is ‘blind people’ - The A11Y Project
留言