Webアクセシビリティ入門

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

無料スキャンを開始

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

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

誰もが、読み込みが遅いWebサイトや、読みにくいフォントデザイン、モバイル対応していないWebページのナビゲーションに苦労した経験があるでしょう。このような問題は、私たちにとっては軽微な不便さかもしれませんが、障がいをお持ちの方にとっては、Web利用の大きな障壁となる可能性があります。

Webアクセシビリティとは、障がいをお持ちの方が、サイト上で情報を認識し、理解し、操作し、ナビゲートし、インタラクションできるよう支援するツールやテクノロジーを活用して、Webサイトを構築することです。アクセシビリティの導入は初心者には難しく感じられるかもしれませんが、ユーザーエクスペリエンスにとって不可欠な要素です。アクセシビリティは、後から追加するものではなく、Web開発およびデザインプロセスに最初から組み込まれるべきものです。

障害の種類

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 a browser with the Acquia TV UI

オーディエンスにリーチし、より良いROIを実現

アクセシビリティを優先していない米国のブランドは、競合他社に年間最大69億ドルを失っています。これは単なるコンプライアンスの問題ではありません。アクセシビリティは、すべてのユーザーにとって、より魅力的で生産性の高いデジタル体験を創造する原動力なのです。

このビデオでは、AcquiaのCMOであるジェニファー・グリフィン・スミスが、顧客基盤の拡大、顧客満足度とブランドロイヤルティの向上、そして収益増加のための主要戦略をご紹介します。

今すぐ視聴 ↗

アクセシビリティ基準

ウェブコンテンツアクセシビリティガイドライン(WCAG)は、World Wide Web Consortium(W3C)によって開発されました。その目的は、障害を持つユーザーがウェブサイト、デバイス、コンテンツにアクセスできるよう、ウェブコンテンツアクセシビリティの基準を定める国際的に共有されたガイドラインを確立することです。WCAGにおけるコンテンツとは、ウェブページやウェブアプリケーションの情報を指し、以下が含まれます:

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

現在適用されているWCAGには3つのバージョンがあります:WCAG 2.0、2.1、2.2です。WCAG 2.0は2008年に公開され、2012年にISO標準となりました。WCAG 2.1は2018年に、WCAG 2.2は2023年に公開されました。2.0のすべての要件(「達成基準」)は2.1に含まれており、2.1にはいくつかの追加の達成基準があります。さらにWCAG 2.2では、これらをもとにより多くの達成基準が追加されています。ただし、ガイドラインは後方互換性があり、WCAG 2.2に準拠したコンテンツは、WCAG 2.1およびWCAG 2.0にも準拠しています。

WCAGは世界中のアクセシビリティ関連法規の基盤となっています。米国障害者法(ADA)第3編オンタリオ州障害者アクセシビリティ法(AODA)などの法規は、WCAGレベルAAを最低限の適合基準として採用しています。WCAGを間接的に参照している国もあります。例えば、EU Web Accessibility Directiveの欧州標準 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

知覚可能

情報とユーザーインターフェースコンポーネントは、ユーザーが知覚できる方法で提示される必要があります。

Illustration of a hand holding a cogwheel

操作可能

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

Illustration of a person and a cogwheel with a checkmark

理解可能

情報とユーザーインターフェースの操作は理解可能でなければなりません。

Illustration of a flexing arm

堅牢性

コンテンツは、支援技術を含む幅広いユーザーエージェントによって確実に解釈できるよう、十分に堅牢でなければなりません。

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

Acquia Webガバナンスプラットフォームで、PDFのアクセシビリティ課題を特定し、改善します。

PDFアクセシビリティの詳細

Illustration of a PDF with multiple mistakes highlighted

Webアクセシビリティの構成要素

Webアクセシビリティは、ウェブサイトのあらゆる要素をカバーする側面です。ウェブサイトの各構成要素は相互に連携し、補完し合うことで、障害のある方にとって機能的で利用可能なサイトを作り出す必要があります。これらの構成要素には以下が含まれます:

  • コンテンツ
    コンテンツは、ウェブページやウェブアプリケーション上の情報で、テキスト、画像、音声、またはサイトの構造や表示などを定義するコード、スクリプト、マークアップなどが含まれます。
  • ユーザーエージェント
    ユーザーエージェントとは、ウェブブラウザ、携帯電話のブラウザ、メディアプレイヤー、プラグイン、支援技術、その他ユーザーの代わりに動作するソフトウェアのことです。
  • 作成ツール
    コードエディタ、コンテンツ管理システム、ブログなど、ウェブサイトを作成するソフトウェアです。
  • 評価ツール
    アクセシビリティ属性の効果を確認し、改善取り組みの追跡をサポートするツールです。

Webアクセシビリティの事例

画像に代替テキスト(altテキスト)を追加する: これは、マークアップ/コードにテキストの説明を追加することで実現できます。代替テキストは、スクリーンリーダーやその他の支援技術によって使用され、視覚障害のある方に画像の情報を音声で読み上げます。代替テキストは、低帯域幅により画像をオフにしているWebユーザーにとっても有益で、検索エンジン最適化の貴重なリソースでもあります。代替テキストは簡潔で説明的である必要があります。

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

純粋に装飾目的の画像には、null代替テキスト(img alt="")を使用してください。

キーボード機能の確保: 運動障害、細かい運動機能の障害、または指の骨折などの一時的な障害のある方にとって、マウスを使ったナビゲーションは困難です。ユーザーはキーボードなど他の手段でウェブサイトを使用できる必要があります。アクセシブルなウェブサイトでは、すべての機能がキーボードを通じて利用可能です。ユーザーはコンテンツをタブで移動したり、キーボードナビゲーションパターンを模倣する支援技術を使用できます。

音声のトランスクリプトを提供: 聴覚障害のある方にとって、音声クリップ、ポッドキャスト、動画などの音声ファイルはアクセスできません。音声コンテンツのトランスクリプトがあることで、聴覚障害のある方もそれらのコンテンツを利用できるようになります。

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

世界各国では、それぞれ異なるウェブアクセシビリティの基準や規制が設けられています。以下に、世界で特に重要とされる法律やガイドラインの例をご紹介します。

グローバル

WCAG

ウェブコンテンツアクセシビリティガイドライン(WCAG)は、World Wide Web Consortium(W3C)によって策定された国際的なアクセシビリティ標準です。

WCAGについて詳しく

米国

ADA

米国障害者法第3編により、ウェブサイトを含むすべての公共施設は、すべてのユーザーにとってアクセシブルでなければなりません。

ADAについて詳しく

アメリカ合衆国

セクション508

1973年リハビリテーション法のセクション508は、アメリカ合衆国の連邦機関に対し、電子・情報技術のアクセシビリティを確保することを義務付けています。

セクション508の詳細

カナダ

AODA

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

AODAについて詳しく見る

ヨーロッパ

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

EUは、公的機関のウェブおよびモバイルアクセシビリティに関する枠組みの標準化と統一化を図るため、EUウェブアクセシビリティ指令を発表しました。

EUウェブ指令の詳細

ヨーロッパ

EAA

欧州アクセシビリティ法(EAA)は、EU加盟国がオンラインとオフラインの両方でアクセシビリティに関する法律を制定することを求めるEU指令で、市場における共通のアクセシビリティ規則の枠組みを提供します。

EAAの詳細

オーストラリア

オーストラリア障害者差別禁止法(DDA)

オーストラリア障害者差別禁止法1992年(DDA)は、ウェブを通じた情報提供やオンラインサービスを含む、公共生活の様々な分野における障害者への差別から保護する法律です。

DDAの詳細

ヨーロッパ

英国公共団体アクセシビリティ規則

2018年制定の英国公共部門団体アクセシビリティ規則により、ウェブサイトおよびモバイルアプリケーションのアクセシビリティが義務付けられています。

英国規則の詳細

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

アクセシビリティは、上記の構成要素の連携によって実現されます。サイトのインターフェースと開発をアクセシビリティに配慮して作成するための基本的なガイドラインをご紹介します。

以下に示すアクセシビリティソリューションの原則は、WCAGスタンダードに準拠したW3C Webアクセシビリティ・イニシアティブ(WAI)によって開発・検証されたものです。

Image
number 1

代替テキスト:視覚的コンテンツの文脈と目的を伝えるために代替テキストを使用しましょう。代替テキストは、視覚的コンテンツの情報を電子テキストに変換し、ユーザーの要件に最適な形式で提示できるようにします。例えば、テキストの音声読み上げ、文字サイズの拡大、点字デバイスでのテキスト読み取りオプションなどが挙げられます。

Image
number 2

音声コンテンツのテキスト書き起こしと字幕の提供:マルチメディアは、ウェブ上でユーザーにより豊かで多様な体験を提供する一方で、聴覚や視覚に障がいのある方にとっては制約となる場合があります。音声コンテンツにテキスト書き起こしや字幕を提供したり、手話通訳を追加することで、よりアクセシブルな体験を創出できます。

Image
number 3

コンテンツの表示: コンテンツは様々な形式で表示されるべきであり、ユーザーはコンテンツの表示方法を変更できるようにする必要があります。複数のコンテンツ表示の例には、コンテンツを音声で読み上げるオプションの提供、カスタムカラーの組み合わせでのコンテンツ表示、適切な色彩コントラストの使用、そしてモバイル対応コンテンツの作成などが含まれます。

Image
number 4

点滅、時間制限、自動再生コンテンツの回避: コンテンツの認識や理解には個人差があります。一部のユーザーは、説明を読んだり、入力したり、ウェブサイト上でタスクを完了するのにより多くの時間を必要とする場合があります。ウェブサイトの時間制限のある要素を調整し、中断、一時停止、点滅、スクロールを行わない動的コンテンツを使用するよう配慮する必要があります。また、特定の速度でアニメーションし点滅するコンテンツは、光過敏症の方に害を及ぼす可能性があります。そのようなコンテンツは避けるか、事前に警告を表示することが最良の方法です。

Image
Number 5

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

Image
Number 6

テキストコンテンツを読みやすく理解しやすくする:テキストコンテンツは、あらゆる表示形式において読みやすく理解しやすいものである必要があります。テキストの理解レベルは、学習障害や認知障害を持つ方々も含め、可能な限り幅広いオーディエンスに対応できるよう設定すべきです。また、ユーザーがミスを回避し、修正できるような対策を講じることも不可欠です。これにより、コンテンツを見ることや聞くことができない人々、またはWebエレメントの暗黙的な関係性、順序、その他の手がかりを認識できない人々をサポートすることができます。

Image
Number 7

コンテンツを予測可能な方法で表示・動作させる: サイト上のコンテンツが予測可能で一貫したパターンとインターフェースに従うようにしましょう。一貫したデザインは、ユーザーがサイトのナビゲーションを素早く学習し、特定の目標を達成するために予測可能なパターンに従うのに役立ちます。

Image
Number 8

アクセシビリティ方針の表示: ウェブサイトにアクセシビリティ方針を掲載することで、お客様やステークホルダーに対してウェブアクセシビリティへの取り組みに対するコミットメントを示しましょう。アクセシビリティ方針には、ウェブサイトが準拠するアクセシビリティガイドラインと基準(目標とするアクセシビリティレベルを含む)、サイトのアクセシビリティに関する問題を発見された場合の連絡先、およびサイトの制約に基づく基準の例外事項の記載を含める必要があります。アクセシビリティ方針ジェネレーターを使用することで、完全で準拠した方針を迅速に作成できます。

よくある質問
ウェブアクセシビリティの恩恵を受けるのは誰ですか?
アクセシビリティは全ての人にメリットをもたらします。障がいのある方々にウェブアクセスを可能にするだけでなく、多くのウェブアクセシビリティ基準は優れたSEO対策と重複しています。例えば、Googleウェブマスターガイドラインでは、説明的なaltやtitle属性の確保、正しいHTMLの確認、ユーザーへのサイトマップ提供などの実践方法が記載されています。これらすべて(そして他にも多数)はアクセシビリティにとっても重要な要素です。ウェブアクセシビリティはユーザーエクスペリエンスと品質保証も向上させます。アクセシビリティとは、インターネットへのアクセス方法に関係なく、全ての人に良好な体験を提供するウェブサイトを構築することを意味します。障がいのあるユーザーに良好な体験を保証することで、ウェブサイト全体のエクスペリエンスと品質が向上することを確信できるでしょう。
ウェブアクセシビリティは法的要件ですか?
はい。多くの国でウェブアクセシビリティに関する法律が制定されており、WCAGを参照するか、またはヨーロッパのウェブアクセシビリティ標準EN 301 549のようにWCAGをベースにした基準を採用しています。詳細については、コンプライアンスと法律のセクションをご参照ください。
ウェブサイトがADA準拠かどうかはどのように確認できますか?
Webアクセシビリティは、ADA(アメリカ障害者法)第3編の適用範囲に含まれます。同法では、公共施設(ホテル、学校、レストラン、ジム、小売店、図書館、医療機関など)のすべての領域において、情報やサービスへの平等なアクセスを提供しなければならないと定められています。Webサイトは公共施設とみなされ、Webサイト上でのアクセス障壁はこの法律に違反することになります。ADAにはWebアクセシビリティのコンプライアンスを定義する独自の技術基準はありませんが、ADA違反で提起された多くの訴訟から生じた判例では、コンプライアンス基準のベンチマークとしてWCAG 2.0レベルAA、その後WCAG 2.1が参照されています。そのため、WebサイトをADA準拠にするには、最低限WCAG 2.0レベルAAに準拠している必要があります。Webアクセシビリティのコンプライアンスレベルを確認するには、Monsidoから無料のWebサイトスキャンをご依頼いただけます。ADAコンプライアンスの詳細についてはこちら
ウェブサイトがアクセシブルでない場合、訴訟を起こされる可能性はありますか?
はい、可能です。あなたの国にWebアクセシビリティに関する特定の法的ガイドラインがある場合、アクセシブルなWebサイトを提供しないことで訴訟に発展する可能性があります。2020年には、米国でADA違反により3,000件以上の訴訟が提起されました。Webアクセシビリティを早期に適切に実装することで、あなたのWebサイトへの法的措置を回避できます。Webアクセシビリティ訴訟を避ける方法について、こちらのブログをお読みください。

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

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

無料でスキャンを試す

stylized illustration of the Monsido product UI showing various analytics