Webアクセシビリティとは？ホームページへの導入ガイド

日本では、人口 100 人のうちおよそ 9 人が何らかの障がいを抱えていると推計されています。従って、ホームページの作成にあたっては、さまざまな事情を抱えたユーザーのニーズに応える必要があります。

『インクルーシブ デジタル デザイン』に関する書籍を出版している、レジネ・ギルバート（Reginé Gilbert）氏は、 Wix とのインタビューで「どのような商品やサービスも、それを使えない人が出てこないようにアクセシブルにしなければなりません」と語っています。

この記事では、よりアクセシブルなオンライン体験を提供するための戦略をご紹介します。これを読めば、扱う商品やサービスを問わず、あらゆる人々にとってインクルーシブなホームページを自分で制作する方法がわかります。

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

Web アクセシビリティは、すべての人々、特に生活に不自由のある方や、状況によって生じる不都合、帯域幅やスピードについての社会経済的な制約などがあっても、インターネット上で Web サイトの操作やサイトへのアクセスを妨げられるような障壁がない、インクルーシブな状態を指す言葉です。

Web アクセシビリティが重要なのは、すべての人がオンラインで利用できる情報やサービスに平等にアクセスできる状態を保証するためです。

アクセシビリティを向上させるには、スクリーンリーダー（音声読み上げソフト）、拡大読書器、音声認識ソフト、視覚的にわかりやすいデザインなど、さまざまな支援技術を使用することで、生活に不自由さがある方のためだけでなく、すべてのユーザーの利便性を高める努力が必要です。

Web アクセシビリティを向上させることで、より多くの人が快適に Web にアクセスできます。たとえば。騒音を伴う環境でモバイル デバイスを使用している人や怪我をしている人、限られた帯域幅しか使えない人や低速のインターネット接続を使用している人など、状況による不都合にさらされた人々にもメリットをもたらします。

アクセシビリティの実装は、単なる社会的責任ではありません。より多くの人が、あなたのサイトにアクセスできるようになることで、ビジネスにも良い影響を与え、SEO 効果を高めます。アクセスしやすいサイトは、訪問者数や収益の向上に繋がります。

アクセシブルなWebサイトの要素

簡単かつ確実にアクセシブルな Web サイトを作るには、デザイナーが Web アクセシビリティを考慮しながらデザインしている Wix のテンプレートを使用するのも一案です。

Wix エディタに組み込まれている Wix アクセシビリティウィザードは、サイトをすばやくスキャンしてアクセシビリティの問題を検出し、誰もがアクセスできる Web サイトになるよう一つ一つ手順を追いながらガイドします。

自分の Web サイトが障がいを持つ人々にもアクセシブルであることを確認するには、以下のチェックポイントに注目してください。

画像の代替テキスト：画像に付された正確な代替テキスト（alt テキスト）は、視覚障がい者には欠かせないものです。これは画像に表示されている内容を簡潔に説明する解説テキストで、スクリーンリーダーや Google のボットのようなクローラー、そして画像が正しく読み込めない場合にはブラウザでも使われます。

キーボードナビゲーション：身体に不自由のある人は、サイトの利用にマウスを使えない場合があります。サイトのすべての機能について、キーボード操作でもマウスと同じようにアクセスできるようにしてください。

文書構造：スクリーンリーダーによるナビゲーションでは見出しが使われます。すべての見出しは適切なタグを付け、太字または大きなフォントにしてください。それぞれのページに H1 タグの見出しが必要です。タイトルタグは重複しないようにしてください。

強い配色コントラスト：コンテンツの色と背景色のコントラストについて、比率を高く設定する必要があります。オンラインで比率を調べて助言をしてくれるツールを探すこともできます。

フォント：Web サイトで使用する文字は読みやすいものにします。フォントサイズは最低でも 14 pt にし、1 行の文字数は 40 文字以内に抑えましょう。また、サイトで使用するフォントの種類は 2 つか 3 つ程度にします。

動画キャプション：聴覚に問題がある人のために、動画にはクローズドキャプションを、音声ファイルにはトランスクリプトかテキストによる説明を必ず付けるようにしましょう。

リンク：クリックできるテキストは、その内容がはっきりわかるように記述します。また、色を変えて目立たせ、下線を引きます。リンク以外のテキストには下線を引かないようにしてください。

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

デジタル庁が公開している「ウェブアクセシビリティ導入ガイドブック」には、WCAG についてやアクセシビリティ対策の基礎がわかりやすくまとめられています。ぜひチェックしてみましょう。

民間事業者への「合理的配慮」の義務化

2021年、障害者差別解消法が改正され、2024年4月から民間事業者も「合理的配慮」の提供が義務付けられました。合理的配慮とは、障がいのある人が社会で直面する障壁を、過度な負担なく取り除くためのサポートです。また、合理的配慮の義務化ということは、今後障がい当事者から配慮を求められた場合、過重な負担ではない限り要望に応える義務を負うということです。

これには、Web アクセシビリティの向上も重要で、情報のアクセスを容易にするため、Web サイトの改善が求められた場合には、できる限り対応する必要があります。これらの取り組みは、企業の社会的責任を果たし、すべての人が情報を平等に利用できる社会を実現するために欠かせません。

全ての人により使いやすい Web サイトを目指し、Web アクセシビリティに対応することで、ユーザビリティや UX を向上できます。結果として、機会損失を回避することに繋がり、ビジネス主体においてもメリットがあります。

次の章では、アクセシビリティを高めるために見直したい 6 つのポイントを詳しく紹介します。

Web アクセシビリティを向上させる 6 つの方法

1. 複数のコミュニケーション手段を提供する

一般的には、視覚に障がいのある人にとっては電話での会話が便利です。一方、聴覚に障がいのある人にとっては、電子メール、チャット、フォーム、またはソーシャルメディアのメッセージ機能を通じてのコミュニケーションのほうが便利かもしれません。それらを考慮し、顧客から連絡を受ける手段は複数用意しましょう。Wix Inbox のようなツールを使って効率的なカスタマーサービスを提供し、すべてのコミュニケーションを一元的に管理しましょう。

2. アクセシビリティに関わる表明をWebサイトに追加する

障がいのある顧客へのコミットメントを表明するため、アクセシビリティに関する表明を Web サイトに掲載しましょう。そこでは、Web サイトの閲覧時や実店舗の訪問時に発生する問題にはいつでも対応する用意があることを説明します。大切なのは透明性です。気づいていながら未解決になっている問題についても触れましょう。

3. テンプレートを使用する

プロフェッショナルな Web サイトをアクセシブルにする簡単な方法の一つは、JIS X 8341-3 や WCAG などの規定に準拠したテンプレートを使用することです。Wix のデザイナーは、そのシンプルな Web サイトテンプレートが最適な状態で提供されるようアクセシビリティチームと力を合わせています。

4. 障がいを持つユーザー向けにフォームを最適化する

フォームは、ユーザー情報を集め、サイトを通じた交流を促し、サイト上で取引をするために不可欠なものです。アクセシビリティを念頭に Web サイトを最適化する際は、各種フォームが障がいを持つユーザーにも対応しているかどうかを確かめることが大切です。いくつかの主要なポイントを取り入れることで、インクルーシブかつユーザーフレンドリーなフォームが作成できます。

• 簡潔なラベル：フォームの各フィールドにはわかりやすい説明のラベルをつけましょう。ラベルは、スクリーンリーダーや支援ツールが正確に読み上げられるよう、適切にマークアップしながら各入力フィールドに関連付けます。
  

• 指示：ユーザーがフォームに記入する際は、わかりやすく簡潔な指示で誘導します。エラーメッセージもはっきり見える理解しやすい方法で表示し、修正すべきフィールドがすぐにわかるようにします。色のコントラストやアイコンを活用して見えやすさを向上させましょう。
  

• キーボード アクセシビリティ：フォームフィールドや、やり取りが必要な場所に、キーボードだけでアクセスしたり操作したりできるかを確認します。これは、マウスや他のポインティングデバイスの代わりにキーボードナビゲーションに依存しているユーザーにとって必要な機能です。「Tab」キーを使ってフォームフィールドを移動できるようにし、アクティブになっている箇所を明確に示す視覚的なフォーカスインジケーターを加えましょう。
  

• フィールドの検証：バリデーションチェックを導入し、ユーザーが有効かつ適切な書式で入力できるようにします。可能な箇所すべてにサジェスト機能や自動入力オプションを設置し、ユーザーをサポートしてエラーを減らしましょう。フォーマットの要件や制約がある場合は最初に明確に伝えましょう。
  

• レスポンシブデザイン：各種のデバイスや画面サイズに合わせてフォームを最適化する機能です。特に、ユーザーが小さい画面やズーム機能を使用した場合に、フォームの要素が重なったりコンテンツが途中で見えなくなったりしないよう、適切なサイズと位置を確保します。

5. ユーザーに改善点を指摘してもらう

前出のギルバート氏によれば、ビジネスオーナーとしてできる最善の方策は、障がいがある顧客に改善点を指摘してもらうことです。

ギルバート氏はこう述べています。「Web の利点は物事を変えられることです。私たちは間違いを繰り返しながら学習し、ものごとをより良くしてゆくのです。」

6. アクセシビリティのサポートがあるCMSを利用する

アクセシビリティについては、使う CMS（コンテンツ管理システム）によって差が出るかもしれません。Wix のアクセシビリティウィザードは、キーボードナビゲーションやスクリーンリーダー互換性などの標準機能を備えているだけでなく、アクセシビリティに関する問題を起こす恐れがある要素を検出して修正できます。

優れたアクセシビリティ機能を提供する他の CMS には、WordPress、Drupal、Joomla!、Plone などが挙げられます。アクセシビリティをサポートする CMS を使うことでより幅広く訪問客を集められるほか、Web サイトの検索結果ランキングを向上させることもできます。

コンプライアンスに関する重要なお知らせ

• Wix は、障がいの有無にかかわらず、すべての人が弊社の製品やサービスを利用できるよう努めています。弊社は、アクセシビリティの基準に従いつつ、たゆまず機能向上に取り組みます。

• Wix.com は、弊社のサービスを利用することでアクセシビリティに関するあらゆる法律および世界各国の規制に準拠することになると保証したり約束したりすることはできません。

• Wix ユーザーは、ユーザー自身またはそのサイト訪問者に適用される現地の法令を確認して遵守する責任を負っています。

Webサイトのアクセシビリティが重要な理由は？

Web サイトをアクセシブルにするのは、ビジネスや顧客にとって正しい選択だからというだけではありません。これを怠ると訴えられる危険すらあるのです。

こんな例があります。ロブレス対ドミノ・ピザ裁判では、ドミノ・ピザの Web サイトが米国障害者法（ADA）に違反しているという判決が下されました。視覚障がい者である原告のギエルモ ロブレス氏は、スクリーンリーダーでピザを注文できなかったとして同社を訴えました。この訴訟が始まった2016年以降、Web アクセシビリティに関わる訴訟は 40 ％も増加しています。

すべての顧客により良いサービスを提供し、上記のような法的トラブルを避けるためにも、Web サイトは Web Content Accessibility Guidelines（Web コンテンツ アクセシビリティ ガイドライン、WCAG）に準拠している必要があります。Wix はすべての機能をこのガイドラインに従って設計していますので、始めから安心して利用できます。Wix のアクセシビリティウィザードは、Wix ユーザーのサイトのアクセシビリティに関わる問題を検出し、その他の問題を防ぐためのガイドラインを備えています。

Webアクセシビリティの4原則とは？

WCAG は、アクセシブルな Web コンテンツを作成する一連のガイドラインと基準を提示した Web アクセシビリティの 4 原則を定めています。この 4 原則は以下のとおりです。

• 知覚可能：情報やユーザーインターフェースの構成要素はすべてのユーザーが知覚できる方法で表示されなければなりません。これには、非テキストコンテンツ（画像など）に代替テキストを付けること、コンテンツをさまざまな方法（音声や点字など）で表示できるようにすること、見やすく聞こえやすいコンテンツにすることなどが挙げられます。

• 操作可能：Web サイトのユーザーインターフェイスやナビゲーションは、障がいのある人を含むすべてのユーザーが操作できるようにしなければなりません。これには、すべての機能をキーボードで利用できるようにすること、ユーザーがコンテンツに十分な時間をかけられるようにすること、発作を含めた有害反応を引き起こす可能性のあるコンテンツを避けること、などが挙げられます。

• 理解可能：Web コンテンツとその操作方法は、すべてのユーザーにとって明確で理解しやすいものでなければなりません。これには、専門用語や複雑な言い回しを避けて平易な言葉を用いること、指示やエラーメッセージはわかりやすく表示すること、論理的かつ一貫性のある方法でコンテンツを整理すること、などが挙げられます。

• 堅牢：Web サイトは、支援ツールを含む各種ユーザーエージェントが確実に理解できる堅牢な技術を用いて開発しなければなりません。この原則では、異なるプラットフォームやテクノロジー間の互換性を確保するために、ウェブ標準やガイドラインの使用が奨励されています。

サイトのWebアクセシビリティをチェックするには

サイトの Web アクセシビリティを確認する方法について、いくつかのヒントを紹介します。

• 自動アクセシビリティチェッカーを使う。オンラインではさまざまな自動アクセシビリティチェッカーを利用することができます。これらのツールは、よくあるアクセシビリティの問題について Web サイトをスキャンし、レポートを作成してくれます。人気の自動アクセシビリティ チェッカーには以下のようなものがあります。

• Siteimprove

• WAIV

• axe Monitor

Wix が支援する Web アクセシビリティは、アクセシビリティに関わる潜在的な問題を特定し、修正作業を支援します。

• スクリーンリーダーを使う。スクリーンリーダーは、画面上のテキストを音声で読み上げるソフトウェアプログラムです。この作業によって自動チェッカーで検出されないアクセシビリティの問題を見つけられるかもしれません。NVDA や JAWS などのプログラムをインストールすると、スクリーンリーダーが使用できるようになります。

• 障がいのある人にテストしてもらう。サイトのアクセシビリティを確かめる一番の方法は、実際に使ってもらうことです。それにより、自動チェッカーやスクリーンリーダーでは検出できないアクセシビリティの問題を発見できます。

サイトのアクセシビリティをチェックするには以下のような方法もあります。

• サイトのコードをチェックする。サイトのコードが有効であり、WCAG の基準に従っていることを確認してください。

• セマンティック HTML を使用する。セマンティック HTML は、HTML を使ってコンテンツの意味を伝達することです。そうすることでスクリーンリーダーにページの構造を理解させ、コンテンツを正しく読ませることが容易になります。

• 画像に代替テキストを付ける。代替テキストは、文章による画像の説明です。スクリーンリーダーを必要とする人にとっては、画像の内容を理解するために欠かせない機能です。

• コントラストの高い配色を使用する。コントラストの高い配色を使うことで、目が悪い人にも読みやすくなります。

• サイトがキーボードで操作できることを確認する。身体に不自由がある人は、マウスを使うことができない可能性があります。キーボードだけで Web を操作できる機能を確保しましょう。

Webアクセシビリティチェックリスト

アクセシブルな Web サイトを作成・デザインする際に考慮すべき主な点をリストアップしました。すべてを網羅したリストではありませんが、出発点としてお使いください。

• 画像の alt テキスト。わかりやすく

• 配色のコントラスト

• ナビゲーションのしやすさ

• 順序だった見出し

• 動画のキャプション

• わかりやすいURL

• コンテンツ構造

• アクセスしやすいPDF

• フォントの選択

• 表のマークアップ

• フォームのラベル付け

• 定期的なアクセシビリティチェック

この記事で紹介した、Web アクセシビリティについてのポイントを活用して、だれもが快適に利用できるオンライン社会をめざしましょう。

まずは Wix を使ってみよう

Wix を利用すれば、本格的な Web サイトを思い通りに、かつ簡単に作成することができます。ユーザーフレンドリーなドラッグ＆ドロップエディタから多彩な機能まで、Wix は Web アクセシビリティを考慮した、安心で安全なサイトづくりを支援しています。

サイトを作りたいけどまだどのツールを使うか決めかねているという方は、まず Wix を無料でお試しください。その後、ニーズに応じたプレミアムプランに切り換えてすべての機能をご利用いただけます。

Web アクセシビリティに関するよくある質問

Q. Web アクセシビリティとは？

Web アクセシビリティとは、すべての人々、特に生活に不自由のある方々がインターネット上のコンテンツや機能を問題なく利用できるようにすることです。視覚や聴覚、運動能力に配慮した設計を取り入れ、誰でもアクセスできるWebサイトを作ることを指します。

Q. Webアクセシビリティは義務化されるのか？

Q. ウェブアクセシビリティの 4 原則とは？

Q. アクセシビリティ対策の具体例は？

編集者：Miyuki Shimose

SEO & ブログコンテンツマーケター