Studioのアクセシビリティ機能の基本——alt・見出しタグ・aria属性の使いどころ

アクセシビリティという言葉を、サイト制作の文脈で見かけたことがあるかもしれません。日本語にすると「利用しやすさ」で、より多様な状況の人がサイトを使えるようにすることを指します。視覚に障害がありスクリーンリーダー（画面の内容を音声で読み上げる仕組み）を使っている方だけでなく、一時的に画面を見られない状況にある方なども含む、幅広い考え方です。

Studioには、こうしたアクセシビリティを高めるための機能がいくつか用意されています。この記事では、代表的な機能と使いどころの基本を整理します。

人間にとっての読みやすさと、機械にとっての分かりやすさ

アクセシビリティは大きく2つに分けて考えられます。1つは、人間が目で見てわかりやすい・読みやすいという「ヒューマンリーダビリティ」。もう1つは、機械（スクリーンリーダーなどの支援技術）にとって意味が理解できるという「マシンリーダビリティ」です。

スクリーンリーダーは、たとえばh1要素を「見出しレベル1」、a要素を「リンク」というように、HTMLのタグの意味を読み上げます。デザインの見た目だけでなく、HTML側の設定が適切かどうかが、アクセシビリティを左右します。

画像には代替テキスト（alt）を

情報を伝える画像には、Imgモードで配置したうえで代替テキスト（alt）を設定するのが基本です。スクリーンリーダーは、画像そのものではなくこのaltのテキストを読み上げます。

altは、画像の読み込みに失敗したときに画面に表示されるテキストとしても使われ、検索エンジンにも利用されています。1つ設定しておくだけで複数の場面に効く、費用対効果の高い設定です。

見出しは、文章の構造どおりにタグを選ぶ

Studioのテキストボックスは、初期状態では<p>（段落）タグですが、<h1>〜<h6>（見出し）などに変更できます。どのタグを選ぶかは、見た目の文字サイズではなく、文章の構造（大見出し・中見出し・本文）に沿って決めるのが基本です。

見出しタグが文章の構造どおりに設定されていると、スクリーンリーダーの利用者は見出しだけを拾い読みしてページ全体の構成をつかむ、といった使い方ができるようになります。

aria-label・aria-hiddenは「最後の手段」として使う

HTMLのタグやalt設定だけでは意味を伝えきれない場面で、aria-label・aria-hiddenという属性が使えます。aria-labelは、要素の中身の代わりに読み上げる文言を指定する設定で、アイコンだけのボタンのように、見た目のテキストだけでは意味が伝わらない要素に使います。aria-hiddenは逆に、装飾目的の要素や、テキストと意味が重複するアイコンなどを読み上げの対象から外す設定です。

どちらも便利な一方、むやみに使うと画面上の見え方と読み上げ内容がずれてしまうことがあります。まずはaltや見出しタグなど基本の設定で対応できないか検討し、それでも足りない場合の補助的な手段として使うのが安全です。

動きの多い演出は、「動きを減らす」設定に配慮されている

OSやブラウザには、動きに敏感な方向けに「動きを減らす」「視差効果を減らす」といった設定があります。Studioの無限ループ（マーキー）表現の機能は、この設定が有効になっている閲覧環境では、アニメーションが自動的に停止するよう配慮されています。

すべての動きが自動で配慮されるわけではないため、凝った演出を加える際は、動きを減らす設定にしている方にとっても内容が伝わるかどうか、一度確認しておくと安心です。Studioのアニメーションの仕組み自体はStudioのアニメーション入門で扱っているので、あわせてご覧ください。

まとめ

アクセシビリティは、特別な人だけのための対応ではなく、より多くの人がサイトを問題なく使えるようにするための基本的な配慮です。画像のalt、見出しタグ、必要な場面でのaria属性——この3つを押さえておくだけでも、アクセシビリティは着実に向上します。生成AIにサイトを作らせる場合の伝え方は、生成AIに「アクセシビリティに配慮して」と頼むときに、具体的に伝えるべきことで扱っているので、あわせてご覧ください。文字色と背景色のコントラストという、別の観点の配慮はノーコードサイトの文字色と背景色、最低限気をつけたいコントラストで扱っています。