自動検査だけでは、文章の分かりやすさや操作の自然さをすべて判断できません。Lighthouseの結果を入口にし、キーボード、文字拡大、複数ブラウザで手動確認します。
点数だけを目的にせず、指摘された項目が利用者へどのような影響を与えるか確認して修正します。
Lighthouseを実行する
自動検査の点数だけで判断せず、キーボードや文字拡大などの手動確認も組み合わせます。
Chrome DevToolsのLighthouseから、Performance、Accessibility、Best Practices、SEOを対象にレポートを作ります。拡張機能やキャッシュの影響を減らし、同じ条件で修正前後を比較します。
- 指摘された要素と理由を開く
- 修正できる項目とサーバー設定が必要な項目を分ける
- 大きな画像、読み込み失敗、コントラストを優先する
- 修正後に同じ条件で再実行する
キーボードだけで操作する
- ページ先頭からTabキーで移動する
- フォーカス位置が常に見えるか確認する
- リンク、ボタン、メニュー、フォームをEnter・Spaceで操作する
- 非表示の要素へフォーカスが入らないか確認する
- 操作から抜けられない場所がないか確認する
DOMの順番と見た目の順番が大きく異なると、フォーカス移動が不自然になります。CSSの並べ替えだけで解決せずHTMLの順番を確認します。
次の図では、「キーボードだけで操作する」の仕組みや関係を確認できます。
文字を拡大して確認する
ブラウザのズームを200%まで上げ、文章の重なり、横スクロール、操作要素の見切れを確認します。固定高や小さすぎる領域が原因なら、内容に合わせて広がるCSSへ変更します。
次の図では、「文字を拡大して確認する」の仕組みや関係を確認できます。
複数ブラウザで主要機能を確認する
ChromeだけでなくSafariとFirefoxでも、主要ページ、メニュー、フォーム、JavaScriptの動作を確認します。すべての細部を同じにするのではなく、内容と操作を失わないことを優先します。
次の図では、「複数ブラウザで主要機能を確認する」の仕組みや関係を確認できます。
- CSSのレイアウトとフォーカス表示
- フォーム部品と入力検証
- JavaScriptのメニューとアニメーション
- 画像形式とレスポンシブ画像
- HTTPS、リンク、ダウンロード
検査結果を記録する
確認日、ブラウザとバージョン、画面幅、発生した問題、修正内容を残します。未対応項目は理由と影響範囲を記録し、公開判断から漏れないようにします。
次の図では、「検査結果を記録する」の仕組みや関係を確認できます。
