Checka11y.cssによるアクセシビリティチェック
この記事はミツエーリンクス Advent Calendar 2020 - Adventarの1日目の記事です。
昨年のAdvent Calendarでは、最終日にa11y.cssを紹介する記事「a11y.cssによるマークアップの品質チェック」を書きました。その続編、というわけではないのですが、類似のツールでChecka11y.cssをご紹介したいと思います。
Checka11y.cssは、アクセシビリティ上の懸念を検知し、そのハイライト表示を行うスタイルシートです。利用するにはHTML文書にlink要素や@import規則で適用する必要があります。npmまたはyarnを利用している方は、パッケージマネージャーからプロジェクトに導入することが可能です。
本稿執筆時点では、a11y.cssと比べますと、Checka11y.cssの提供する機能の数自体はそれほど多くありません。検知する内容につき、Feature Referencesにある項目を意訳しつつ、以下に列挙します。
- alt属性の指定されていない画像
- title属性の指定されていないiframe要素
- li/script/template要素以外を子要素として含むol/ul要素
- ラベルが指定されていないnav要素（ページ中に複数のnav要素が存在した場合）
- lang属性の指定されていないhtml要素
- target属性で値に_blankが指定されたa要素
- dt/dd要素以外を子要素として含むdl要素（筆者注：このルールは既に最新のHTML仕様では誤りなので、div要素も子要素に含めるよう修正が必要ですね......）
- 子要素に含めてはいけない要素を含むa/button要素
- ltr/rtl/auto以外の値の指定されたdir属性
- フォーカスを当てることが可能であるべきにも関わらずtabindex属性値に-1が指定された要素
- autoplay属性が指定されたvideo/audio要素
- 要素内容を持たない、ないしaria-hidden属性が指定された見出し要素
- !importantを含むインラインスタイル
- accesskey属性の指定された要素
- 要素内容を持たないa/button要素
- 形式的な（画像に則していないかもしれない）内容のalt属性値
- 使用に注意を要する要素
- キーボードからのアクセスが不可能かもしれないイベントハンドラが指定された要素
言わずもがな、Checka11y.cssで何も検知（ハイライト表示）されなかったからといって、そのページがアクセシブルであるとは到底言えません。チェックできる内容は、a11y.cssもそうですけれど、極めて限定的です。
それでもなお、CSSで可能なアクセシビリティチェックについて考えることは、有意義だと私は思います。セレクタについて理解を深める良いきっかけになるという以上に、同じアプローチで同様の品質チェックツールを独自に作ることも容易になるからです。
例えば、上に列挙したなかに「形式的な（画像に則していないかもしれない）内容のalt属性値」という項目があります。ぜひスタイルシートファイルそのものを眺めていただきたいのですが、これは具体的に何をどのようなセレクタで検知しているかというと
img[alt="image" i], img[alt="graphic" i], img[alt="photo" i], img[alt="photograph" i], img[alt="drawing" i], img[alt="painting" i], img[alt="artwork" i], img[alt="logo" i], img[alt="bullet" i], img[alt="button" i], img[alt="arrow" i], img[alt="more" i], img[alt="spacer" i], img[alt="blank" i], img[alt="chart" i], img[alt="table" i], img[alt="diagram" i], img[alt="graph" i], img[alt="*" i], img[alt=" " i], img[alt$=".png" i], img[alt$=".gif" i], img[alt$=".jpg" i], img[alt$=",jpeg" i], img[alt$=".svg" i], img[alt$=".bmp" i], img[alt$="image" i], img[alt$="graphic" i], img[alt^="graphic of" i], img[alt^="bullet" i], img[alt^="image of" i]とあります。かなり力技ですし、コンテンツに使用する言語は英語に限られていますが、画像ファイル名がそのまま代替テキストに指定されている可能性のある画像や、画像が伝えたい内容をきちんと踏まえて作られていないかもしれない代替テキストが指定された画像を洗い出しているわけですね。これをベースに、例えば簡易的な校正のためのチェックツールを作り活用することができるかもしれません。
ぜひ皆さんも、単に期待通りの表示を得るためだけでなしに、アクセシビリティチェックや、より広い意味での品質チェックに有用なスタイルシートを考案してみてください。