Webアクセシビリティってなに？

IT事業に携わっているとWebアクセシビリティという言葉を目にする機会が少なからずあるのではないでしょうか。

今回はWebアクセシビリティについて説明していきます。

Webアクセシビリティとは

すべての人がウェブサイトやウェブアプリケーションを利用できるようにすることを指します。視覚、聴覚、運動、認知などに制約を持つユーザーがWebコンテンツにアクセスし、利用できることを目的として、デザインや開発の際に配慮すべき要素です。

多くのユーザーがインターネットを同じように使用できるようにすることと言えますね。

 

Webアクセシビリティが重要な理由

すべての人が同じようにインターネットを利用できるわけではありません。例えば視覚に制約がある場合、画面を見ることができずうまくインターネットを利用できませんよね。

視覚の場合はスクリーンリーダーなどの読み上げ機能や音声入力、聴覚の場合はテキストで全てを把握できるような機能、手などに制約がある場合キーボードで全て操作できるように、認知しづらい場合は複雑な操作をなくしシンプルでわかりやすいデザインに…といったように様々なユーザーが同じ情報を得られるように考慮したWebサービス/サイトを作成する必要があります。

Webアクセシビリティには、国際的な標準が存在します。主に、**W3C（World Wide Web Consortium）が策定したWCAG（Web Content Accessibility Guidelines）**が基準となります。

WCAGとは、Webコンテンツを誰にでも利用可能にするためのガイドラインです。現在、WCAG 2.1が最新バージョンとなっており、次の4つの基本原則に基づいています。

知覚可能

情報やユーザインターフェースは、ユーザーが知覚できるものでなければなりません。これは、視覚や聴覚に障害があるユーザーにも情報が届くようにするための原則です。

例: 画像に代替テキスト（alt属性）を付与する、動画に字幕をつける。

操作可能

ユーザーインターフェースの要素やナビゲーションは、すべてのユーザーが操作できるものであるべきです。これは、マウスが使えない、キーボードだけで操作するユーザーに配慮する必要があるという意味です。

例: キーボードのみで全ての操作が可能にする、一定時間内に操作を求めないようにする。

理解可能

情報やユーザーインターフェースの操作は、理解可能でなければなりません。これは、複雑な操作や、予測しにくい動作がないことを意味します。

例: フォームの入力時に説明を明確に記載し、エラーが発生した際に具体的なエラーメッセージを表示する。

アクセシビリティを高めるためには、いくつかの具体的な技術やデザインの配慮が必要です。

 

例えば画像や図表に代替テキスト（alt属性）を提供することは、視覚障害者がスクリーンリーダーを使用して情報を得るために重要です。代替テキストは、画像の内容を簡潔に説明するもので、画像が表示されない場合や、視覚的な要素にアクセスできないユーザーにとって有益です。

最近の例で言うと、Xにaltを追加できる機能がありましたね。普段Webアクセシビリティに馴染みがないユーザーにもalt属性について認知が深まったのではないでしょうか。

Webサイトは、マウスを使用しなくてもキーボードだけで完全に操作できるようにする必要があります。特にフォームの入力や、メニューの操作などはタブキーや矢印キーで移動できるようにすることが求められます。

視覚障害や色覚異常のあるユーザーにとって、背景色とテキストの色のコントラストは非常に重要です。

コントラスト比とは、画面上の2つの色の明暗差を数値で表したものです。

1:1（全く差がない状態）から1:21（最大の差、たとえば白と黒）の間で表されます。数値が高いほど、2つの色の間の明暗差が大きくなり、視認性が向上します。

1:1 – まったく差がない（同じ色）

1:21 – 最大のコントラスト（白と黒）

となります。

 

画像を見てみるとわかりやすいかと思うので、下記を参照してみてください。

かなり文字の可読性に差が出ますよね。

コントラスト比がいかに重要かがわかるのではないかと思います。

 

WCAGでは、十分なコントラスト比を確保することが推奨されています。たとえば、標準テキストでは、背景色と文字色のコントラスト比が少なくとも4.5:1であるべきとされています。

 

またコントラスト比以外に色の組み合わせも重要です。世の中には色の見分けがつきづらい人もいるからです。

例えば下記の画像を見てみてください。

上記の画像は左から緑、ピンク、濃いピンクの色が並んでいる画像となります。

ですが、違う色に見える方も存在します。

下記に3パターンの見え方の画像を載せます。

このように色の見え方が異なる方もいます。

赤い光/緑の光/青の光を感じづらいことが原因で色の見え方が異なるのです。

場合によっては違う色相の色でもほぼ同じに見えることもあるので、色相以外にも明度や彩度で差異を出すなどの工夫が必要になってきます。

 

動画や音声コンテンツには、聴覚がうまく機能しない方や音声が再生できない環境のユーザー向けに、字幕やテキストの代替を提供する必要があります。これにより、視聴できない情報でも、テキストで内容を理解することができます。

 

フォームの各入力フィールドにも適切なラベルが必要です。

ラベルが不足していると、スクリーンリーダーを使用しているユーザーが何を入力するべきか理解できない場合があります。よくあるのはラベルがなく、入力ボックスの中に入力例が書いてあるパターンですね。一見親切ですが、読み上げ機能が作動しないので視覚がうまく機能しないユーザーにとっては不親切です。

また、フォームでエラーが発生した際には、エラーメッセージをわかりやすく表示し、どのフィールドにエラーがあるのかを明確に伝えることが重要です。よくあるのは、画面の上部にエラーの内容が表示されて対象の箇所にはエラー表示がないので画面上部から対象の箇所までスクロールする必要がありわかりづらいパターンです。

どこでどのようなエラーが発生しているのかわかるように、対象の項目内でエラーメッセージを出す必要性があります。

 

まとめ

Webアクセシビリティは奥が深く、様々な観点で意識する点があります。

何かサービスを制作する際は、Webアクセシビリティをぜひ考慮してみてください。