Webアクセシビリティ
障害の有無や使う環境にかかわらず、誰もが使えるWebサイトを作るための、HTMLとCSSの書き方をまとめています。
代替テキストや見出しのマークアップ、色の扱い、動きを減らす設定への対応のように、少しの記述で大きく変わる工夫を中心に扱います。UI部品の実装例の多くも、アクセシビリティへの配慮を前提にしています。
2025
2024
- 少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集
- 主題と副題のマークアップにはhgroupを使用する
- subgridで高さを揃えるカード型コンポーネントの実装例
- テキストを1文字ずつアニメーションさせる時の注意点と実装例
- 実装後のチェック項目には「グレースケール表示での確認」を追加したほうがいい
- スムーススクロールの実装例
- dialog要素を使用したモーダルウィンドウの実装例
- アクセシビリティに配慮したタブメニューの実装例
- タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし
- インラインSVGの代替テキストはどうするべきか