混同しやすいHTMLとARIA

hidden表示されず、キーボードでも届かず、読まれない

inert表示はされるが、キーボードで届かず、読まれない

aria-hidden="true"アイコンは見えるが読まれず、横の文字だけが読まれる

role="none"表・行・セルの意味は消え、文字は読まれる

role="presentation"role="none"と同じ。古い名前

aria-hidden="true"星とその中身は読まれず、文字は読まれる

alt=""装飾の画像なので、読む内容はない

disabledフォーカスできず、変えられず、送信されない

aria-disabled="true"フォーカスできるので見つけられる。動作はスクリプトで止めている

readonlyフォーカスとコピーはできるが変えられない。送信される

<label>名前：「メールアドレス」（ラベルの文字から）

aria-labelledby名前：「お届け先」（idで指した見出しから）

aria-label="検索"名前：「検索」（画面には出ない）

aria-describedby説明：「8文字以上」（名前の後に読まれる）

title="店舗の場所"名前：「店舗の場所」（iframeにはほかに名前がない）

role="status"polite：待つ。メッセージ全体を読む

role="alert"assertive：割り込むことがある。メッセージ全体を読む

aria-live="polite"polite：待つ。カートに入れると変わる

aria-live="assertive"assertive：割り込むことがある。読むのは増えた項目だけで、リストのまま

role="log"末尾に増えた項目が読まれる

role="timer"off：毎秒は読まれない

aria-current="page"「キッチン」に付く

aria-pressed="false"

aria-selected="true"「詳細」に付く

aria-expanded="false"

aria-checked="true"

<a href>場所へ移動（下のお手入れ方法）。Enter。「リンク」と読まれる

<button>このページで操作（カートに入れる）。EnterとSpace。「ボタン」と読まれる

<dialog>閉じている。showModal()で開く。

role="dialog"閉じている。<dialog>を使えない場合だけ。

role="alertdialog"閉じている。答えが必要な質問のため、<dialog>に付ける。

popover="auto"閉じている。開いてもフォーカスは移らない。

<nav>普通のリンク。Tabでリンクからリンクへ移る。今は「ショップ」

role="menu"閉じている。アプリの操作用で、サイトのリンクには使わない。

<select>自由入力はできない。作るものはない。今は「M」

<datalist>自由入力できる。一覧は候補を出すだけ。見た目は変えられない。

role="listbox"自由入力はできない。キー操作、フォーカス、状態はスクリプトで付けた。今は「無地」

role="combobox"入力できる形なので自由入力できる。キー操作、ポップアップ、状態はスクリプトで付けた。

required入力するまでブラウザーが送信を止める。必須と読み上げられる

aria-required="true"必須と読み上げられるが、ブラウザーは止めない。確認はスクリプトで行う

<main>ランドマーク。ページに1つだけ。このページには既にあるため、ここではdivで描いている

<aside>ページ全体の階層にあればランドマーク

<section>aria-labelledbyで名前「レビュー」があるのでランドマーク

<article>ランドマークではない。単独で完結する内容

<progress>作業の進み具合：100中0。アップロードで始まる。

<meter>0から4の範囲の測定値：今は0。値は必須。