jackアドベントカレンダー2024の18日目を担当するゆってぃーです。
私はアクセシビリティが好きです。突然の告白をするくらいに好きです。
私が所属しているアプリ開発団体jackでも、アクセシビリティに興味を持ってくれているメンバーが増えてニヤニヤしています。ただ、興味を持ってくれた人たちが「最初に何をすれば良いのか分からない」という状況に直面することが多いようです。
そこで本記事では、今すぐに始められるウェブアクセシビリティの取り組みについて紹介します。
ウェブアクセシビリティとは
アクセシビリティは、サービスや情報をすべての人が円滑に利用できるかの度合いです。
アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、低いほど使いづらくなります。
ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティであり、Webページにある情報や機能の利用しやすさを意味します。
ウェブアクセシビリティは身近なもの
アクセシビリティと聞くと、障害を持つ方向けの特別な対応を思い浮かべる方も多いかもしれません。しかし、すべてのユーザーにとって、ウェブアクセシビリティの恩恵を受ける機会は多くあります。例えば次のようなケースが考えられます。
- メガネを忘れたが、文字サイズの拡大により見やすくwebサイトを閲覧ができた。
- イヤホンを忘れたが、字幕を有効にすることで動画の閲覧ができた。
- マウスを忘れたが、キーボード操作を使ってコンテンツを閲覧、操作できた。
物忘れが激しいというツッコミはさておき、これらは日常生活でしばしば起こりうるケースです。私もよくやります。このような物を忘れるなどの特定の利用環境以外でも、我々はウェブアクセシビリティの恩恵を受けています。
- メールアドレスの入力欄が自動補完されるのは、認知障害を持つ人々の入力を容易にするだけでなく、その他の人々の入力の手間も省いている。
- キーボードによる操作が可能なのは、画面を見れないユーザーが読み上げ機能を使いながら操作できるだけでなく、ユーザーがキーボードとマウスを持ち替えることなく効率的に操作することを可能にしている。
このように、ウェブアクセシビリティを向上させることは多くの人にとっての使いやすさを向上させることでもあります。障害の有無やその程度、利用環境に関わらず、ウェブで提供されている情報やサービスを利用できることがウェブアクセシビリティです。
今から意識できるウェブアクセシビリティ
ウェブアクセシビリティは私たちの日常に身近なものであり、すでに多くの場面で恩恵を受けていることをお伝えしました。さて、私たちが日常で情報を発信する際、その情報は誰でも利用できるものになっているでしょうか。例えば、SNSへの投稿、メッセージの送信、ブログ記事の投稿などです。
多くの人にとって優しい発信ができるよう、日常で今すぐ意識できることをいくつか紹介します。ウェブアクセシビリティを小さく始めましょう！
リンクで“詳しくはこちら”を使用しない
“詳しくはこちら”というリンクを見ると、私は心の中で「どちらだよ！」と突っ込んでいます。たまに声に出してます。
サイトを流し読みするユーザーはリンクごとに視線を移動させ、遷移できるリンク先を確認しますが、「こちら」というリンクだけではリンク先を判断できず、リンク周辺のテキストを合わせて読む必要があります。
また、視覚障害を持つユーザー向けの支援技術である「リンクジャンプ」機能があります。これはサイト内のリンクを読み上げてくれる機能ですが、”詳しくはこちら”と読み上げられてもユーザーはリンク先を判断できず、リンク先を確認するために周辺のテキストを毎回読まなければならなくなります。
リンクには、リンクの目的やリンク先の情報を説明する内容をリンクテキストとして設定しましょう。詳しくはWCAG2.1 達成基準2.4.4: リンクの目的をご覧ください。
見出しはページの概要を表すように設定する
見出しは、ページの概要を理解するための重要なテキストです。ユーザーがサイトから欲しい情報を素早く見つけるのにも役立ちます。視覚障害を持つユーザー向けの支援技術として、サイト内の見出し一覧から該当箇所にジャンプできる「見出しジャンプ」機能もあります。
見出しのテキストが不適切でページの概要を表していないと、ユーザーはページの概要を理解できないため、内容一つ一つに目を通さなくてはなりません。例えば、「その１」「その２」と続くような見出しではページの概要は理解できません。
また、ブログ記事などでよく見られる問題として、大きな文字を表示するために見出しが使われていることがあります。この場合、大きな文字が見出しとして認識されてしまい、支援技術を利用するユーザーには情報が正しく伝わらない可能性があります。
見出しはあくまで見出しとして使用し、ページの概要を正確に表すテキストを設定しましょう。
画像のaltを設定する
X(旧Twitter)やInstagramではalt(代替テキスト)を設定する機能があります。
altを設定することには、以下のメリットがあります。
- 視覚障害を持つユーザーは、スクリーンリーダーを使った読み上げにより、画像の情報を理解することができる。
- 画像を読み込めない場合に、表示された代替テキストによって内容を理解することができる。
altの具体例を見てみましょう。私の実家で飼っているオカメインコのチョッパーくんの写真にaltをつけてみました。
「鳥の写真：黒い羽のオカメインコが木のテーブルの上に乗ってこちらを見上げている。」とaltを設定しました。画像をテキストで置き換えた際に、情報の過不足がないように記述しましょう。また、最初に概要を述べるようにすると、スクリーンリーダー利用者がすぐに画像の情報を把握できるため、意識して記述しましょう。
ChatGPTに下書きを書いてもらうと楽にaltを考えることができるため、ChatGPTを活用するのもおすすめです。
次によく見られる悪いaltの例を挙げます。
- 情報が少なすぎる
- 例：”鳥の写真。”
- 事実以外を述べている
- 例：”超キュートなオカメインコがこちらを見上げていて最上級に可愛い。”
- 情報を隠すのにaltを使用している
- 例：”この子がなぜチョッパーという名前になったのか未だ不明です。”
画像を含む情報を発信する際には、適切なaltを設定するように意識しましょう。
まとめ
この記事では、ウェブアクセシビリティが身近であることを示しました。これにより、ウェブアクセシビリティが特別な取り組みではなく、日常的に意識できることだと感じていただけたら嬉しいです。
この記事を読んだデザインや開発を行う人が、ウェブアクセシビリティを身近な取り組みとして捉え、実践に取り入れてくれることを願っています。
本記事で紹介した取り組みはほんの一部に過ぎません。もっと多くの意識すべき点や実践すべき取り組みがあります。ウェブアクセシビリティに興味を持ったという方には、デジタル庁 ウェブアクセシビリティ導入ガイドブックをご覧いただきたいです。簡潔でわかりやすく、ウェブアクセシビリティについて理解を深めるのに役立ちます。
誰にとっても使いやすいものを共に作っていきましょう！
