より重要になった、HTMLのアクセシビリティに関する問題を解決するChromeの拡張機能 -Alix
Post on:2017年3月22日
先週の記事「HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ」をブラウザで簡単に利用できるChromeの機能拡張を紹介します。
まだリリースされたばかりですが、早くも利用者が1,000人を超えようとしています。

Alix -GitHub
Alix -Chrome ウェブストア
Alixの特徴
Alixは少し高度なCSSセレクタを使用したスタイルシートを適用するだけで、HTMLのアクセシビリティに関する問題を解決できます。
実際にどんなセレクタを使用しているのかは、前回の記事を参考にしてください。
スタイルシートを記述するのは時間がかかる、セレクタが難しい、という人でも大丈夫です。AlixはCSSでおこなうHTMLのLintツール「a11y.css」をブラウザから簡単に利用できるようにしたものです。
Alixを適用しているところ
表示ページに簡単に適用できます。
Alixのインストールと使い方
AlixはChrome対応の拡張機能で、無料で利用できます。
Chrome ウェブストアからインストールしてください。

インストールが完了すると、Chromeのツールバーから起動できます。

Alixのパネル
- Language
- メッセージの言語を選択できます。
残念ながら、日本語は未対応なので、「English」でよいと思います。 - Minimum Notice Level
- 表示したいエラーの最小レベルです。
以下の4つのオプションから選択できます。 -
- エラーのみ
- 警告とエラー
- 廃止されたもの、警告、およびエラー
- すべて
「Apply」ボタンをクリックすると、表示ページを判定します。
sponsors