Chrome 64, 65 の DevTools でアクセシビリティ関連の機能が進化

Chrome 64 では「Elements」パネルに「Accessibility」ペインが追加されました。

ここでは「Accessibility Tree」「ARIA Attributes」「Computed Properties」の3つの情報を見ることができます。

「Accessibility Tree」は選択した要素の祖先要素がツリー状に表示されます。

「ARIA Attributes」では選択した要素の ARIA 関連の属性情報が表示されます。要素に多数の属性が指定されている場合、 ARIA 関連だけを抜き出してくれるので見やすいですね。

「Computed Properties」では選択した要素の計算されたプロパティ値が表示されます。画像の Google 検索欄の例では、 input 要素に aria-label と title 属性が指定されていますが、aria-label が優先されて title には取り消し線が引かれています。最終的にブラウザや支援技術がどの値を読み取るのかが一目で分かるようになっているんですね。

CSS で color が指定された要素を選択すると、「Elements」パネルの「Styles」ペイン内にカラーピッカーが表示されます。 Chrome 65 ではこれに背景色とのコントラスト比を計測する機能が追加されました。

2019年1月23日追記Chrome 73 では改良が加えられ(developers.google.com)、「Contrast Ratio」の右端にある▽ボタン（Show more）を押した時に表示されるカラースペクトルボックス内の白い波線が2本に増えました。これによって、どの範囲の色が「AAを満たさない」「AAを満たすがAAAを満たさない」「AAAも満たす」のどれに該当するのかが視覚的にも分かりやすくなりました。

上の画像では Contrast Ratio に 4.53 の数値が表示されており、 Passes AA (4.5)、Fails AAA (7.0) となっています。WCAG 2.0 の達成基準1.4.3（レベルAA）ではコントラスト比について、

• 4.5:1 以上
• サイズの大きい文字や文字画像は 3:1 以上（18ポイント以上または太字で14ポイント以上[1]）

という基準があります。レベル AAA の達成基準1.4.6だとこの数値がそれぞれ 7:1（通常）、4.5:1（大きな文字）と厳しくなりますが、 Chrome の DevTools の素晴らしいところは文字サイズも認識した上で達成基準 AA, AAA に準拠しているかどうかまで教えてくれるところです。

例えばある要素に color: #f00; background: #fff; を指定した場合、コントラスト比は 4.0:1 なので、達成基準 AA を満たしません。しかし、これに font-size: 18pt; を追加すると「大きい文字」の扱いとなるので、 AA に準拠となります[2]。

なお、背景が画像やグラデーションの時は、さすがに自動でコントラスト比を計算してくれることはないようです。このときコントラスト比の数値は ? と表示されますが、スポイトツールが自動的に有効になっており、マウスで背景色を選択することで計測することが可能です。

このように、コントラスト比を計測するにあたり充分満足な機能を有しているとまでは言えませんが、これまで外部ツールを使って計測していたのと比べると格段に便利になりそうです。