お問い合わせ

axe-core 3.2 近日公開

アクセシビリティ・エンジニア 畠山

（この記事は、2019年2月28日に公開された記事「Axe-core 3.2 is coming soon」の日本語訳です。Deque Systems社の許諾を得て、お届けしています。翻訳の正確性は保証いたしかねますので、必要に応じ原文を参照ください。）

  • 訳注1：コード例は原文のままです。
  • 訳注2：外部リンクのほとんどは英語のページにリンクしています。

axeの2019年初のリリースはもうすぐです！これにはいくつかの新しいルール、強化されたレポート機能や、さまざまなバグ修正が含まれます。これらの新しい機能をユーザーの皆さんと共有できることをとてもうれしく思います。今年はaxe-coreのための大きな計画があり、axe-core 3.2はさらにすばらしいアクセシビリティの年への準備を整えてくれるでしょう。私たちはaxe-coreバージョン3.2を含めるため、すべてのaxeとAttest HTMLツールを3月中にアップデートします。このリリースが他のDequeのツールにどのような影響を与えるかについては、担当者にお問い合わせください。

新しいルール

ルール1：<aria-label>の値がウィジェットのコンテンツと一致する

このWCAG 2.1を基にした新しいルールは、特に音声認識ソフトウェアを使用するユーザーをサポートするために作られました。画面上で視認できるテキストをアクセシブルな名前と一致させることで、音声認識ソフトウェアはどのボタン、リンク、そして他のウィジェットの「コンテンツ由来の名前」を操作するのか判断できます。

悪い例：

<a href="page2.html" aria-label="Page 2">Next ?</a>

良い例：

<a href="page2.html" aria-label="Next page">Next ?</a>

注記：このルールを有効にするには、ユーザーは「実験的」タグを有効にする必要があります。axe拡張機能のユーザーは実験的なルールが有効になっているaxe-coconutを使用できます。

ルール2：フォームの入力欄に重複するラベルを付与しない

このルールはフォーム入力欄のラベルについてのルールから外し、個別のベストプラクティスルールに変更しました。フォームをマークアップする際のよくある間違いは、コンテンツ制作者が誤って2つのラベルを1つの入力欄に付与してしまうことです。意図的に複数のラベルを付けることは一般的な方法ではありませんし、コードの管理を難しくします。

悪い例：

<label class="sr-only" for="nmr">Number of products</label>
<label><input type="text" id="nmr" /> pizza's</label>

良い例：

<input type="text" id="nmr" aria-label="number of pizza's" /> pizza's

ルール3：complementaryランドマークがトップレベルに存在する

このベストプラクティスルールはaside要素やrole=complementaryを付与した要素が他のARIAランドマーク内の一部になっていないことを確認します。ランドマークをネストすると、わかりにくいドキュメント構造になります。このルールは、同じARIA要件を持つbanner、contentinfo、そしてmainロールをテストする、既存のルールに類似しています。

悪い例：

<main>
<p>Some text</p>
<aside><p>An aside</p></aside>
</main>

良い例：

<main><p>Some text</p></main>
<aside>An aside</aside>

その他の新しい機能

機能1：テスト環境についての詳細を分析結果に含める

axe-coreや、その他のアクセシビリティ検証ツールを使用する際のよくある課題は、特定の問題を再現することが難しいということです。「昨日は問題がなかったのに、今日axeを実行したら、5つも問題が報告されるのはどうしてですか？」ほとんどの場合、答えは次のいずれかです：

  • ページが変更された
  • axe-coreが更新された、あるいは設定が異なる
  • ブラウザーの設定が異なる

axeはページが変更されたかどうかは判断できませんが、バージョン3.2の時点で、axe-coreは分析結果に他の要因を検討するための情報を含めます。axe-coreは以下のプロパティを報告するようになります：

  • テストエンジン：
    • 名前：axe-core
    • バージョン：3.2.0
  • テストランナー：
    • 名前：分析のために使用されたテストランナー（例：Axe Devtools Chrome, Axe CLI）
  • テスト環境：
    • ウィンドウの幅と高さ：どのメディアクエリーが適用されているかを示します
    • ユーザーエージェント：ブラウザー、ブラウザーのバージョン、分析に使用されたオペレーティングシステム
    • 画面の向きと種類：もし提供されている場合、axe-coreはスクリーンの向きを報告します

これらのプロパティがaxe-coreで利用可能になれば、個々のプロパティを異なるaxe-coreテストランナーやレポーターに追加します。

機能2：さらに詳細なアクセシビリティサポートについてのフィードバック

axe-core 3.1からは、支援技術によるサポートが不十分なロールを使用していた場合に、個別にユーザーに通知するようにしました。これにより、ユーザーは打ち間違えた・存在しないロールと、サポートが不十分なロールを区別できます。axe-core 3.2ではARIAプロパティおよびステートに関しても、同様の問題を通知します。サポートが不十分なARIAプロパティには、次の属性が含まれます：

  • aria-details
  • aria-roledescription
  • aria-describedat（標準ではない）

機能3：新しいアクセシブルな名前の計算方法

axe-coreの重要な構成要素の1つは、そのアクセシブルな名前の計算アルゴリズムです。これは、スクリーン・リーダーや他の支援技術がページ上のさまざまな見出し、リンク、そして他のコンポーネントをどのように名前を付けるかを判断するために使用されています。昨年末、W3CはAccessible Name Computationのバージョン1.1を発行しました。私たちはこの機会に、要素がアクセシブルな名前を持っているかどうかを合理的に示すためだけではなく、正確に計算するためにも、設計を見直しました。

この新しいアクセシブルな名前の計算方法により、axe-coreを基に作られたツールは異なるブラウザーがコンポーネントに与える最も可能性の高いアクセシブルな名前を正確に表すことができます。これはChrome、Firefox、そしてSafariの最小の特徴を見つけるように作られています。さらに、特定のブラウザーのアクセシブルな名前を正確に特定するように設定することもできます。

注目すべきバグ

  • Allow off screen labels for form fields (#1187)
  • Allow <div> groups in definition lists (#1284)
  • Prevent th-has-data-cells from crashing on empty rows (#1285)
  • Prevent TypeErrors in color-contrast checks(#1320)
  • Deprecate axe.commons.utils namespace (#1330)

訳注：バグのタイトルは、参照可能にするため翻訳していません。

既知の問題

  • Axe-core does not work under strict content security policy (#1175)
  • Using maximum-scale in viewport meta element should not be flagged as an issue (#694)
  • Do not check color contrast of non-printable characters (#315)
  • Heading order rule can produce false positives when using context.exclude (#278)
  • ...バグの一覧をご参照ください。

訳注：バグのタイトルは、参照可能にするため翻訳していません。

2019年の記事一覧に戻る