中の人「ma-san」

東京・千葉でホームページを作るお仕事をしています。

お仕事の詳細はこちら

【初心者ガイド】Webアクセシビリティの重要性

【初心者ガイド】Webアクセシビリティの重要性 アクセシビリティ

アクセシビリティとは

アクセシビリティ(Accessibility)とは、「近づきやすさ」や「接近可能性」を示す言葉です。Webアクセシビリティは、ウェブサイトやアプリケーションが、障害の有無に関わらず、すべての人に利用しやすい状態であることを目指します。

なぜWebアクセシビリティが重要なのか

Webアクセシビリティを向上させることで、以下のようなメリットがあります。

  1. より多くのユーザーに情報を届けられる:すべての人が利用しやすいウェブサイトを作ることで、情報やサービスにアクセスできる人の数が増えます。重要な考え方として「すべての人に最適化」するわけではありません。「すべての人に情報が届くように設計する」という設計思想であるということです。
  2. 法的な基準を満たす:一部の国や地域では、ウェブアクセシビリティに関する法律が制定されており、遵守が求められています。
  3. SEO対策につながる:アクセシビリティ対策は、検索エンジン最適化(SEO)とも関連が深く、適切な対策を行うことで、検索順位の向上にも寄与します。
  4. ブランドイメージ向上:アクセシビリティに配慮したウェブサイトは、企業や団体の信頼性やイメージ向上につながります。

Webアクセシビリティの考慮ポイント

Webアクセシビリティを向上させるために、以下のようなポイントに注意してウェブサイトを設計しましょう。

  1. テキストの読みやすさ:文字の大きさやフォント、行間、色のコントラストなどを適切に設定して、読みやすいテキストを提供します。
  2. 適切な画像と代替テキスト:画像には代替テキスト(alt属性)を設定し、視覚障害のあるユーザーにも情報が伝わるようにします。
  3. キーボード操作のサポート:マウス操作が難しいユーザーのために、キーボード操作で全ての機能にアクセスできるようにします。
  4. 見出しと構造の整理:適切な見出しタグ(h1~h6)を用いてコンテンツの構造を整理し、スクリーンリーダーを利用するユーザーにも情報が伝わるようにします。
  5. リンクとボタンの明確化:リンクやボタンの目的が明確で、操作しやすい形状や大きさを提供します。
  6. フォームのアクセシビリティ:フォーム要素には明確なラベルを付与し、エラーメッセージも分かりやすく表示します。
  7. 動画や音声コンテンツの対応:動画や音声には字幕や音声解説を提供し、聴覚障害のあるユーザーにも情報が伝わるようにします。
  8. 色による情報伝達の低減:色覚障害のあるユーザーにも情報が伝わるように、色だけに依存しない情報伝達方法を採用します。

WCAG(ウェブコンテンツアクセシビリティガイドライン)

Webアクセシビリティの指針として、W3C(World Wide Web Consortium)が策定したWCAG(ウェブコンテンツアクセシビリティガイドライン)があります。WCAGは、4つの原則(Perceivable, Operable, Understandable, Robust)に基づくガイドラインで、ウェブアクセシビリティの向上に役立ちます。

  1. Perceivable(知覚可能):ユーザーが情報を知覚できるようにする必要があります。
  2. Operable(操作可能):ユーザーがインタラクションやナビゲーションを行えるようにする必要があります。
  3. Understandable(理解可能):ユーザーがコンテンツやインタラクションを理解できるようにする必要があります。
  4. Robust(堅牢):さまざまなテクノロジーやユーザーエージェントで使用できるようにする必要があります。

それぞれの原則には、複数のガイドラインがあり、それらは3つのレベル(A, AA, AAA)に分類されています。基本的なアクセシビリティ対策はレベルA、より高度な対策はレベルAA、最も厳しい対策はレベルAAAとなります。
以下はWAIC(ウェブアクセシビリティ基盤委員会)により日本語訳されているWCAG2.1となります。

Web Content Accessibility Guidelines (WCAG) 2.1 (日本語訳)
Web Content Accessibility Guidelines (WCAG) 2.1 は、ウェブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨事項を網羅している。このガイドラインに従うことで、全盲又はロービジョン、ろう又は難聴、運動制限、発話困難、光感受性発作及びこれらの組合せ、並びに学習障害及び認...

レベルA対応のサンプルコード

非対応のサンプルコード

<img src="example.jpg">

この画像にはalt属性がないため、スクリーンリーダーが画像の内容を説明できません。これはWCAG 2.0の1.1.1(非テキストコンテンツ)に違反しています。

対応したサンプルコード

<img src="example.jpg" alt="美しい夕日が沈む風景">

alt属性を追加することで、スクリーンリーダーが画像の内容を説明できるようになります。これにより、1.1.1(非テキストコンテンツ)のレベルA対応を達成できます。

このように、WCAGに従ってウェブコンテンツを作成することで、さまざまなユーザーがウェブサイトを利用しやすくなります。ウェブ制作者は、WCAGを理解し、対応レベルに応じたアクセシビリティ対策を実施することが重要です。

デジタル庁のアクセシビリティ取り組み

デジタル庁は、日本のデジタル化を推進し、誰一人取り残さない人に優しいデジタル化を目指しています。その一環として、アクセシビリティに関する取り組みも積極的に行っています。デジタル庁は、ウェブサイトやアプリケーションのアクセシビリティ向上に努め、障害を持つ人や高齢者など、あらゆるユーザーが利用しやすいデジタル環境を整備しています。

デジタル庁
デジタル庁は、デジタル社会形成の司令塔として、未来志向のDX(デジタル・トランスフォーメーション)を大胆に推進し、デジタル時代の官民のインフラを一気呵成に作り上げることを目指します。

具体的な取り組みの例として、以下のようなものがあります。

ウェブサイトのアクセシビリティ向上

デジタル庁は、ウェブサイトにおけるアクセシビリティの向上に努めています。これには、WCAG(ウェブコンテンツアクセシビリティガイドライン)をはじめとする国際基準に従ったアクセシビリティ対策が含まれます。例えば、スクリーンリーダーでの読み上げ対応や、色彩のコントラスト調整、キーボード操作によるナビゲーションの最適化などがあります。

アプリケーションのアクセシビリティ向上

デジタル庁が提供するアプリケーションも、アクセシビリティを重視して開発されています。アプリケーションにおけるアクセシビリティ対策には、スクリーンリーダー対応や、音声認識ソフトウェアとの連携、文字サイズやコントラストの調整機能などが含まれます。

アクセシビリティ教育・啓発活動

デジタル庁は、アクセシビリティの重要性を広く認識するための教育・啓発活動にも力を入れています。これには、関係者向けの研修やセミナーの開催、アクセシビリティに関する情報の発信、ベストプラクティスの共有などが含まれます。

具体的なサンプル

デジタル庁が実施しているアクセシビリティ向上の取り組みのサンプルとして、デジタル庁の公式ウェブサイトが挙げられます

。このウェブサイトは、以下のようなアクセシビリティ対策が施されています。

  1. スクリーンリーダー対応: ウェブサイト上のテキストや画像に代替テキスト(altテキスト)が適切に設定されており、視覚障害者が利用するスクリーンリーダーでも情報を正確に伝えることができます。
  2. キーボード操作によるナビゲーション: ウェブサイトはキーボード操作によっても簡単にナビゲーションできるように設計されています。これにより、マウス操作が困難なユーザーでもウェブサイトを利用しやすくなっています。
  3. 色彩のコントラスト調整: ウェブサイト上の文字色や背景色のコントラストが適切に設定されており、色覚障害者でも情報を見やすくなっています。
  4. 拡大・縮小機能: ウェブサイト上の文字サイズを拡大・縮小できる機能が提供されており、視力に不安のあるユーザーでも情報を読みやすくなっています。
  5. アクセシビリティに関する情報発信: デジタル庁のウェブサイトでは、アクセシビリティに関する情報や取り組みについてのページが設けられており、ユーザーや関係者に対して啓発活動を行っています。

デジタル庁のアクセシビリティ取り組みは、これらの具体的な対策を通じて、さまざまなユーザーがウェブサイトやアプリケーションを利用しやすくすることを目指しています。今後もデジタル庁は、アクセシビリティの向上に努め、誰もが利用できるデジタル環境を実現していくでしょう。

障害者差別解消法との関係

日本において、Webアクセシビリティは「障害者差別解消法」(2016年施行)と密接な関係性があります。「障害者差別解消法」は、障害の有無にかかわらずすべての人が平等に社会参加できるように、障害者に対する差別の解消を目指す法律です。この法律は、公共機関や民間事業者に対して、障害者に配慮したサービス提供や施設の整備を求めています。

障害を理由とする差別の解消の推進
国連の「障害者の権利に関する条約」の締結に向けた国内法制度の整備の一環として、全ての国民が、障害の有無によって分け隔てられることなく制定されました

Webアクセシビリティは、障害者差別解消法の趣旨に沿った取り組みの一つです。ウェブサイトやアプリケーションは、現代社会において情報発信やサービス提供の重要な手段であり、障害の有無にかかわらず多くの人々が利用しています。しかし、視覚障害、聴覚障害、運動障害、認知障害などの障害を持つ人々にとって、ウェブサイトやアプリケーションの利用が困難である場合があります。

Webアクセシビリティの取り組みは、ウェブサイトやアプリケーションを障害者にも利用しやすくすることで、障害者差別解消法の目的を実現することにつながります。例えば、政府機関や自治体、大企業などのウェブサイトは、障害者差別解消法に基づいて、Webアクセシビリティを向上させる取り組みを行っています。

Webアクセシビリティの取り組みは、「障害者差別解消法」の理念に基づいて、ウェブサイトやアプリケーションをすべての人が利用できるように改善することで、障害者の社会参加や情報アクセスの平等性を向上させることができます。また、Webアクセシビリティの向上は、高齢者や一時的な障害を持つ人々にも恩恵をもたらし、さらにウェブサイトやアプリケーションのユーザビリティや品質の向上にも寄与します。

日本の「障害者差別解消法」は、他国のアクセシビリティ関連法規とも連携し、国際的な取り組みにも影響を与えています。例えば、アメリカ合衆国の「アメリカン・ウィズ・ディスアビリティーズ・アクト(ADA)」や、欧州連合(EU)の「Web Accessibility Directive」などがあります。これらの法律も、ウェブサイトやアプリケーションのアクセシビリティを向上させることを目的としており、国際的なアクセシビリティ基準としてWCAG(Web Content Accessibility Guidelines)が用いられています。

日本における「障害者差別解消法」は、Webアクセシビリティに関する法的な枠組みを提供し、ウェブサイトやアプリケーションの開発者や運営者に対して、障害者に配慮したサービスを提供するよう促しています。このような取り組みにより、障害者の情報アクセスや社会参加の平等性が向上し、よりインクルーシブな社会が実現されることが期待されます。

具体的な例としては下記リンク先にもまとまっています。合理的配慮とは、というお話もよく出てきますので是非参考にしてみてください。

合理的配慮等具体例データ集(合理的配慮サーチ):障害者制度改革担当室 - 内閣府
内閣府の政策(経済財政、規制改革、国家戦...

まとめ

Webアクセシビリティは、ウェブサイトを利用しやすくするための重要な要素です。多様なユーザーが情報にアクセスできるように、設計やデザインに配慮しましょう。WCAGを参考にしながら、ウェブサイトのアクセシビリティを向上させることで、より多くの人に情報やサービスを届けることができます。日本国内でもWebアクセシビリティが広まることを願っています。

           

お仕事・当サイトへ興味を持っていただいた方
お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san」の中の人。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webサステナビリティ・Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

アクセシビリティ
スポンサーリンク
シェアする
ma-sanをフォローする
ma-san blog
タイトルとURLをコピーしました