免費諮詢
↑
Design · 網站設計與費用

無障礙網站介紹-規範說明、檢測工具與操作影片

網站設計與費用發布 2019.06.01更新 2023.11.15閱讀約 3 分鐘

一、什麼是無障礙網站?

無障礙網站介紹 – 在網路如此發達的現代,對於身心障礙人士而言,上網這個動作似乎很難成為生活中的一部分,而基於人權平等以及關懷社會弱勢族群的理念上,建立無障礙網站對於特定族群而言是意義非凡的。

讓網站符合無障礙建制規範會有一些優勢,比如說 HTML 語意標記能讓搜尋引擎更好理解網站內容,提升 SEO 成效; 關心社會弱勢族群,提升企業形象; 涵蓋不同身份的使用者,讓網站受眾範圍變得更寬廣等。而無障礙網路具有怎樣的規範?要以怎樣的思維作為網頁設計的出發點呢?以下將逐一說明。

無障礙網站介紹 - 規範說明、標章介紹與操作影片|網頁新知|鵠崙設計02
無障礙網站介紹 - 規範說明、標章介紹與操作影片|網頁新知|鵠崙設計02

數位發展部:認識無障礙網路空間

二、無障礙網站規範與開發標準

在政府的無障礙網站空間服務網中,對於無障礙網站總共列舉了 4 原則 與 12 條索引規範,內容以 WAI (Web Accessibility Initiative) 為參考基準,列出了無障礙網站需要具備的條件與開發方向,下面將對這些項目做簡易說明:

四項原則:

  • 可感知:網頁資訊內容對任何形式的操作都必須為易於感知,比如影片必須要具有字幕以利於聽障者了解資訊。
  • 可操作:在閱讀網站所需動作上必須多元化,不能有只能以單一方式來操作的元素,比如要為視障者提供鍵盤閱讀網頁功能。
  • 可理解:任何形式的資訊內容都需簡單明暸,如果有專有詞必須以其他易於理解都方式呈現,易於身心障礙者理解。
  • 穩健性:無論網站操作方式與內容都必須具有長遠性,不會隨者網頁技術發展造成不同狀況的使用困難。

十二條索引規範:

  • 替代文字:任何多媒體形式的內容必須有替代呈現方式。
  • 時序媒體:使用預先錄製作為媒體表達形式。
  • 可調適:以正確 HTML 標記結構表達網頁內容。
  • 可辨識:顏色、影像、音訊、圖片呈現必須有提示或替代方式。
  • 鍵盤可操作:鍵盤功能必須能完全取代滑鼠操作。
  • 充足時間:時間限制功能必須要具有主動關閉或延長時間的操作方式。
  • 防痙攣:網頁元素閃爍時間必須合乎規範,避免誘發痙攣患者。
  • 可導覽:將主資訊頁面與任何群組連結做妥善規劃。
  • 可讀性:以文字來說,由機器判讀必須能朗讀,而非提供錯誤訊息。
  • 可預期性:在使用者動作後才進行下步驟,而非全自動執行。
  • 輸入協助:當使用者需要輸入內容時,給予明確提示。
  • 相容性:與輔助器具未來發展相結合,具有長遠穩定性。

三、無障礙網站標籤

下圖是評定無障礙網站等級的索引說明表格,當完成一個指引中的子項目,就能獲得評定對應的等級,進而在網站中放入無障礙標章,表示網站適合所有人士觀看與操作。而詳細的資訊內容可以點擊圖片來源連結做查看。 

無障礙網站介紹 - 規範說明、標章介紹與操作影片|網頁新知|鵠崙設計03
無障礙網站介紹 - 規範說明、標章介紹與操作影片|網頁新知|鵠崙設計03

圖片來源:數位發展部:無障礙規範索引

四、無障礙網站網頁操作影片

鵠崙設計使用 Mac 內建無障礙工具 VoiceOver 對官網文章內容做測試,當 VoiceOver 選中具有 H1 標記的文字時,會自動判斷為標題,說明現在位置在標題層級 1,而當圖片有設定 Alt 圖片替代文字時則會念出 Alt 文字內容,輔助視覺障礙的使用者了解圖片內容。希望能讓各位讀者能對無障礙網站實際運作狀況有更直觀的了解。

五、結語

想要獲得更多無障礙網站的相關資訊嗎?有任何與網頁設計相關的問題,都可以透過連絡表單或線上客服告知我們需求,鵠崙設計將為您提供最佳網站架設解決方案!

鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。這篇文章由負責維護的同事撰寫,數字來自實際的報價與維護紀錄。
FAQ

這篇文章,
常問的。

針對這篇內容的問答;更一般的問題看網站設計與費用 hub。

01無障礙網站跟 SEO 有什麼關係?

無障礙網站會使用正確的 HTML 語意標記,例如標題階層、圖片替代文字等,這些標記能讓搜尋引擎更容易理解網頁內容結構,因此有助於提升 SEO 成效,同時也讓網站能被更多不同身份的使用者瀏覽。

02要怎麼知道自己的網站有沒有做到無障礙?

可以參考數位發展部無障礙規範索引中的評定等級表,網站完成指引中的子項目後就能取得對應等級,並放上無障礙標章。也可以直接用螢幕閱讀工具實際操作網站,檢查標題、圖片說明等內容是否能被正確朗讀。

03VoiceOver 這類工具是怎麼判斷網頁內容的?

VoiceOver 會依照 HTML 標記來判斷內容性質,例如選中 H1 標記文字時會說明目前位於標題層級 1;如果圖片有設定 Alt 替代文字,也會直接念出該文字內容,藉此讓視覺障礙使用者了解圖片代表的意義。

04圖片沒有加替代文字會有什麼影響?

當圖片缺少 Alt 替代文字時,像 VoiceOver 這類輔助工具就無法念出圖片內容給使用者聽,視覺障礙者會因此無法得知該圖片要表達的資訊,也不符合無障礙原則中「可感知」的規範要求。

Service

看完之後,想找人做?

網站設計:先理解你的生意、確認架構,再開始設計;費用區間先講清楚。

網頁設計服務
Contact

留下需求,
1 個工作天內回覆。

告訴我們你的產業、現在的網站、想解決什麼;回覆時會附上同產業的案例與估價區間。