# 無障礙標籤應用 ###### tags: `切切切` ## 內容的層級與順序 - 整體網頁結構 + Landmark（地標）- 網頁的主結構 ![](https://i.imgur.com/C67Me1F.png) + landmark 可以輔助導航功能，能讓螢幕閱讀器的使用者跳到特定的區塊。 + landmark 的使用應該盡量精簡，以免讓使用者難以理解網頁主結構 注意： + 原則上，一個頁面應該只有一個 <main> + <main> 以外的 landmark 在有複數個同時存在時，需利用 aria-label 來區別其目的 + 只有在位於第一層（直屬於 <body>）的情況下， landmark HTML 元素才會被認定為對應的 landmark role。 ## 使用具備語義的 HTML tag - 語義化的 HTML tag 能幫助不借助視覺的使用者理解當前這個元件在哪裡、可以做什麼、應該如何互動，使用標準的HTML標籤 ```htmlmixed! <fieldset> <legend>選擇您的興趣</legend> <div> <input type="checkbox" id="coding" name="interest" value="coding" /> <label for="coding">寫程式</label> </div> <div> <input type="checkbox" id="music" name="interest" value="music" /> <label for="music">音樂</label> </div> </fieldset> ``` ```htmlmixed! <h3 id="id-group-label">Sandwich Condiments</h3> <div role="group" aria-labelledby="id-group-label"> <ul class="checkboxes"> <li><div role="checkbox" aria-checked="false" tabindex="0">Lettuce</div></li> <li><div role="checkbox" aria-checked="true" tabindex="0">Tomato</div></li> <li><div role="checkbox" aria-checked="false" tabindex="0">Mustard</div></li> <li><div role="checkbox" aria-checked="false" tabindex="0">Sprouts</div></li> </ul> </div> ``` ## 沒有 ARIA 比 Bad ARIA 更好 + 如果對 role 、 aria-label ……等 ARIA 屬性還不熟悉，可以從語義化 HTML tag 著手，先不要隨意使用 ARIA 屬性，沒寫好的 ARIA 屬性比完全不寫要糟，反而會對螢幕閱讀器使用者造成誤導，或造成結構上的錯誤。 ### 原則 1：一個角色就是一個承諾 ```htmlmixed! <div role="button">Place Order</div> ``` 這是一個承諾，div 合併了 JavaScript，加入role="button"，它提供了按鈕所需的鍵盤交互。與 HTML 輸入元素不同，ARIA 角色不會導致瀏覽器提供鍵盤行為或樣式。 ### 原則 2：ARIA 既可以隱蔽又可以增強，既能創造力量，也能創造危險 從輔助技術的角度來看，ARIA 使作者能夠使用輔助技術但卻無法可靠地導出的關鍵可訪問性語義來修飾 HTML 和 SVG 元素。 有些 ARIA 就像一件斗篷；它掩蓋或覆蓋了原始語義或內容。 ## 常用的ARIA ### 1. aria-label 如果交互式元素沒有可訪問的名稱，或者可訪問的名稱不准確，並且 DOM 中沒有可以通過aria-labelledby屬性引用的可見內容，則aria-label可以使用該屬性定義一個字符串來標記設置它的交互式元素。這為元素提供了可訪問的名稱。 [連結 <i class="fa fa-link" aria-hidden="true"></i>](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) ```htmlmixed! <button aria-label="關閉" onclick="myDialog.close()"> <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg"> <path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000" /> </svg> </button> ``` ### 2. aria-labelledby aria-labelledby屬性使作者能夠引用頁面上的其他元素來定義可訪問的名稱。如果一個元素同時設置了兩個屬性，aria-labelledby將被使用。aria-labelledby優先於提供可訪問名稱的所有其他方法，包括aria-label、<label>和元素的內部文字。 [連結 <i class="fa fa-link" aria-hidden="true"></i>](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) ```htmlmixed! <h2 id="attr" class="article-title">最新消息</h2> <p> 平均地權條例過關了 專家：房市將有四大現象… <a href="13.html" id="rm13" aria-labelledby="rm13 attr">更多</a> </p> ``` HTML可以<input>與type="checkbox"原生<label>. 如果可行，請使用以下內容： ```htmlmixed! <label for="tac"> <input id="tac" type="checkbox" name="terms-and-conditions" /> 我同意這條款和條件。 </label> <p><a href="tac.html">閱讀我們的條款和條件</a>.</p> ``` ### 3. aria-hidden 可以通過隱藏以下內容來改善輔助技術用戶的體驗： - 純裝飾性內容，例如圖標或圖像 - 重複的內容，例如重複的文字 - 屏幕外或折疊的內容，例如菜單 該aria-hidden屬性的存在對輔助技術隱藏了內容，但沒有在視覺上隱藏任何內容。 [連結 <i class="fa fa-link" aria-hidden="true"></i>](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden) ```htmlmixed! <button> <span class="fa fa-tweet" aria-hidden="true"></span> <span class="label"> Tweet </span> </button> ``` ### 4. aria-controls aria-controls屬性標識其內容或存在由設置該屬性的元素控制的一個或多個元素，而不管哪種類型的交互啟動了受影響的行為。（無論是複選框、單選按鈕、選項卡面板、圖標、切換開關或其他） [連結 <i class="fa fa-link" aria-hidden="true"></i>](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) ```htmlmixed! <div class="tab-interface"> <div role="tablist" aria-label="頁簽"> <span role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0"> 第一個頁簽 </span> <span role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1"> 第二個頁簽 </span> <span role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1"> 第三個頁簽 </span> </div> <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1"> <p>第一個面板的內容</p> </div> <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden> <p>第二個面板的內容</p> </div> <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden> <p>第三個面板的內容</p> </div> </div> ``` ## HyUI 標籤調整 ### 上方導覽列 加入aria-label="上方導覽列" ```htmlmixed! <!-- navigation Start --> <nav class="navigation" role="navigation" aria-label="上方導覽列"> <!-- 新增div navlist --> <div class="navlist"> <ul aria-label="navlist"> <li><a href="#">回首頁</a></li> <li><a href="#">北市圖首頁</a></li> <li><a href="#">網站導覽</a></li> <li><a href="#">使用說明與常見問題</a></li> </ul> </div> ``` ### font size 加入aria-label="文字大小" ```htmlmixed! <!-- font_size --> <div class="font_size"> <ul aria-label="文字大小"> <li><a href="#" class="small" title="文字變小">A-</a></li> <li><a href="#" class="medium active" title="預設文字">A</a></li> <li><a href="#" class="large" title="文字變大">A+</a></li> </ul> </div> ``` ### MENU 加入aria-label="主選單" ```htmlmixed! <!-- menu Start --> <nav class="menu" role="navigation" aria-label="主選單"> <ul> <li><a href="#">訊息公告</a></li> ``` ### breadcrumb路徑 div改nav，所在頁面加入aria-current="page" ```htmlmixed! <!-- breadcrumb路徑 --> <nav aria-label="現在位置" class="breadcrumb"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">節點</a></li> <li aria-current="page">節點</li> </ul> </nav> ``` 當您有一組相關元素時，例如麵包屑中的多個鏈接或多步驟流程中的步驟，其中一個元素的樣式與其他元素不同，以向視力正常的用戶表明這是其當前元素組，aria-current應該用來通知輔助技術用戶通過樣式指示的內容。 在麵包屑列表中，當一組分頁鏈接中的鏈接被設置樣式以指示用戶當前在該頁面上時，aria-current="page"應該在該鏈接上設置。 ### aria-current Values + **page**: 表示一組頁面中的當前頁面，例如麵包屑中指向當前文檔的鏈接。 + **step**: 表示流程中的當前步驟，例如枚舉多步結帳流程中的當前步驟。 + **location**: 表示環境或上下文中的當前位置，例如在視覺上突出顯示為流程圖的當前組件的圖像。 + **date**: 表示日期集合中的當前日期，例如日曆中的當前日期。 + **time**: 表示一組時間中的當前時間，例如時間表中的當前時間。 + **true**: 表示集合中的當前項。 + **false**（默認）: 不代表集合中的當前項目。 ## 字型大小，加入aria-labelledby="font-size-label" ```htmlmixed! <div class="fontSize"> <span id="font-size-label">字型大小：</span> <ul aria-labelledby="font-size-label"> <li><a role="button" href="#" class="small">小</a></li> <li><a role="button" href="#" class="medium">中</a></li> <li><a role="button" href="#" class="large">大</a></li> </ul> </div> ``` ## <input>標籤使用title屬性提供協助說明 ```htmlmixed! <input type="button" value="確定" title="確定" class="btn btnSubmit" /> ``` ## <input> <select>標籤需有對應的<label>標籤或標題屬性 ```htmlmixed! <div class="total"> 共<span>308</span>筆資料，第<span>1/18</span>頁，<label for="pet-select">每頁顯示</label> <select name="" id="pet-select"> <option value="">10</option> <option value="">20</option> <option value="">30</option> <option value="">40</option> </select> 筆， <input type="button" value="確定" title="確定" class="btn btnSubmit" /> </div> ``` ## accordion.html 新增無障礙標籤 ### aria-expanded -- aria-expanded屬性設置在元素上以指示控件是展開還是折疊，以及它的子元素是顯示還是隱藏。 + **false**: 此元素擁有或控制的分組元素已折疊。 + **true**: 此元素擁有或控制的分組元素已展開。 + **undefined**（默認）: 該元素不擁有或控制可擴展的分組元素。 ### aria-controls -- 手風琴標題按鈕切換手風琴面板內容的可見性：手風琴標題按鈕將aria-controls設置為包含手風琴面板內容的元素的 ID。 ```htmlmixed! <h2 class="title" tabindex="0">手風琴元件</h2> <div class="accordion"> <ul> <li> <a class="accordionList" role="button" href="javascript:;" title="" aria-expanded="false" aria-controls="name_id_1">第一項說明</a> <div class="accordionContent" id="name_id_1"> <div class="content"> 國影自談王不美一文實別合屋？府性元這子一知於料的親到。一用技年不得就資公，也星樣團怎英班水灣個種決以因世書發定很功行何，下飯通反代命假到一不離護麼錯絕懷旅元人。弟新過，道給仍覺裡水國、醫灣了可實界一上德字什心成但創大品隨品。難但所雜笑事禮年專阿戲經愛眾背起，間自個；獎小業美有義交安辦一則龍足，年開多！景唱而賽用出說建樣以經<br /> <a href="#">連結</a> <a href="#">連結</a> <a href="#">連結</a> </div> </div> </li> <li> <a class="accordionList" role="button" href="javascript:;" title="" aria-expanded="false" aria-controls="name_id_2">第二項說明</a> <div class="accordionContent" id="name_id_2"> <div class="content"> 國影自談王不美一文實別合屋？府性元這子一知於料的親到。一用技年不得就資公，也星樣團怎英班水灣個種決以因世書發定很功行何，下飯通反代命假到一不離護麼錯絕懷旅元人。弟新過，道給仍覺裡水國、醫灣了可實界一上德字什心成但創大品隨品。<br /> <a href="#">連結</a> <a href="#">連結</a> </div> </div> </li> ``` ## 必填 1. aria-required = "true" 讓導讀軟體朗讀「必填」相關提示 沒有視覺效果 ```htmlmixed! <div class="form_grp"> <label for="username" class="form_title"><abbr class="necessary" title="為必填(選)欄位,不能為空白。" aria-label="必填">*</abbr>身份證字號</label> <div class="form_content idnumber"> <input type="text" id="username" placeholder="請輸入身分證字號" aria-required="true" value="" title="請輸入身分證字號" class="user_typing"> <div class="acheck" aria-label="帳號可以使用">帳號可用</div> </div> </div> ``` ### h2標題如沒連結，請加入tabindex="0" - 視障人士會先掃過所有h標籤，再決定要讀哪一個單元，沒連結會tab不到，建議加入tabindex="0" - a 最重要的屬性是 href ，但要注意 ， href 並不是必要的，沒有 href的 a 的意義轉為 placeholder（佔位），也會失去預設的cursor: pointer 樣式 ```htmlmixed! <a role="menuitem">輔助技術用戶將此元素視為菜單中的一個項目，而不是一個鏈接。</a> <a aria-label="輔助技術用戶只能感知這個 aria-label 的內容，而不是鏈接文本">Link Text</a> ``` ![](https://i.imgur.com/sSuBAts.jpg) ## Freego AAA機器檢測，會先檢查CSS是否用絕對單位如px - line-height、max-height、max-width、min-height、min-width...等，包括Media Queries，請用相對單位如rem、em、%等 ```htmlmixed! $screen-lg: 87.5rem !default; //電腦 $screen-md: 62rem !default; //平板 $screen-sm: 48rem !default; //手機 $screen-xs: 36rem !default; //極小尺寸 - hyui $screen-xs-flex: 20rem !default; //極小尺寸 - flex ``` ## 參考網址 ARIA Authoring Practices Guide (APG) [連結 <i class="fa fa-link" aria-hidden="true"></i>](https://www.w3.org/WAI/ARIA/apg/) MDN Accessibility ARIA [連結 <i class="fa fa-link" aria-hidden="true"></i>](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) [連結 <i class="fa fa-link" aria-hidden="true"></i>](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes)