無障礙網頁(Web accessibility)為何重要？五個設計要點一次搞懂！
此篇文章將會複習何謂無障礙網頁，並且更新國家通訊傳播委員會所調整的最新規範，接著透過數據來闡述無障礙網頁設計對於社會與經濟兩層面的重要性，最後分享五個相關無障礙網頁設計上的要點。
一、無障礙網頁(Web accessibility)是什麼？
數據公司Statista截至2021年1月的資料顯示，全球活躍於網際網路的用戶約有46.6億人，佔全球人口的59.5%。在「無障礙網站介紹－規範說明、檢測工具與操作影片」這篇文章中，我們已經有介紹了什麼是無障礙網站，也就是希望在網路如此發達的現代，基於人權平等以及關懷社會弱勢族群的理念，架設對於身心障礙人士而言，上網比較容易的網站，期望藉此輔助達到資訊平等的目的。
之前的文章也介紹了國家通訊傳播委員會為推動台灣無障礙網路空間，所訂定的相關規範中的4原則與12條指引，政府以W3C(World Wide Web Consortium)協會的WAI(Web Accessibility Initiative) 作為參考。
一定有人會想說，既然之前已經介紹過無障礙網頁了，為什麼還要再介紹一次？因為國家通訊傳播委員會的相關規範於去年也就是110年的7月有過調整更新(網站無障礙規範(110.07))，這次修改調整了：新增1指引、修改1指引、新增17個成功準則及新增48個稽核評量碼。
下圖是根據國家通訊傳播委員上的資料進行製作，是4原則、12條指引與78準則，紅字的部分為修改或新增之處：
國家通訊傳播委員：網站無障礙規範(110.07)
二、無障礙網頁(Web accessibility)為什麼重要？
無障礙空間、無障礙通道這些無障礙設施對我們來說一定不陌生，這些設施之於行動不便的人來說，是可以有效降低他們面對障礙的門檻，除了基於社會層面，人人生而平等，身心障礙者也有享受上網、獲得資訊的權利，除此之外，在經濟層面上企業也能藉此觸及更多的客戶。
社會層面
根據世界銀行的數據指出，全球約10億人，患有某種形式的殘疾，佔全世界人口的15%。這個數字並不少，並且報告還指出平均而言，在一個群體中，殘疾人比非殘疾人更有可能遭受不利的社會經濟後果。如果單就台灣的數據來看，根據行政院主計處提供的數據顯示，截至110年9月，台灣身心障礙的人數有120.1萬人，約佔全台灣人口的5.1%。
這些數字也不容小覷，架設無障礙網站應該成為每個企業/品牌在製作官網時應該注意的事項之一，讓網際網路上的網站內容與其服務功能，都能使整個社會的人參與其中，藉此防止社會中有族群是被邊緣化的。
經濟層面
無障礙網站的架設，也就是讓網站被訪問、進入的門檻縮小，能使企業/品牌網站接觸到更多的受眾，而這不就是大多企業/品牌架設網站的緣由嗎？藉此增加過去我們忽視的這些身心障礙者的市場，全部納入潛在顧客群將會帶來龐大的效益。
根據殘疾與多元化諮詢公司Freeney Williams於2020年公布的報告指出，英國零售商可能會因為無法滿足在線殘障購物者的需求，而錯失每年約171億英鎊的線上銷售額。而且另一份報告則指出，有69%的殘障人士在進行線上消費時，會直接點擊離開那些由於殘疾產生使用障礙而難以使用的網站。而且數據顯示有86%的人寧願選擇從使用上方便的網站上，以更高的價格購買產品，也不要到較難使用的網站上以更低的價格購買。
鵠崙設計：無障礙網頁為什麼重要？
三、無障礙網頁(Web accessibility)五個設計要點
上述內容重新複習了一次無障礙網頁的意義，與相關政府修改後的政策，另外也從社會層面與經濟層面說無障礙網頁的重要性，接下來要分享五個架設無障礙網站相關的要點，知道這些將能從設計網站樣式上開始改善優化，舉例來說：
從下圖我們能很明顯看到幾個問題，比如左側文字與右側文字距離有些遠，難以直覺將兩者聯繫起來，假設不是使用RWD網頁設計，那我們透過手機來看這個畫面說不定要一直平移才能了解左右側文字的關聯。
下圖我們改進了上述兩側文字距離過寬的問題，另外也在相應的重點處將文字加寬，使弱視用戶能比較好抓到重點。
接下來要分享五個架設無障礙網站相關的要點，知道這些將能從設計網站樣式上開始改善優化，當然後有其他需要注意的事項，但今天主要探討下面這五個：
1. 使用能支援可訪問性的內容管理系統(CMS)
在架設、建構網站時，為了要確保整體網站的頁面佈局、主題、工具各方面，能與最開始我們所說的無障礙網站相關架設規範兼容，比如在編輯工具欄應該包含標題等，因此選擇使用可以支持網頁可訪問性的內容管理系統(CMS)，常見的像是Wordpress 或是Drupal等。
延伸閱讀
CMS 是什麼 ？ 讓你秒懂什麽是 網站 後台 管理 CMS系統
2. 使用標題來構建網頁內容
使用標題來構件網站內容，除了能讓網頁的內容更易被所有瀏覽者消化吸收以外，也能使視障者上網時使用輔具能更加的流暢，視障者要取得螢幕上的訊息，必須依靠螢幕閱讀器與相關的系統，經過轉換後透過點字和語音來瞭解螢幕上的資訊。當我們將標頭透過
、
等方式進行整齊排列，將更容易被螢幕閱讀器所讀取。
3. 圖像增加替代文字
因為當視障者使用螢幕閱讀器讀取網站內容時，都是透過文字來獲取訊息，而如果沒有將網頁上的圖像加上一些描述內容的話，所有的圖像在視障者眼裡都只是語音的一句「圖像」。我們看到的風景圖、各種有趣的插圖，傳到他們耳朵裡都是一樣的，因此必須確保將每張圖片都編寫描述性的摘要，使每張圖片對所有瀏覽者都有意義。
4. 確保網站對鍵盤友好
目前有許多輔助身心障礙者的技術都是只依賴純鍵盤操作下進行的，像是我們前面所提到的視障者所使用的螢幕閱讀器，就是以不使用鼠標的情況下瀏覽各個網站，因此在架設網站時我們也必須確保這個網站是能在不使用滑鼠的情況下運行，包含我們能透過鍵盤進入網站的所有頁面、連結與內容等。
5. 謹慎地使用顏色
當視網膜中的感光細胞無法對不同波長的光做出適當反應時，就會發生色盲。全球，根據color-blindness.com的數據，大約0.5%的女性和8%的男性患有某種形式的色盲，當我們在設計網站時，如果開發人員沒有將網頁調整為適當的顏色對比度時，色盲和其他殘疾者將較難找到網頁資訊，所以也必須考量到他們所看到介面的樣子進行網頁優化。
鵠崙設計：無障礙網頁五個設計要點
四、結語
無障礙網頁(Web accessibility)除了能讓身心障礙者更容易使用網站以外，另外如果從前面所說的要點來看，像是標題與圖片的替代文字運用得當的話，這個網站將成為用戶都可以輕鬆瀏覽的網頁，甚至有可能提高網頁的SEO分數，從而為網站帶來更多的流量。
那這次的分享就到這裡結束了~我們的官網將會不定期發布有關行銷或是網頁設計上的文章，如果喜歡文章內容歡迎定期注意鵠崙設計的官網，我們下次再見～
RELATED
相關文章
-
網頁新知
2019.09.15
Google SEO 更新 -新增 sponsored 及 ugc 屬性，讓連結性質易於識別
-
網頁新知
2021.12.07
疫情時代消費者行為回不去？電商為何興起？數據懶人包給你！
-
網頁新知
2020.04.27
網頁設計公司挑選參考？架設網站時應該具備的基礎功能分析
-
網頁新知
2020.04.29
RWD 網頁設計 對 Google 行動優先索引的影響全面解析
想了解更多資訊內容嗎？歡迎立即聯繫鵠崙設計！