このページの中身
アクセシビリティ
使いやすさの前に、そもそも使えるかどうか。あとから足すと組み直しになるので、最初から通します。
図の中身を文字で読む
- アクセシビリティで決めること そもそも使えるかどうか
- 先に決まっていること 色彩 UI部品
- 基準を知る WCAGの構造
- 構造で伝える 構造で伝える ARIA
- 操作できる キーボードで使える
- 見える 見やすさ
- ここが効く先 実装
このページから降りる#
WCAGの構造何を満たせばよいのか
構造で伝える見えなくても内容が届く
キーボードで使えるマウスがなくても操作できる
見やすさ拡大しても、色が分からなくても
ARIA標準要素で足りないときだけよく使うARIAのレシピ
この分野が答えになる場面#
全14件。ほかの分野もまとめて引くなら逆引きへ。
この分野が答えになる場面困り事から引く14 件
| こういうとき | 答え | いますぐ | 詳しくは |
|---|---|---|---|
| モーダルを閉じたあと操作位置を見失う | 閉じたときに、開く前にフォーカスがあった要素へ戻す。押した場所に戻れないと現在地を見失う。 | コードを開く | キーボードで使える |
| キーボードだけで操作できない | div にクリックを付けている。button と a に替える。それだけで、大半は直る。 | コードを開く | キーボードで使える |
| フォーカスの枠を消したい | 消さない。outline の色と太さのほうを変えて、暗い地でも見える形にする。 | コードを開く | キーボードで使える |
| マウスで押すとフォーカス枠が出て邪魔 | :focus ではなく :focus-visible を使う。キーボード操作のときだけ出る。 | コードを開く | キーボードで使える |
| Tabの順序が見た目と違う | CSSで並び順を変えている。DOMの順を直すか、視覚順を戻す。tabindex に正の値は使わない。 | /* DOMの順を視覚順に合わせる。tabindex="1" 以上は使わない */ | キーボードで使える |
| 読み上げで構造が伝わらない | 見出しを大きさで選んでいる。h1からh6を意味の階層で付け直し、大きさはCSSで決める。 | コードを開く | 構造で伝える |
| 画像のaltに何を書けばいいか | その画像が無かったら代わりに何と書くかを書く。装飾なら alt="" にする。省略はしない。 | コードを開く | 構造で伝える |
| アイコンだけのボタンに名前がない | aria-label で機能名を与える。見えているテキストがあるなら、それと違う名前にしない。 | コードを開く | ARIA |
| ariaを付けたのに読み上げが変わらない | 役割が要素と食い違っている。まず適切なHTML要素に替える。ARIAは足りないときだけ。 | コードを開く | ARIA |
| 動的に増えた内容が読み上げられない | 空のライブリージョンを先に置き、中身だけ差し替える。要素ごと後から足すと検出されない。 | コードを開く | ARIA |
| 文字を大きくすると要素が壊れる | 高さを固定している。height をやめて min-height と padding にする。 | コードを開く | 見やすさ |
| 400%拡大の確認はどうやるか | 幅1280pxで400%にするか、幅320pxで開く。横スクロールが出なければよい。 | コードを開く | 見やすさ |
| 動きを減らす設定にどう対応するか | prefers-reduced-motion で大きな移動と視差を止める。色と不透明度の変化は残す。全部止めない。 | コードを開く | 見やすさ |
| アクセシビリティの基準が分からない | WCAG 2.2 の AA を目標にする。まずコントラスト・キーボード・見出し・代替テキストの4つ。 | コードを開く | WCAGの構造 |
他の分野へ#
基礎 ／ タイポグラフィ ／ 色彩 ／ レイアウト ／ デザインシステム ／ UI部品 ／ UX・情報設計 ／ モーション ／ 実装 ／ ブランディング ／ デザインスタイル ／ AIと制作 ／ SEO・公開と検索