Edited at

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ページを作りましょう◎