axe-coreのRule DescriptionsやACT-Rulesを読み、スプレッドシートに詳細をまとめてみた

公開

A11YJにてWCAGの達成基準ごとにaxe-coreのRule IDが確認できるようにしてみたことをつぶやいたところ、もんどさんからのコメントで「About WCAG 2 Test Rules | WAI | W3C」のURLを頂きました。英語が得意でないので全てを読み切ることができないのですが、達成基準を満たすか否かをテストする方法が示されているようです。このテストルールを利用することでaxe-coreのような検証ツールの開発・テストができるということでしょうか。

そのようなわけで、axe-coreのRule DescriptionsからACT-Rules(ACT: Accessibility Conformance Testing)を辿って読んでみました。例えば「Element with lang attribute has valid language tag」を開くと達成基準3.1.2にマッピングされています。テストケースを確認するとlang属性値が正しいかどうか等を確認しており、検証ツールはコンテンツの一節、又は語句がどの言語であるかまでは確認しないことが分かります。(つまりタイトルの通りか…。検証ツールが言語まで検出するような実装になっていれば変わってくるだろうけれど。)ウェブページの自然言語が日本語に指定してあるならば、日本語以外の言語で書かれている一節や語句にlang属性の指定があることを人間が確認しなければならない訳か、と理解しました。

また、「Meta element has no refresh delay」を開くと達成基準2.2.1にマッピングされていますが、テストケースを確認すると達成基準 2.2.1のよくある失敗例F40F41が検証ツールで検出できるのだなと分かります。

その他、axe-core等の検証ツールがACT-Rulesのテストケースを全てパスしたのか否かも確認できました。

そこで、axe-coreのRule DescriptionsやACT-Rules、WCAGの達成方法集などを確認し、スプレッドシートにaxe-coreのRule IDに関連する達成方法やどのような問題が検出できるのか、何を自分でレビューする必要があるのかまとめ始めました。この作業を通じてaxe-coreに対する理解が深まったように思います。JIS X 8341-3:2016 試験実施ガイドラインにある実装チェックリストと合わせて活用していきたいと考えています。
スプレッドシートの画面キャプチャ

スプレッドシート

アクセシビリティ検証ツールで問題を検出できないHTML例

CMSを使用したサイトでよく発生しそうなものを想定して作成しました。

<!-- F32 -->
<p>福山中央警察署地域課<br>安 倍 英 樹<br>伊賀崎 秀 一</p>

<!-- リンクの目的を説明するリンクテキストを提供すべき(H30) -->
<ul>
  <li>外来診療担当表は、<a href="gairai.html">こちら</a>をご覧ください。</li>
  <li>受診方法については、<a href="nagare.html">こちら</a>をご覧ください。</li>
</ul>

<!-- F65? 代替テキストが空 -->
<p><img src="組織図.webp" alt=""></p>

<!-- F81に類似 -->
<p>メールでお申し込みいただく際、下記項目をお知らせください。なお、赤字の項目は必ずご記入ください。</p>

<!-- F2 -->
<p><strong style="font-size: 2em;"><IEサポート終了の背景></strong><p>
<p>Internet Explorerの開発元であるMicrosoft社は、2022年6月15日をもってIEのサポートを終了することを発表しました。</p>

<!-- F91 -->
<table border="0"> 
  <tbody> 
    <tr> 
      <td>名称</td> 
      <td>対象</td> 
      <td>事業実施期間</td> 
      <td>応募期限</td> 
    </tr> 
    <tr> 
      <td>○○国際協力事業</td> 
      <td>○○○○</td> 
      <td>2023年4月1日~2024年2月20日</td> 
      <td>2022年12月31日</td> 
    </tr> 
    <tr> 
      <td>○○講習会</td> 
      <td>○○</td> 
      <td>2023年2月10日</td> 
      <td>2023年1月31日</td> 
    </tr> 
    <tr> 
      <td>○○試験</td> 
      <td>○○○○</td> 
      <td>2023年4月3日</td> 
      <td>2023年2月28日</td> 
    </tr> 
  </tbody> 
</table>

<!-- G202関連 axe-coreはscrollable-region-focusableで問題が検出されるが他のツールでは問題が検出されないことも -->
<div style="width: 20em; height: 5em; overflow-y: scroll">
  <h2>プライバシーポリシー</h2>
  <p>当ブログではメールでのお問い合わせなどの際にお名前やメールアドレス等の個人情報をご提示いただく場合がございます。これらの個人情報は質問に対する回答や必要な情報を電子メールなどでご連絡する場合に利用させていただくものであり、個人情報をご提供いただく際の目的以外では利用いたしません。</p>
</div>