WEBアクセシビリティの基本|すべての人に使いやすいサイトをつくる

約12分で読めます

こんな人にオススメの記事

  • WEBアクセシビリティという言葉を聞いたが何をすればよいかわからない
  • 障害者差別解消法の改正で自社に影響があるのか気になっている
  • ホームページの画像にalt属性を設定していない
  • 高齢のお客さまからホームページが見づらいと言われたことがある
  • WEBアクセシビリティ対応のコストや優先順位がわからない

この記事の目次

「WEBアクセシビリティ」という言葉を耳にする機会が増えています。2024年4月には障害者差別解消法が改正され、民間事業者にも「合理的配慮の提供」が義務化されました。この法改正に伴い、WEBサイトのアクセシビリティ対応への関心が急速に高まっています。しかし、「アクセシビリティと言われても、具体的に何をすればいいのかわからない」という経営者の方が多いのではないでしょうか。実は、WEBアクセシビリティは特別なことではありません。「すべての人にとって使いやすいホームページを作る」という、ごく当然の配慮を具体化したものです。この記事では、WEBアクセシビリティの基本的な考え方から、法改正との関係、具体的な対応項目まで、わかりやすくお伝えします。

WEBアクセシビリティとは何か

まず、「WEBアクセシビリティ」という言葉の意味を正確に理解しましょう。

アクセシビリティの意味

アクセシビリティ(Accessibility)とは、「アクセスのしやすさ」を意味する英語です。WEBアクセシビリティとは、「年齢や障害の有無、使用している機器・環境に関わらず、すべての人がWEBサイトの情報にアクセスし、利用できること」を指します。

身近な例で考えてみましょう。建物のバリアフリーは、車いすの方だけでなく、ベビーカーを押している方や、大きな荷物を持っている方にとっても便利なものですよね。同様に、WEBアクセシビリティは障害のある方だけでなく、すべての人にとってホームページを使いやすくするための取り組みです。

たとえば、文字が小さすぎるホームページは、視覚に障害がある方だけでなく、老眼の方や、スマートフォンの小さな画面で見ている方にとっても読みにくいですよね。文字サイズを適切に設定することは、すべてのユーザーに恩恵をもたらすアクセシビリティ対応の一つです。

WEBアクセシビリティが必要な理由

WEBアクセシビリティが求められる理由は、大きく3つあります。

理由1:多様なユーザーがWEBを利用している
日本の高齢化率は約29%に達し、世界でもっとも高い水準です。また、何らかの障害がある方は国内に約1,160万人いるとされています。こうした方々も日常的にインターネットを利用しており、ホームページが使いにくいことは、お客さまを遠ざけてしまうことを意味します。

理由2:法的な要請が強まっている
後ほど詳しく解説しますが、2024年の障害者差別解消法改正により、民間事業者のアクセシビリティ対応への社会的な期待は大きくなっています。

理由3:SEOにも良い影響がある
アクセシビリティを高めるための対応の多くは、SEO対策とも重なります。たとえば、画像にalt属性(代替テキスト)を設定することは、アクセシビリティ対応であると同時に、検索エンジンに画像の内容を伝えるSEO施策でもあります。

用語メモ

alt属性(オルト属性)とは、画像に設定する「代替テキスト」のことです。画像が表示できない環境や、画面読み上げソフト(スクリーンリーダー)を使用している方に対して、画像の内容をテキストで伝える役割を果たします。

WEBアクセシビリティは「一部の人のための特別な対応」ではなく「すべての人にとって使いやすいホームページを作ること」です。結果として、SEOやユーザー満足度の向上にもつながります。

障害者差別解消法の改正とWEBサイト

2024年4月に施行された障害者差別解消法の改正は、WEBアクセシビリティへの注目を大きく高めました。ここでは、この法改正がWEBサイトにどう関係するのかを解説します。

法改正の概要

2024年4月1日に施行された改正障害者差別解消法の最大のポイントは、これまで民間事業者には「努力義務」とされていた「合理的配慮の提供」が「法的義務」に変わったことです。

合理的配慮とは、障害のある方から「社会的障壁を取り除いてほしい」という申し出があった場合に、事業者がその実施に伴う負担が過重でない範囲で対応する義務のことです。

WEBサイトに関していえば、たとえば視覚障害のある方が「ホームページの情報にアクセスできない」と申し出た場合、過重な負担にならない範囲で対応策を講じる義務があるということです。

WEBサイトへの影響

注意していただきたいのは、この法改正は「すべてのホームページを直ちにWCAG(後述)の基準に適合させなければならない」ということを直接的に求めているわけではない、という点です。法律が求めているのは「合理的配慮の提供」であり、具体的な技術基準を義務づけるものではありません。

しかし、社会全体でデジタルアクセシビリティへの意識が高まっている中で、ホームページのアクセシビリティ対応を進めることは、法的リスクの軽減だけでなく、企業としての社会的責任(CSR)や、すべてのお客さまに対するサービス品質の向上につながります。

また、2025年度にはデジタル庁が公開した「ウェブアクセシビリティ導入ガイドブック」が改定されるなど、行政の動きも活発化しています。今後、アクセシビリティ対応はますます求められるようになるでしょう。

用語メモ

CSR(Corporate Social Responsibility)とは「企業の社会的責任」のことで、企業が利益追求だけでなく、社会や環境に対して果たすべき責任を意味します。アクセシビリティへの対応も、CSRの一環として位置づけられることが多いです。

WCAGの基本:アクセシビリティの国際基準

WEBアクセシビリティの具体的な基準として、世界中で参照されているのが「WCAG」です。

WCAGとは

WCAG(ダブリューシーエージー)とは、「Web Content Accessibility Guidelines(ウェブ・コンテンツ・アクセシビリティ・ガイドライン)」の略で、W3C(ワールド・ワイド・ウェブ・コンソーシアム)という国際的な標準化団体が策定した、WEBアクセシビリティの技術基準です。

現在の最新バージョンはWCAG 2.2(2023年10月勧告)で、日本の公的機関向けの基準であるJIS X 8341-3もWCAGに基づいています。

WCAGには3つの適合レベルがあります。

レベルA:最低限のアクセシビリティ基準。これを満たさないと、一部のユーザーがサイトを利用できない。
レベルAA:一般的に推奨されるレベル。多くの公的機関や企業がこのレベルを目標にしている。
レベルAAA:最高レベルの基準。すべてのサイトで達成するのは現実的には難しい。

中小企業のホームページであれば、まずはレベルAの基準を満たし、可能な範囲でレベルAAの達成を目指すのが現実的なアプローチです。

WCAGの4つの原則

WCAGは、以下の4つの原則に基づいて構成されています。

知覚可能(Perceivable):情報やUI(操作画面)をユーザーが認識できること。たとえば、画像にalt属性を設定して、視覚に頼らなくても情報を得られるようにすること。

操作可能(Operable):ユーザーが操作できること。たとえば、マウスだけでなくキーボードでもすべての機能を使えるようにすること。

理解可能(Understandable):情報や操作方法が理解できること。たとえば、専門用語を避けた平易な言葉で文章を書くこと。

堅牢(Robust):さまざまな技術や支援技術(スクリーンリーダーなど)で正しく解釈できること。たとえば、正しいHTMLの文法に従って作られていること。

用語メモ

スクリーンリーダーとは、画面の内容を音声で読み上げるソフトウェアのことです。視覚に障害のある方がパソコンやスマートフォンを使う際に利用されます。代表的なものに、iPhoneの「VoiceOver」やWindowsの「NVDA」などがあります。

具体的なアクセシビリティ対応項目

ここからは、中小企業のホームページで取り組むべき具体的なアクセシビリティ対応を、優先度の高い順にご紹介します。

画像のalt属性(代替テキスト)

すべての意味のある画像に、適切なalt属性を設定しましょう。alt属性は、画像が表示できない場合やスクリーンリーダーが画像を読み上げる際に使われます。

良い例:「群馬県前橋市の本社ビルの外観写真」「代表取締役 山田太郎のプロフィール写真」
悪い例:「image01」「写真」「DSC_0001.jpg」

alt属性は「画像が見えない人に、この画像が何を伝えているかを説明する」という気持ちで書くと、適切なテキストが浮かびやすくなります。なお、純粋に装飾目的の画像(背景のパターンなど)には、空のalt属性(alt=””)を設定します。

色のコントラスト

テキストと背景色のコントラスト(明暗の差)が不十分だと、色覚に障害のある方や、明るい場所でスマートフォンを見ている方に文字が読みにくくなります。

WCAGレベルAAでは、通常のテキストでコントラスト比4.5:1以上、大きなテキスト(18pt以上、または太字の14pt以上)でコントラスト比3:1以上が求められています。

たとえば、薄いグレーの背景に白い文字、といった組み合わせはコントラストが不足しがちです。WEBで無料で利用できるコントラスト比チェックツールがありますので、気になる箇所があれば確認してみてください。

キーボード操作への対応

マウスを使えない、または使わないユーザー(視覚障害のある方、手の運動機能に障害のある方など)は、キーボードのみでホームページを操作します。すべてのリンク、ボタン、フォームの入力欄が、キーボードのTabキーで移動でき、Enterキーで操作できることを確認しましょう。

また、キーボードで操作しているときに「今どの要素にフォーカス(選択状態)があるか」が視覚的にわかるようにすることも重要です。フォーカスが当たっている要素に枠線やハイライトを表示する設定が、CSSで正しく行われているか確認してください。

アクセシビリティ対応は一度にすべてを完璧にする必要はありません。alt属性の設定、コントラストの確認、キーボード操作のチェックなど、できることから少しずつ取り組みましょう。

さらに取り組みたいアクセシビリティ対応

基本的な対応ができたら、さらに一歩進んだ対応にも取り組んでみましょう。

見出しの適切な構造

ページ内の見出し(h1〜h6)が、適切な階層構造になっていることを確認しましょう。見出しタグは、スクリーンリーダーがページの構造を把握するために重要な役割を果たします。

たとえば、h1の次にいきなりh3が来る(h2を飛ばす)構造は、スクリーンリーダーのユーザーにとって混乱の原因になります。見出しは必ず順序通りに使用しましょう。

これはSEOにとっても重要なポイントです。検索エンジンも見出しの構造からページの内容を理解するため、適切な見出し構造はアクセシビリティとSEOの両方に効果があります。

リンクテキストの明確化

「こちら」「詳しくはこちら」「ここをクリック」といった曖昧なリンクテキストは避けましょう。スクリーンリーダーのユーザーは、リンクテキストだけを拾い読みしてページ内を移動することがあります。リンクテキストが「こちら」だけでは、そのリンクの先に何があるのかわかりません。

良い例:「WEB制作の料金プランを見る」「お問い合わせフォームへ進む」
悪い例:「こちら」「詳しくはこちらをクリック」

フォームのラベルとエラーメッセージ

お問い合わせフォームの各入力欄には、必ずラベル(項目名)を関連づけましょう。HTMLの<label>要素を使って入力欄とラベルを正しく紐づけることで、スクリーンリーダーが「この入力欄は何を入力するためのものか」を読み上げてくれます。

また、入力エラーが発生した際には、「入力内容に誤りがあります」という漠然としたメッセージではなく、「メールアドレスの形式が正しくありません。例:info@example.com」のように、具体的なエラー内容と修正方法を提示しましょう。

動画や音声コンテンツへの配慮

ホームページに動画を掲載している場合は、字幕(キャプション)を付けることが推奨されます。聴覚に障害がある方だけでなく、音を出せない環境(通勤電車の中など)で閲覧しているユーザーにとっても、字幕は非常にありがたい配慮です。

また、自動再生される動画や音声は、ユーザーにとって不快な場合があります。自動再生はできるだけ避け、ユーザー自身が再生を選択できるようにしましょう。

用語メモ

ラベル(label)とは、フォームの入力欄に付ける「項目名」のことです。HTMLでは<label>タグを使って入力欄と項目名を関連づけます。この設定が正しく行われていると、項目名をクリックしただけで対応する入力欄にフォーカスが移る、という使い勝手の向上にもつながります。

まとめ:できることから始めるアクセシビリティ対応

この記事の内容を振り返りましょう。

  • WEBアクセシビリティは、すべての人にとって使いやすいホームページを実現するための取り組み
  • 2024年4月の障害者差別解消法改正により、民間事業者にも合理的配慮の提供が義務化された
  • WCAGが国際的なアクセシビリティ基準であり、まずはレベルAの達成を目指す
  • 優先的に取り組むべきはalt属性の設定、色のコントラスト確保、キーボード操作対応
  • 見出しの適切な構造、リンクテキストの明確化、フォームのラベル設定も重要
  • アクセシビリティ対応はSEO対策やユーザー満足度の向上にもつながる
  • 一度にすべてを完璧にする必要はない。できることから少しずつ取り組む

WEBアクセシビリティへの対応は、「義務だからやる」というネガティブなものではなく、「すべてのお客さまに自社の情報を届ける」というポジティブな取り組みです。対応を進めることで、より多くのお客さまに御社のホームページを快適に使っていただけるようになり、結果としてビジネスの機会が広がります。

「自社のホームページのアクセシビリティを診断してほしい」「何から手をつければよいか相談したい」という方は、ぜひお気軽にお問い合わせください。御社のホームページの現状を確認し、優先度の高い改善策からご提案いたします。

CONTACT

WEBサイト制作のご相談はお気軽に

motiveはブランディングとマーケティングの視点で、お客さまの「らしさ」を引き出すWEBサイトをつくります。
情報設計から制作、公開後の運用まで、パートナーとして伴走します。

無料相談はこちら

無料でご相談する