🗂️ Design Materials：アクセシビリティガイドラインを理解しよう。WCAG 2.0とWCAG 2.1の違い・チェックリスト・実用的なリソースガイド

2021年12月24日 08:09

WCAGとは？

WCAGとは、Web Content Accessibility Guidelinesの省略で、デジタルコンテンツのアクセシビリティに関するガイドラインのことを示します。W3C（World Wide Webコンソーシアム）は、インターネットを可能な限り包括的にするために努力しているアクセシビリティ専門家のグローバルコミュニティです。またWAI（Web Accessibility Initiative）は、世界中の個人や組織からの意見を取り入れて、WCAGおよび関連リソースを開発しています。

ガイドラインは、主にUXデザイナー、コンテンツ開発者、Webオーサリング・ツール開発者、および関連する専門家の使用を対象としています。アクセシビリティの紹介を目的としたものではありません。しかし、企業や組織、特にデジタルプロパティに貢献する従業員が、WCAG、その目的、および障害を持つ人々だけでなくすべてのユーザーにどのように役立つかについて一般的に理解しておくと役立ちます。

今回ご紹介するチェックリストは、経験豊富なアクセシビリティの専門家および業界に不慣れな方々のためにも役立つ実用的なリソースガイドです。

WCAG2.1のハイライト

モバイル
タッチ操作、キーボード、およびマウスのサポートを改善しています。
デバイス・センサーの意図しないアクティブ化を回避します。
ロービジョン
コントラスト要件が拡張されています。またテキストとレイアウトの適応性を向上させています。
認知障害者
ユーザー・インターフェイスのパーソナライズをサポートするために、ページ・コントロールと要素のより詳細な説明を有効にしています。

WCAG 2.0とWCAG 2.1の違い

ほぼ10年前にリリースされたWCAG2.0には、デジタル・アクセシビリティに関する12のガイドラインが含まれていました。これには4つの原則に分けられていました。

４つの原則

原則1：コンテンツは知覚できなければならない。
原則2：コンテンツのインターフェイス要素は操作可能でなければならない。
原則3：コンテンツとコントロールは理解可能でなければならない。
原則4：コンテンツは現在および将来のユーザーエージェント（支援技術を含む）での利用に耐えるものでなければならない。

各ガイドラインには、テキスト、画像、音声、コード、マークアップなどのコンテンツをよりアクセスしやすくするための「成功基準」または要件（合計61）のリストがありました。

さらに、WCAG 2.0には、A（最小のアクセシビリティ）、AA（主要で最も一般的なアクセシビリティの問題に対処）、およびAAA（最高の標準）の3つのレベルの適合性があります。

WCAG2.0で見つかった成功基準はWCAG2.1に含まれています。
これらの基準の言い回しは変更されていません。つまり、WCAG 2.1は「下位互換性」があるか、W3Cが言うように、「WCAG2.1に準拠するコンテンツはWCAG2.0にも準拠する」ということです。

WCAG 2.1の新機能は、モバイルアクセシビリティに関連する17の新しい成功基準と、より多くの人々に利益をもたらす規定が含まれていることです。

WCAGの必要性とは？

WCAG 2.0、2.1どちらも「既存の標準」です。

W3Cは、組織がコンテンツまたはデジタル・アクセシビリティ・ポリシーを開発または更新するときに、最新バージョンのWCAGを使用することを推奨しています。

ウェブサイトやその他のデジタルツールやテクノロジーにアクセスでき、WCAG 2.1レベルAおよびAAに準拠しているため、最大限のアクセシビリティを確保するために、追加の17の成功基準を今すぐ実装することをお勧めします。

WCAG 2.1の最大の変更点は？

モバイル固有のハイライト
モバイル・プラットフォームのアクセシビリティをテストする場合、個人はWCAGをモバイルに適用するために、WCAG2.0標準をモバイル・デザインガイドラインにマッピングする必要がありました。

現在、WCAG 2.1の新しいモバイル要件は、次の方法をガイドするのに役立ちます。
音声入力
→ 文字キーのショートカット
→ 名前のラベル
ポインタ
→ ポインタ・ジェスチャ
→ ポインタのキャンセル•ターゲットサイズ
入力方法
→ 同時入力メカニズム
→ モーション作動
デバイスの設定
→ オリエンテーション
その他の基準モバイルに適用できる
→ 入力目的を特定する
→ リフロー
→ 非テキストコントラスト
→ テキストの間隔
→ ホバーまたはフォーカスに関するコンテンツ

WCAG2.1をテストするには？

「デジタル・アクセシビリティ・テスト」は内部または外部向けのWebサイト、モバイル・アプリ、ソフトウェア・アプリケーション、またはLMS（学習管理システム）がユーザーによって使用可能かどうかを徹底的にチェックする段階的なプロセスを指します。

これらのデジタル・プロパティの適切なアクセシビリティ・テストには、通常、WCAG 2.1の成功基準に対する個々のWebページの広範囲にわたる精査、およびプロダクト検索やオンライン・フォーム送信などのさまざまな機能のテストが含まれます。

また、自動テストツールを使用して、デジタル・プロパティのさまざまな特定の要素へのアクセス可能性をチェックすることも意味します。最善のアプローチは通常、両方の組み合わせです。

自動テストとは？

Webサイト、モバイル・エクスペリエンス、アプリ、またはデジタル・ドキュメントの特定のコンポーネントの自動テストを実行するために利用できるツールは多数あります。

それらは予備検査を行うのに非常に役立ちます。アクセシビリティの専門家は、Webサイトを効果的にテストするために、さまざまなツールを組み合わせて使用することがよくあります。

WCAG 2.1の成功基準は、自動化されたツールを使用してテストできます。

自動アクセシビリティテストは、障害者が問題に遭遇する可能性のあるさまざまな理由について詳しく知るための優れた方法です。ただし、この形式のテストには制限があるので注意してください。

予備的な自動テストを実施するためのツールは多数あります。どのツールがファイアウォール設定で機能するかを決定します。

💡ファイアウォールは、ネットワークの通信において、その通信をさせるかどうかを判断し許可するまたは拒否する仕組みです。

デザインチームと開発者チームが同じツールを使用することをお勧めします。QAチームは、コンプライアンスと使いやすさを確保するために、さらに多くのツールを活用する可能性があります。

実用的なリソースガイド

W3C CSS Validatorソフトウェア

コード検証をする
W3C CSS Validatorソフトウェアは、WebデザイナーとWeb開発者がカスケードスタイルシート（CSS）をチェックするのを支援するためにW3Cによって作成されました。

Web上の無料サービスで使用するか、ダウンロードしてJavaプログラムとして、またはWebサーバー上のJavaサーブレットとして使用します。このツールを使用すると、スタイルシートをCSS仕様と比較でき、エラー、タイプミス、およびCSSの誤った使用法を見つけることができます。また、CSSがユーザビリティのリスクをもたらす時期についてもアドバイスします。

Color Contrast Analyzer

色のコントラストと色覚異常をチェック
Color Contrast Analyzerは、テキストの読みやすさや、グラフィックコントロールや視覚的インジケーターなどの視覚的要素のコントラストを判断するのに役立つダウンロード可能なツールです。現在、このツールはWCAG2.1コンプライアンスインジケーターをサポートしています。

Accessibility Scanner

モバイルアクセシビリティ
2つのツールがモバイルアクセシビリティスペースに役立ちます。 Androidの場合、Accessibility ScannerはAndroidアプリのアクセシビリティをチェックします。 iOSの場合、アクセシビリティインスペクタを使用してアクセシビリティをチェックできます。どちらのアプリも、開発者とQAオーディエンスによって利用されています。

ドキュメントのアクセシビリティ

ドキュメント・アクセシビリティ・ツールバー
DAT(Document Accessibility Toolbar)は、Microsoft Word専用のアクセシビリティリボンメニューで、アクセシブルなドキュメントをすばやく簡単に作成できます。

このツールバーは、ドキュメントのアクセシビリティを最適化および検証するために、厳選されたカスタムビルドのさまざまな機能を備えています。 PDFアクセシビリティチェッカーPAC3を使用すると、PDFのアクセシビリティをチェックできます。Adobe Acrobat Professionalをお持ちでない方でも動作します。

Webアクセシビリティ

WAVE by WebAIMツールは、シンプルな赤、黄、緑のアイコンを使用してエラー、警告、および適切な領域を表示するため、業界で人気のあるツールの1つです。

また、ARIAチェックとカラーコントラストアナライザーが組み込まれており、スタイルシートのオン/オフを切り替えることができます。現在、
WCAG2.0に対してのみチェックします。他のツールは、コンテンツ、デザイン、開発者、QAチームに分析の特異性を提供します。

手動および機能テスト

アクセシビリティ・テスト手動および機能テストは不可欠なコンポーネントです。

これらのテストタイプでは、人間の専門知識を使用して自動テストをチェックし、トレーニングを受けたチームや障害者が実際にデジタル体験に直接関与するようにします。この部分を置き換えることができるテクノロジーはありません。

手動レビューを実施する場合、サンプルテスト計画には次のコンポーネントを含める必要があります。

すべてのユーザーに対して最も正確な環境をテストしていることを確認しましょう。

GoogleAnalyticsをチェックして、トラフィックの多いページを特定します。
このリストをWebAIMのスクリーンリーダー調査およびロービジョン調査と相互参照します。

アクセシビリティ機能をHTML5ブラウザのアクセシビリティとクロスチェックして、すべての機能がサポートされていることを確認します。

キーボードのアクセシビリティチェック
コード検証チェック
自動アクセシビリティツールチェック
手動および機能テストのユーザーストーリー：
次のようなアクセシビリティ関連のユーザーストーリーを作成します。
→ キーボードのみ使用するユーザーとして、すべてのリンク（テキストまたは画像）、フォームコントロール、およびページ機能にアクセスして、アクションを実行したり、選択した場所に移動したりできるようにする。
→ 聴覚障害のあるユーザーとして、ビデオクリップで提供されるすべての情報にアクセスできるようにクローズドキャプション機能を付け加える。
→ コンテンツにアクセスする前に、すべてのページとすべてのナビゲーションをタブで移動できるようにする。
→ 画像にキャプションをつける。

手動テスト機能を強化する方法

オプション1
アクセシビリティ・テスターの社内チームを構築して、開発中のデジタル・プロパティのQAを実行します。
オプション2
外部コンサルタントを雇って、ウェブサイト、アプリ、電子ドキュメントを体系的にテストします。遭遇した問題と障壁を概説する1回限りのレポートを提供します。
オプション3
アクセシビリティ・パートナーと時間をかけてアクセスして作業する。
さまざまな支援技術を使用して複数の環境でデジタルプロパティを手動でチェックする。これらのパートナーはまた、重要、高、中、低レベルの問題の概要を示す優先順位付けレポートを作成し、デジタルプロパティを監視するためにあなたと協力します。継続的に、バックエンドシステムにシームレスに統合して、チームとのコラボレーションを強化します。

まとめ

障害は非常に一般的ですが、障害のあるユーザー向けに特別なエクスペリエンスや分離されたエクスペリエンスをデザインしなくてもアクセシビリティ基準を満たすことの利点は、障害のないユーザーにも当てはまります。それは誰にとってもお互いに有利です。

現在、人々の価値観において様々な変化が起きています。インクルーシブやダイバーシティへの理解を深めたサービスも多く見られるようになってきています。

あなたの提供しているサービスや、プロダクトがインクルーシブ・デザインをしっかり重視しているか、どんな障害を持っている方誰にとっても使いやすいものになっているのかを確認するチャンスかもしれません。

こちらの記事も参照して見てください。

みんなに優しいデザインを届けよう。WCAGとは？アクセシビリティの原則、デザイナーのためのツール、リソース

みんなに優しいデザインを届けよう。Webアクセシビリティ・ガイドラインとチェックリスト。プレゼン資料

インクルーシブデザインとは？アクセシビリティの簡潔ガイド

［参考資料］

チェックリスト

私も、色々勉強中なので、皆さまの、ご意見・ご感想をお聞かせください。お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。主にデジタル・プロダクトの制作に携わっています。