[前端]無障礙網站筆記

其實"無障礙規範"跟"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小老兄)