画像altを情報の役割に合わせて書く
装飾画像、説明画像、リンク画像、スクリーンショットを分け、支援技術と検索エンジンへ画像の意味を正しく伝えます。
image-altaxe-image-alt
Accessibility
alt、コントラスト、キーボード、ラベル、タップターゲット、リフローなど、自動検査で検出しやすい課題の直し方。
自動検査の所見を開発タスクへ落とし、再スキャンで確認したい。
装飾画像、説明画像、リンク画像、スクリーンショットを分け、支援技術と検索エンジンへ画像の意味を正しく伝えます。
薄い文字、画像上の文字、状態色だけで伝えるUIを見直し、読みやすさと自動検査の両方を改善します。
Tab移動、フォーカス可視性、モーダルや固定要素のトラップを確認し、マウスなしでも主要操作へ到達できるようにします。
入力欄、ボタン、アイコンボタン、iframeなどに、見た目だけでなく機械が読める名前を付けます。
スマホで押すボタン、リンク、チェックボックスのサイズと間隔を広げ、誤タップや操作ストレスを減らします。
狭い幅、文字間隔変更、ズーム時に横スクロールや重なりが出ないよう、レイアウトと固定寸法を見直します。
line-height、letter-spacing、word-spacing、段落間隔がユーザー設定で変わっても、文字が重ならず操作できる状態にします。