第9回 どんなウェブサイトでもウェブアクセシビリティ対応できる？

どんなウェブサイトでもウェブアクセシビリティに対応できるのかな？すごく複雑なデザインのサイトだと無理な気もするけど…。

基本的にはどんなウェブサイトでも対応できるよ。ウェブアクセシビリティガイドラインはHTML/CSS の正しいルールが土台になっているからね。

HTML/CSS の正しいルールって、どういうこと？

見出しには<h1>や<h2>を使う、ボタンには<button>を使う、といった基本的なルールを守ることだね。これをきちんと守れば、音声読み上げなども正確に伝えることができるんだ。

でもウェブサイトには色々な見た目のパーツがあるよね？全部 HTML/CSS で書いているの？アニメーションとかも結構見るけど、あれも制御できるものなの？

そうだね、あくまで基本はHTMl/CSS なんだけど、今のウェブサイトはアニメーションやクリックしたときの動作に JavaScript を使うケースもあるんだ。

それもルールがあるから、それに従えばウェブアクセシビリティに対応できるのかな？

JavbaScript にもルールは当然あるけど、ちょっと複雑なのはJavaSciprt でやっていることは HTML で操作されるんだ。極端ないい方をすると、見出しの <h1> にボタンとしての機能を足すこともできたりするよ。

他のルールを追加しちゃうんだね。

そのイメージは近いね。でも、追加したルールはプログラマー次第だから音声読み上げツールは理解できないんだ。

それは困るね。じゃあ、あまり JavaScript を使うことはやめた方がいいのかな？

そんなことはないよ、しっかりと対策されているんだ。HTML/CSS を通常のルールと違った使い方をするときは「WAI-ARIA」という技術を使うんだ。WAI-ARIAは、ウェブコンテンツにアクセシビリティ情報を追加する仕組みで、例えば「この部品はナビゲーションですよ」とか「このボタンを押すと折り畳まれた内容が展開されますよ」といったルールを追加できるんだ。

じゃあ、WAI-ARIAをとにかく使えば対応は簡単そうだね！

WAI-ARIAは便利だし自由に使えるけど、あくまで基本はHTML/CSS のルールを正しく使うのが大前提なんだ。WAI-ARIAは「足りないルールを補う」ためのものだから、使いすぎると不具合を招くこともあるよ。

そうなの？なんか便利そうだけど。

ウェブアクセシビリティガイドラインが更新されるように、HTML/CSS のルールも追加や更新がされているんだ。そして、普段使っているChrome などのウェブサイトを見るための道具、ブラウザはHTML/CSS の最新ルールに従って、ウェブサイトを表示しているよ。

それはWAI-ARIA に何か関係があるの？

音声読み上げなどのツールは、ブラウザの情報を使っているんだ。WAI-ARIA を使いすぎていると、音声読み上げツールが情報を正しく理解できなくて、不具合を起こすことがあるんだ。

なるほど。自分のルールをあまり使うと、標準ルールから離れてしまうのか。あくまで標準的なルールでつくることが大切なんだね。他にアクセシビリティ対応のために気を付けるルールはあるの？

今だとスマートフォンに対応するための「レスポンシブデザイン」も重要だよ。最新のウェブアクセシビリティガイドラインである WCAG2.2 でもスマートフォンを意識した達成基準が追加されているんだ。

今はパソコンは持たずに、スマートフォンだけを持っている人もいるからね。

スマートフォンでもウェブサイトがちゃんと表示されるようにすることは、ウェブアクセシビリティだけではなく、ユーザーの使いやすさも向上するんだ。

確かに、スマホで見やすいサイトって使いやすいもんね。それもウェブアクセシビリティの一部なんだ。

その通り！使いやすさはユーザビリティというけど、ウェブアクセシビリティとは深い関係にあるんだ。ウェブアクセシビリティという「誰もが使える」土台があることで、「誰もが使いやすい」ユーザビリティが実現するんだ。

まずはHTML/CSSの基本ルールをちゃんと勉強して、スマートフォンでのウェブアクセシビリティも意識しようと思うよ。