News

2024.05.16

『Webアクセシビリティってなに?Webサイトの制作時のポイント』

 今回は『Webアクセシビリティ』とWebサイトを制作する際に意識するべきポイントについて詳しく紹介していこうと思います。

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

アクセシビリティとは?

アクセシビリティとは、「近づきやすさ」や「利用のしやすさ」「アクセスのしやすさ」などの意味を持つ言葉のことを指します。ITやWebの分野では、製品やシステム、サービスなどの「利用のしやすさ」という意味で使われます。

アクセシビリティという単語について、あまり聞いたことがないという方もいるかもしれませんが、身近なものだと、スマートフォンの設定項目でもある「アクセシビリティ機能」などがあります。

Webアクセシビリティとは?

アクセシビリティの中でのWebに特化したアクセシビリティを「Webアクセシビリティ」といいます。

Webアクセシビリティについて、デジタル庁は以下のように定義しています。

”ウェブアクセシビリティは、利用者の障害の有無やその程度、年齢や利用環境にかかわらず、ウェブで提供されている情報やサービスを利用できること、またはその到達度を意味しています。様々な利用者が、いろいろなデバイスや環境からウェブにアクセスすることが当たり前になっている今、ウェブの利用方法の多様化に応えるアプローチのひとつがウェブアクセシビリティともいえます。”

デジタル庁「ウェブアクセシビリティ導入ガイドブック」より

Webアクセシビリティに対応するメリット

Webアクセシビリティのガイドラインに沿って全ての項目に対応しているというWebサイトはまだ多くはありません。

しかし、Webアクセシビリティ対応を行うメリットとしては以下があげられます。

  1. ユーザビリティを高めることができる
    Webアクセシビリティに対応することで、Webサイトの有用性を高めることになり、必然的にユーザビリティを高めることができます。
  2. SEO対策になる
    Webアクセシビリティの対応を行うことで、人だけでなく検索エンジンのクローラーにも良い影響を与えます。
    Webアクセシビリティに対応したWebサイトは、クローラーが理解しやすいWebサイトの内容になるため、SEO対策になるといえるでしょう。

これらはWebサイトの運営にとって、重要視されている対応の一部です。
そのため、次にご紹介するガイドラインを意識したWeb制作を行うことをお勧めします。

Webアクセシビリティのガイドライン

WCAG
技術的な規格

国際的なWebアクセシビリティのガイドラインには、Web Content Accessibility Guidelines(WCAG)と呼ばれるガイドラインがあります。
これは、インターネットの各種規格を策定・勧告し、インターネットの各種技術を標準化する国際的な非営利団体であるWorld Wide Web Consortium(W3C)が定めたもので、2024年5月現在は、2023年10月の最新版「WCAG 2.2」が公開されています。

Web Content Accessibility Guidelines (WCAG) 2.2

JIS X 8341-3
国内規格

日本国内では、日本工業規格(JIS)として制定された、「高齢者・障がい者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス」(JIS X8341シリーズ)という規格があります。
WCAGをもとに制定・改正されているため、日本国内の企業・団体はこちらのガイドラインに沿って対応することでWebアクセシビリティを向上させることが可能となります。

JIS X 8341-3:2016 高齢者・障害者等配慮設計指針―情報通信における機器,ソフトウェア及びサービス―第3部:ウェブコンテンツ

WCAGの4つの原則と達成基準

WCAGは、以下の原則とWebアクセシビリティを向上させるための13のガイドラインと複数の達成基準で構成されています。

そのため、Webアクセシビリティの対応を行う場合、下記の原則とガイドラインに沿って対応すると良いでしょう。

4つの原則
  1. 知覚可能
    ユーザーにとって知覚(見える・聞こえる)できるかたちで情報が提示されている状態にすること。

  2. 操作可能
    ユーザーが操作できる状態にすること。

  3. 理解可能
    ユーザーが操作方法などを理解しやすい状態にすること。

  4. 堅牢
    ユーザーがどんな環境でWebサイトを閲覧したとしても情報を理解できるような状態にすること。

各原則のガイドラインと対応例をご紹介

Webサイト制作におけるアクセシビリティを高めるためのポイントについて、原則ごとの対応例を一部ご紹介します。

知覚可能

ガイドライン

  1. テキストによる代替
    非テキストコンテンツにはテキストによる代替を行う
  2. マルチメディアの代替
    音声や動画には代替コンテンツを提供する
  3. 適応可能
    コンテンツが様々な形式で表示されても情報や意味が損なわれないようにする
  4. 判別可能
    利用者にとって見やすく、聞きやすいものにする

対応例

  1. テキストによる代替
    写真などの静止画像には代替テキストとしてalt属性を設定する動画コンテンツには字幕をつける
  2. マルチメディアの代替
    動画コンテンツには字幕をつける
  3. 適応可能
    記事の見出しや段落について、見た目だけで設定するのではなく意味のある順番で設定する
  4. 判別可能
    テキストと背景のコントラスト比を少なくとも4.5:1に保つ

操作可能

ガイドライン

  1. キーボード操作可能
    Webサイト上の全ての操作をキーボードで行えるようにする
  2. ナビゲーション可能
    ユーザーが情報を見つけやすいかたちで表示する
  3. 十分な時間
    ユーザーがコンテンツを読み、使用するために十分な時間を提供する

■対応例

  1. キーボード操作可能
    キーボードのタブキー(Tab)を使用して、ウェブページ上のすべてのインタラクティブ要素(リンク、ボタン、入力フィールド、フォームなど)を順番にアクセスできるにする
  2. ナビゲーション可能
    Webサイトの重要なページへのリンクをヘッダーメニューなど同じ場所に設定・配置する
  3. 十分な時間
    ユーザーがテキストを読んだり、操作するための時間を制限しないように制限時間を設けないようにするまたはユーザーが制限時間を調整できるようにする

理解可能

ガイドライン

  1. 読み取り可能
    コンテンツが全てのユーザーにとって理解しやすい、読みやすい、わかりやすい内容にするWebサイトのページの表示や共同をユーザーが予測できるようにする
  2. 予測可能
    Webサイトのページの表示や共同をユーザーが予測できるようにする
  3. 入力支援
    ユーザーが入力を行う場面で正しく入力できるようにサポートする

■対応例

  1. 読み取り可能
    専門的な用語や複雑な文法構造を避け、わかりやすい言葉を使用するようにする
    専門的な用語を使用する場合は、意味を説明した上で使用する
  2. 予測可能
    ユーザーがどのページにいても同じ方法でページにアクセスできるようにWebサイト内の全てのページのメニュー配置とスタイルを同じにする
  3. 入力支援
    フォームなどでエラーが生じた場合は、エラーとなっている箇所がユーザーに伝わるようにエラーメッセージを表示させる

堅牢

ガイドライン

  1. 互換性
    ブラウザや閲覧時期などの環境が変わる場合でも情報がわかるような状態にする(互換性を持つようにする)

■対応例

  1. スクリーンリーダー、スクリーンマグニファイア、音声認識ソフトウェアなどの障害のある方のために開発された支援技術である「アシスティブテクノロジー」と互換性があるようにする
    例えば、スクリーンリーダーがウェブページのすべての要素を正しく読み上げることができるように、見出しタグやヘッダータグを正しく使い分けるようにする

■堅牢のガイドラインで対応しておいたほうがいい例
  1. デバイスの種類や画面サイズに関わらず、ウェブサイトが正しく表示されるようにレスポンシブデザインを実装する
  2. 異なるブラウザやデバイスでウェブサイトが一貫した動作を行うことができるか、HTMLやCSSの検証ツールを使用して、マークアップエラーやスタイルシートエラーがないことを確認する
  3. Webサイトを異なるブラウザ(Google Chrome、Mozilla Firefox、Safari、Microsoft Edgeなど)でアクセスし、それぞれの環境でアクセス可能であることを確認する
達成基準

WCAG 2.2における達成基準は3つのレベルに分けられています。

詳細についてはこちらの「JIS X 8341-3:2016 達成基準 早見表(レベルA & AA)」より確認することができますので、是非ご覧ください。

  • レベル A(最低限)
    この基準を達成していないと、Webサイトを閲覧できない人が存在する可能性があります。

  • レベル AA(標準)
    この基準を達成していないと、Webサイトの閲覧が困難な場合があります。
    ※多くの国や組織では、このレベルを採用しています。

  • レベル AAA(最高基準)
    この基準を達成することで、すべてのユーザーがストレスなくWebサイトを閲覧することができます。
    ※このレベルはかなり高いので、全てのコンテンツがこの基準をクリアすることは必須ではなく、できるだけこの基準に近づくよう努力することが推奨されています。

達成基準の推奨レベル

どのレベルまで対応すべきかは、業界やサービスの種類などにもよりますが、一般的的には以下のように推奨されています。

推奨レベルAまたはAA

  • 非営利団体・組織

推奨レベルAA以上

  • 公共機関や政府機関

  • 教育機関

  • テクノロジー企業

[対応例]

すぐにできる!Webサイト制作におけるアクセシビリティを高めるためのポイント

Webアクセシビリティ2
  1. レスポンシブデザインに対応したWebサイトにする

  2. ページにわかりやすいタイトルをつける

  3. テキストの文字サイズや色味に気をつける

  4. 画像や動画には代替テキストを設定する

  5. 半角カナや機種依存文字、不要な空白は使わない

  6. リンクテキストは曖昧な表現は避け、具体的な内容にする

A-TOOLでできるWebアクセシビリティ対応

  1. レスポンシブデザインに対応したデザインテンプレート
    A-TOOLでは、レスポンシブデザインのデザインテンプレートを多数ご用意しています。
    レスポンシブデザインに対応することでデバイスの種類や画面の大きさに関係なくWebサイトを閲覧できるようになるため、ご利用いただくことを推奨しています。

  2. 見出しの設定・リストの要素の追加
    A-TOOLでは、コンテンツパーツと呼ばれるパーツで見出しタグ(h1~6)を挿入することができます。
    また、箇条書きや段落番号をテキストの頭に追加したい場合は、ツールバー機能を使用して簡単に追加させることができます。
    Webサイトを閲覧するユーザーにとってわかりやすいページを制作できることは勿論、検索エンジン(Googleなど)のクローラーが理解が理解しやすいWebサイトを制作することができます。

  3. テキストカラーの細かい設定
    フルエディタ編集では、ツールバーよりテキストカラーの変更ができます。
    また、カラー変更機能でもテキストカラーの変更を行うことができます。
    どちらも好きなカラーに変更することができるため、サイトにあったカラーを設定し、ユーザーが理解しやすいWebサイトを制作することができます。

  4. 画像のalt属性設定
    通常はHTMLのソースから記述を書く必要がありますが、A-TOOLではパーツの画像設定やツールバーのイメージプロパティ設定から簡単に画像にalt属性(代替テキスト)設定を行うことができます。

まとめ

今回は、WebアクセシビリティとWebサイトを制作する際に意識するべきポイントについてご紹介しました。

Webアクセシビリティの対応については、項目も多いため難しいところも多いかもしれません。
しかし、今回の記事でご紹介したポイントを意識するだけでもWebアクセシビリティを高めることができます。

今現在ではWebアクセシビリティは義務化されていませんが、今後いつ義務化となるかわかりません。
是非、この機会に今回ご紹介したポイントを確認し、Webアクセシビリティを意識したWeb制作を行っていきましょう。