Googleはユーザーの体験を重視しているので、SEOを行っていく中で「コンテンツ」だけではなく、サイト全体とページ単位の使いやすさなど、ユーザー体験を意識しなければなりません。また、SEOと関係なく、ユーザーを離脱させないために、コンバージョンしてもらうために、満足してもらうためにもユーザー体験が非常に重要です。
アクセシビリティについて
ユーザー体験の話の中で忘れられがちなのは「アクセシビリティ」という一部のユーザーの体験に大きく影響する概念です。Webアクセシビリティとは簡単に言うと障害のあるユーザーを含むすべてのユーザーがウェブを使えるようにすることです。現在、アクセシビリティ自体はSEOのランキングシグナルではないようですが、ユーザー体験として重要な概念です。
日本では現在日本工業標準調査会（JISC）が制定した「JIS X 8341-3」というウェブコンテンツのアクセシビリティ規格があり、様々な項目が含まれていますが、ウェブアクセシビリティ基盤委員会のサイトで早見表を確認するとイメージがつきやすいです。
アクセシビリティの話でよく例として挙げられるのは視覚障害があり、スクリーンリーダーを使ってwebサイトを閲覧するユーザーに対する対応です。先日、受賞歴のある障害者ブロガーのHolly Tuke氏が公開した「5 most annoying website features I face as a blind person every single day」という記事を読むとスクリーンリーダーを使っているユーザーに対して最も大きなハードルがどこにあるか、そのユーザー体験を改善するためにウェブマスターが今すぐにできることは何かがわかります。
スクリーンリーダー利用者の体験について理解が深まる貴重な記事なので、日本でも展開したく、今回Hollyさんに許可を取ってアユダンテで和訳記事を公開することにしました。以下和訳していきます。
視覚障害者として毎日イライラするwebサイト機能Top５
目の見えないスクリーンリーダー利用者として毎日イライラするアクセシビリティ対応ができていないwebサイトの要素と、その対策を紹介します。私のような全盲の人、または弱視の人がサイトを使えるか、離脱するかはアクセシビリティで決まります。
スクリーンリーダーの仕組み
スクリーンリーダーは全盲と弱視の人がPC、携帯やタブレットを一人で利用できるためのツールです。ほとんどのスクリーンリーダーはソフトウェアとテキストを音声に変換する読み上げ機能（TTS）を使っています。スクリーンリーダーは画面に表示されるテキストを、視覚障害者が使えるフォーマットに変換します。
スクリーンリーダーは画面に表示されるすべてのテキストを読み上げて、ページの操作をタッチとショートカットキーでできるようにします。また、点字ディスプレイなどの別デバイスとも連携できます。
スクリーンリーダーのユーザーとして、毎日のように体験するよくある課題を紹介します。
1. リンクとボタンのラベルがない
スクリーンリーダーの利用者がwebサイトの中で探している情報を見つけるためにはボタンとリンクに頼ります。リンクとボタンのラベルが適切でない場合、またはラベルがない場合、探している情報を見つけるのは困難です。リンクのラベルがないと、webサイトを迅速に、円滑に、一人で閲覧するのがとても難しいのです。
例えば、会社概要のページへのリンクのアンカーテキストが「こちら」だけですと、どこへリンクしているのか情報がないですが、「会社について知る」のようなアンカーテキストがあるとわかりやすいです。
リンクとボタンのラベルが適切であれば、スクリーンリーダーがそれらを読み上げられます。視覚障害者がリンク先のページが何なのかわからずにクリックするようなことはなくせます。
ラベルがないリンクとボタンだけではなく、ラベルがはっきりしない場合も歯がゆい思いをします。「こちら」ではなく、クリックするとどこに遷移するかわかるような説明がないといけません。ユーザーにリンク先が何なのかわからず試行錯誤しないといけないような状況にさせないでください。退屈なユーザー体験になります。
2. 画像の説明がない
ウェブを閲覧する中でおそらく一番よく出会う課題です。画像の説明はアクセシビリティに必要不可欠です。画像の説明はaltテキスト（代替テキスト）として知られていて、画像の内容を説明する文章です。
スクリーンリーダーが代替テキストを読み上げます。それによって全盲または弱視のユーザーが画像の中身を理解できるようになります。altテキストのない画像についてはスクリーンリーダーが「画像」としか言わないので、文脈や意味がわかりません。
画像に重要な情報が含まれることも多いです。そのため、視覚障害者にもその情報がわかるようになっていることが大事です。altテキストがわかりやすく、画像を適切に表す内容になっているべきです。
3. 見出しが適切でない
ページ内を素早く円滑に閲覧できるために、スクリーンリーダー利用者の多くは見出しのような要素を活用しています。見出しを使えば探している情報を素早く効率的に見つけることができます。特にh1、h2、h3などの論理的な見出し構造であれば、コンテンツの優先順位付けにも役に立ちます。
論理的な見出し構造は、見出し１の下に見出し２が来て、その下に見出し３が来る、などです。見出しを使っていなければ、スクリーンリーダーのユーザーがキーワードのショートカットキーを使ってページ内を移動することができません。その場合、長いページをTabキーや方向キーを使って情報を探すことが必要になります。
また、目で見たときでも見出しはコンテンツを分離して読みやすくします。スクリーンリーダーの利用者はページ内閲覧するために他にはリンク、リストとランドマークを活用します。
4. アクセシビリティを対応していないフォーム
多くのwebサイトにフォームがあります。例えば、商品を検索するときやお問い合わせをするときにフォームを使います。これらにラベルがない、またはラベルが適切でないと、私たちがフォームを使えません。例えば、検索窓にラベルがなければ、スクリーンリーダーを使っているユーザーはその窓の目的がわかりません。つまり、他のユーザーが使っている機能を使えません。
お問い合わせフォームは顧客がブランドや企業と連絡を取るための有益な手段です。スクリーンリーダーのユーザーとして、これらのフォームのラベルが適切でないときほど歯がゆいときはないです。
特に、CAPTCHAが求められるときです。音声を聞くオプションが付いていないと、アクセシブルではありません。つまり、一人でフォームを入力できないということです。私はよくフォーム入力のとき目の見える人に助けてもらうようにしていますが、ユーザーの皆がそうできるわけではありません。
5. 自動再生の音声や動画
ほとんどの人が、ページを開いたらいきなりうるさい広告が流れるとどれだけイライラするかわかりますよね。スクリーンリーダーのユーザーにとってはさらに不快です。動画や音声が自動的に再生されると、スクリーンリーダーの声が聞こえなくなるときがあります。そのため、停止ボタンを見つけるのが難しくなります。
（さらに、そのボタンにラベルがないと、動画をすぐに止めるのは事実上不可能でますます苛立たしいです）私は音声や動画を止められないときは、基本的にページを離脱します。
解決策は、webサイトがロードしたときに自動再生の動画や音声がないようにすることです。どうしても動画を流したい場合、音声がミュートになっていて、ユーザーが動画を停止したり、メディアプレイヤーを隠したりできるようにすると良いです。
上記の課題は目の見えるユーザーに対しては小さく見えるかもしれません。ただし、私が一人でwebサイトを使えるか使えないかはここに出てきた内容で決まります。正しく実装されていれば、よい体験として大きく影響します。
まとめ
以上、Hollyさんの記事でした。開発担当者も、SEO担当者も見出しタグやaltテキストのベストプラクティスを把握している方は多いと思いますが、「今はもうSEO的にそんなに気にしなくて良い」と思うのか、正しく実装されていないwebサイトが実際には多いと思います。また、アンカーテキストの付け方やフォームのラベル付けの際に、スクリーンリーダーを意識するサイトは非常に少ないでしょう。（この記事内のリンクのアンカーテキスト付けも迷いました…）
アクセシビリティ規格を徹底的に守らなくても、少なくとも今回の5つの課題は比較的簡単に解決できると思います。alt属性の正しい設定、見出し構造の論理的な設計やリンク先の中身がわかるアンカーテキスト設定はSEO上にメリットがある対策でもあります。ただ、アンカーテキストすべてに繰り返しキーワードや冗長な文言を入れるのは今のSEO的にあまりよくないため、重要なナビゲーションとなるリンク、迷いそうなリンクにはしっかり文言を入れておくといいでしょう。新しいコンテンツを作るときやwebサイトをブラッシュアップするときに是非意識して、すべてのユーザー体験を良くしていきましょう。
余談：スクリーンリーダーで自分のサイトを体験してみたい場合は、海外で人気のスクリーンリーダーNVDAが無料で使えて、日本語にも対応していますのでおすすめです。ぜひチェックしてみてください。
![[GA4]リアルタイムページレポート](https://ayudante.jp/wp-content/uploads/2024/05/GA4.png)
