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

公開日:

修正日:

Chrome 64, 65 の DevTools で魅力的な機能がいくつか追加されています。

DevTools 上で編集した内容をコンピューター上にファイルとして保持し、ブラウザリロードをしても変更前の状態に戻らないようにするLocal Overrides(developers.google.com)なども注目したいところですが、ここではアクセシビリティ関連の2つの新機能を紹介します。

アクセシビリティペイン(Chrome 64 ~)

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

図拡大
図1:Chrome 64 で Google トップページの検索欄にフォーカスを当てた時のアクセシビリティペイン

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

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

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

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

カラーピッカーのコントラスト比(Chrome 65 ~)

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

図拡大
図2:Chrome 65 のカラーピッカー
図拡大
図3:Chrome 73 のカラーピッカー
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)(www.w3.org)ではコントラスト比について、

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

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

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

図拡大
図4:color: #f00; background: #fff で AA を満たさない様子
図拡大
図5:color: #f00; background: #fff; font-size: 18pt で AA を満たした様子

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

図拡大
図6:背景がグラデーションの時のカラーピッカー

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

  • [1]中国語、日本語、韓国語はそれと同等のサイズとされており、WAIC による日本語訳の訳注(waic.jp)によれば日本語は22ポイントまたは18ポイントの太字が相当するとのことです。
  • [2]ただし、日本語は前述の注記のように 18pt 以上ではなく 22pt 以上であるべきですが、現状そこまでの認識はしてくれないようです。