淺談無障礙網頁設計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/