1. ikemai

    No comment

    ikemai
Changes in body
Source | HTML | Preview
@@ -1,46 +1,46 @@
a11y(アクセシビリティ)は常にチェックしないと、すぐに落ちてしまいますよね。
-というわけでデバックツールを使っていつでもチェックしましょう
+というわけで google cromeのデバックツールを使っていつでもチェックしましょう
# 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ページを作りましょう◎