references/framework-notes.md

フレームワーク・ライブラリ別の注意点

対象が使用している技術に応じて該当する節を読む。ここに挙げるのは典型的なパターンであり、網羅ではない。観点表による確認を置き換えるものではない。

<div onClick={handleClick}>削除</div>          // フォーカスできず、キーボードで実行できない
<span onClick={...} role="button" tabIndex={0}> // まだ不足。onKeyDown が必要

<button type="button"> を使うのが正解。type を省略するとフォームの中で submit になるため、フォーム内のボタンでは type の指定漏れも確認する。

<dialog> の showModal() を使っている場合、フォーカストラップ・Esc での閉鎖・背景の不活性化はブラウザが提供する。自前実装の場合はすべて確認が必要。

useId() を使わずにハードコードされた id は、コンポーネントが同一ページに複数配置されたときに重複する。id の重複は <label for> や aria-labelledby の紐付けを壊す。

非対話要素への @click（React と同じ問題）
v-show は display: none になるため支援技術からも隠れる。v-if との使い分けが適切か。逆に、視覚的に隠しているつもりが opacity: 0 や height: 0 で、支援技術からは読めてしまう・フォーカスできてしまう箇所がないか
<transition> の途中の状態でフォーカスやライブリージョンが期待通りに働くか
v-html の中身は静的に判定できない
Nuxt: <html lang> は nuxt.config の app.head.htmlAttrs.lang で指定する

Svelte のコンパイラは a11y 警告を出す（a11y-click-events-have-key-events など）。警告が抑制（svelte-ignore）されている箇所は、抑制の理由が妥当かを確認する
{@html} の中身は静的に判定できない

クラス	確認すること
`outline-none` `focus:outline-none`	代替のフォーカススタイルがあるか（KBD-08）。`focus-visible:ring` のみの場合、ハイコントラストモードで消える
`sr-only`	アイコンのみのボタンに視覚的に隠したラベルが付いているか。逆に `hidden` を使ってしまい支援技術からも消えていないか
`w-4 h-4` などの固定サイズ	ターゲットサイズ 24×24px を満たすか（VIS-24）。padding での拡張を含めて確認する
`text-gray-400` など	背景色とのコントラスト比を計算する（VIS-09）。薄いグレーは不足しがち
`truncate` `overflow-hidden`	文字サイズ変更・テキスト間隔変更で切れないか（RFL-02, RFL-04）
`w-[320px]` など固定幅	320px 幅でのリフロー（RFL-03）
`pointer-events-none`	無効化の手段として使われている場合、支援技術からは操作可能に見える

tailwind.config のカスタムカラーは、コントラスト比の計算のために値を解決する必要がある。

aria-labelledby aria-describedby for は Shadow DOM の境界を越えられない。ホスト側の id を Shadow root 内から参照しても解決されない
スロットに渡されたコンテンツの扱い
delegatesFocus の指定とフォーカス順序

Radix UI、Headless UI、Ark UI、MUI、Chakra UI、Ant Design などを使っている場合。

ライブラリが提供するアクセシビリティ機能を、使い方によって壊していないことを確認する。 よくあるのは以下。
- Dialog.Title を使わず、ダイアログにアクセシブルネームがない
- asChild や as で別の要素に差し替えた結果、ロールが変わっている
- ラベル用のコンポーネントを使わず、独自のテキストを置いている
- スタイルの上書きでフォーカスリングを消している
ライブラリ内部の実装は辿らない。パッケージ名とバージョンを記録し、確実でない部分は「要追加確認」として実ページでの確認に回す