首頁 部落格 淺談無障礙網頁設計2.0
Ryan
Jan 11, 2019
讓公司平均年齡上漲的宅男,經營過動漫社團、當過電玩雜誌特約作者。 興趣是電競與科技,關注新趨勢購物,尤其是冷門商品、或尚未上市的群眾募資商品。 網路行銷一做就是十幾年,認為這個業界需要更開放交流,才能成長與突破。

淺談無障礙網頁設計2.0

  • 協助視障者、肢障者的網頁設計技術
  • 無障礙網站設計規範由國家通訊傳播委員會NCC制定
  • 無障礙網站設計對於網站品質與SEO提升有一定幫助
     

無障礙網頁設計(Web Accessibility)是運用網頁設計的技術,減少身心障礙人士使用網站的不便性,使任何族群的用戶,都能正確使用網站,減少資訊的落差,全球資訊網協會'W3C相當重視無障礙的推廣,也制定了指南提供給設計師參考使用。

然而許多網頁設計師會將精神投注在版型設計開發,較少涉及無障礙網頁設計。不過今天與大家分享的主因是告訴大家,其實無障礙網頁設計並沒有想像的遙遠,也與搜尋引擎優化(SEO)、UI/UX的設計也有很大的關聯。

 

千禧年間推出的第一代標準

首先回顧一下第一代的無障礙網頁設計,頒布時間是1999年(民國88年),當年網頁設計的環境已經十分的蓬勃,許多企業與單位積極成立網站,甚至連國中小學也有網頁設計教學,但技術百家爭鳴,因此出現許多網站設計先天的缺陷。

最常見的問題是設計者為了使用最新的多媒體技術,導致網頁的插件(Plugin)無止盡的安裝,網站難以正常執行所有結果;還有瀏覽器版本不同,例如Windows XP內建IE6瀏覽器的毛病叢生,但當時Windows的IE市佔率過大,網頁設計師不得不針對IE6的問題除錯,又間接的導致更多設計錯誤。

好在陣痛的過程終會過去,智慧手機與Windows 10讓這段設計黑暗期走向歷史,但也留下了很多重要的資產。以今天的標準來看「第一代」無障礙網頁設計或許有一點老舊,但在標準的制訂上留下了許多經典,例如禁止使用閃爍(Blink)的文字,以及跑馬燈(marquee)的方式呈現訊息,以往這些網頁設計技術十分炫技也很常見,但卻十分不利於一般人閱讀訊息,更別說視障者、身心障礙者,所幸上述技術已經鮮少有人使用了。

今天,第一代的無障礙網頁設計規範已經廢除,但仍放在網站上供人參考,有興趣的人可以去「考古」觀摩一下。

 

無障礙網頁設計2.0的概念

2.0版本的無障礙網頁設計標準上線,是這兩年的事情。新規範沿用了許多先前1.0的內容,除了剛剛說的禁用閃爍(Blink)與跑馬燈(marquee)外,像是1.0版本就相當強調的圖片/影片的內容,需要有額外的媒體輔助說明,以利於視障者判斷網站內容,也出現在2.0的標準之中。簡單的說就是圖片與影片應當添加ALT文字註解,若視障者無法看到影音也可以透過文字閱讀輔助軟體取得網站資訊。

新的標準還包括Heading標籤的設置,也就是一篇文章中,應當要有主標、副標與段落的區分,舉例來說,一個文章的主題也就是主標應當以<H1>進行標示,副標可用<H2>或<H3>標示,而不是一篇文章純文字(Paragraph)一串到底,以提升文章的品質。

其實敏銳的站長應該注意到了,上述的ALT語法與Heading語法運用於網站設計上,也是SEO搜尋引擎優化(SEO)的基礎功夫,如果能夠同時將無障礙網頁設計2.0的新概念運用在網站上,不僅可以幫助身心障礙人士瀏覽網站,又能同時優化網站的品質,一舉兩得。

 

與UI/UX關係緊密

無障礙網頁設計更與UI/UX關係十分密切,舉例「鍵盤焦點應永久可視」這一點,意即透過鍵盤瀏覽網站的各項功能(例如選單)時候,提示的焦點(如反差外框)應該不會隨著鍵盤的操作消失。各位可以到國家通訊傳播委員會(NCC)的無障礙網路空間服務網網站看看,當你連續按下鍵盤上的”TAB”按鍵之後,可以看到顯眼的橘色提示框在不同的項目跳動。這樣的UI介面設計其實十分常見於家電選單上(因為家電沒有觸控面板與滑鼠,但也慢慢有了),但卻較少有網站使用這樣的概念。

關於UX使用者體驗的部分,無障礙網頁設計2.0就有一則關於「輸入錯誤應使用文字向使用者描述,並且在可能的情況下,提供使用者明確線索的提示」,就是十分典型的UX優化設計概念。舉例來說,申請新帳號輸入密碼時,貼心的網站會告知用戶密碼的至少需要n個字元,或是其他說明以滿足密碼申請標準,一般網站很少做到這一點,但不少電子商務網站靠著友善的帳號申請介面,贏得了大量的新用戶註冊並且創造業績。

 

創造友善網路環境

目前無障礙網頁設計的推行情況,以政府機關較為積極,許多公家機關的網站設計招標需求,即明確要求需符合無障礙網頁設計的標準,不少廠商沒有相關的經驗與技術,尤其是使用架站工具,套版廠商,面對廣大無障礙需求只能興嘆。

雖然無障礙網頁設計2.0的標準有「4原則12指引3等級66成功準則」,許多網頁開發設計者看到洋洋灑灑的條例就傻眼了,但事實上並沒有那麼可怕,所有的標準不僅有清楚的說明,還有檢查工具Freego能夠就基礎的問題進行自動檢查。通過標準的網站,可以獲得一個標章認證,這對於設計師來說也是一項肯定與榮譽。

iWare網頁設計團隊已經相當熟悉無障礙網頁設計,從1.0版本開始就已經經手多件政府相關標案,近年也積極研究如何將無障礙網頁設計2.0的標準,應用在新一代的網頁設計上, 若您有相關的需求,歡迎與我們進行進一步的洽詢。

 

國家通訊傳播委員會 無障礙網頁開發規範 https://www.handicap-free.nat.gov.tw/

手機版網站的重要性和好處
手機版網站的重要性和好處
Jericho
Jericho
Mar 29, 2024
網頁設計過程中如何做好色彩搭配
網頁設計過程中如何做好色彩搭配
Jericho
Jericho
Mar 27, 2024
為何要製作RWD (Responsive Web Design) 響應式網站設計?有什麼優點和缺點?
為何要製作RWD (Responsive Web Design) 響應式網站設計?有什麼優點和缺點?
Jericho
Jericho
Mar 20, 2024