この記事は、アクセシビリティテストツールである Axe
と、そのコアとなる OSS である axe-core
について説明している。本文では、axe-core
の基本設計や、ルール・チェック・リザルトについて詳しく解説している。また、ルールやチェックは
JSON
形式で書かれ、スペックに基づいてテスト対象の要素を絞り込み、関数によって評価が行われる。リザルトは、ルールやチェックの評価結果や重大度などを含むオブジェクトとして返される。
色の感じ方は人それぞれであり、UI
デザインにおいてこの問題に対処することは一般的な課題である。Adobe
Color
のアクセシビリティツールは、多くのタイプの人が知覚できる色の組み合わせを提供し、その助けとなる。カラーユニバーサルデザインのプロが、Adobe
Color でこのツールを試し、その効果を評価し、自分の UI
デザインでこのツールをどのように活用できるかを紹介する。
アクセシビリティツリーについて説明している。アクセシビリティツリーは、DOM
ツリーに基づいて生成され、支援技術に提供される情報であり、role、name、description、state
などの情報を持つ。これらの情報を確認することで、アクセシビリティ対応に役立つ。また、アクセシビリティツリーを読み取ることで、アクセシビリティ上の欠陥に気づける。Chrome
では、検証モードの Accessibility のタブ Enable full-page
accessibility tree
にチェックを入れることで、アクセシビリティツリーを確認できる。
stylelint-a11y(おそらく v1.2.1
時点)の各ルールがどのような項目なのかがまとめられている。
株式会社サイバーエージェントのウェブアプリケーション『WinTicket』の開発に関するスライド。p69
からアクセシビリティについてのセクションで、開発速度を上げるためアクセシビリティ対応に
Must と Usual
を設定し、レビュー基準とした話が紹介されている。適切な要素選択を目指しつつも徹底はしない話、十字キーのフォーカス移動をやめ全てタブキーでできるようにした話が印象的。
コントラストチェッカー。複数の色の組み合わせをまとめて検証できる。
チェックツールによって算出されるコントラスト比が異なり、適合結果にも影響する話が掲載されている。基準値ギリギリのコントラスト比を設定するのはリスクがありそう。
JIS X 8341-3:2016
に基づくウェブアクセシビリティ対応の取り組みの支援を目的に、総務省が開発・提供しているアクセシビリティ評価ツール。
国産のマークアップ linter。素の HTML だけでなく React や
Vue.js
のディレクティブにも対応している他、エディタのプラグインもあり。
多くのサービスに採用されているアクセシビリティ自動チェックツール。
WebAIM
提供の自動チェックツール。英語だが、チェック対象のウェブページの上に問題点が重なって表示されるので、わかりやすい。Chrome 機能拡張、Firefox 機能拡張もある。
有料のアクセシビリティテストツール。
macOS
用アプリケーション。オーバーレイウィンドウでデスクトップ上の表示に色覚特性のフィルターを掛けられる。
アクセシビリティテストができる無料のオープンソースツール。テスト実行のスケジューリングができるウェブサービス、ダッシュボード、CI
向けの CLI ツールがある。
Mac
のメニューバーに常駐するタイプのコントラストチェッカー。有料だがシンプルな
UI。
色のアクセシビリティが確認できる Mac
アプリ「Contrast」が超便利
コントラストチェッカー。Windows/Mac
両方で動作し、ローカライズもされている。
GitHub の PR
に対しアクセシビリティの問題点があればコメントしてくれるインテグレーション。
有限会社時代工房が提供する、ウェブサイトのアクセシビリティチェックができるツール。