Bootstrapのアクセシビリティ完全ガイド！初心者でもわかるvisually-hiddenの使い方
生徒
「Bootstrapでスクリーンリーダー向けのテキストって書けるんですか？画面には見えないけど音声読み上げでは伝えたい場合があるって聞いたんですが…」
先生
「そんなときに使えるのがvisually-hiddenというクラスです。視覚的には非表示なのに、スクリーンリーダーでは読み上げてもらえる便利な仕組みなんだよ。」
生徒
「普通のdisplay:noneとは何が違うんですか？初心者でも使えますか？」
先生
「もちろん初心者でも使えるよ。実際の例を見ながらわかりやすく説明していこう。」
1. visually-hiddenクラスとは？初心者にもわかる基礎
visually-hiddenとは、Bootstrapのアクセシビリティ機能のひとつで、見た目では非表示だけれどスクリーンリーダーには読み上げてもらえるテキストを作るためのクラスです。視覚的に余計な情報を減らしつつ、音声読み上げユーザーには必要な説明を伝えられるため、アクセシビリティの向上に役立ちます。
通常のCSSでdisplay:noneやvisibility:hiddenを使うと、スクリーンリーダーでも読み上げされなくなってしまいます。これでは目が見えない人にとって必要な案内が届きません。そこでBootstrapはWCAGの基準に基づき、読み上げ専用テキストを作るためのvisually-hiddenクラスを提供しています。
2. visually-hiddenの使いどころとは？初心者向けに具体例で解説
スクリーンリーダーを使う人は、画面にどんな情報があるのか音声で理解します。そのため、画像の説明、ボタンの補足説明、フォームの説明などが正しく読み上げられることが重要です。
例えばアイコンだけで表現されたボタンがあったとします。視覚的にはアイコンだけで意味が分かっても、音声読み上げのユーザーには意味が伝わりません。そんなときにvisually-hiddenの出番です。音声用の説明文を追加しておくことで、全てのユーザーが理解しやすいサイトになります。
<button class="btn btn-primary">
<i class="bi bi-download"></i>
<span class="visually-hidden">ファイルをダウンロード</span>
</button>
この例では、見た目にはダウンロードアイコンだけが表示されますが、スクリーンリーダーでは「ファイルをダウンロード」と読み上げられます。これにより、目が見えにくい方でも操作内容を正確に理解できます。
3. visually-hiddenがアクセシビリティを高める理由
アクセシビリティの考え方では、誰でも情報にアクセスできることが大切です。言葉の説明がないと、音声読み上げユーザーは何を押したらよいのかわからず、操作が困難になってしまいます。
視覚的に同じ情報を何度も見せると煩雑になりますが、読み上げ専用テキストで補足すれば、視覚的デザインを崩さずに情報を提供できます。Bootstrapのvisually-hiddenはこの役割を非常にうまく果たします。
4. visually-hiddenを使ったフォームの説明文の付け方
フォームは入力内容の説明が不足してると誤入力につながります。しかし画面の見た目をスッキリさせたい場合もあります。そのときに視覚では表示せずスクリーンリーダーだけに説明する方法としてvisually-hiddenが使えます。
<label for="email" class="visually-hidden">メールアドレスを入力してください</label>
<input id="email" class="form-control" type="email" placeholder="メールアドレス">
画面上は入力欄だけが見えますが、スクリーンリーダーはラベルの説明を読み上げます。そのため、見た目はシンプルなのにアクセシビリティはしっかり確保されます。
5. visually-hiddenを使うときの注意点と初心者が知っておくべきポイント
visually-hiddenは便利ですが、使い方を間違えると逆に情報が伝わらなくなる可能性があります。読み上げが必要な部分だけを隠し、視覚的にも必要な情報はきちんと表示することが重要です。
例えば、ボタンの中に隠しテキストを入れすぎると読み上げ時間が長くなってしまい、ユーザーが混乱することがあります。音声案内は簡潔にすることが基本です。
初心者の方は「画面に表示しない説明はすべてvisually-hiddenに入れよう」と考えがちですが、必要な説明はなるべく通常表示し、どうしても見た目に不要な場合だけ隠すという使い方が自然です。
