Smart Communication Design Company
ホーム > ナレッジ > Blog > フロントエンドBlog > 2019年12月 > a11y.cssによるマークアップの品質チェック

a11y.cssによるマークアップの品質チェック


取締役 木達

この記事はミツエーリンクスアドベントカレンダー2019 - Qiitaの25日目の記事です。

「アリックス」と発音するそうですが、a11y.cssという名前の、一種の品質チェックツールについてご紹介します。

a11y.cssの概要

accessibilityの省略表記として「a11y」という表記が英語圏を中心に根づいている昨今、あたかもアクセシビリティ品質に特化したチェックツールかと思われるかもしれませんが、そういうわけではありません。アクセシビリティに関わるものを含め、マークアップに潜むリスクや間違いを指摘するものです。

Firefox用のアドオンChrome用の拡張のほか、後述するレベルと言語(英語のほかロシア語、中国語、アラビア語、ポルトガル語、ギリシャ語が選択可能)を組み合わせて生成するブックマークレットから使用することができます。

指摘の対象はエラー(Errors)、警告(Warnings)、時代遅れ(Obsoletes)、アドバイス(Advices)という4つのレベルに分類されています。数がやや多いのですが、本稿執筆時点の最新版において、どんなマークアップを指摘するか列挙します(リンク先はそれぞれ、英語で書かれた公式サイト上の解説です):

エラー

警告

時代遅れ

アドバイス

a11y.cssに対する雑感

最新のHTML仕様に追いつけていない部分(例:妥当ではないtable要素内容で指摘しているthead/tfoot/tbody要素の序列)がありますし、どの指摘をどのレベルのものとして扱うかや、そもそも指摘内容として妥当か? という点で議論の余地はありますけど、技術的に面白い取り組みだと私は思いました。CSSセレクタの充実により、CSSだけでこれほど多くの潜在的な課題を指摘可能というのは、かれこれ20年以上にわたりWeb制作に携わってきた身からすると、少しばかり感動してしまう点です。

a11y.cssをそのまま活用しなくとも、a11y.cssを参考にプロジェクト固有のマークアップ品質チェック用CSS(や、同CSSを適用するブックマークレット)を作ってみると、面白いかもしれません。それだけであらゆる品質を網羅的にチェックするのは不可能にせよ、マークアップ工程における品質担保や効率化の一助として、プロジェクト固有のマークアップルールへの適合状況を簡単にチェックできるようになれば、きっと便利でしょう。

また冒頭で触れたように、a11y.cssは複数の言語に翻訳されています。サンタさんからのプレゼント代わりに、私のほうで本日までに日本語バージョンをリリースしようと思っていたのですけど、時間的に間に合いませんでした。申し訳ありません。本記事をきっかけとしてa11y.cssの翻訳に興味を持たれた方は、是非Translations · ffoodd/a11y.css Wikiを参照のうえ挑戦してみてはいかがでしょうか......良いクリスマスをお過ごしください。