ウェブとフロントエンド · 中級
アクセシビリティ:飛ばせない最小限
一行でいうと: アクセシビリティのほとんどは正しいHTMLを書くことから来て、失敗のほとんどは標準要素をそれらしく見えるものに置き換えることから来る。
ほとんどをカバーする四つのこと
正しい要素。ボタンはボタン、リンクはリンク、見出しは降順。クリックハンドラーを持つdivはキーボードでアクセスできず、スクリーンリーダーに告知されない。
コントラストとサイズ。白地の薄いグレーのテキストは最も一般的な問題で、一つのカラー変数を変更することで解決する。
キーボード。Tabだけで全フローを歩く。ポップアップを閉じられなかったり、ボタンに届かない場合、それはブロックだ。
代替テキストとラベル付きフォーム。意味のある各画像に説明、各フィールドにリンクされたラベル。
何をどう確認するか
自動ツールは問題の約三分の一を捉え、各ビルドで実行する価値がある。残りは二つの短い手動チェックで捉える:キーボードパス、中心ページのスクリーンリーダー読み上げ。
手動チェックはページごとに十五分かかり、どのツールも見ないものを明らかにする——例えば、タブ順序がエリア間を飛んでいること。
商業的にも報われる理由
同じ修正がモバイル、日光下、遅い接続でのユーザビリティを改善する。そして多くの場所で、ウェブサイトのアクセシビリティは規制上の要件でもある——資格ある人と状況を確認する価値がある。
さらに深く
ベースコンポーネントを一度構築する——ボタン、フィールド、ダイアログ、メニュー——正しいフォーカス管理とロールを持ち、各画面で書き直すことを許可しない。アクセシビリティはシステムレベルで達成され、個別の修正の時点では達成されない。