2024年6月から何が変わった？ウェブアクセシビリティ対応のポイント

2024.07.08

2024年6月から、ウェブアクセシビリティに関する新しい基準が施行されました。この新基準は、ウェブサイトがより多くのユーザーにとって利用しやすくなることを目指しています。では、具体的に何が変わったのかを見ていきましょう。

ウェブアクセシビリティの重要性とは？

ウェブアクセシビリティは、全ての人々がウェブサイトを利用できるようにするための基本的な要素です。特に、視覚や聴覚に障害を持つ人々や色覚特性がある人がウェブサイトを利用するためには、ウェブアクセシビリティに対応したサイトかどうかが、重要となります。

ウェブアクセシビリティとは？

ウェブアクセシビリティとは、障害の有無や、年齢・利用環境などに限らず、あらゆる人がウェブコンテンツを利用できることです。

例えば視覚障害者であれば、スクリーンリーダー（音声読み上げ）を使用しWEBを閲覧しているため、サイトのナビゲーションやコンテンツを理解しやすくするための技術やデザインが必要です。また聴覚障害者に対しては、ビデオコンテンツに字幕を提供することが求められます。これらは一部ですが、ウェブアクセシビリティは、こういった配慮をすることで、全てのユーザーにとってより使いやすいウェブを実現するための重要な概念となっているのです。

なぜアクセシビリティが重要か？

アクセシビリティという言葉は、「Access（近づく）」＋「Ability（～できる）」から成り立っています。そこから「近づくことができる」「アクセスできる」という言葉に派生し、「〇〇を利用できること」という意味になっています。
参考サイト：政府広報オンライン　

インターネットが情報収集源となっている現代では、全ての人々が平等にアクセスできる権利を持っているために、誰でもどんな環境であってもウェブサイトが見れることは重要です。ウェブアクセシビリティを確保することで、障害を持つユーザーも含めた全ての人がウェブサイトを利用できるようになり、企業やサービス提供者はより広範なユーザー層にリーチできます。

法的要件とその影響

ウェブアクセシビリティは、アメリカ、フランス、韓国など多くの国で法的要件となっています。
日本では、2024年4月1日から「障害者差別解消法」の改正に基づき、行政機関に対して義務付けられている「合理的配慮」の提供が、民間事業者にも義務化されました。これは障害のある人が、社会の中で暮らす上で、生活しづらく何らかの対応を必要としている場合に、事業者は対応をしなければならない、ということです。
参考：内閣府合理的配慮リーフレット　

ウェブアクセシビリティに関しては、民間事業者は「合理的配慮」の義務ではなく「環境の整備」という位置づけとなっています。つまり、義務ではないですが、誰もが使いやすいサイトを目指すのであれば改善は必要になります。

2024年6月の新基準の主な変更点

2024年の新基準は、JIS X 8341-3:2016に基づいていますが、いくつか変更になった点があります。

JIS X 8341-3:2016とは

JIS X 8341-3:2016は、日本産業規格（JIS）によって制定されたウェブアクセシビリティに関するガイドラインです。この規格は、ウェブコンテンツが障害を持つ人々を含むすべてのユーザーにとってアクセス可能であることを確保するための基準を示しています。

2024年の新基準では、コントラスト比の強化、フォントサイズの変更、字幕の義務化などが変更になっています。詳しくは次の章より解説します。

ウェブデザインにおける新たな要件

デザイン面でのアクセシビリティ対応は、すべての人に対する見やすく使いやすいデザインを提供することになります。つまりUX（ユーザーエクスペリエンス）の向上にも直結します。デザインを見直すことで、全てのあらゆるユーザーが快適にウェブサイトを利用できるようにしましょう。

色のコントラスト

弱視のユーザーや色覚異常を持つユーザーには、高コントラストの配色を使用することで、テキストや重要な要素が背景からはっきりと見えるようになります。2024年の新基準では、色のコントラスト比を少なくとも4.5:1以上にすることが推奨されています。これにより、弱視のユーザーでも、ウェブサイトの内容を認識しやすくなります。例えば、暗い背景に白いテキストを使用することで、視覚的に明確なコントラストが得られます。また、リンクやボタンの色も同様に、背景から際立つようにすることが重要です。

情報伝達において色だけに頼らないデザインも重要です。例えば、色覚異常を持つユーザーにも配慮し、グラフやチャートで色を使用する際には、形やパターンを併用して視覚情報を伝える方法が推奨されます。色覚異常のユーザーが特定の色を区別できない場合でも、形状やパターンの違いによって情報を理解できるようになります。

アイコンとラベルの組み合わせ

アイコンは視覚的に情報を伝えるために使われるツールですが、視覚障害を持つユーザーや、アイコンの意味をすぐに理解できないユーザーにとっては、アイコンだけでは十分な情報提供とはなりません。ここでテキストラベルが重要になります。アイコンにテキストラベルを追加することで、全てのユーザーがそのアイコンの意味を正確に理解することができます。

視覚障害を持つユーザーは、スクリーンリーダーを使ってウェブサイトを操作することが多いですが、アイコンにテキストラベルを追加することで、スクリーンリーダーがその情報を読み上げるため正確な意味を伝えることができます。また、低視力のユーザーや色覚障害を持つユーザーにとっても、テキストラベルがあることで情報がより明確になります。

フォントサイズと読みやすさの確保

高齢者や視覚障害を持つユーザーにとって、小さいフォントは読みづらく、情報の理解を妨げる要因となっています。2024年の基準では、最低でも16pxのフォントサイズを推奨しています。これにより、多くのユーザーが快適にコンテンツを読めるようになります。また、行間や文字間隔の適切な設定も重要で、行間を広めに設定することで、テキストの読みやすさが向上し、長文でも視覚的な負担が軽減されます。

フォント選びについて

シンプルで読みやすいサンセリフ体のフォントが推奨されます。これは、装飾の少ないフォントが、ディスプレイ上での視認性を高めるためです。また、ウェブサイト全体で一貫したフォントスタイルを使用することも、ユーザーの混乱を避けるために重要です。異なるフォントスタイルを多用すると、視覚的に雑然とした印象を与え、ユーザーの注意が散漫になりがちです。統一されたフォントスタイルと適切なサイズ設定により、情報がスムーズに伝わるデザインを実現できます。

レスポンシブデザインの重要性

レスポンシブデザインは、デバイスに応じてレイアウトを自動的に調整する設計手法です。

2024年の新基準では、全てのウェブサイトがレスポンシブデザインを採用することを強く推奨しています。これは、モバイルデバイスの普及に伴い、異なる画面サイズでの操作性が求められるためです。

具体的には、タッチスクリーンでの操作を考慮し、ボタンやリンクのサイズを十分に大きくすることが必要です。また、縦横のスクロールが不要なレイアウトを設計することで、ユーザーがスムーズにコンテンツを閲覧できるようになります。例えば、メニューやナビゲーションバーは、デバイスの画面サイズに応じて自動的に折りたたまれるようにすることで、画面スペースを有効に活用できます。また、画像や動画のサイズも、デバイスの解像度に合わせて自動的に調整されることが重要です。これにより、ユーザーはどのデバイスを使用しても快適にウェブサイトを閲覧できるようになります。

技術的なアクセシビリティ対策

ウェブサイトの構造や機能、仕組みなど技術的な側面におけるアクセシビリティ対策は、ユーザーの使いやすさや印象を向上させるだけでなく、SEOの向上も期待できます。正しい知識のもと、技術的な実装を行うことで、全てのユーザーがウェブサイトをスムーズに利用できるようになります。

自動テストツールの紹介

ウェブアクセシビリティを実現するためには、自動テストツールを使って効率よく評価を行い、修正する必要があります。また評価結果に基づいてウェブサイトを改善するには、専門的な知識が必要かつ、ツールを使うと知識の補完やガイドの提供を通して、具体的な実装方法などを示してくれるのでおすすめです。

miChecker（エムアイチェッカー）

miChecker（エムアイチェッカー）は、総務省が無料で提供しているウェブアクセシビリティチェックツールです。日本のウェブアクセシビリティ基準（JIS X 8341-3:2016）に基づいてウェブページを検査し、問題点を報告してくれます。特に日本国内でのウェブアクセシビリティ対応を進める際に非常に有用なツールです。
参考リンク：総務省みんなのアクセシビリティ評価ツール

Lighthouse

Lighthouseは、Googleが無料で提供しているChromeの拡張機能で、ウェブサイトのパフォーマンス、アクセシビリティ、SEOなど多方面にわたる評価を行います。数クリックで詳細な評価レポートを生成でき、様々な角度から具体的な改善提案を提供してくれる点が魅力です。以下よりインストールできます。
Chromeの拡張機能Lighthouseをインストール

axe

axeは、Deque Systemsによって提供されている無料のアクセシビリティテストツールで、ウェブ開発者が簡単にアクセシビリティの問題を検出し、修正することができます。ChromeやFirefoxのブラウザ拡張機能として利用でき、リアルタイムでウェブページのアクセシビリティをチェックできるのが特徴です。

スクリーンリーダーに対応

スクリーンリーダー対応のウェブサイトは、適切なHTMLタグの使用と意味のあるコンテンツの構造化が含まれます。

以下を実践することで、スクリーンリーダーを使用するユーザーにとって、ウェブサイトがより使いやすく、情報を得やすいものになります。

コンテンツの階層構造を理解しやすくするため見出しタグ（h1からh6）を正しく使用
リンクテキストは、リンクの目的が伝わりやすくなるので明確で具体的なものにする
視覚情報を適切に伝えるために、画像には必ず代替テキスト（alt属性）を設定
フォーム要素は、スクリーンリーダーが各フィールドの目的を正確に読み上げられるようにする
※<label>タグを使用して入力フィールドとそのラベルを関連付ける
※エラーメッセージもスクリーンリーダーで読み上げられるようにする
ナビゲーションメニューやフォーム要素に適切なARIA属性を追加

キーボード操作のサポート

運動障害を持つユーザーや、マウスを使用できない環境でウェブサイトを利用するユーザーにとって、キーボードでウェブサイトを操作できることは非常に重要です。2024年の新基準では、全てのインタラクティブ要素がキーボード操作に対応していることが求められています。インタラクティブ要素とは例えば、フォーム入力や送信ボタン、リンクなどを指しており、それらがキーボードで操作可能である必要があります。

具体的には、タブキーで全てのインタラクティブ要素を順番に移動できるようにし、Enterキーやスペースキーでそれらの要素を操作できるようにします。また、フォーカスがどの要素にあるかを視覚的に明示するために、フォーカス表示を設定することが推奨されます。これにより、キーボードのみでの操作がスムーズに行えるようになり、ユーザーの利便性が向上します。キーボード操作の利便性を高めることは、アクセシビリティ対応の重要な要素であり、全てのユーザーにとって使いやすいウェブサイトの実現に近づきます。

コンテンツのアクセシビリティ向上

コンテンツのアクセシビリティは、ウェブサイトの情報が全てのユーザーに理解されやすくなるための重要な要素です。テキスト、画像、動画など、様々なコンテンツ形式に対する配慮が必要です。

画像と動画の代替テキスト

画像と動画の代替テキストは、視覚障害を持つユーザーがコンテンツを理解するための重要な手段です。代替テキスト（alt属性）は、画像や動画の内容を簡潔に説明するテキストで、スクリーンリーダーがこのテキストを読み上げることで、ユーザーに画像や動画の内容を伝えることができます。2024年の新基準では、全ての非テキストコンテンツに適切な代替テキストを提供することが求められています。

特に教育動画やチュートリアル動画などの重要な情報を含むコンテンツでは、字幕の対応が不可欠です。

テキストコンテンツの構造化

見出しタグ（h1、h2、h3など）を正しく使用することで、コンテンツの階層構造を明確にし、スクリーンリーダーを使用するユーザーがページ内を効率的にナビゲートできるようになります。2024年の新基準では、見出しタグの適切な使用と共に、段落やリストタグなどのHTML要素を用いたテキストの構造化が強く推奨されています。

音声コンテンツの文字起こし

ポッドキャストやインタビューなどの音声コンテンツには、テキストによる文字起こしを提供することで、全てのユーザーが情報にアクセスできるようになります。2024年の新基準では、音声コンテンツに対する文字起こしの提供が求められており、聴覚障害を持つユーザーや、音声を聞くことができない環境にいるユーザーにとって、アクセシビリティが大幅に向上します。

文字起こしには、話者の名前や重要な非言語的情報（例えば「笑い声」や「拍手」など）も含めると、コンテンツの完全な理解が促進されます。

アクセシビリティテストと評価

ウェブアクセシビリティの確保には、定期的なテストと評価が不可欠です。適切なテストと評価を行うことで、ウェブサイトが全てのユーザーにとって利用しやすい状態を維持できます。

ユーザーテストの重要性

自動テストツールは、ウェブサイトのアクセシビリティを迅速かつ効率的に評価するための強力な手段です。miChecker（エムアイチェッカー）やLighthouseなどのツールを使用することで、担当者は手動による確認作業を大幅に削減し、アクセシビリティの問題を素早く特定し修正できます。

しかし自動テストツールだけでは検出できない問題を発見するためには、実際のユーザーによるテストが不可欠です。ユーザーテストを通じて、ユーザーがウェブサイトをどのように利用しているかを直接観察し、潜在的な問題を特定することができます。2024年の新基準では、定期的なユーザーテストの実施が推奨されています。

視覚障害を持つユーザーや聴覚障害を持つユーザー、運動障害を持つユーザーなど、様々なバックグラウンドを持つユーザーにテストに参加していただき、彼らのフィードバックを基に、ウェブサイトのデザインや機能を調整することで、アクセシビリティの問題を解決できます。

例えば、スクリーンリーダーを使用したナビゲーションが難しい場合、その原因を特定し、適切なラベル付けやARIA属性の追加などの修正を行います。ユーザーテストの結果を反映することで、実際の利用シーンに即したアクセシビリティ向上が期待できます。

継続的な評価と改善

アクセシビリティの確保には、継続的な評価と改善が重要です。一度対応したからといって、全ての問題が解決されるわけではありません。ウェブサイトの更新や新しいコンテンツの追加に伴い、新たなアクセシビリティの問題が発生する可能性があります。2024年の新基準では、継続的な評価と改善のプロセスを取り入れることが推奨されています。

定期的な自動テストとユーザーテストの組み合わせにより、ウェブサイトのアクセシビリティを常に最新の状態に保ちましょう。また、アクセシビリティに関するフィードバックを収集し、ユーザーからの意見や提案を積極的に取り入れることも重要です。

ウェブサイトにフィードバックフォームを設置すれば、ユーザーが気づいた問題点や改善点を即座に報告することができ、継続的にアクセシビリティを向上させることができます。

まとめと今後の展望

ウェブアクセシビリティの対応は、全てのユーザーが平等に情報にアクセスできる環境を作るための重要な取り組みです。2024年の新基準により、さらに厳格な対応が求められていますが、これを機会に企業全体でアクセシビリティへの取り組みを強化することが求められます。

2024年の新基準への対応を振り返る

2024年6月に施行された新基準においては、多くの企業が対応に追われたのではないでしょうか。これまでに紹介したような技術的な対策やデザインの改善、評価ツール、ユーザーテストの実施など、様々な取り組みが求められている中で、これらの対応を通じて、企業は法的リスクを回避しつつ、全てのユーザーにとって使いやすいウェブサイトを提供することができるようになります。

特に、スクリーンリーダー対応や色のコントラスト比の調整など、細部にわたる配慮が重要です。これまでの取り組みを振り返り、どのように改善してきたかを確認することで、今後の取り組みの指針とすることができます。