Sa11y

Sa11yはWebサイトに組み込んだりブックマークレットとして使えるOSSのアクセシビリティチェックツールです。

下記のコードを挿入する事でWebページのアクセシビリティチェックを行う事が出来ます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

<link rel="stylesheet" href="sa11y.css"/>
<script src="sa11y-english.js"></script>
<script src="sa11y-v2.js"></script>

いまどきjQuery依存も珍しいですが、もともとCMS等で使う事を想定した開発だったそうで、CMSで最も使われていると言われるWordPressを主なターゲットにしたのかなと思います。といっても特にプラグインの用意等は無いので憶測でしかありませんが。

自分のサイトでテストしたらエラー1件しか出ず、サンプルに適さなかったので首相官邸のWebサイトでテストしました。

ブックマークレットを起動すると右下にエラー件数(successも含まれてるかも)とアイコンが表示、クリックすると上記のように該当箇所がハイライトされます。ハイライトされたアイコンにマウスホバーすれば解説がポップアップします。

ポップアップにはtippy.jsが採用されています。CMSに導入するなら、ログインユーザーのみ表示されるようにすれば常時確認が出来ますね。

Sa11yは包括的なコード分析ツールではなくコンテンツの問題のみを強調する仕様に留められています。特徴としては50以上のテスト条件を用意、オープンソース、ツールチップで問題点を指摘、 ローテクで実装可能、カスタムルールセットの追加が可能、自動チェック機能などがあります。

ただ、コンテンツの評価法に採用しているのがFlesch–Kincaid readability testsだそうなので、これに日本語圏のテキストがどう評価されるか分かりません。コンテンツの評価に関しては実用的にするのであればOSSなので日本語圏に向けて再設計する必要がありそうです。

また、100%動作を保証されるものではないものの、ブックマークレットも用意されており、自身の管理していないWebサイト等のチェックも行う事が出来ます。

ライセンスはMITとの事です。

Sa11y