Webコンテンツ・アクセシビリティ・ガイドライン

Table of Contents

WCAGとは

あらためて、Webコンテンツ・アクセシビリティ・ガイドライン(WCAG)は、障がいのある人のため、高齢者のため、一時的に体の自由が利かない人のために、Webアクセスしやすいように設計しようね、という、世界中で採用されているWebアクセシビリティの基本仕様です。

ワイ・アリア(WAI-ARIA)は、HTMLコーディングにセマンティック(意味)を持たせ、Webアクセシビリティを考慮したWeb設計のための技術仕様です。

WCAGとWAI-ARIAを合わせ、『Webアクセシビリティのガイドライン』のいいのでは?と思っていますが、W3Cが別のコンテンツとして取り扱っているため、このホームページでもW3Cに合わせています。

話しは戻りまして、WCAG は、4つの原則を中心に展開しています。WCAGの4つの原則を覚えるために、頭字語”POUR”で暗記しておくといいです。

  1. 知覚・認識(Perceivable):画面を見ることができない人や読むことが困難な人のためにコンテンツを読み上げたり、独自の文字サイズに拡大したり、点字デバイスに表示したりなど、代替テキストで様々な方法でコンテンツを表示します。音声が聞こえなかったり映像が見えない人にはキャプションや音声ガイドを提供します。

  2. 操作性(Operable):Webコンテンツは、マウスとキーボードの両方で操作する必要があります。しかしマウスをうまく使えない、あるいはまったく使えないという人もいます。キーボードで操作できないと、ほとんどの視覚障害のある人はWebをみれません。したがい、JavaScript の onKeyPress と onClick を併用したり、CSS で :hover と :focus の両方を使用し、マウスとキーボードのどちらでも効果が得られるようにします。

  3. 理解可能(Understandable):Webコンテンツは、障がいのある人だけでなく、通常に使える人にも理解される必要があります。「ここをクリック」など、内容の無いリンクや、現在地がわかりにくいナビゲーションを避けるようにします。

  4. 安定・互換性(Robust):Webコンテンツは複数のプラットフォームで機能する必要があり、テクノロジーが進化しても同時進行でWebコンテンツも機能し続ける必要があります。これは難しくありません。基本に沿った正しいコーディングで開発するだけです。規格外の技術を使う必要がある場合、もう1つ標準版を用意します。

適合レベルについて

WCAG では、適合レベルというシステムを導入していります。適合レベルは、レベルAが最も重要です。
レベルの存在は、開発者がレベルクリアできるためにしなければならないこと、すべきこと、実行できるこを考える手助けになります。

  • レベルA:問題を解決する必要があります。解決しないと、一部のユーザーがWebコンテンツにアクセスできなくなります。このレベルの問題は、ユーザーが回避しても克服できない可能性のある、重大な障壁を表しています。
    • レベルAの例には、画像を説明する代替テキストがない、ということがあります。視覚障害のある人は、テキストの説明なしで画像の内容を自分で理解できることはほとんどありません。

  • レベルAA:問題を解決する必要があります。解決しないと、一部のユーザーがWebコンテンツにアクセスできなくなります。このレベルの問題は、ユーザーの努力で回避できますが、Webコンテンツの使用または理解がより容易になります。
    • レベルAAの例には、キーボードでナビゲートするときに、カーソルのフォーカスに追従できないことです。キーボードを使ってナビゲートする視覚障害のある人、またはキーボードを完全に使用できるユーザーにとって、カーソルの位置が見えず、Enterキーを押すタイミングがわからない場合、コンテンツをナビゲートするのは非常に困難です。リンクまたはボタンをアクティブにします。

  • レベルAAA:この問題を解決して、すべての人が使いやすさを向上させることができます。Web コンテンツには技術的にアクセス可能かもしれませんが、問題を解決することで使いやすさをさらに向上させることができます。
    • レベルAAA例には、頭字語や略語に対し、完全な表現がどこにも提供されていないことです。目の見えない人にとっては、スクリーン・リーダーで発音された頭字語や略語は色味や言葉の強弱がわからず、ちんぷんかんぷんに聞こえるかもしれません。また、短縮形に慣れていない一般ユーザーにとっては、頭字語や略語の意味を知るために、他の検索サイトで意味を調べる必要があります。

レベルAA は、ほとんどの Web サイトが目指すべき適合レベルであり、いくつかのレベルAAAの項目はクリアしている場合があります。また、レベルAAAに準拠する Webサイトはほとんどありません。レベルAAAへの準拠は一般には達成不可能であり、場合によっては望ましくない場合もあります。

レベルAからレベルAAAまで3つの段階で、すべてのページが適合されている場合に、ロゴを貼ってもいいことになっています。

WCAG2.0とWCAG2.1のロゴの種類

チェックツールのリンク集

無料公開しているソースなので、100以上のサイトが存在しますが、ほぼリンク切れでサービスをやめたりしているWebサイトが多いです。日本のサイトもその1つです。

総務省が公開しているmiChecker (エムアイチェッカー)Ver.2.0もありますが、そもそも総務省のWebサイトが古いフォントで見づらい。。。という個人感想は抜きにして、ダウンロード版なのでここでは省きます。

以下サイトは継続してオンライン上で利用でき、どこがアクセシビリティが足りないかをわかりやすく説明してくれるチェッカーサイトのみ、ピックアップしました。

サイト名サイト概要リンク先
WAVEメール登録なしに、アクセシビリティチェックができます。https://wave.webaim.org/
LighthouseChromeブラウザを使っているなら、拡張機能を入れてチェックができます。重たいです。Chrome Lighthouse
IBM Verification toolsIBMが提供しているチェッカー。ブラウザの拡張機能に入れて、開発モードでチェックできます。Verification tools
Color Contrast Accessibility Validator カラーコントラストチェッカーhttps://color.a11y.com/

個人的には、『WAVE』か拡張機能の『IBM Verification tools』をお勧めします。

アクセシビリティ・ランドマーク

ランドマーク(Landmarks)は、プログラムでページのセクションを識別します。また体の不自由な人が、スクリーンリーダーのような支援技術を使用した時、Webページのさまざまなセクションに簡単に移動できるようにするのに役立ちます。

ランドマークは、HTMLのセクションと呼ばれるHTMLタグの要素であるrole属性を使用します。また、role属性を無理に使用しなくても、HTMLセクションを使うことによってrole属性を同じ意味を持つ場合があります。

以下のHTMLソースはどちらもアクセシビリティ・ランドマークという意味では、同じ意味になります。

role属性を使用/<div>タグ

<div role="main">
  <h1>メインコンテンツのタイトル<h1>
  .... メインコンテンツエリア ....
</div>

マルチメインランドマーク

<div role="main" aria-labelledby="title1">
  <h1 id="title1">メインコンテンツのタイトル 1<h1>  .... メインコンテンツエリア 1 ....
</div>
....

<div role="main" aria-labelledby="title2">
  <h1 id="title2">メインコンテンツのタイトル 2<h1>
  .... メインコンテンツエリア 2 ....

</div>

HTML要素を使用/<main>タグ

<main>
  <h1>メインコンテンツのタイトル<h1>
  .... メインコンテンツエリア ....
</main>

マルチメインランドマーク

<main aria-labelledby="title1">
  <h1 id="title1">メインコンテンツのタイトル 1<h1>
  .... メインコンテンツエリア 1 ....
</main>
....

<main aria-labelledby="title2">
  <h1 id="title2">メインコンテンツのタイトル 2<h1>
  .... メインコンテンツエリア 2 ....

</main>

このように、HTMLだけで完結するランドマークのタグが以下のように用意されています。

  • <header>
  • <nav>
  • <main>
  • <aside>
  • <section>
  • <footer>

Webアクセシビリティを高めるために、意味のないHTML構造タグを使用せず、意味のある構造にするためのWebコーディングを心がけます。

role属性の種類

role属性は、ARIA機能の1つです。全部で8つあり、それぞれがWebサイトのコンテンツ・ブロックを表します。
HTMLタグにこのrole属性を追加するだけで、スクリーンリーダーを使用する人は、ページのセクションにすばやくジャンプできます。

  • role=”banner”
  • role=”navigation” (例:メニュー)
  • role=”main” (ページのメインコンテンツ)
  • role=”complementary”(例:サイドバー)
  • role=”contentinfo”(著作権表示などのページに関するメタデータ)
  • role=”search”
  • role=”form”
  • role=”application”(独自のキーボードインターフェイスを備えたWebアプリケーション)

注意:role=”application”の使用

アプリケーションには、キーボードですべてのコントロールをナビゲート(操作)するための独自機能があり、ユーザーがキーストロークを学習できるようにヘルプテキストを簡単に利用することを想定しています。

スクリーンリーダーのような支援技術は、role=”application”でマークアップされたコンテンツに遭遇すると、ユーザーのキーストロークの通知を受けることを停止し、すべての機能をアプリケーションに渡します。

これは問題になる可能性があります。通常使えるキーが突然その機能の提供を停止します。

したがい、role=”application”を使用する場合は、慎重に開発が必要です。

role属性のまとめ

アプリケーションの開発やJvascropt、PHPを使用するWebサイトの場合は、HTMLタグでコーディングするには汎用性が低いなど、HTML構造タグを使いにくい場合があります。

したがい、WAIの概念にあるような不変で堅牢なサービスを提供していくため、そのサービスを受ける人のアクセシビリティを考え、最適な方法を提供する必要があります。(時には<DIV>タグで見出しを表現したりなど)

Webコンテンツ・アクセシビリティ・ガイドラインの本家のサイト、日本語のサイトは、とにかくリンクが多くて非常に読みにくいです。

勉強を始めたばかりの方には概要をつかむだけで大変です。特に自分のように英語が読めない場合には、Google翻訳に頼っても頭に入りません。

そこで、Webコンテンツ・アクセシビリティ・ガイドラインについて手始めに見るサイトを抜粋しました。

以下リンク集をたどっていけば、Webアクセシビリティの技術的概要が身につきます。

サイト名サイト概要リンク先
W3Cの原文サイトガイドラインの概要、バージョン説明や準拠ロゴの使用方法について書かれています。Web Content Accessibility Guidelines (WCAG) Overview | Web Accessibility Initiative (WAI) | W3C
ガイドライン2.2の概要ARIA、CSS、SCRIPTの使用例が書かれています。どうすればWCAG2.2に沿うことができるかを簡潔に書かれています。Techniques for WCAG 2.2
WebアクセシビリティチュートリアルWCAG に準拠した Web サイトの作成方法チュートリアル。ページ構造、メニュー、画像、テーブル、フォーム、カルーセルについてかたんに書かれています。。Webデザイナー、開発者など、Webに係わる人全員を対象にしています。https://www.w3.org/WAI/tutorials/carousels/
ガイドライン2.0の日本語のページW3C公認の、ガイドライン2.0に関する公式日本語ページ。個人的に文章が難しい。。。https://waic.jp/docs/UNDERSTANDING-WCAG20/Overview.html
WCAG2.2ガイドライン大きく4つのカテゴリに分けて書かれています。1.知覚・認識、2.操作性、理解可能、4.安定・互換性のカテゴリです。
技術的なことは書かれていません。
Web Content Accessibility Guidelines (WCAG) 2.2
HTML無料で利用できる開発者向けリソースです。逆引きリファレンスのように使え、重宝します。対応ブラウザ、参考ソースが載っています。https://www.w3schools.com/

google 広告