Try   HackMD

實作無障礙 VoiceOver

ARIA:需要注意的特性

必須要了解的是 ARIA 是通過更改和補充標準 DOM 無障礙樹來發揮作用。
ARIA 可以修改現有元素語義,也可以向不存在原生語義的元素添加語義。 它還可以表達 HTML 中根本不存在的語義模式,例如菜單或標籤面板。


  • 不要覆蓋默認角色

    不得對標準元素應用任何額外角色/屬性。

    例:

    ​​​​<button role="heading">search</button>
    

    因為該button元素具有與標題角色衝突的默認特徵。

  • 不要添加多餘的角色

    不需要重新定義默認語義。
    無論如何使用,標準 HTML <input type="checkbox"> 元素都不需要額外的role="checkbox" ARIA 屬性就能正確聲明。

    例:

    ​​​​<!-- Avoid doing this! -->
    ​​​​<fieldset role="group">...</fieldset>
    ​​​​
    ​​​​<!-- or this! -->
    ​​​​<main role="Main">...</main>
    ​​​​
    ​​​​<!-- Generally avoid doing this! -->
    ​​​​<ul role="list">...</ul>
    
  • 允許的角色後代 Allowed descendants of ARIA roles

    例:
    一個button元素有一個隱式的role=button,在 HTML中,button元素允許將內容表述為後代,並且不允許交互式內容或具有tabindex屬性的後代。

    ​​​​<!-- conformance checkers will report an error -->
    ​​​​
    ​​​​不需要重新定義默認語義
    ​​​​<button>
    ​​​​  <div role="button">...</div>
    ​​​​</button>
    
    ​​​​任何用賦予指定的元素role=button都將遵循相同的後代限制
    ​​​​<div role="button">
    ​​​​  <button>...</button>
    ​​​​</div>
    
    ​​​​不允許交互式內容或具有tabindex屬性的後代
    ​​​​<div role="link">
    ​​​​  <textarea>...</textarea>
    ​​​​</div>
    
  • 應對所有標記值以及其值定義為標記的任何狀態或屬性屬性使用ASCII 小寫字母。

    例:

    ​​​​<div role="main">...</div>
    ​​​​<a href="home/" aria-current="page">home</a>
    ​​​​
    ​​​​<!-- DO NOT DO THE FOLLOWING -->
    ​​​​<div role="MAIN">...</div>
    ​​​​<div role="Main">...</div>
    ​​​​<a href="home/" aria-current="Page">home</a>
    

ARIA 屬性

aria-label


aria-hidden

情境:不需要報讀

<i class="icon icon-key" aria-hidden="true"></i>

aria-required

情境:for與id綁定後,aria-label會念不出來,對label使用aria-hidden="true" 才能正常報讀。

<label for=""><input id="">
    
<fieldset class="fieldset-input">
    <label for="a1" aria-hidden="true">標題</label>
    <div class="row" >
        <input type="text" aria-label="報讀內容" id="a1" aria-required="true">
        <p>警示訊息</p>
    </div>
</fieldset>

aria-checked

如果使用 ARIA 屬性,我們就可以爲元素提供缺少的信息,以便屏幕閱讀器能正確解讀它。 我們在以上代碼中添加了 role 和 aria-checked 屬性,將該元素顯式標識爲一個複選框,並指定它在默認情況下處於選中狀態。該列表項現在將添加到無障礙樹中,屏幕閱讀器將把它正確地報告爲一個複選框。

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true"> Receive promotional offers </li>

aria-haspopup

情境:提醒使用者該按鈕會彈出對話筐

 <button (click)="openForgetPassword()" aria-haspopup="true">彈出對話筐</button>

aria-modal

情境:Dialog對話框彈出至前景,還是會觸發到背景的按鈕,會造成使用者混亂。

<div role="dialog" class="search-assistant-dialog" aria-modal="true"> 

digitala11y 解說

The aria-modal attribute is used to indicate that the presence of a “modal” element precludes usage of other content on the page. For example, when a modal dialog is displayed, it is expected that the user’s interaction is limited to the contents of the dialog, until the modal dialog loses focus or is no longer displayed.

If set to ‘true’, the background content in the accessibility tree should be hidden by browsers and assistive technologies so that only the modal content is perceived by the user.

If set to ‘false’ or left undefined, then the background content should not be hidden from the perception of AT users.


遇到的問題

  • 情境:目前在首頁收合版上放置隱碼按鈕,會導致在無障在狀態時,無法正常收合
    參考:material.angular

    原因:可展開面板旨在模擬原生元素 <details><summary> 的體驗。 可展開面板的頭部帶有 role="button" 屬性,而 aria-controls 屬性則以可展開面板的 id 作為值。
    可展開面板的頭部實際上是按鈕。使用者可以用鍵盤啟用可展開面板的頭部,以在展開狀態和摺疊狀態之間切換。由於這個頭扮演的是按鈕的角色,因此不能在其中放入其它可互動元素

參考網站

a11y-101

// 靜態字符串
< button aria-label = "發送" > </ button >
// 動態字符串
< button [attr.aria-label] = " labelVariable " > </ button >

table 四列三欄 >>> 蠻奇怪

[attr.aria-label]=" '交易日' + (item.prsDate|dateA11y) + '備註'+ (item.memo || '無內容') + '金額' + item.txAmt + '元'"