ウェブアクセシビリティとは?2024年義務化における具体的な対応例を解説
ウェブアクセシビリティとは?2024年義務化における具体的な対応例を解説
専門知識不要のCMS・MAツール「LeadGrid」
1,500社以上のサイト制作・マーケティング支援の経験から生まれた、専門知識がなくても簡単に使える国産CMS・マーケティングツールです。上場企業から中小・ベンチャーまで様々な企業にご利用いただいております。
「2024年にウェブアクセシビリティが義務化されたって聞いたけど、具体的にどう対応すればいいのだろう?」と不安に感じている方も多いのではないでしょうか。
そこで本記事では、ウェブアクセシビリティの基本概念から、具体的な対応例、企業が取り組むべきステップまでわかりやすく解説します。ぜひ最後までご一読いただき、自社のWebサイトのアクセシビリティ向上にお役立てください。
ウェブアクセシビリティ(Webアクセシビリティ)とは
ウェブアクセシビリティとは、障害の有無や年齢に関わらず、誰もがWebサイトやWebアプリケーションを利用できるようにすることを指します。
2023年にデジタル庁が発行した「ウェブアクセシビリティ導入ガイドブック」では、ウェブアクセシビリティが担保できている状態を下記のように定義しています。
一般的に「ウェブアクセシビリティが担保できている」状態とは、具体的に次のような状態になることが望まれます。
- 目が見えなくても情報が伝わる・操作できること
- キーボードだけで操作できること
- 一部の色が区別できなくても情報が欠けないこと
- 音声コンテンツや動画コンテンツでは、音声が聞こえなくても何を話しているかわかること
たとえば色のコントラストを十分に取ることで色覚異常の方にも見やすくなりますし、キーボードのみでも操作できるようにすることで運動機能に制約のある方でも利用しやすくなります。またサイト内の文章でわかりやすい言葉や表現を使うことは、知的障害のある方や高齢者、子供など、幅広いユーザーに配慮することにつながるのです。
ウェブアクセシビリティは単に障害者への配慮というだけでなく、あらゆる人に対してWebの利便性を高めることにつながります。近年は社会的責任の観点からも重視されるようになっており、誰もが等しくWebを活用できる社会の実現に不可欠な考え方といえるでしょう。
ウェブアクセシビリティの対応自体に法的義務はない
ウェブアクセシビリティが注目されるようになった背景として、2024年4月に障害者差別解消法が改正されたことが挙げられます。ここでは企業に求められるウェブアクセシビリティの対応についてみていきましょう。
2024年4月より「障害者への合理的配慮の提供」が義務化
2024年4月に改正法が施行された改正障害者差別解消法により、障害者に対する合理的配慮の提供が民間事業者にも義務化されました。ただし、これはウェブアクセシビリティ自体の義務化ではありません。
改正法で義務化されるのは「障害者への合理的配慮の提供」であり、ウェブアクセシビリティ対応そのものが義務というわけではないのです。とはいえ、障害者から求められた際に過度な負担にならない範囲でウェブアクセシビリティ対応を行うことは、合理的配慮の一環として必要になる可能性があります。
またウェブアクセシビリティ確保は、もともと障害者差別解消法の「環境の整備」として努力義務とされています。法的義務ではないものの、社会的責任の観点から自主的な取り組みが求められているといえるでしょう。
将来的にウェブアクセシビリティが法令で義務化される可能性も
現時点では日本国内でウェブアクセシビリティの法的義務はありませんが、海外ではウェブアクセシビリティが法令で義務化されているケースもあります。たとえばアメリカでは、リハビリテーション法508条によって連邦政府機関のウェブサイトにアクセシビリティ対応が義務付けられています。
日本でも将来的にウェブアクセシビリティへの要求レベルが高まっていく可能性は十分にあります。現時点では努力義務としての位置づけですが、法改正の動向には常に注意を払っておく必要があるでしょう。
いずれにしても、義務化の有無に関わらず、誰もがアクセスできるWebサイトを目指すことは企業の社会的責任という観点からも重要です。企業はガイドラインに沿った自主的な取り組みが求められているといえます。
企業がウェブアクセシビリティに対応するメリット
企業がウェブアクセシビリティに対応することには、下記のようにメリットもあります。
- より幅広いユーザーにWebサイトを利用してもらえる
- 顧客満足度やブランドイメージ向上につながる
- SEO効果を期待できる
より幅広いユーザーにWebサイトを利用してもらえる
ウェブアクセシビリティ対応により、視覚障害者、聴覚障害者、上肢障害者など、さまざまな障害を持つ人や高齢者なども含めて、幅広いユーザー層に自社のWebサイトを利用してもらえるようになります。
たとえばスクリーンリーダーを使う視覚障害者のために画像に代替テキストを付けたり、聴覚障害者のために動画にキャプションをつけたりすることで、より多くの人にコンテンツを届けることができるのです。
またウェブアクセシビリティ対応は、一時的な障害のある人や、スマートフォンで片手操作をしている人など、さまざまな環境で利用する人にとってもメリットがあります。ユーザー層の拡大は、新たな顧客獲得のチャンスにもつながるでしょう。
顧客満足度やブランドイメージ向上につながる
ウェブアクセシビリティ対応は、ユーザビリティの向上につながります。使いやすくわかりやすいウェブサイトは、顧客満足度の向上に直結するでしょう。
またウェブアクセシビリティへの取り組みは、社会的責任を果たす企業としてのブランドイメージ向上にも寄与します。多様なユーザーに配慮する姿勢は、企業の好感度を高めることにつながるはずです。
さらにアクセシビリティに対応したウェブサイトは、ユーザーに良い体験を提供することで、リピーターの獲得や口コミでの広がりも期待できます。顧客との良好な関係構築に役立つといえるでしょう。
SEO効果を期待できる
ウェブアクセシビリティ対応は、SEO(検索エンジン最適化)の観点からもメリットがあります。アクセシブルなWebサイトは検索エンジンにもわかりやすい構造になっているためです。
たとえば適切な見出しの設定や代替テキストの提供は、検索エンジンがコンテンツを理解しやすくするのに役立ちます。またウェブアクセシビリティの基準を満たすことは、Googleなどの検索エンジンからも高く評価される要因の一つと考えられています。
SEOは多くのユーザーにWebサイトを見つけてもらうために重要な取り組みです。ウェブアクセシビリティ対応によるSEO効果は、集客力の向上にもつながるでしょう。
ウェブアクセシビリティのガイドラインと規格
ここまで、企業がウェブアクセシビリティに取り組む意義やメリットを解説しましたが、ウェブアクセシビリティを確保するためには一定の基準に沿って対応を進めることが重要です。
ここでは、世界的に広く使われているガイドラインのWCAGと、その一致規格であるJIS規格について解説いたします。
WCAG
WCAG(Web Content Accessibility Guidelines)は、W3C(World Wide Web Consortium)という国際的な標準化団体が策定したウェブアクセシビリティのガイドラインです。1999年に1.0、2008年に2.0が勧告され、現在は2.1が最新版となっています。各達成基準にはA、AA、AAAの3段階の適合レベルが設定されており、数字が大きいほど高いレベルを意味します。
企業がウェブアクセシビリティに取り組む際は、まずWCAGを参照し、自社サイトがどの適合レベルを目指すのかを明確にすることが求められます。一般的にはWCAG 2.1 AAレベルへの対応が推奨されていますが、サイトの性質や利用者層を考慮して適切なレベル設定を行うことが重要です。
参考:Web Content Accessibility Guidelines (WCAG) 2.2
JIS X 8341-3
JIS X 8341-3は、日本の高齢者・障害者等配慮設計指針の第3部で、Webコンテンツのアクセシビリティに関する国内規格です。
2016年版のJIS X 8341-3:2016は、WCAG 2.0及びISO/IEC 40500:2012と内容が一致しています。つまり、JIS X 8341-3への対応はそのままWCAGやISO規格への対応にもつながるということです。
日本の企業がウェブアクセシビリティに取り組む際は、JIS X 8341-3を基準とすることが一般的です。民間企業の場合はJIS規格への対応は法的義務ではありませんが、JISに準拠することで国際規格にも対応できるというメリットがあります。
参考:JIS X 8341-3:2016 解説|ウェブアクセシビリティ基盤委員会
ウェブアクセシビリティの具体的な対応例
ここからは、ウェブアクセシビリティの具体的な対応例として、デジタル庁の『ウェブアクセシビリティ導入ガイドブック』で定められている基本的に達成すべき項目から一部を取り上げます。これらの対応はごく一部であり、企業によって求められる対応は変わりますので、参考程度にご覧ください。
なお下記の記事では、ウェブアクセシビリティのチェックツールや対応のチェックリストを紹介しています。こちらも合わせてご覧ください。
関連記事:ウェブアクセシビリティチェックツール10選|優先度別チェックリストや注意点も
ロゴ・写真・イラストなどの画像が指し示している情報を代替テキストとして付与する
画像に代替テキスト(alt属性)を付けることは、ウェブアクセシビリティ対応の基本中の基本です。代替テキストを提供することで、画像の内容を理解できない視覚障害者などにも情報を伝えることができます。
たとえば商品の画像であれば「○○社製の△△」といった具体的な説明を加えましょう。単に「商品画像」などと記述するだけでは不十分です。一方、装飾的な画像には空のalt属性を指定するなど、適切な使い分けも必要です。
キーボード操作だけで、サービスのすべての機能にアクセスすることができるようにする
視覚障害者など、マウスを使えないユーザーのために、キーボードだけでウェブサイトのすべての機能にアクセスできるようにすることが求められます。
具体的には、Tabキーでリンクやフォームなどを順番に移動できるようにしたり、Enterキーでリンクを開けるようにしたりします。また、現在フォーカスされている箇所を明示するため、フォーカスインジケーターを表示することも重要です。
さらに、キーボード操作時に、フォーカスがキャンセルされたり、意図しない動作が起きたりしないよう注意が必要です。ユーザーが混乱することのないよう、適切に設計しましょう。
スクリーンリーダーで順に読み上げたときに、意味が通じる順序になっている
スクリーンリーダーを使うユーザーは、Webページの先頭から順番にコンテンツを読み上げていきます。そのため、読み上げる順序が視覚的な並びと異なると、内容を正しく理解できなくなってしまいます。
HTMLのソースコードに記載されている順序で読み上げられるため、この順序を考慮してコンテンツを設計する必要があります。つまり、ソースコード上の記述順序とスクリーンリーダーの読み上げ順序が一致するように設計することが求められます。
見出し要素だけで、セクションやブロックに含まれる要素を表現する
Webページ内の構造を適切な見出しタグ(h1〜h6)で表現することは、アクセシビリティの観点から非常に重要です。適切な見出しの設定により、スクリーンリーダーを使うユーザーがページの概要を把握しやすくなります。
具体的には、ページのメインタイトルにはh1タグを使用し、セクションのタイトルにはh2タグ、サブセクションのタイトルにはh3タグを使用する、といった具合です。見出しレベルを正しく設定することで、ページの階層構造を明確に伝えられます。
文字と背景の間に十分なコントラスト比を保つ
文字と背景の色のコントラスト比が低いと、弱視の人や色覚異常の人にとって読みづらいものになってしまいます。そのため、十分なコントラスト比を確保することがウェブアクセシビリティの対応として重要です。
WCAG 2.1では、通常のテキストのコントラスト比を少なくとも4.5:1以上にすることが求められています。また、大きめの文字(18ポイント以上または太字の14ポイント以上)の場合は、コントラスト比を3:1以上確保する必要があります。
リンクを適切に表現する
リンクテキストは、リンク先の内容を適切に示すものでなければなりません。「こちら」や「詳細」といった曖昧な表現では、リンクの目的が理解しづらいためです。
たとえば「商品A」という商品の詳細ページにリンクする場合、「商品Aの詳細はこちら」というリンクテキストであれば、リンクの目的が明確に伝わります。一方、単に「こちら」とだけ書かれていては、どこにリンクするのかわかりません。
また同じページ内の異なるリンクに同じテキストを使うのも避けるべきです。「詳細を見る」というテキストのリンクが複数あると、どの詳細なのか区別がつかなくなってしまいます。
企業におけるウェブアクセシビリティ対応ステップ
最後に、企業におけるウェブアクセシビリティの対応をステップごとに解説します。
- 目標とする適合レベルを決める
- ウェブアクセシビリティ方針を策定する
- ウェブアクセシビリティの試験を行う
- ウェブアクセシビリティの試験結果を公開する
1. 目標とする適合レベルを決める
はじめに、自社のWebサイトがどの程度のアクセシビリティ基準を目指すのかを決める必要があります。JIS X 8341-3:2016では、適合レベルがA、AA、AAAの3段階で定義されています。
一般的には、適合レベルAAを目標とすることが多いようです。政府機関のウェブアクセシビリティ方針の多くがAAを目標としていることや、海外の動向を見てもAAが推奨されているケースが多いためです。
ただし自社のウェブサイトの性質や利用者層を考慮して、適切な適合レベルを設定することが大切です。たとえば高齢者や障害者を主なターゲットとしているサイトであれば、AAAを目指すことも検討すべきでしょう。
2.ウェブアクセシビリティ方針を策定する
目標とする適合レベルが決まったら、次はウェブアクセシビリティ方針を策定します。ウェブアクセシビリティ方針とは、自社のウェブサイトのアクセシビリティに関する基本的な考え方や目標を示したものです。
ウェブアクセシビリティ方針には、以下のような内容を盛り込むことが求められます。
- 対象となるウェブサイトの範囲
- 目標とする適合レベルと対応度
- 達成期限
- 例外事項(達成が難しいコンテンツなど)
ウェブアクセシビリティ方針は、できるだけ具体的に記述することが大切です。曖昧な表現は避け、数値目標を設定するなどして、達成状況を測れるようにしましょう。
またウェブアクセシビリティ方針は、企業のウェブサイト上で公開することが推奨されています。自社の取り組み姿勢を明確に示すことで、企業の社会的責任を果たす意思を伝えられるからです。
3.ウェブアクセシビリティの試験を行う
ウェブアクセシビリティ方針に基づいてウェブサイトを制作したら、次はアクセシビリティ基準に適合しているかどうかを確認するための試験を行います。試験の実施は、JIS X 8341-3:2016で定められている手順に沿って進めることが求められます。
具体的には、以下のようなステップで試験を行います。
- 試験の対象となるWebページを選択する
- 試験の方法と使用するツールを決める
- 試験を実施し、適合状況を確認する
- 試験結果をまとめ、適合レベルと対応度を判定する
試験の対象となるWebページは、サイト全体を代表するページを選ぶことが重要です。トップページだけでなく、サブページや重要なコンテンツページも含めるようにしましょう。
試験の方法は、自動チェックツールを使う方法と、手動で確認する方法があります。ツールを使えば効率的に試験できますが、ツールでは判断できない項目もあるため、手動での確認も必要です。また実際に障害者の方に協力してもらい、使用感をフィードバックしてもらうのも有効でしょう。
下記の記事ではウェブアクセシビリティのチェックに活用できるツールを無料・有料に分けて紹介しています。こちらもぜひご確認ください。
関連記事:ウェブアクセシビリティチェックツール10選|優先度別チェックリストや注意点も
4.ウェブアクセシビリティの試験結果を公開する
ウェブアクセシビリティの試験が終わったら、その結果を自社のWebサイト上で公開します。公開は任意ですが、積極的に行うことが推奨されています。
試験結果の公開には、以下のような情報を含めることが求められます。
- 試験を実施した日付
- 試験の対象となったウェブページの範囲
- 試験の方法と使用したツール
- 適合レベルと対応度の判定結果
- 適合しなかった項目とその理由(適合レベルに達しなかった場合)
試験結果の公開は、ウェブアクセシビリティへの取り組みを対外的にアピールする良い機会でもあります。適合レベルを達成した場合は、そのことを積極的に伝えていきましょう。企業イメージの向上にもつながるはずです。
ウェブアクセシビリティの対応は今後の企業に必要不可欠
企業には、ウェブアクセシビリティに関する正しい理解と、積極的な取り組みが求められています。一人ひとりのユーザーに寄り添い、誰もが等しくWebを活用できる社会の実現に貢献することが、これからの時代を生き抜く企業に不可欠といえるでしょう。
なお、ウェブアクセシビリティの対応はWebサイトリニューアル時がおすすめです。リニューアル時の要件にアクセシビリティの対応を含めることで、予算を抑えられる可能性があります。
LeadGridチームではさまざまな業界のWebサイトリニューアルを支援してきた実績がありますので、ぜひ一度事例集をご確認ください。
LeadGridはマーケティングに強みを持つクラウド型CMSです。下記のように豊富なマーケティング機能を備えており、貴社のWebマーケティングをアシストします。
- フォーム編集機能
- ホワイトペーパーの自動ダウンロード機能
- セミナー管理機能
- CRM機能
- MAツール連携機能(API)
専門知識不要のCMS・MAツール「LeadGrid」
1,500社以上のサイト制作・マーケティング支援の経験から生まれた、専門知識がなくても簡単に使える国産CMS・マーケティングツールです。上場企業から中小・ベンチャーまで様々な企業にご利用いただいております。
LeadGrid BLOG編集部は、Web制作とデジタルマーケティングの最前線で活躍するプロフェッショナル集団です。Webの専門知識がない企業の担当者にも分かりやすく、実践的な情報を発信いたします。
Interview
お客様の声
-
採用力強化を目的に更新性の高いCMSを導入し、自社で自由に情報発信できる体制を実現した事例
株式会社ボルテックス 様
- # 採用サイト
- # 採用強化
- # 更新性向上
Check -
直感的な操作性・自由に構成を変更できる柔軟性により、理想のサイト運営が可能になった事例
株式会社フォーカスシステムズ 様
- # コーポレートサイト
- # 更新性向上
- # 採用強化
Check -
ロゴ・サイト・モーション、すべてのデザインに世界観を込めたリブランディング事例
circus株式会社 様
- # コーポレートサイト
- # 更新性向上
- # リブランディング
- # 採用強化
Check -
物流DX企業として信頼いただけるようなサイトデザインに刷新し、SEO流入も増加した事例
三菱商事ロジスティクス株式会社 様
- # コーポレートサイト
Check
Works
サイト制作事例
SAAFホールディングス ㈱ 様 - コーポレートサイト
- # コーポレートサイト制作
㈱ エスネットワークス様 - コーポレートサイト
- # コーポレートサイト制作
㈱ レイ様「コミデ」ユニット - コーポレートサイト
- # コーポレートサイト制作
㈱ ボルテックス様 - 採用サイト
- # 採用サイト制作
㈱ フォーカスシステムズ様 - コーポレートサイト
- # コーポレートサイト制作
㈱ エブリー 様 - コーポレートサイト
- # コーポレートサイト制作