ウェブページの見出しは、情報の流れや内容の階層性を示すための重要な要素です。正しく構造化、デザインされた見出しは、全てのユーザーがページの内容を迅速に理解し、必要な情報へ簡単にアクセスする手助けとなります。以下のポイントと具体例を参考に、よりアクセシブルな見出しの配置・デザインを目指しましょう。
1.階層性
内容の階層性や関連性に応じて適切なレベルの見出しを選択し、ウェブページの内容の流れや階層を正確に示すことで、ユーザーが情報アクセスを容易に行えるようサポートします。特に視覚障害のあるユーザーやスクリーンリーダーを使用するユーザーには、情報アクセスを容易にするために重要です。
2.視覚的区別
各レベルの見出しを視覚的に区別できるようにデザインすることで、ページの構造をユーザーに明確に伝えることができます。階層が高いものから見出しのフォントサイズ大きくし、他階層の見出しとフォントサイズの差をつける、太字を用いるなどが有効な方法です。
3.適切な配置
見出しはそのセクションの最初に配置することが最も理想的です。見出しの前にコンテンツが配置されると、そのセクションの内容や目的が不明確になることがあります。また、2カラムのレイアウトで左側にテキスト、右側に見出しを配置すると、スクリーンリーダーでの読み上げ順序は左から右の順となります。見出しよりも先にコンテンツが提示される状況が発生するため、注意が必要です。
アコーディオンメニューのデザイン効果は「コンテンツの開閉表現」です。視覚情報を利用しない場合においても、情報が間違いなく伝わるよう工夫してください。
アコーディオンメニューは、情報を効率的に表示するためのUIデザイン手法の一つです。視覚的に依存する側面も強いため、まずは該当コンテンツの表現として、最適かどうかを検討することが重要です。その上で、アコーディオンメニューのメリットを活かせるよう、ウェブアクセシビリティに対する工夫を検討し、実行してください。
タブメニューは、適切な設計と実装を行うことでアクセシビリティ上の問題を解消することが可能です。
タブメニューは「情報整理」「スペースの効率的利用」といったメリットがある一方で、「タブが増えることによる閲覧コストの増加」や「非選択状態のタブコンテンツ内容が隠されることによる一覧性の欠如」といったUI特性によるデメリットも存在します。
タブメニューを利用する際には、アクセシビリティ上の観点だけではなく、コンテンツに対してタブ利用の妥当性を総合的に検討してください。
アクセシビリティとユニバーサルデザインは「できるだけ多くの人が利用できることをめざす」という点が共通しています。違いは、アクセシビリティが「利用できることの度合い」を指す言葉であるのに対し、ユニバーサルデザインは「多くの人が利用できるモノや環境、サービスのデザイン」という点です。ユニバーサルデザインの考え方に沿ってつくられたものは、アクセシビリティが向上すると言えます。
また「ウェブアクセシビリティ」とは、多種多様な人が、さまざまな環境や状況で、ウェブサイトにアクセスして利用できることを指します。
ウェブサイトでは、ユーザーが情報を得る方法を選択して閲覧することができます。
例えば、視覚情報に対して障害がある場合は、スクリーンリーダーを使ってウェブサイトの情報を音声で得たり、文字の拡大や画面の拡大・色を変えるなどの機能を使用して閲覧します。聴覚情報に対して障害がある場合は、字幕機能や音声の文字起こしソフトを使用します。このようにユーザーは、障害の有無に関わらず、自分の好きな方法を選択して、様々な環境で閲覧しています。
能力や環境、状況に関わらず、情報を受け取ることができる表現方法を考えていくことで、より多くの人に情報を届けることができます。
基本的な取り組みに違いはありません。ただし、既存サイトの場合は「アクセシビリティ簡易確認シート」で改修前のウェブアクセシビリティの対応状況を確認し、事前に問題箇所を把握しましょう。構成、デザインが大幅に変わるリニューアルの場合は「アクセシビリティ簡易確認シート」を使う必要はありません。花王ウェブアクセシビリティガイドラインの「ウェブサイト公開までのチェックフロー」を参考にしてください。
まずは「花王ウェブアクセシビリティガイドライン」と、品質基準の目標としているWCAG(Web Content Accessibility Gudelines) 2.1 のレベルAAを理解する必要があります。WCAGの理解度の目安として「アクセシビリティ対応チェックシート」をご活用ください。
基本的な要件は「花王ウェブアクセシビリティガイドライン」に則いつつ、ウェブサイトの目的やリニューアル時の状況を鑑みて策定してください。
公開スケジュールに間に合わない場合は、公開後に対応を実行するなど、状況に合わせて対応計画を立ててください。
※花王がめざす「ウェブアクセシビリティの目標達成期限」までに対応を終わらせることが困難な場合も、期限が過ぎた後に継続して残りの対応を行えるよう対応計画を立ててください。また、期限の対応スケジュールはサイトの公開時期によって異なります。詳しくはガイドライン「4. 対応スケジュール」をご確認ください。
まずは、メディアやコンテンツの役割、ウェブサイトの利⽤状況、施策の予定など事業計画をもとに、ウェブアクセシビリティの取り組みの優先順位をつけましょう。
花王が品質基準の目標とする「WCAG2.1レベルAA」は、短期間で達成するには難しい場合があります。段階的、かつ持続可能となる計画を立てて進めてください。
※段階的な取り組みの目安として「アクセシビリティ対応チェックシート」では、対応優先度を設定しています。
問題が明らかになったコンテンツに対して、アクセシビリティを確保できる代替手段を検討してください。代替の提供が難しい場合、該当画像を変更することも検討ください。
どちらも困難な場合は、アクセシビリティが損なわれることで、ユーザーがどのように困る可能性があるかを理解した上で、できる範囲のアクセシビリティは確保できるよう、制作を進めてください。
アクセス数が少なくても、公開されているページであれば、対応は必要です。公開中、またはこれから公開するウェブサイトのすべてのページが対象範囲となります。
ただし、公開中のウェブサイトの場合、一度にすべてのコンテンツのアクセシビリティ向上を図るのは困難な場合があります。優先付けを行い、段階的な対応を計画してください。
花王株式会社のウェブサイトでは、「障害」の表記として、一部のコンテンツで「障がい」を使用しておりますが、本ガイドラインにおいては、スクリーンリーダーでのテキストの読み上げを考慮し、漢字表記としております。