Alert role - ！てなるやつ

一気に頭に入り切らんので、気が向いたら何個かずつやっつけるスタイルで

まずは alert - Alert, Alert Dialog

Alert Dialog role

は、すぐわかる、alertとして表示されるdialog(modal)につけましょうよってこと
aria-labeldby="ID_REFERENCE", aria-describedby="ID_REFERENCE"で対応する(タイトル)ラベル、内容を明示しましょうよってことよな

<div id="alertdialog" role="alertdialog" aria-modal="true" aria-labelledby="dialog_label" aria-describedby="dialog_desc" class="hidden">
    <h2 id="dialog_label" class="dialog_label">Confirmation</h2>
    <div id="dialog_desc" class="dialog_desc">
        <p>Are you sure you want to discard all of your notes?</p>
    </div>
    <div class="dialog_form_actions">
        ...
    </div>
</div>

ビジュアル的にタイトルを表示しないようなものなら、aria-label を alertdialog つけたelementに属性としてつけましょうよとのことらしい

<div id="alertdialog" role="alertdialog" aria-label="Confirmation" aria-modal="true" aria-labelledby="dialog_label" aria-describedby="dialog_desc" class="hidden">
    <div id="dialog_desc" class="dialog_desc">
        <p>Are you sure you want to discard all of your notes?</p>
    </div>
    <div class="dialog_form_actions">
        ...
    </div>
</div>

こんな感じ

Alert role って何や？

<div class="visually-hidden" id="notes_save_status" role="alert"></div>

alert dialog についてくるサンプル例だとわかりにくかった。

https://www.w3.org/WAI/ARIA/apg/patterns/alert/

<button type="button" id="alert-trigger">Trigger Alert</button>

<div id="example" role="alert"></div>


<script type="text/template" id="alert-template">
  <p>Hello</p>
</script>
        

文章内に出てくる表示だけのalertに使うものね

インタラクション

インタラクションとして、何かユーザーのアクションが必要ならrole="alertdialog"パターンを、特に何もないならrole="alert"を使うって感じか

AlertDialogのインタラクション

AlertDialogというか、dialogのインタラクションぽいので、後ほど出てくるであろうdialogの時にでもまとめて調べよう

感想

特にこれといったインタラクションの無い Alert ではあんまり実感として持ちにくい
確かに音がない状態で表示される Alert要素は利用者や環境によっては気付けにくいものであるのだろうと思う