連載記事ウェブアクセシビリティを知ろう

連載34：【ウェブ制作・サイト管理者向け】ウェブアクセシビリティ対応の始め方

関家 脩平
2025年4月25日

「ウェブアクセシビリティ対応って大切そうだけど、何から始めればいいのか分からない」

ウェブアクセシビリティ対応に関心のあるウェブ制作・担当者の方の中には、そう感じている方も多いのではないでしょうか。
専門的で難しそう、時間がかかりそう、そんなイメージが先行し、対応の優先度が後回しになりがちです。

しかし、ウェブアクセシビリティは決して「上級者だけが扱える特別な技術」ではありません。ちょっとした気配りや、基本的なマークアップの見直しから始められる「誰でもすぐに取り組めること」がたくさんあります。

今回は、ウェブ制作者や担当者がウェブアクセシビリティ対応を始めるための、実践的なステップを簡単にご紹介します。

ステップ1：まずは「知る」ことから

最初の一歩は、「どんな人がウェブを利用しているのか」を知ることです。

視覚や聴覚に障がいのある方、マウスが使えない方、高齢者、スマートフォンしか持っていない方など、ウェブユーザーは実に多様です。そして、そのようなユーザーは「特別な人」ではなく、私たちの家族や友人、そして未来の自分自身かもしれません。

誰にとっても使いやすいウェブサイトやコンテンツをつくることは、すべての人へのやさしさにつながります。

当協会の連載記事では様々なテーマでウェブアクセシビリティについてのコラムを掲載しています。
ウェブアクセシビリティの理解を深める手段の一つとしてぜひご覧ください。

ステップ2：WCAGの概要を押さえる

ウェブアクセシビリティの国際的なガイドライン「WCAG（Web Content Accessibility Guidelines）」がありますが、最初からすべてを理解しようとするとハードルが高く感じられます。
まずは、以下の4原則だけでも意識してみましょう。

1. 知覚可能：すべてのユーザーが情報を感知できること（例：画像に適切な代替テキストをつける）
2. 操作可能：どんな手段でも操作できること（例：キーボード操作への対応）
3. 理解可能：情報がわかりやすく伝わること（例：簡潔で明確な表現）
4. 堅牢性：さまざまな技術でも正しく動作すること（例：正しいHTML構文でのマークアップ）

この4つを意識するだけでも、設計やデザイン、コーディングへの取り組み方が自然と変わっていきます。

ステップ3：すぐできる！基本の対応3選

ここからは、今日から実践できるウェブアクセシビリティ対応を3つご紹介します。

alt属性を正しく使う

画像には、適切な代替テキスト（alt属性）を設定しましょう。これにより、視覚に障がいのある方にも画像の内容が伝わります。
また、インターネット回線の不調などで画像が表示されない場合でも、alt属性が設定されていればその意味を伝えることができます。

代替テキスト（alt）の設定では画像の意味や役割を端的に表現することが大切です。読み上げられた時のことをイメージして設定しましょう。
装飾目的の画像には alt="" とすることで、スクリーンリーダーによる読み上げをスキップできます。
判断に迷ったときは、W3Cが提供している「altディシジョンツリー」を参考にすると良いでしょう。

色だけに頼らない情報設計

「赤はエラー」「緑はOK」といったように、色だけで情報を伝えると、色覚多様性のある人には意味が伝わりません。実際、日本人男性の約5％、女性の約0.2％はいわゆる色弱であるといわれており、また、60歳代では70〜80％が白内障の傾向がみられるなど、色の識別が困難な人は決して少なくありません。
色に加えてアイコンや文字による補足を加えることで、誰にでも情報が伝わるようにしましょう。

HTMLタグを正しく使う

<h1>〜<h6> の見出しタグや <ul>, <ol> のリストタグなど、HTMLは論理的な構造に沿って正しく使いましょう。また、フォームでは <label> を使用し、入力フィールドと明確に関連付けることで、スクリーンリーダーが正しく読み上げるようになります。

ステップ4：支援技術を体験してみる

スクリーンリーダー（例：NVDA、VoiceOver）を実際に使って、自分が制作したページを試してみると、思わぬ課題が見つかることがあります。「情報は適切な順序で読み上げられているか？」「どこが分かりにくいか？」など、新たな気づきが得られるはずです。

また、Chrome拡張の「axe DevTools」や「Lighthouse」を使えば、簡易的にウェブアクセシビリティチェックが可能です。まずは数ページだけでも試してみることをおすすめします。
ただし、これらのツールはあくまで補助的なものです。すべての課題を網羅できるわけではないため、結果は参考程度に捉えましょう。