WCAG 2.1 を使用した Drupal Web サイトのアクセシビリティのテスト

公開: 2023-05-16

米国の成人 4 人に 1 人が障害を持っていることをご存知ですか*? これは、アクセスできない Web サイトの影響を受ける可能性がある人が 6,100 万人という驚異的な数字です。

Drupal 開発者には、サイトが Web コンテンツアクセシビリティガイドライン (WCAG) に準拠していることを確認することで、変化をもたらす力があります。このブログでは、すべてのユーザーにとって包括的な Web サイトを作成できるように、Drupal で WCAG 2.1 のアクセシビリティをテストするための主要な機能とベストプラクティスについて説明します。

アクセシビリティとは (A11y)

アクセシビリティとは、Web サイトをできるだけ多くの人、特に障害のある人が利用できるようにすることを指します。 A11y とは何を指しますか? A11y は単に「アクセシビリティ」という単語を指します。11 は「A」と「Y」の間にある文字数を示します。

WCAG とその起源

WCAG は Web コンテンツアクセシビリティガイドラインの略です。これは、Web サイトのアクセシビリティの標準化されたベンチマークとみなされます。 World Wide Web Consortium (W3C) によって作成された WCAG ガイドラインは、Web サイトを誰でも利用できるようにするための最良かつ最も簡単な方法です。 WCAG ガイドラインは、Web サイトがアクセシビリティ法 (第 508 条など) に確実に準拠していることを保証するために、ほとんどの政府および医療機関によって厳密に従っています。

WCAG の原則

WCAG 準拠を採用するには、アクセシビリティに関する 4 つの主要な原則があります。これらは、 Perceivable、Operable、Understandable、 Robustを表す「POUR」の頭字語に従います。

知覚可能

簡単に言えば、コンテンツはユーザーの感覚で検出可能である必要があります。これは、提示された情報を認識できなければならないことを意味します。これには、ユーザーがオーディオコンテンツを明確に聞くことができるようにすることや、バックグラウンドノイズから確実に区別できるようにすることが含まれます。

操作可能

ユーザーが Web サイトを快適に移動でき、インターフェイスがユーザーフレンドリーであることを確認することがすべてです。サイトにアクセスできない部分や、ユーザーが完了できない可能性のある手順があってはなりません。 Web コンテンツをデザインするときは、動きの速いコンテンツや点滅するコンテンツは避けてください。キーボードを使わずにサイトを簡単に閲覧できるようにする必要があります。また、マウスを使用できないユーザーでもサイトにキーボードでアクセスできるようにする必要があります。

理解できる

ユーザーは、提示された情報を処理でき、また Web サイトの使用方法や操作方法を理解できなければなりません。これには、ページがユーザーフレンドリーで予想通りに表示されるようにするために、テキストを明確で読みやすく予測可能にすることが含まれます。

屈強

これは、テクノロジーが進化し、将来のテクノロジーの進化に応じて Web サイトを構築できる可能性があることを強調しています。経験則として、テクノロジーが変化し発展しても、コンテンツはアクセス可能な状態を維持する必要があります。また、さまざまな障害を持つ幅広いユーザーが理解できる必要がありますが、依然として理解しやすいものです。たとえば、このサイトでは、最新バージョンのスクリーンリーダーとの互換性が確保されました。

WCAG に準拠する必要がある理由

以下に、WCAG 実装の利点をいくつか示します。

アクセスしやすい Web サイトはブランドに対する好意を築き、検索エンジンの最適化を向上させます。あなたのサイトは検索エンジンの結果でより上位にランクされます。
アクセシブルな Web サイトでは、幅広い人々がコンテンツにアクセスするのを妨げる障壁が効率的に取り除かれるため、エンゲージメント、リーチ、保持率が向上します。
WCAG が Web サイトの一部として実装されると、それは標準とみなされます。

WCAG 2.0/2.1 成功基準: 最も広く実装されている

サイト上のすべての入力フィールドには適切なラベルが付いています
装飾コンテンツは、支援技術によって無視できる方法で実装されます。たとえば、装飾画像はスクリーンリーダーによって無視されます。
すべての録音済みオーディオ/ビデオコンテンツにキャプションが提供されます
音声コンテンツには手話通訳が付いています
意味のあるコンテンツのシーケンス。たとえば、任意のページの見出しが連続した順序で配置されます。
ユーザーは、オーディオを一時停止または停止したり、ビデオを自動的に再生するシステム全体の音量とは別にオーディオの音量を制御したりできます。
文字と文字の画像のコントラスト比は4.5:1、大きな文字と画像のコントラスト比は3:1です。コントラスト比は、装飾コンテンツ、ロゴ、ブランド名には適用されません。
バックグラウンドオーディオが低いか、まったくありません。事前に録音されたオーディオ/ビデオにはバックグラウンドノイズが含まれていません
コンテンツのすべての機能には、キーボードインターフェイスからアクセスできます。キーワードの罠はありません。
ユーザーにコンテンツを読んで使用するのに十分な時間を提供する
コンテンツが時間ベースの場合、ユーザーは一時停止するか、時間制限を調整することができます。
自動カルーセルなどの動きの速いコンテンツの場合、ユーザーには一時停止または停止するオプションが表示されます。
認証されたユーザーのセッションが期限切れになると、ユーザーは再認証後にデータを失うことなくセッションを続行できます。
ページのタイトル、見出し、ラベルは Web ページのトピックを説明します。
キーボードのフォーカスが表示され、強調表示されます
フォーカス可能なコンポーネントは、意味と操作性を示す順序でフォーカスを受け取ります。
Web ページの各セクションにはセクション見出しが付いています。
装飾的な画像を除いて、すべての画像には意味のある代替テキストが含まれています
オーディオ、ビデオ、フォーム、ドロップダウンメニュー、アンカーテキスト、URL、代替テキストにキーボードとスクリーンリーダーからアクセスできます。
コンテンツの明瞭さは、ページのズームレベルに応じて調整されます。最大ズームレベルでもコンテンツがはっきりと見える
ヘルプコンテキストを含むヘッダーおよびフッターメニューは、サイト全体のすべてのページで利用できる必要があります。
サイトにはホバー状態とフォーカス状態が適切に実装されています

スクリーンリーダー

視覚障害を持つ多くの人々は、拡大鏡やスクリーンリーダーを使用しています。スクリーンリーダーは、画面に表示されたデジタルテキストを読み上げるソフトウェアです。スクリーンリーダーの例には次のようなものがあります。

JAWS (Windows) や Dolphin Screen Reader (Windows) などの有料製品。
NVDA (Windows)、ChromeVox (Chrome)、Orca (Linux) などのフリーウェア。
VoiceOver (macOS、iPadOS、iOS)、Narrator (Windows)、ChromeVox (Chrome OS 上)、TalkBack (Android) など、OS (オペレーティングシステム) に組み込まれているソフトウェア。

3 つのレベルのアクセシビリティ

WCAG 2.1 には 3 つのレベルの成功基準があります

レベル A: WCAG 2.0 で定義されている 30 の必須成功基準がすべて満たされています。少なくとも、すべての Web サイトがこのレベルのコンプライアンスを達成する必要があります。
レベル AA: レベル A の成功基準がすべて満たされており、追加の 28 のアクセシビリティ成功基準も満たされています。このレベルは、より幅広いアクセシビリティ範囲を実現し、多くの場合、ほとんどの開発チームが達成する目標です。
レベル AAA: Web サイトは、28 の追加の成功基準を含む、3 つのレベルの成功基準をすべて満たす必要があります。このレベルは通常、政府機関などの特別なサイト用に予約されています。

WCAG 互換サイトのほとんどは、アクセシビリティ成功基準レベル A または AA に広く該当します。

Drupal Web サイトのアクセシビリティテスト

Drupal Web サイトのアクセシビリティテストを実行する手順は次のとおりです。

Google Chrome Lighthouse 監査を実行し、強調表示されたアクセシビリティの問題を修正します
Wave ツールの監査を実行する
キーボードのハイライトフォーカスとページのタブオーダーを手動で検証する
必要なスクリーンリーダーソフトウェアを使用してページを検証します。たとえば、VoiceOver
ワイドデスクトップ、ラップトップ、タブ、モバイルデバイスなどのすべての解像度でサイトのアクセシビリティを検証します。
W3C のマークアップおよび CSS 検証ツールを使用してサイトコードを検証する
Kontrast などの Chrome 拡張ツールや Color Contrast Analyzer などのアプリケーションを使用して、サイトのカラーコントラストを検証して標準 (4:5:1) を満たしていることを確認します。

Drupal がアクセシビリティ標準の達成にどのように役立つか

Web 開発には、Web サイトが機能し、障害のある人もアクセスできるようにするために、アクセシビリティを含める必要があります。 Drupal は、アクセシビリティに対する確固たる取り組みで知られています。 Drupal がどのようにアクセシビリティを促進するのか、また Web サイトをよりユーザーフレンドリーにするために Drupal が提供するツールや機能を見てみましょう。

1. Drupal にアクセシビリティを組み込む

Drupal 開発チームの目標は常に、可能な限り多くのユーザーが使用できるプラットフォームを構築することでした。コア Drupal プラットフォームを開発するときは、Web コンテンツアクセシビリティガイドライン (WCAG) 2.1 レベル AA 要件に従います。これは、視覚、聴覚、身体、言語、認知、神経系に影響を与える障害など、さまざまな障害が Drupal Web サイトにアクセスできることを示しています。

2. デフォルトのアクセシビリティ機能

Drupal のデフォルトのテーマは、レスポンシブデザインのおかげでさまざまな画面サイズやデバイスに適応できるため、モバイルデバイスや支援技術を使用するユーザーに使用できます。
Drupal はセマンティック HTML マークアップを作成します。これは、スクリーンリーダーやその他の支援技術ツールが Web サイトの構造を理解するのに役立ちます。
Drupal には、写真に代替テキストを追加するフィールドがあり、視覚障害者が Web サイトのコンテンツを理解するのに役立ちます。
Drupal はキーボードナビゲーションをサポートしています。これは、マウスを使用できないユーザーにとって重要です。
使いやすく、支援テクノロジーを使用してナビゲートできるフォームは Drupal によって生成され、アクセス可能です。

3. Drupal はアクセシビリティのためのプラグインとモジュールを提供します

Web サイトのアクセシビリティを向上させるために、Drupal は展開できるさまざまなアクセシビリティモジュールとプラグインを提供します。いくつかの人気のアクセシビリティモジュールとプラグインは次のとおりです。

Editor11y アクセシビリティチェッカー:このモジュールは、Web サイトのアクセシビリティに関する問題を検査し、解決策を推奨します。
CKEditor アクセシビリティプラグイン:このアドオンは、Drupal で広く使用されているテキストエディタである CKEditor のアクセシビリティを向上させます。
オールインワンのアクセシビリティウィジェット:このモジュールには、ユーザーが Web サイトのテキストサイズ、コントラスト、その他のアクセシビリティ関連の設定を変更できるようにするアクセシビリティウィジェットが含まれています。
A11Y: フォームヘルパー:このモジュールは、すべての Drupal Web フォームがアクセシビリティ標準を満たすのに役立ちます。
ブロック ARIA ランドマークロール:このモジュールは、ユーザーが ARIA ランドマークロールおよび/または ARIA ラベルをブロックに割り当てることができる追加要素をブロック構成フォームに追加します。

4. アクセシビリティに対するコミュニティの強力なサポート

アクセシビリティに熱心に取り組んでいる開発者とデザイナーが Drupal コミュニティの大部分を占めています。障害を持つ人々が Drupal をより利用しやすくするためにコミュニティが主導する取り組みが、Drupal Accessibility Group です。このグループは、ADA 準拠の Drupal Web サイトを開発するためのガイダンス、ツール、ベストプラクティスを提供します。

参考文献:

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

最終的な考え

Drupal は、Web サイトのアクセシビリティを向上させるためのさまざまな機能、ツール、プラグインを提供する効果的なオープンソースコンテンツ管理システムです。 Drupal は、アクセシビリティへの取り組みとアクセシビリティに重点を置いたコミュニティの強みにより、障害のある人にとって使いやすくアクセシブルな Web サイトを構築するための素晴らしいプラットフォームです。
この記事が、WCAG 2.1 を使用したアクセシビリティテストについて必要な洞察を提供することを願っています。アクセシビリティの高い Drupal Web サイトを最初から構築したいですか、それとも現在のサイトをよりアクセシビリティの高いものにしたいですか? 私たちはそれをぜひ実現したいと考えています。話しましょう!