ウェブアクセシビリティ入門

ウェブアクセシビリティとは、誰もが利用できるウェブコンテンツ、デザイン、ツールを作ることです。

無料でスキャンを試す

Stylized graphic of a man looking at someone off camera surrounded by accessibility logos

ウェブアクセシビリティとは?

読み込みの遅いウェブサイトにイライラしたり、不適切なデザインのフォントに目を細めたり、モバイルフレンドリーでないウェブページを操作しようとして絶望したりした経験は誰にでもあるのではないでしょうか。これらの問題はわずかな不便さかもしれませんが、障がいを持つ人々にとってはウェブを利用する上で大きな制約となります。

ウェブアクセシビリティとは、サイト上での障がい者の認識、理解、貢献、ナビゲーション、およびインタラクションを支援するために開発されたツールとテクノロジーを、ウェブサイトで利用する必要性のことです。アクセシビリティを組み込むことは、初心者にとっては敷居が高く感じられるかもしれませんが、ユーザーエクスペリエンスの重要な要素です。アクセシビリティは後付けではなく、ウェブ開発および設計のプロセスに組み込まれるべきです。

障がいの種類

Image
Illustration of a closed eye

視覚

失明、弱視、色覚障がいなど

視覚障がいについての詳細

Image
Illustration of an ear with an "x" over it

聴覚

聴覚障がいと難聴など

聴覚障がいについての詳細

Image
illustration of a person with their brain

神経学的

てんかん、アルツハイマー病、パーキンソン病など、中枢および末梢神経系に関わる神経障がいなど

神経系障がいの詳細

Image
Illustration of a person with a cogwheel in their head

認知的

注意障害、論理障害、学習障害など

認知機能障がいの詳細

Image
illustration of a hand picking up a small object

運動機能

微細な運動制御の制限、筋肉の緩慢さ、手を使うことの困難さや不能など

運動器障の詳細

なぜウェブアクセシビリティが重要なのか?

世界保健機関(WHO)の障がいに関する2023年ワールド・レポートによると、世界人口の16%が、身体的なものから認知的なもの、神経学的なものまで、何らかの障がいを経験しているとのことです。人口の高齢化と慢性的な疾病の増加により、障がいの割合は増加の一途をたどっています。


13

世界人口のうち障がいを抱えて生活している人の数


障害を持つ人々も、そうでない人々と同じように情報へのアクセスを享受できるべきです。幸いなことに、インターネットへのアクセスにおける障壁を軽減したり取り除いたりするための技術があります。このような恩恵を受けることで、年齢、身体的能力、精神的能力に関係なく、誰もがインターネットを利用し、快適なウェブ体験をすることができるのです。

優れたアクセシビリティ戦略には、インターネットをすべての人にとってより包括的な場所にするだけでなく、ビジネス上のメリットもあります。アクセシビリティは、ウェブサイト制作のほぼすべての要素に関わる設計と開発の要素です。モバイルフレンドリーなデザイン、デバイスの独立性、複数のモードでのインタラクション、ユーザビリティ、SEO などの側面が重なっています。アクセシブルなウェブサイトは、より優れた検索結果、メンテナンスコストの削減、閲覧者の拡大、および企業の社会的責任の実証につながります。デザイン性の高いアクセシブルなウェブサイトを持つことは、単に障がい者がウェブサイトを利用できるようにするだけでなく、サイトを利用するすべてのユーザーのユーザーエクスペリエンスを大幅に向上させることができるのです。

stylized graphic of Yahye Siyad

アクセシブルなビジョン

アクセシビリティの専門家ヤヒア・サイード氏が、インクルーシブなデジタル体験を構築することの重要性について語ります。

視聴する

アクセシビリティ規格

ウェブコンテンツ・アクセシビリティ・ガイドライン(WCAG)は、ワールドワイドウェブ・コンソーシアム(W3C)によって策定され、ウェブサイト、デバイス、コンテンツを障がいのあるユーザーが利用しやすくするための、ウェブコンテンツのアクセシビリティ基準を規定する国際的なガイドラインです。WCAG におけるコンテンツとは、ウェブページやウェブアプリケーション上の情報であるウェブコンテンツを指します。

  • テキスト、画像、音声などの自然情報
  • 構造やプレゼンテーションなどを定義するコードやマークアップ

 

現在適用されている WCAG には、WCAG 2.0と2.1と2つのバージョンがあります 。WCAG 2.0は2008年に発行され、2012年にISO規格となり、WCAG 2.1は2018年に発行されました。
2.0の要求事項(「成功基準」)はすべて2.1に含まれており、2.1ではいくつかの成功基準が追加されています。ただし、ガイドラインは後方互換性があり、WCAG 2.1に適合するコンテンツは WCAG 2.0にも適合します。

WCAG は、世界中のアクセシビリティに関するほとんどの法律の基礎を形成しています。障がいを持つアメリカ人法(ADA)のタイトル III や、障害を持つオンタリオ州民のためのアクセシビリティ法(AODA)のような法律は、適合性の最低基準としてレベル AA の WCAG を採用しています。WCAG を間接的に参照している国もあります。例えば、EU ウェブアクセシビリティ指令のための欧州規格 EN 301 549は、WCAG の採用を明言していませんが、ガイドラインのすべての要件を含んでいます。

WCAG の成功基準は、レベル A、AA、AAA という3つの適合レベルに分類されています。

レベル A

これは、アクセシビリティ機能の最も基本的な要件をカバーするもので、最低限満たさなければならないアクセシビリティの度合いです。このレベルに適合しない場合、結果として完全なアクセシビリティのないウェブサイトとなります。

レベル AA

このレベルでは、障害者にとってより一般的な障害に対処しています。これは、最大のアクセシビリティ障壁が確実に取り除かれるため、ほとんどのウェブサイトで要求される適合性の最高レベルです。

レベル AAA

これは WCAG におけるアクセシビリティの最高レベルであり、ほとんどのサイトが達成するのはより困難であると言えます。このレベルを達成することは望ましいですが、一般的には必要ではありません。

アクセシビリティのにおける4つの原則

この4つの原則の1つでも欠けると、障がいを持つユーザーにとってアクセシブルでないウェブ体験に繋がってしまいます。POUR という頭字語は、機能的アクセシビリティの原則を表しています。

Illustration of a person with a check mark

知覚可能である (Perceivable )

情報やユーザーインターフェースの構成要素は、ユーザーが知覚できる形で提示されなければならない。

Illustration of a hand holding a cogwheel

操作可能である(Operable)

ユーザーインターフェースのコンポーネントとナビゲーションは操作可能でなければならない。

Illustration of a person and a cogwheel with a checkmark

理解可能である(Understandable)

ユーザーインターフェースの情報や操作が理解できるものでなければならない。

Illustration of a flexing arm

強固である(Robust)

コンテンツは、支援技術を含む多種多様なユーザーエージェントが確実に解釈できるよう、十分に頑丈でなければならない。

PDF アクセシビリティ・スキャナー

PDF アクセシビリティの問題を特定し、修正します。

PDFのアクセシビリティについて

Illustration of a PDF with multiple mistakes highlighted

ウェブアクセシビリティの構成要素

ウェブアクセシビリティは、ウェブサイトのあらゆる要素をカバーするものです。障がい者のために機能的で利用可能なサイトを作成するためには、ウェブサイトのさまざまなコンポーネントが相互に関連し、補完し合う必要があります。これらのコンポーネントには、以下のものが含まれます:

  • コンテンツ
    コンテンツとは、テキスト、画像、音声などのウェブページやウェブアプリケーション上の情報、またはサイトの構造、プレゼンテーションなどを定義するコード、スクリプト、マークアップ
  • ユーザーエージェント
    ユーザーエージェントとは、ウェブブラウザ、携帯電話ブラウザ、メディアプレーヤー、プラグイン、支援技術、その他ユーザーの代わりに動作するソフトウェア
  • オーサリングツール
    コードエディター、コンテンツ管理システム、ブログなど、ウェブサイトを作成するソフトウェア
  • 評価ツール
    アクセシビリティ属性の有効性をレビューし、改善努力をトラッキングするのに役立つツール

ウェブアクセシビリティの事例

画像に代替テキスト(alt テキスト)を追加する: これは、マークアップ/コードにテキストの説明を追加することで可能です。alt テキストは、スクリーンリーダーやその他の支援技術によって、視覚障がい者に画像の情報を読み上げるために使われます。また、Alt テキストは、低帯域幅のために画像をオフにしているウェブユーザーにとっても有益であり、検索エンジン最適化のための貴重なリソースでもあります。Alt テキストは短く、かつ説明的でなければなりません。

altテキストの良い例と悪い例
悪い例:子犬の写真
良い例:バスケットに座る3匹のラブラドールの子犬

純粋に装飾目的の画像には、null altテキスト(img alt="")を使用します。

キーボードの機能を確保する: 運動機能障がいや指の骨折などの一時的な障害を持つ人々にとって、マウスを使ってナビゲートすることは困難です。キーボードのような他の手段でウェブサイトを利用できなければなりません。アクセシブルなウェブサイトでは、すべての機能がキーボードから利用できます。ユーザーはコンテンツをタブで移動したり、キーボードのナビゲーションパターンを模倣する支援技術を使用したりできます。

音声のトランスクリプトを提供する: 聴覚障がい者にとって、サウンドクリップ、ポッドキャスト、ビデオなどの音声ファイルは利用しにくいものです。音声コンテンツのトランスクリプトを用意することで、聴覚障害者もコンテンツを利用することができます。

コンプライアンスと法規制

ウェブアクセシビリティの基準や規制は、国によって異なります。ここでは、世界各地の著名な法律やガイドラインの例をいくつか紹介します。

グローバル

WCAG

ウェブコンテンツ・アクセシビリティ・ガイドライン(WCAG)は、ワールドワイドウェブ・コンソーシアム(W3C)が制定した国際的なアクセシビリティ基準です。

WCAG について

アメリカ

ADA

米国障がい者法(ADA)のタイトルIIIに基づき、ウェブサイトを含む公共の宿泊施設のすべてのエリアは、すべての利用者にとってアクセシブルでなければなりません。

ADA について

アメリカ

第508条 

1973年リハビリテーション法(米国リハビリテーション法)は、米国の連邦政府機関に対し、その電子技術および情報技術がアクセシブルであることを保証するよう求めています。

第508条 について

カナダ

AODA

オンタリオ州では、2005年障がい者アクセシビリティ法(AODA)が施行され、障害者の障壁を特定、除去、予防しており、ウェブアクセシビリティもこれに含まれます。

AODA について

ヨーロッパ

EU ウェブアクセシビリティ指令

EU は、公共機関のウェブとモバイルのアクセシビリティに関する枠組みを標準化し調和させるために、EU ウェブアクセシビリティ指令を発表しました。

EU ウェブアクセシビリティ指令について

ヨーロッパ

EAA

欧州アクセシビリティ法(EAA)はEUの法令であり、EU加盟国に対し、オンとオフラインの両方でアクセシビリティを法制化することを義務づけ、市場に共通のアクセシビリティ規則の枠組みを提供しています。

EAA について

オーストラリア

オーストラリア DDA

オーストラリアの1992年障害者差別禁止法(DDA)は、ウェブによる情報提供やオンラインサービスを含む、公共生活のさまざまな分野において、障害者を差別から保護するものです。

DDA について

ヨーロッパ

英国公共機関アクセシビリティ規制

イギリスの公共団体アクセシビリティ規制(2018年)は、ウェブサイトとモバイルアプリケーションのアクセシビリティを義務付けています。

イギリスの規制について

アクセシブルなウェブサイトの作り方

アクセシビリティは、前述した要素のコラボレーションによって決まります。ここでは、サイトのインターフェイスと開発がアクセシビリティを確保するための基本的なガイドラインを紹介します。

以下に示すアクセシビリティ・ソリューションの原則は、W3C ウェブ・アクセシビリティ・イニシアティブ(WAI)が WCAG 標準に準拠して開発し、ベンチマークしたものです。

Image
number 1

代替テキスト: ビジュアルコンテンツの文脈や目的を伝えるために、代替テキストを使用しましょう。代替テキストは、ビジュアルコンテンツの情報を電子テキストに変換するもので、利用者の要求に最も適した形で提示することができます。例えば、テキストの読み上げ録音、テキストサイズの拡大、点字デバイスで読むためのテキストのオプションなどがあります。

Image
number 2

音声コンテンツに文字起こしやキャプションを提供する:マルチメディアは、ユーザーに豊かで多様な体験を提供する反面、音声や視覚に障害を持つ人々にとっては制限となる場合があります: 音声コンテンツに文字起こしやキャプションを提供したり、手話通訳を追加したりすることで、よりアクセシブルな体験を生み出すことができます。

Image
number 3

コンテンツのプレゼンテーション: コンテンツはさまざまな形式で表示されるべきであり、ユーザーはコンテンツの表示を変更できなければなりません。複数のコンテンツ表示の例としては、コンテンツの読み上げオプションの許可、カスタムカラーの組み合わせによるコンテンツの表示、正しいカラーコントラストの使用、モバイルフレンドリーなコンテンツの作成などがあります。

Image
number 4

フラッシュ、時間制、自動再生などのコンテンツは避ける: コンテンツの認知度と理解度は同じではありません。ユーザーによっては、ウェブサイト上の指示を読んだり、タイピングをしたり、タスクを完了したりするのに時間がかかる場合があります。ウェブサイト上の時間の影響を受けやすい要素を調整し、中断、一時停止、点滅、スクロールのない動的なコンテンツを使用するように注意する必要があります。アニメーションや一定の速度で点滅するコンテンツも、写真に敏感な人にとっては有害な場合があります。そのようなコンテンツは避けるか、事前に警告を表示するのがベストでしょう。

Image
Number 5

アクセシブルなナビゲーション: ナビゲーションは、ユーザーエクスペリエンスに不可欠な要素であり、よく整理されたコンテンツを持つサイトを作成することで、障害のあるユーザーにも、彼らのニーズに基づいてウェブサイトを十分に体験する機会を平等に提供することができます。アクセシブルなナビゲーションに関して考慮すべき重要な点は、ユーザーが階層メニュー、検索ボックス、およびサイトマップなどのサイト構造とどのように相互作用するかを理解することです。

Image
Number 6

テキストの内容を読みやすく、理解しやすくする: テキストコンテンツは、すべてのプレゼンテーション・フォーマットにおいて、読みやすく、理解しやすいものである必要があります。テキストの理解度は、学習障害や認知障害を持つ人々にも受け入れられるよう、可能な限り幅広い読者に対応できるように提示されるべきです。また、ユーザーが間違いを避け、修正できるような手段を提供することも欠かせません。それによって、コンテンツを見たり聞いたりできない人や、わかりにくい関係性や順序、ウェブ要素上のその他の手がかりを認識できない人を助けることができます。

Image
Number 7

予測可能な方法でコンテンツを表示し、動かす: サイト上のコンテンツが、予測可能で一貫性のあるパターンとインターフェイスに従うようにしましょう。一貫性のあるデザインは、ユーザーがサイトをスムーズに閲覧したり、予測可能なパターンに従って特定の目標を達成したりするのに役立ちます。

Image
Number 8

アクセシビリティに関する声明を表示する: アクセシビリティに関する声明をサイトに掲載することで、顧客や関係者に対して、ウェブアクセシビリティへの取り組みに対するコミットメントを示すことができます。アクセシビリティ・ステートメントには、意図するアクセシビリティのレベル、サイトのアクセシビリティに関して訪問者が問題を発見した場合の連絡先、そして制約に基づいて規格に例外がある場合の承認を含め、ウェブサイトが従うアクセシビリティ・ガイドラインと規格を含める必要があります。アクセシビリティステートメント・ジェネレーターを使用すると、完全で準拠したステートメントを素早く作成することができます。

よくある質問
ウェブアクセシビリティは誰の役に立ちますか?
アクセシビリティは誰にとっても有益です。障がい者がウェブにアクセスできるようにすることに加え、多くのウェブアクセシビリティ基準は、優れた SEO の実践と重複しています。たとえば、Google ウェブマスターガイドラインには、説明的な alt 属性とタイトル属性を確保すること、正しい HTML をチェックすること、ユーザーにサイトマップを提供することなどの実践方法が記載されています。これらすべてが、アクセシビリティにとって重要なことです。ウェブアクセシビリティは、ユーザーエクスペリエンスと品質保証も向上させます。アクセシビリティとは、インターネットへのアクセス方法に関係なく、すべての人に良い体験を提供するウェブサイトを作成することを意味するのです。障がいのあるユーザーにとって良いエクスペリエンスが保証されれば、ウェブサイト全体のエクスペリエンスと品質が向上することになるでしょう。
ウェブアクセシビリティは法的要件ですか?
はい。多くの国でウェブアクセシビリティに関する法律が制定されており、WCAG を参照したり、ヨーロッパのウェブアクセシビリティ基準 EN 301 549のように、WCAG をベースとした基準が設けられています。詳しくは、コンプライアンスと法規制のセクションをご覧ください。
自分のウェブサイトが ADA に準拠しているかどうかは、どうすれば分かりますか?
ウェブアクセシビリティは ADA のタイトル III に該当し、公共の場(ホテル、学校、レストラン、スポーツジム、小売店、図書館、医師など)では、情報やサービスへの平等なアクセスを提供しなければならないとされています。ウェブサイトは公共の場とみなされ、ウェブサイト上のアクセスの障壁はこの法律に違反することになります。ADA はウェブアクセシビリティの準拠を定義する独自の技術標準を持っていませんが、ADA に基づいて起こされた訴訟から生じた多くの裁判例は、準拠基準の基準として WCAG 2.0レベル AA、そしてその後の WCAG 2.1を参照しています。したがって、ウェブサイトを ADA に準拠させるには、最低でも WCAG 2.0レベル AA に準拠する必要があります。ウェブアクセシビリティのコンプライアンスレベルを調べるには、Monsido の無料ウェブサイトスキャンをご利用ください。ADA 準拠について詳しくは、こちらをご覧ください。
ウェブサイトがアクセシブルでない場合、訴えられる可能性はありますか?
はい、その可能性があります。あなたの国にウェブアクセシビリティに関する特定の法的ガイドラインがある場合、アクセシブルなウェブサイトを提供しないと訴訟に発展する可能性があります。2020年、米国では ADA 違反で3000件以上の訴訟が起こされています。早期に適切にウェブアクセシビリティを実装することで、ウェブサイトへの法的措置を回避しましょう。ウェブアクセシビリティに関する訴訟を回避する方法については、こちらのブログをお読みください。

自社のウェブサイトにおける最大の問題を特定する

閲覧者にとって可能な限り最高のウェブ体験を提供しているかどうかをチェックしましょう。

無料でスキャンを試す

stylized illustration of the Monsido product UI showing various analytics