[無障礙] Vue等SPA網站會碰到的2個問題

  • 1480
  • 0

EV1120200、noscript、EV1080300

剛好看到fb上有人在討論SPA(Single page application)網站申請無障礙標章
來記錄一下之前的經驗
也可以直接上無障礙標章的網站
查看看其他沒做SSR(Server side rendering)的SPA網站怎麼做的
(網址搜尋「#」可以找到5個)

問題1:EV1120200、noscript

指引十二:針對目前及未來的使用者代理與輔助科技,最大化其相容性

12.2對於所有的使用者介面元件(包括但不限於表單組件、鏈結及由腳本所產生的組件)來說,其名稱及角色要能用程式化的方法判定;其能由使用者所設定的狀態、屬性、值,則要能用程式化的方式設定;而使用者代理,包括輔助科技,則要有這些項目變更的通知。    

EV1120200:暴露名稱與角色,允許直接設定可由使用者設定的屬性,並在變更時提供通知

https://vuejsapp/#/  網頁在JAVA SCRIPT不支援時雖有提供提示文字,但頁面內容空白未顯示任何資料,並不符合無障礙精神,請修正,在JAVA SCRIPT不支援時,仍需顯示整個頁面之基本資料,網頁內容請勿空白;且中文版網站請提供中文說明,勿以「We're sorry but vuejsapp doesn't work properly without JavaScript enabled. Please enable it to continue.」做為描述,以方便使用者瞭解及操作,請檢視問題並修正,全網站若有相同問題請一併修正。

白話文:

noscript裡面不能只有一句話
像下面這樣只有一句話是不行的

<noscript>We're sorry but vuejsapp doesn't work properly without JavaScript enabled. Please enable it to continue.</noscript>

解決:

修改public/index.html裡面預設的noscript段落
至少你的網站標題要出來再請人家打開JS
或是做一個迷你版的網站放在noscript
我是把寄給民眾的通知信拿來用

範例:

vue A 臺北市交通違規檢舉專區

vue AA 經濟部工業局智慧城鄉OpenAPI管理平台



angular A 國立中正紀念堂管理處園區建築生態導覽網站

問題2:EV1080300

指引八:提供協助使用者導覽、尋找內容及判斷所在的方法

8.3如果網頁能依序導覽,且導覽順序將會影響到意義或操作,則可取得焦點的元件要以能保留意義與操作性的順序,來取得焦點。    

EV1080300:按照內容的序列及關連性來安排互動元件的放置順序

https://vuejsapp/#/  TAB鍵移動順序應從頭(網址列)開始由上至下、由左至右順序移動。使用鍵盤遊走至上方區塊「網站導覽、違規檢舉、案件查詢、友站連結」選單,按Enter鍵載入該網頁資訊後,游標應從頭(網址列)開始走訪,請勿繼續遊走下一個選單項目。提供鍵盤操作時,請務必注意游標移動順序,全網站如有相同問題請一併修正。

白話文:

頁面跳轉時應該要focus到頁面最頂端
這對一般的網站來說完全不是問題
但SPA網站沒有重新整理
瀏覽器還是focus在剛剛點擊的超連結上

範例:

我是在vue router跳轉後對焦到最前面的元件上
跳回#gotocenter
這個元件我還多設定tabindex=”-1”
這樣使用者按tab就不會聚焦到#gotocenter