[網頁,前端]無障礙網站筆記

其實"無障礙規範"跟"html5語意化"有部分重複
建議一次就順手做起來~

*台灣的無障礙網站規範

台灣NCC規範的,給不能用滑鼠、盲人等等殘障人士使用
網站:無障礙規範

*檢測工具:Freego、Java

無障礙檢測工具。
先自己用電腦檢測,之後網站上線再送人工檢測。
但是需安裝Java軟體才可以跑檢測軟體Freego,所以也要記得下載Java程式

另外,freego檢測時一定要透過有網址的網站(http或https),所以一定要上傳才能測
網站:Freego下載頁面

頁面製作常見注意事項

<a>寫title屬性

曾經看到有人將title屬性全部寫成lang屬性,到底是尛。
要注意的是有時候會出現不同的<a>的href跟title都長的一樣,檢測結果說這樣不通過。
可能會出現在手機版跟電腦版重複的製作的地方。
這時候手機版的tltle可以加個mb-xxx,總之就是還是要做出一些區別就對了。
告訴盲人:這是手機版的選項唷,阿捏

<img>寫title屬性跟alt屬性

替代文字,瀏覽器也都會讀,做到好做到滿就對惹

<h1>~<h6>標題標籤

  • 全頁面只能用一個h1,首頁比較要注意
  • 通常我首頁就不用h1直接用h2,h1是給內頁的每頁大標題用的
  • 每一頁也一定要使用一個標題,<h1>~<h6>任一都行

要做導盲磚:::

導盲磚可以做很多個,基本上是四個,上下左右
讓使用者可以用快捷鍵跳到下一個大區塊

如何設定導盲磚、定位點

導盲磚就是三個冒號:::,他其實是要做一個<a>標籤,標籤內要做相關設定,以下介紹

*導盲磚外觀

  • 可以跟背景同色:這樣頁面上就會看不出來,有些會求美觀這樣做
  • 不能縮小:有些人會想說縮小font-size:0px;這樣頁面上就看不到,但規定是不能這樣做
  • 不能藏起來:也不能用display:none;藏起來
!注意:要用Ctrl+F搜尋還是搜尋得到才可以

*導盲磚html寫法參考

做為參考,內容都可以自己改
<a href="#" title="上方選單" accesskey="U">:::</a>
<a href='#' title="下方選單" accesskey='F'>:::</a>
<a href="#" title="中間內容區塊" accesskey="C">:::</a>
<a href="#" title="右邊內容" accesskey="R">:::</a>

*導盲磚快捷

Alt+[該導盲磚設定的快捷]
快捷是可以每個網站自己設定的,基本上都可以沿用
就是<a>內accesskey這個屬性

!注意:不要使用某些快捷像是Alt+D,設定完記得自己測一下
Alt+D:是IE的選取網址列,不要使用到

其他注意事項

*tab檢測

  • 按第一下tab時,虛線會focus在最上方第一個導盲磚上
  • 繼續按tab,會往下跳下一個<a>標籤

*確定focus功能有效

有些網頁為了美觀,會將a標籤的外框線拿掉,但做無障礙網頁時不能寫這個,不然tab會focus會失效,tab不出東西。
請確定網頁中的這個功能有被拿掉:
 $("a").focus(function(){ $(this).blur(); });

*使用IE做檢測

導盲磚快捷在其他瀏覽器有時會失靈、不聽話
用IE測還是最穩的(終於有你派得上用場的地方惹IE小老兄)

沒有留言:

Instagram