Web
デバッグ
accessibility
a11y

Cromeでa11yをチェックする方法

More than 1 year has passed since last update.

a11y(アクセシビリティ)は常にチェックしないと、すぐに落ちてしまいますよね。
というわけで google cromeのデバックツールを使っていつでもチェックしましょう

SPページのチェック方法

デバックツール・Auditsを使います
こちらはSPページでしか実行することができません

1: Auditsの出し方

もしデバックツールに出ていなかったら以下で出してください
デバックツールを開いた状態で Command + Shift + P
すると検索が出てきますので  show audits と打ち込んで出てきたものをクリック
スクリーンショット 2017-09-12 午前10.54.25.png

2: a11yの達成状況を調べる

今回はa11yを調べたいだけなので
AccessibilityのみにチェックをいれてRun

スクリーンショット 2017-09-12 午前10.56.00.png

しばらくすると、以下のように結果が出てきますので、warming以上は治しましょ

スクリーンショット 2017-09-12 午前10.57.21.png

PC/SPページのチェック方法

Legacy Auditsを使います
SPの方法よりは精度が落ちてしまうので、SPはなるべくこちらを使わないようにしましょう

1: Legacy Auditsの出し方

デバックツールを開いた状態で Command + Shift + P
すると検索が出てきますので  show legacy audits と打ち込んで出てきたものをクリック

2: a11yの達成状況を調べる

今回はa11yを調べたいだけなので
AccessibilityのみにチェックをいれてRun

スクリーンショット 2017-09-12 午前10.50.22.png

しばらくすると、以下のように結果が出てきますので、warming以上は治しましょ
スクリーンショット 2017-09-12 午前10.51.44.png


細かく調べて細かく治して、素晴らしいwebページを作りましょう◎