Nu html CheckerとAxe DevToolsとの関係性

とあるところで、HTMLチェッカーをかけて報告された問題を解決したのだけれども、axe DevToolsで問題が報告されるというような話を目にしたので、少し整理しておこうかなと。

HTMLチェッカー（ここではNu html Checkerとしましょう）でHTMLチェックすると、次の3つの種類の問題が報告されます。

  • Error
  • Warning
  • Info

HTMLの構文に則ったHTMLを記述するには、少なくともErrorを0にする必要があります1。しかし、アクセシビリティチェックで指摘する問題となるかどうか、具体的にはWCAG 2の達成基準を満たせているかどうかとは無関係です。たとえば、次のHTML断片はErrorとして報告される構文違反ですが、どの達成基準の問題にも当てはまらないものです。そして、実害があるかといえば、ないといって構わないでしょう。品質のよろしくないHTMLでは、類似のHTMLの構文違反となる問題が多数報告されます。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

次のようなHTML断片は、Warningとして報告されますが、達成基準上の問題ではありません。ARIA in HTML仕様によって、<footer>に暗黙のARIAセマンティックス（implicit ARIA semantics）であるrole=contentinfoを設定することは推奨しない（NOT RECOMMENDED）と規定されています。気色悪さはありますけれども。

<footer role="contentinfo" class="dummy_class">

次のHTML断片はWarningとして報告されます。これは、ARIA in HTMLの仕様違反であり、達成基準 4.1.2「名前 (name)・役割 (role)・値 (value)」の問題です。（Axe DevToolで実際に問題として報告されます）。

<div class="dummy_class" aria-label="検索"></div>

次のHTML断片はWarningとして報告されます。これは、テーブル列の数が合わず、HTMLの情報構造として問題があります。よって達成基準 1.3.1「情報及び関係性」の問題となるといえます。（しかし、Axe DevToolでは問題として報告されません）。

<table>
<tr>
<th colspan=2>見出しセル1</th><th>見出しセル2</th>
</tr>
<tr>
<td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td>
</tr>
</table>

次のHTMLは、Nu html Checkerでは何も報告されません。しかし、ボタンの「名前」（accessible name）がありませんから、達成基準 4.1.2「名前 (name)・役割 (role)・値 (value)」の問題です。（Axe DevToolで実際に問題として報告されます）。

<button><span class="dummy_class"></span></button>

（あまりまとまっていないような気がしますが、）関係性をまとめるとすると、次のことがいえるでしょうか。

  • Nu html Checkerの大半のErrorやWarningの問題は、WCAG 2の達成基準上の問題には当たらない。
  • Nu html Checkerの一部のErrorやWarningの問題は、達成基準 1.3.1「情報及び関係性」や、達成基準 4.1.2「名前 (name)・役割 (role)・値 (value)」の問題となることがある。
    • それらの問題の中には、Axe DevToolsで検出できるものがある。
  • Nu html Checkerの問題が一切報告されなかった（0件となった）としても、Axe DevToolsで検出される達成基準上の問題が存在することがある。

それはそれとして、Nu html Checkerの問題を0に近づけることは、ウェブページの品質の向上に寄与しますし、結果的にWCAG 2の達成基準上の問題を減らすことにつながるのは確かでしょう。

  1. Error、Warning、Infoの明確な定義を知らないのですが、どこかに記載されてましたっけこれ…↩