Axe更新情報:DequeがAxe-core 3.5をリリース!
チーフアクセシビリティエンジニア 黒澤(この記事は、2020年2月11日に公開された記事「Axe Updates: Deque releases axe-core 3.5!」の日本語訳です。Deque Systems社の許諾を得て、お届けしています。翻訳の正確性は保証いたしかねますので、必要に応じ原文を参照ください。)
- 訳注1:コード例は原文のままです(明確な脱字は補っています)。
- 訳注2:外部リンクのほとんどは英語のページにリンクしています。
Axe-core 3.5には4つの新しいルール、いくつかのバグ修正、そして新しい翻訳が含まれています。ですが、最もエキサイティングな変更はコントラストのテスト機能がはるかに高速に、より正確になったことです。
高速なコントラストのテスト
色のコントラストを正確にテストすることは、アクセシビリティの機械テストでもっとも難しいことの1つです。私たち(訳注:Deque Systems、以下同じ)はAxe-core 3.5でコントラストのテスト機能を一新しました。新しいテスト機能は巨大なページで、はるかに高速に動きます。とはいえ、ちょっとしたトレードオフもあり、小さなテストでは若干遅くなる場合があります。
新しいコントラストのテスト機能の利点の2つ目は、これまでの機能に比べてエラーが起きにくくなったことです。この新しいテスト方法では、私たちはコントラストに関する13個の偽陽性(訳注:false positive、問題ではないものを誤って問題として識別してしまうこと)を閉じており、「偽陽性はバグ」というAxe-coreにおけるコミットメントを強化しています。お気づきの偽陽性を報告いただけましたら、私たちは問題を調査し解決していきます。
Axe-core 3.5の新しいルール
ルール1:svg-img-alt
SVGの要素がimg、graphics-document、graphics-symbolロールを持っている場合に、アクセシブルなテキストを持っていることを確認します。
テストが失敗する例
<svg xmlns="http://www.w3.org/2000/svg" role="img">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle>
</svg>
テストが通過する例
<svg xmlns="http://www.w3.org/2000/svg" role="img">
<title>1 circle</title>
<circle cx="50" cy="50" r="40" fill="yellow"></circle>
</svg>
ルール2:identical-links-same-purpose
同じアクセシブルな名前を持っているリンクが同様の目的を持っていることを確認します。
人によるレビューが必要な例
<a href="https://www.deque.com/">Deque Systems</a>
<a href="https://www.deque.com/">Home</a>
テストが通過する例
<a href="https://www.deque.com/">Deque Systems</a>
<a href="https://www.deque.com/">Deque Systems</a>
ルール3: landmark-no-duplicate-main
文書がmainランドマークを2つ以上持っていないことを確認します。このルールは、エラー報告内容をより良くするためにlandmark-one-mainから分離されました。このルールは新しい問題を報告しません(訳注:これまでlandmark-one-mainとして報告されてきた内容が報告されます)。
テストが失敗する例
<main>Main 1</main>
<main>Main 2</main>
テストが通過する例
<main>Main 1</main>
ルール4:no-autoplay-audio(実験的)
<video>と<audio>が、音声を停止したりミュートする方法を提供せずに、3秒を超えて音声を自動再生しないことを確かめます。このルールは実験的でアーリーアダプター向けの拡張機能axe coconutで利用可能です。Axe-core APIを使って実験的なルールを実行する場合は、runOnlyオプションに"experimental"タグを指定してください。
テストが失敗する例
<audio src="path/to/audio/duration20s.mp3" autoplay></audio>
テストが通過する例
<video src="path/to/video/duration20s.mp4" autoplay controls></video>
非推奨のテンプレート言語
翻訳とカスタムルールにこれまで使用してきたテンプレート言語は非推奨になりました。新しいテンプレートフォーマットを使うことで、Axe-coreはより厳格なContent Security Policyのもとで実行できるようになります。これまで使用してきたフォーマットは次のメジャーリリースでは利用できなくなります。カスタムルールや翻訳者は半年以内に新しいテンプレート言語へアップグレードすることを強く奨めます。詳しい情報はメッセージテンプレートのドキュメントをご覧ください。
非推奨のルール
aria-dpub-role-fallbackとlayout-tableルールは非推奨になり、以前のリリースで追加されたルールに置き換えられています。今回これらのルールは標準で無効になり、次のメジャーリリースでは利用できなくなります。
その他の変更
- 新しいデンマーク語の翻訳:Daniel FreilingとMarianne Gulstad Pedersenの貢献に感謝します
- td-has-headersのパフォーマンス向上
- regionとlandmark-*ルールはページ全体を1個の問題として報告するのではなく個々の要素ごとに問題を報告するようになりました
- meta-viewportはWCAG 2.0の不適合ではなくベストプラクティス(best-practice)となりました
- role属性に関するいくつかのルールにおけるエラーメッセージの改善
全ての変更点の一覧はAxe-coreの変更履歴をご覧ください。
Deque製品での展開
Axe-core 3.5リリース版はWorldSpace Attest、Assure、Comply、axe Proでまもなく利用可能になる予定です。