セマンティックHTMLの重要性
はい。今回はですね、スクリーンリーダー、画面を音声で読み上げるソフト、これを使っている方の視点から、ウェブサイトのアクセシビリティについて、ちょっと深く見ていきたいと思います。
はい。 情報源は中川てるひろさんの記事ですね。ご自身も視覚障害当事者で、スクリーンリーダーを日常的に使われていると。
そうです。なので、かなり具体的な体験に基づいたお話が聞けますね。
この探求の目的というか、ウェブを作る上で見落としがちだけど、スクリーンリーダーを使っている方には、これすごく大事なんだよっていう点を明らかにしていきたいなと。
いいですね。ちなみに、スクリーンリーダーって基本はキーボード操作なんですよね。フォーカスを動かして、そこを読ませて情報を得るみたいな。
そうですね。下矢印キーで順番にとか、あとは見出しにジャンプするHキーとか、そういうので移動しながら内容を把握するという感じです。
なるほど。では早速、一つ目のポイント。基本のHTML文法を崩さない。これどうしてそんなに大事なんでしょうか。ウェブサイトってやっぱり見た目の方に意識が行きがちですけど。
ええ、そうなんですけど、スクリーンリーダーにとっては、その裏側にあるHTMLの構造、これが命綱というか頼りになるんですね。
構造ですか?
はい。例えば、H1とかH2とか、見出しがちゃんと階層構造を守って使われていると、利用者はHキーで見出しだけを拾い読みできるんです。
ああ、それで全体像を掴むわけですね。
そうなんです。ページ全体の概要がさっとわかる。でもこれが見た目だけ整えてあって、例えば単なる太字のテキスト、PタグとかDivタグだったりすると、この便利な移動機能がもう全く使えなくなっちゃうんですよ。
なるほど。見た目が同じでも、使っているタグが違うと、全然使い勝手が違うと。
まさに。過剰書きじゃないのに、ちょっと字下げしたいから、リストタグULとか使うデザイナーさんたまにいますけど、ああいうのもやっぱりまずいですか?
それは混乱の元ですね。スクリーンリーダーは、律儀にリスト、項目数、幾中、みたいに読み上げるのに、実際はリストじゃない。
それは困りますね。
ええ。なので、タグをちゃんと本来の意味通りに使う、いわゆるセマンティックなHTMLってやつですね。
セマンティックHTML。
はい。見た目だけじゃなくて、これは見出しだよ、これはリストだよっていう意味を、ちゃんとコードで示すことが重要なんです。意味とタグがずれてると、利用者はコンテンツを正確に理解するのが難しくなりますから。
視覚に依存しないデザイン
うーん、意味をちゃんと使えるコードですか。なるほど、深いですね。じゃあ、2つ目のポイント。ちょっとカッコよく見せようとしない。これは最近よく見る、あの、動きのある表現とかは気をつけましょうっていうことでしょうかね。
まさにその通りです。例えば、マウスカーセルをこうふわっと載せると初めて出てくるメニューとか。
ああ、ありますね。
キーボード操作が基本のスクリーンリーダー利用者にとっては、もうそれは存在しないのと同じなんですよ。
なるほど、操作できないから。
ええ。あと、ページを開いた瞬間にいきなり動画とか音楽がわーっと自動再生されるやつ。
ああ、びっくりしますよね、あれ。
スクリーンリーダーの読み上げ音声と重なって、もうどっちも聞き取れないみたいな。非常に困るんです。それから自動で切り替わるスライドショー。
カルーセルとかですね。
ええ。あれも切り替わるたびに読み上げが中断されたり、変なところにフォーカスが飛んだりして、結構ストレスになるという話ですね。
良かれと思って入れた機能が、逆に使いにくさの原因になっちゃうと。
特に深刻なのが、キーボード操作で閉じられないポップアップ広告。
ああ。
これが出ると、もう完全に操作不能になっちゃうこともあるんです。
記事を書かれた中川さんも、実際にポップアップを閉じるためだけに、ビデオ通話で見える人の助けを借りたっていう経験があるそうで。
うわあ、それは想像以上に大変ですね。便利なはずの機能が、ある人にとってはすごく高い壁になってしまうと。
そういう可能性があるわけですね。
情報の配置と強調
で、3つ目のポイントが、目が見える前提で作らない。
はい。これは、情報を伝えるときに、視覚だけに頼っちゃダメですよということです。
と言いますと?
例えば、大事なところを強調したくて、文字の色を変えたり、太字にしたりしますよね。
ええ、よくやります。
でもそれだけだと、スクリーンリーダーの設定によっては、その装飾の情報って読み飛ばされちゃうことがあるんです。
そうすると、強調している意図が全く伝わらない。
ああ、なるほど。
なので、装飾に頼るんじゃなくて、文章そのものの内容とか文脈、あるいは構造自体で、ちゃんと重要性がわかるように工夫する必要があるんですね。
見た目の工夫だけじゃ足りない。
そういうことです。
あともう一つ大事なのが、見た目の表示されている順番と、スクリーンリーダーが読み上げる順番、まあソースコードの順番、これがちゃんと一致しているかってことですね。
ああ、ドムの順序とかですね。
普通ならヘッダーがあって、メインコンテンツがあって、フッターって読んでほしいじゃないですか。
でもなんかコードの書き方によっては、ヘッダー、フッター、メインコンテンツみたいに読まれちゃうことがある。
そうすると、話の流れがつかめなくて混乱しますよね。
確かに。
画像なんかも、例えば見出しを補足するような画像が見出しよりも前、つまり上にあると、見出しジャンプ機能で飛んできた利用者はその画像の存在に気づけない、みたいなことも起こり得ます。
なるほど。
なので、関連する情報はちゃんと意味的に自然な順序で配置するのが大事ですね。
画像といえば、代替テキスト、アルト属性の重要性もやっぱり指摘されてましたね。
はい、これはもう非常に重要です。
画像の内容を説明するテキスト情報ですね。
視覚的に画像が見えない利用者にとっては、その画像が何を伝えようとしているのかを知る、唯一の手がかりになりますから。
ええ。
最近は設定されているサイトも増えてきたかな、と被写の方は感じているようですが、それでもまだ不十分な場合も多いと。
そうなんですね。
で、たとえ何か完璧な説明じゃなくても、ここに何か画像があるんだなってわかるだけでも全然違うと。
代替テキストが付いている、それ自体がありがたい、とも書かれていましたね。
いや、今回こうやって掘り下げてみると、スクリーンリーダー対応って何か特別な技術とか、すごくお金のかかるツールを導入するとか、そういうことよりも、
まず、利用者の状況を想像する力と、基本的なルールを守る意識、これが何より大事なんだなって感じましたね。
ええ、まさにその視点が大事だと思います。
最初から、いろんなユーザーがいるんだっていう前提で設計して、視覚情報だけに頼らない伝え方を考える。
何か特別なことっていうよりは、ウェブサイトを作る上での基本として捉えるべきなのかもしれないですね。
そうですね。では最後に、これを聞いているあなたに一つ問いかけてみたいと思います。
もし、あなたが普段当たり前に使っている視覚ではなくて、ウェブページの構造と、そして読み上げられる音。
これだけで情報を得なければならないとしたら、あなたの知っている世界はどう見えるでしょうか。
あなたが日常的にアクセスしているそのデジタル空間に、もしかしたら自分では意識していないだけで、誰かにとっては見えない壁が隠れているとしたら。
少しそんなことを想像してみるきっかけになれば嬉しいです。
