こんにちは。アイレットデザイン事業部の田邊です。
アイレットデザイン事業部ではINSIDE UI/UXと題して、所属メンバーがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。

今回はウェブアクセシビリティのガイドラインの推し項目について記事にしたいと思います。

✅記事を書いた経緯について

業務でウェブアクセシビリティについて調べる中、自分が日々感じていたことが実際に事例として挙がっており、興味を持ちました。調べるうちに普段何気なく触れる仕様にも意味があることがわかり、見え方が変わって面白いと感じたことがきっかけです。
今回の記事で共感してもらえたり、ウェブアクセシビリティへの興味関心につながればと思います。

✅推し項目

①動画を自動再生する場合、音声は自動・強制再生することは避ける

私自身、自動再生はとてもストレスに感じていました。例えば電車でスマホを見ているときに、埋め込まれたYOUTUBEが流れてしまい、恥ずかしい思いした経験が何回もあります。
現在はモバイルブラウザ側で、ミュート再生をデフォルトにするような制限があるため、このような現象は発生しなくなりました。

上記はユーザービリティの観点での話ですが、アクセシビリティの観点ではどのような課題があるのでしょうか？
調べると以下のようなことが挙げられます。

視覚障害を持つ方が、サイト内の文字を読み上げるツールを使っている場合、音声が邪魔になって聞き取れないことなどがあるためです。音声や動画を自動再生するなら、3秒以内に収めるか、利用者が止められるようにする必要があります。

参考：サイト作りに欠かせない「ウェブアクセシビリティ」の実例を紹介！ | simpleshow

スクリーンリーダー（サイト内の文字を読み上げるツール）を使用する方にとっては、停止ボタンがない状態だとサイトの利用が妨げられるという点で、かなり重大なポイントであることがわかります。
このような背景があり、ウェブアクセシビリティで制定されていることが伺えます。

②袋小路に陥らせない

ポップアップがいきなり出てきて、閉じたいのに閉じるボタンがない、といった事例が当てはまります。
つい最近、楽天のキャンペーンページで遭遇しました。その時唯一あるボタンは「キャンペーン詳細へ」というボタンでしたが、他に閉じ方がわからないため仕方なく詳細ページへ飛び、元のページに戻るという操作をしました。
たまにモーダルの背景をクリックすれば消えるパターンもありますが、なかなか分かりづらいですよね。

こちらも視覚障がいなどで、スクリーンリーダーやキーボードで操作される方の場合、キーボード操作だけでは一度フォーカスするとポップアップから抜け出せない、という状況も発生しうるそうです。
ウェブアクセシビリティガイドラインでも、特にキーボード操作を考慮して制定されています。

現在も広告が多いページやアプリはまだ見かけるため、これからの改善に期待を込め、押し項目に選定しました。

以下、少し余談になります。
一応×ボタンが設置されていても、以下のようにあまり意味をなさないケースもあります。

  • 非常に小さかったり、背景色と同化するような色のため、見つけられない
  • 押しにくいような場所に置かれている（広告と広告の間に設置されていて、大抵広告を押してしまう）

プライベートではPCではなくもっぱらスマホなので、目立たないボタンは小さい画面だと尚更見つけづらいし、指では正確な場所をタップしづらいです。
これらはユーザビリティの観点になるかと思いますが、特に頻繁に広告が表示されると煩わしく、離脱につながることもあります。サイト運営としては避けたいことでもあるはずのため、個人的には強く改善を望む点です。

✅まとめ

近年WEB業界全体で、アクセシビリティに対応しようという傾向が強く、業務でもアクセシビリティに関するものが非常に多いです。
なぜこのルールがあるのか？や、普段自分が操作するなかでどこに作用しているか見つけると、理解も深まるのではないでしょうか。

✅お知らせ

アイレットではアクセシビリティ対応についてのご相談を特設ページにて受付中です。
いきなり案件としてやるだけではなく、相談だけでもという方でも大歓迎なので、ぜひご覧ください。

アクセシビリティ対応のWebサイト制作
https://cloudpack.jp/lp/a11y/