記事 今後の WCAG の変更について知っておくべきこと

公開: 2022-10-07

2022 年 9 月、W3C は、WCAG の次のバージョンが推奨候補のステータスに達したことを発表しました。 11 時間の変更がなければ、標準のバージョン 2.2 はすぐに承認されるはずです。 変更は比較的小さなものですが、ウェブサイトの構築やメンテナンスを担当する人は、これから何が起こるかを知っておく必要があります。

WCAG に既に精通している場合は、概要をスキップして、オタクの詳細に直接ジャンプできます。それ以外の場合は、読み進めてください。

WCAG とは何か、なぜ重要なのか?

Web コンテンツ アクセシビリティ ガイドライン (WCAG) は、Web 開発者、デザイナー、およびコンテンツ管理者が、さまざまな障害を持つ人々が Web サイトにアクセスできるようにするために設計された一連の基準で構成されています。 W3C の Web Accessibility Initiative チームがこの標準を担当しています。 W3C と WAI は、Web をよりアクセスしやすくすることに重点を置いた業界リーダーと対象分野の専門家のコンソーシアムで構成されています。

WCAG は、アクセシビリティの 4 つの原則に基づいて編成されています。 これらの原則は、Web サイトは認識可能で、操作可能で、理解しやすく、堅牢でなければならないことを示しています。 これらの各原則には、基本的な目標を説明するガイドラインがあります。 各ガイドラインには、Web サイト開発者が WCAG に準拠するために満たすべき特定の測定可能な目標を説明する成功基準があります。

それぞれの達成基準には、A、AA、または AAA の適合レベル指標があります。 レベル A の基準はより簡単に満たすことができますが、AAA は最も厳しい基準です。

Web サイトが WCAG 2.2 AA に準拠していない場合、訴えられますか?

決定的な答えは「たぶん」です。

米国では、法律があいまいで、ADA は明示的に Web サイトに対処していません。 物理的な空間で行わなければならない配慮については非常に具体的な法律がありますが、ADA がウェブサイトに直接適用できると述べているのは、企業の「施設はアクセシブルでなければならない」ということだけです。 それでも、すべての裁判所がウェブサイトを企業の施設と見なすかどうかについて合意しているわけではなく、「アクセス可能」の明確な定義はどこにもありません。 民間企業のウェブサイトと連邦法について話していることに注意してください。 連邦および一部の州政府の Web サイトには、適用される法律があります。

「アクセシブル」の明確な定義がないため、私たちは WCAG を参照して、Web サイトを構築または維持するときに何をすべきかを教えてくれます。 米国の法律では、公開 Web サイトに対して特定のバージョンの WCAG (またはその他の標準) を推奨することはありません。 ただし、どのバージョンの WCAG 成功基準も満たすよう努めることは、良い目標です。 すべての人にとって合理的にアクセス可能なサイトにつながるはずです。

規格はどのように開発されていますか?

一般に信じられていることとは反対に、標準の開発は象牙の塔で選ばれた少数の参加者によって行われるわけではありません。 作業の多くはメンバー組織の従業員によって行われますが、作業の大部分は、招待された専門家や、トピックに情熱を持ち、喜んで時間を割いてくれる他の個人からもたらされます。 さらに、多くの標準化チームは、質問をしたり、新しい問題を提起したりして、コミュニティのメンバー全体が参加することを奨励されているオープンな公開フォーラムを持っています。

WCAG については、新しいイシューやプル リクエストを開くか、Github の WCAG リポジトリで既存の議論に参加することで、一般の人々が標準について読んだりコメントしたりできます。 アイデアを持ってグループに参加するときは、既存のすべての問題とプル リクエストを検索して、あなたのアイデアがまだテーブルに持ち込まれていないことを確認することが常に賢明です。 プル リクエストで WCAG に貢献することを考えている場合は、必ず時間をかけて問題を開き、最初にアイデアについて話し合ってください。 不必要な作業を省ける可能性は非常に高いです。

標準化に貢献することは、苛立たしく困難なこともありますが、非常にやりがいのあることでもあります。 ほとんどの場合、参加者はとても歓迎的で忍耐強いです。 時間をかけて自分のアイデアを調査し、十分な注意を払い、礼儀正しく、他の人を尊重するなら、あなたの貢献は大歓迎です。 考えられる最悪の結果は、これまで考えられていたよりも、主題に精通するようになることです。

何が変わった？

WCAG 2.2 では既存の 1 つの成功基準が変更され、9 つの新しい成功基準が追加されました。 ここでは、AAA をターゲットにすることはめったにないため、レベル A と AA のみに制限します。 すべての新しい基準を確認するには、W3C の記事全文をご覧ください。

2.4.7 フォーカス可視 (A)

この基準は、レベル AA から WCAG 準拠の最低基準である A に変更されました。 それが存在する理由の 1 つは、それほど遠くない過去に、Web サイトを構築する人々がフォーカス リングを取り外すのが一般的だったことです。 結局のところ、それらは設計の一部ではありませんでした。 これは、キーボードで Web ページをナビゲートしているユーザーが、ページのどこにいるかを確認できないことを意味していました。 非常に多くのユーザーが、障害のないユーザーでもキーボード ナビゲーションに依存しているため、この基準をシングル A に変更することは理にかなっています。

すべての主要な Web ブラウザーは、既定でフォーカス リングを表示します。 ここでの重要な要件は、組み込み機能を壊さないことです。

W3C – フォーカスの可視性を理解する

2.4.11 フォーカス外観 (AA)

この新しい基準は、フォーカス リングの可視性に関するいくつかの明確なルールを定義します。 周囲のピクセルと置き換えるピクセルとのコントラスト比は 3:1 でなければなりません。 また、フォーカスされている要素またはサブコンポーネントを囲むか、要素の最短エッジに沿って 4 ピクセルの太い線と同じ大きさにする必要があります。

WCAG規格に準拠したフォーカスリングの例（出典：w3.org）
WCAG 基準を満たしていないフォーカス リングの例 (出典: w3.org)

繰り返しますが、ブラウザのデフォルトのフォーカス リングは通常、この基準を満たしています。 ユーザーはデフォルトに慣れているため、必要な場合にのみ上書きする必要があります。 1 つの例として、デフォルトのフォーカス リングとブランドの主要な色との間の色のコントラストが不十分である場合が考えられます。 通常、ブラウザーはデフォルトで青色のフォーカス リングを使用するため、ブランドのパレットに青色が含まれている場合、競合が発生する可能性があります。

W3C – フォーカスの外観を理解する

2.4.12 焦点が遮られていない (最小) (AA)

この基準は、ユーザーが生成したコンテンツによってフォーカスが完全に覆われてはならないことを示しています。 これは、スティッキー ナビゲーション (ユーザーがスクロールしている間、ウィンドウの上部に表示されるメニュー バー) などの階層化されたコンテンツがフォーカス インジケーターを覆い隠すのを防ぐためのものです。

ここでの最も簡単な解決策は、粘着性のある要素をまったく持たないようにすることです。 ただし、最新の Web サイトでは、スティッキー ナビゲーションとフローティング CTA が多用されているため、これは選択肢にならない可能性があります。 scroll-padding と scroll-margin の CSS プロパティを使用すると、スティッキー ナビゲーションに対応するオフセットを定義できるようになると期待されています。 現時点では、これらのプロパティは、スクロール スナップを利用する要素でのみ使用されます。

後は JavaScript です。 通常、私たちの目標は、必要な場合にのみブラウザーで JavaScript を使用することです。 この StickyFix 関数は、メイン要素内のフォーカス可能な要素を監視し、フォーカスを取得したときにスティッキー ナビゲーションによってそれらの要素が隠れている場合は、スクロールして表示されます。

この関数を使用するには、サイトの JavaScript ファイルに含めるだけです。

 /** * A minimal function that will detect if a focusable element is obscured by sticky navigation * This only works for sticky elements at the top of the page, but could be extended * @author Donovan Buck <[email protected]> * @param {string} selector - A valid CSS selector string for the sticky element * @param {number} offset - An additional offset for the focused element * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors * @tutorial https://www.brandextract.com/Insights/Articles/Changes-to-the-Web-Content-Accessibility-Guidelines/ * @license MIT */ function stickyFix(selector, offset = 0) { // Find the height of our sticky element const sticky = document.querySelector(selector); let stickyRect = sticky.getBoundingClientRect(); let stickyHeight = stickyRect.bottom - stickyRect.top; // Select all the focusable elements within the main element const focusables = document.querySelectorAll('main button:not([disabled]), main [href], main input:not([disabled]), main select:not([disabled]), main textarea:not([disabled]), main [tabindex]:not([tabindex="-1"]):not([disabled]), main details:not([disabled]), main summary:not(:disabled)'
 ); // Add a listener to each focusable element focusables.forEach(focusable => { focusable.addEventListener('focus', (event) => { const targetRect = event.target.getBoundingClientRect(); if(targetRect.top < stickyHeight + offset) { window.scrollTo({ top: targetRect.top + window.scrollY - stickyHeight - offset }); } }); }); };

次に、関数を呼び出すことができます。

 // Wait for the document to load document.addEventListener("DOMContentLoaded", function() { stickyFix('.sticky', 24); });

焦点がぼやけていないことを理解する (最小)

2.5.7 ドラッグの動き (AA)

この基準は、ドラッグ動作がユーザー インターフェイスの一部である場合、単純なポイント アンド クリック アクションを可能にする代替方法を提供する必要があることを示しています。 この例として、ユーザーが自分のコンピューターからブラウザーにファイルをドラッグ アンド ドロップしてアップロードできるようにするフォームが挙げられます。 ユーザーがファイル アップロード ダイアログを使用して、アップロードするファイルを選択できるようにする必要があります。 この 1 つの例外を除いて、ほとんどの Web サイト UI では通常、ドラッグ動作は必要ありません。

ドラッグの動きを理解する

2.5.8 ターゲット サイズ (最小) (AA)

ポインター ターゲットは、隣接するすべてのターゲットから少なくとも 24 ピクセル離れている場合、またはターゲットが文またはテキスト ブロック内にある場合を除き、最小 24 x 24 ピクセルである必要があります。 この基準のデザインをチェックするときは、アイコンとすべてのナビゲーション リストのみを使用するソーシャル共有リンクをチェックするように十分注意してください。

目標サイズに合格した 3 つの例と失敗した 1 つの例 (出典: w3.org)

ターゲット サイズ (最小) について

3.2.6 一貫したヘルプ (A)

Web サイトに、連絡先の詳細、セルフ ヘルプ オプション、または複数のページに表示される連絡メカニズムが含まれているとします。 その場合、これらの要素は、サイト全体の他のページ コンテンツに対して同じ順序で表示される必要があります。 これは主に、優れた一貫した設計の機能であり、この基準を満たすのは難しくありません。

一貫したヘルプを理解する

3.3.7 アクセス可能な認証 (AA)

ユーザーにユーザー名とパスワードを覚えさせることは、認知障害のある人にとって過度の負担となる可能性があります。 このため、Web 開発者は、パスワード マネージャーやコピー アンド ペーストの使用を禁止するログイン プロセスを作成しないでください。 この基準は、パスワードの記憶やパズルの解決などの認知機能テストに依存しない限り、代替の認証方法を許可します。

アクセス可能な認証について

3.3.9 冗長エントリ (A)

この基準は、同じプロセス中にユーザーが以前に入力した情報が自動的に入力されるか、ユーザーが情報を手動で再入力するのではなく選択できるようにすることを示しています。 明らかに、これは誰にとっても予想される便利さです。

冗長エントリについて

参考文献

  • WCAG 2.2 ドラフトの新機能
  • Github 上の W3C の WCAG リポジトリ