Google Chrome拡張機能のアクセシビリティチェックツール"Alix"が便利すぎた

Google Chrome拡張機能のアクセシビリティチェックツール**Alix**が簡単便利でかなり使えたので紹介します。

## 概要
**Alix**は[a11y.css](http://ffoodd.github.io/a11y.css/)を元にしたChrome拡張HTML lintツールで、閲覧中のHTMLコードにチェック用のCSSを当てることによってアクセシビリティ上のエラーを検証し、マークアップに関するアドバイスをしてくれます。

### Alix
- [Chrome ウェブストア](https://chrome.google.com/webstore/detail/alix-for-chrome/aepmadgjacfjcneccddiccnkbpimobge)
- [GitHub](https://github.com/ireade/alix)

##使い方
![d7c03a4c-089a-11e7-96cc-9ac1cdef5488.gif](https://qiita-image-store.s3.amazonaws.com/0/119598/32f94a69-c6f8-8960-a134-4028770f0e50.gif)

1. Chromeを立ち上げ、[Chrome ウェブストア](https://chrome.google.com/webstore/detail/alix-for-chrome/aepmadgjacfjcneccddiccnkbpimobge)よりインストールします。
2. Chromeの右上に`><`という形をしたAlixのアイコンが表示されるのでクリック。
3. すると設定画面が表示されます。　　![dac3dcb2-089a-11e7-9b92-dcdf9791d52d.png](https://qiita-image-store.s3.amazonaws.com/0/119598/c3151ab0-7142-feef-74fd-031628b0f815.png)

4. `Language`は`English`を（残念ながら日本語はありません）選択。
5. 通知レベルは`Everything`（旧式の書き方、注意とエラー、アドバイス）, `Obsolete Stuff, Warnings & Errors`（旧式の書き方、注意とエラー）, `Warnings & Errors`（注意とエラー）, `Only Errors`（エラーのみ）の4種類から用途に合わせて選択します。
6. 最後に`Apply`ボタンを押します。ターミナル画面の操作などを必要とせずとっても簡単ですね。ちなみにサーバ/仮想サーバに上がってないローカル環境のHTMLに対してもちゃんと動いてくれます。

##実践
本来は自分の制作物を使ってデモをするべきなのですが…まさにAlixを使ってエラーをなおしてしまった直後のため、ちょうどいいサイトがありませんでした。
そこで、イメージ的にアクセシビリティ配慮が完璧っぽい[W3C](https://www.w3.org/)でこのツールを起動してみると…
<img width="935" alt="スクリーンショット 2017-04-10 17.36.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/119598/8951390e-9cff-fd36-bb0f-be8137ff4c4e.png">

何…だと…？
予想に反して普通に色々でましたね。W3Cでも完璧ではないんだと思うと逆に気が楽になります。

## エラー一覧日本語訳
- Do not disrupt the natural tab order. It’s like killing kittens.<br>
=>Tabキーによる移動順序はごちゃごちゃさせずに連番にしようぜ
- This [href] is empty. Where does this link go to?<br>
=>[href]が空だよ
-  Empty link without any kind of label. Empty link…<br>
=>a要素が空だよ。空にする理由があるなら`title`や`aria-label`の追記を検討しよう
-  Missing [alt] attribute, or blank value. Sacrilege!<br>
=>画像のalt属性が抜けてるよ
-  [src] or [srcset] attribute missing or empty. Oh, well…<br>
=>画像の[src]属性または[srcset]属性が抜けてるよ
-  Missing [for] attribute. Still, this label must be here for some reason.<br>
=>label要素のfor属性が抜けてるよ
-  This field is indescribable. However you got choices: \a   [title], [id], [aria-label], [aria-labelledby].<br>
=>このフィールドはどこに対してのものかよくわからないよ。[title], [id], [aria-label], [aria-labelledby]で明示しよう
-  What should happen when I click? \a   Too bad. [value], [title] or [aria-label] could have told me :)<br>
=>この要素をクリックするとどうなるの？[value], [title] や [aria-label]で明示しよう
-  What should happen when I click? \a   It’s missing a content or a title via [aria-label], [aria-labelledby] or [title].<br>
=>この要素をクリックするとどうなるの？[aria-label], [aria-labelledby] や [title]で明示しよう
-  [aria-label], [aria-labelledby] or [title] on a `<button>` must not be empty. That’s awkward!<br>
=>`<button>`の中の[aria-label], [aria-labelledby] や [title]属性が空ですよ
-  A button is [type=submit] if it misses a type. But this one isn’t in a form, so what is it supposed to do?<br>
=>`[type=submit]`の`<button>`があるけど、`<form> </form>`の中に入ってないよ
-  A button with a type of " attr(type) " shouldn’t have any form submission attributes<br>
=>そのタイプの`<button>`要素はフォームをsubmitできないよ
-  If it’s disabled, please use a [disabled] or [readonly] attribute on this button.<br>
=>ボタンを押せなくするのなら、[disabled] か [readonly]を使おう
-  Missing or empty [type] attribute. \a   What is the field for then?<br>
=>[type]属性が空だよ。
-  You have gathered options, but no label attribute introduces this options group. \a   Too bad…<br>
=>`option`をまとめているけど、どんなグループかわからないよ。`<optgroup>` には[label]をつけよう。
-  Missing or empty [title]. \a   Only God knows what is this `<iframe>`.<br>
=>`<iframe>`には[title]をつけよう
-  Missing [action] attribute. \a   What now?<br>
=>`<form>`には[action]属性をつけよう
-  No lang/xml:lang found on `<html>` tag. \a   JAWS will have a weird accent!<br>
=>`<html>`タグには[lang]を必ず書こう
-  A tag/attribute with a semantic value has nothing to do in a table used for layout.<br>
=>レイアウト目的でテーブルを使ってるけどセマンティクス的に大丈夫かな？
-  By jove! [width] & [height] attributes are forbidden on any tags but `<img>`, `<object>`, `<embed>`, `<svg>`and `<canvas>`!<br>
=>[width] と [height]は`<img>`, `<object>`, `<embed>`, `<svg>`, `<canvas>`以外の要素には使えないよ
-  JavaScript event attributes. An external JS file would be better :)<br>
=>JavaScriptのクリックイベントなんかは外部ファイルで書く方が今風だよ。または`:hover`,`focus`, `active`といったCSS擬似クラスで書き替えられないかな？
-  Classes and IDs must follow a specific grammar. And this thing here doesn’t.<br>
=>クラス名、ID名の文法をよく見て。二連ハイフン（`--`）や数字から始まるid名やclass名は、cssの記述が無効になるよ。
-  The `<title>` tag is empty. Don’t you know it’s the most important tag in a web page?<br>
=>`<title>`タグが空だよ。これ重要だから忘れないでね

## まとめ
やたらと砕けた文体のエラーメッセージの翻訳がちょっと大変でしたが、言ってることは的確で勉強になりました。
何より手軽でGUIが使いやすいのがいいですね。