Help us understand the problem. What is going on with this article?

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

More than 3 years have 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ページを作りましょう◎

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away