前回の記事（すべての人に届くWebサイトへ。Vol.3｜「いつもの操作」ができない人のことを考える）では、マウスやタップに頼らない操作性の設計が、より多くの人に届くサイトをつくることをお伝えしました。今回はその続きです。
前回は「操作のしやすさ」について、パソコンとスマートフォンの両面から考えました。今回は、Webサイトの「中身」に目を向けます。見た目のデザインや操作性と同じくらい、いえ、それ以上に大切なのが、言葉の選び方と情報の構造です。
Webサイトの情報は、目で読む方だけに届いているわけではありません。読み上げソフトを使って耳で聞いている方、検索エンジンのクローラー、そしてさまざまな端末やブラウザ。情報がどのように「構造化」され、どんな「言葉」で記述されているかによって、届き方はまったく変わります。言葉の丁寧さと構造の正しさは、目には見えにくいけれど、アクセシビリティを支えるとても大切な土台です。私たちは、この土台づくりこそがUXデザインの要だと感じています。
見出しタグの正しい使い方と、その効果
Webページには、見出し、本文、画像、リンクなど、さまざまな要素が並んでいます。これらが視覚的に整理されていることはもちろん大切ですが、「見た目の整理」と「構造的な整理」は、実は別のものです。たとえば見出し。デザイン上は大きな文字で表示されていても、HTMLの構造としてh1、h2、h3といった見出しタグが正しく使われていなければ、読み上げソフトはそれを見出しとして認識できません。読み上げソフトのユーザーの中には、見出しの一覧を使ってページ内を移動する方がいらっしゃいます。見出しが正しく設定されていないと、ページの全体像がつかめず、目的の情報にたどり着くことが難しくなってしまいます。見た目だけでなく、構造としての正しさを意識することが、アクセシビリティのある設計の基本です。
「alt属性」と画像の言語化
画像には「alt属性」と呼ばれる、代替テキストを設定できる仕組みがあります。読み上げソフトは画像を「見る」ことができないため、このalt属性に書かれたテキストを読み上げて、画像の内容を伝えます。「image.jpg」や「写真1」といった意味のない文字列ではなく、「笑顔で接客するスタッフの写真」「製品の側面を映したアップ画像」など、画像が伝えようとしている情報を言葉にすることが大切です。すべての画像にalt属性を設定することは、アクセシビリティの基本的な取り組みのひとつです。
「言葉」はサイトの構造をつくる
言葉の選び方も、アクセシビリティに大きく影響します。専門用語を多用した説明は、その分野に詳しくない方には届きません。長い一文は、理解するのに時間がかかります。「こちら」「ここ」といった指示語は、文脈がないと意味が伝わりません。できるだけ平易な言葉で、短く、具体的に書くこと——それがすべての人に届く言葉の設計です。
まとめ
見出しタグの正しい構造、画像へのalt属性の設定、平易で具体的な言葉の選択——これらは目には見えにくいけれど、すべての人に情報を届けるためのとても大切な土台です。「見た目の整理」と「構造の正しさ」の両方を意識することが、アクセシビリティのあるWebサイトをつくるための第一歩になります。
記事監修
中谷 浩和
株式会社サンアンドムーン｜代表取締役
1976年創業のデザイン事務所を前身に、Webコンサルティング・UI/UXデザインを専門とする。
国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、 上級ウェブ解析士 としてデータ主導のサイト改善にも精通。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。
