見出し画像

Webアクセシビリティのすすめ　その2

カンナート｜Kannart

こんにちは！日々子育てに奮闘中、ディレクターのMです。
前回はWebアクセシビリティについてざっくり説明させていただきました。前回の記事はこちらです。

まずは前回のおさらいから。ポイントは下記の3つです。

  • Webサイトのアクセシビリティ対応が民間事業者でも義務化された。

  • Webアクセシビリティの適合レベルはA（シングルエー）、AA（ダブルエー）、AAA（トリプルエー）の3段階がある。国や自治体などの公的機関のサイトには、レベルAAの準拠が求められている。

  • Webアクセシビリティの対応内容は知覚可能、操作可能、理解可能、堅牢性の4つ（4原則）がある。

今回はWebアクセシビリティの4原則の1つめ、「知覚可能」についてまとめたいと思います。

知覚可能

Web Content Accessibility Guidelines (WCAG) 2.1によると、「知覚可能」とは、「情報及びユーザインタフェース コンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければならない。」と記載されています。つまり、サイト上に掲載されている情報が知覚できる方法で提示されていること、が必要になります。
「知覚可能」の中にも大きく下記の4つの達成基準があります。

1.1 テキストによる代替
1.2 時間依存メディア
1.3 適応可能
1.4 判別可能

各基準内にも更に細かく達成基準が設定してあり、詳しい対応内容は、「Web Content Accessibility Guidelines (WCAG) 2.1」に記載されていますので見てください、と言いたいところですが、読んでも書いてあることが分からない。。解読するのに時間がががりそう。。涙

ということで、上記各項目についての対応ポイントを簡単にまとめたいと思います。

1.1 テキストによる代替

すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供すること。

テキスト以外のコンテンツには、テキストでの代替を提供しましょう、という内容です。例えば、画像のaltを設定したり、音声動画に書き起こしテキストを提供する等が対応内容になります。一点注意していただきたいのが、画像のaltは何にでも入れて良いものではなく、装飾等コンテンツとして意味をなさない画像には不要になります。

1.2 時間依存メディア

時間依存メディアには代替コンテンツを提供すること。

「時間依存メディア」とは音声、または映像のことを指しています。音声、または映像を提供する場合、代替コンテンツの提供が必要になります。
具体的には、書き起こしテキストや 同等の情報を提供する代替テキスト、キャプションの提供が必要です。

1.3 適応可能

情報、及び構造を損なうことなく、様々な方法 (例えば、よりシンプルなレイアウト) で提供できるようにコンテンツを制作すること。

こちらはコンテンツの作成内容に関する基準になります。例えば

  • 正しいHTMLの構文で作成する。
    リストは ol や ul で、定義は dlを使用するなど。

  • コンテンツの順番はソース上でも正しい順番となるように作成する。

  • フォームにはlabel属性を使用する。

  • 基本言語以外が使用されている段落にはlang属性を記載する。
    （コピーライトなど）

  • 画面が横向き、縦向きでも、表示や操作に影響がでない。

などなど。普通に制作していればある程度クリアできますが、フォームのlabel属性やlang属性は抜けがちなので要注意です。

1.4 判別可能

コンテンツを、利用者にとって見やすく、聞きやすいものにすること。これには、前景と背景を区別することも含む。

色や音声制御、文字画像などに関するガイドラインになります。例えば

  • リンクテキストは色のみで区別しない。
    色以外（アンダーライン等）での区別も必要。

  • 音声が自動的に再生され、3秒より長く続く場合は、その音声を一時停止または停止できるようにする。音量の調整の可能なようにする。

  • テキストと背景色、背景画像のコントラストを少なくとも4.5:1に
    （ロゴや大サイズの文字は例外）

  • テキストは200%までサイズ変更できる。サイズ変更によりコンテンツの機能が損なわれてはいけない。文字の欠け等。

細かいところですと「1.4.12 テキストの間隔」という達成基準があり、下記のように定められています。

  • 行の間隔 (行送り) をフォントサイズの少なくとも 1.5 倍に設定する

  • 段落に続く間隔をフォントサイズの少なくとも 2 倍に設定する

  • 文字の間隔 (字送り) をフォントサイズの少なくとも 0.12 倍に設定する

  • 単語の間隔をフォントサイズの少なくとも 0.16 倍に設定する

こんなに細かく定められているなんて知らなかった。ちなみにこちらは(WCAG) 2.1になって新しく追加された基準になります。 2.0にはありませんでした。

いかがでしたか？
難しいような、簡単なような。。少しでも理解していただけましたら幸いです。次回は4原則の2つめ「操作可能」について説明したいと思います。
最後まで読んでいただきありがとうございました。