1. ikemai

    Posted

    ikemai
Changes in title
+Cromeでa11yをチェックする方法
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,46 @@
+a11y(アクセシビリティ)は常にチェックしないと、すぐに落ちてしまいますよね。
+というわけでデバックツールを使っていつでもチェックしましょう
+
+# SPページのチェック方法
+デバックツール・Auditsを使います
+こちらはSPページでしか実行することができません
+
+## 1: Auditsの出し方
+もしデバックツールに出ていなかったら以下で出してください
+デバックツールを開いた状態で `Command + Shift + P`
+すると検索が出てきますので  `show audits` と打ち込んで出てきたものをクリック
+<img width="1028" alt="スクリーンショット 2017-09-12 午前10.54.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/80770/875eeee8-43a1-68e0-2337-e77a6f0a163f.png">
+
+## 2: a11yの達成状況を調べる
+今回はa11yを調べたいだけなので
+Accessibilityのみにチェックをいれて`Run`
+
+<img width="539" alt="スクリーンショット 2017-09-12 午前10.56.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/80770/74e2923b-ae21-6c77-838d-56348f5bde83.png">
+
+しばらくすると、以下のように結果が出てきますので、warming以上は治しましょ
+
+<img width="742" alt="スクリーンショット 2017-09-12 午前10.57.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/80770/ebe53e36-64da-270c-7861-990cac542f92.png">
+
+
+# PC/SPページのチェック方法
+
+Legacy Auditsを使います
+SPの方法よりは精度が落ちてしまうので、SPはなるべくこちらを使わないようにしましょう
+
+## 1: Legacy Auditsの出し方
+デバックツールを開いた状態で `Command + Shift + P`
+すると検索が出てきますので  `show legacy audits` と打ち込んで出てきたものをクリック
+
+## 2: a11yの達成状況を調べる
+今回はa11yを調べたいだけなので
+Accessibilityのみにチェックをいれて`Run`
+
+<img width="748" alt="スクリーンショット 2017-09-12 午前10.50.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/80770/8ac0eb0e-775c-bee6-920b-ea177847533e.png">
+
+しばらくすると、以下のように結果が出てきますので、warming以上は治しましょ
+<img width="748" alt="スクリーンショット 2017-09-12 午前10.51.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/80770/9c1cb2c9-c944-8b73-bc11-a26d43fa7003.png">
+
+
+---
+
+細かく調べて細かく治して、素晴らしいwebページを作りましょう◎