初めまして、今年からフロントエンドエンジニアとしてトラストバンクに参画させていただきました、岩上です。
この度トラストバンク Advent Calendar 2023の9日目の記事を書かせていただきます。こういった記事を書くのは初めてなので、お手柔らかにお願いいたします。
今年、社内向けにWebアクセシビリティガイドラインのブラッシュアップを行うにあたり、色々と調べたことや思ったことを掘り下げ、まとめさせていただきます。
Webアクセシビリティとは？
Webアクセシビリティとは「制約のある人や状況下でもWebコンテンツを利用できるようにするための指標」を指します。
ウェブアクセシビリティ基盤委員会（WAIC）が指標を作成しており、ドキュメント（翻訳）にまとめられています。
Webアクセシビリティの代表的な例としては、「視覚障がい者などがボイスリーダーを使う際に内容が読み上げられるよう、img要素にaltを設定する」や、「色盲や色弱の方々でも内容を把握（区別）できるよう、色だけでコンテンツの内容を伝えない/適切なコントラストを設ける」などが挙げられます。
状況や身体的差異に関わらず、誰でもどこでも同様の情報にアクセスできることがWebページには求められています。
誰でもどこでも、とは？
では、「誰でもどこでも」というのは、具体的にはどういったことを指すのでしょうか。
前章で挙げた例というのはあくまで一例です。あくまで私の想像ですが、みなさんも「Webアクセシビリティ」と言われると、目や耳などが不自由な方々への取り組みといったものをまず連想されるのではないでしょうか。
ですが、Webアクセシビリティというのはそのような方々のためだけの配慮ではなく、あらゆる人々へ向けた指標になります。
例えば日常の中で、こういった場面はありませんか？
- インターネット回線の調子が悪く、ページへのアクセスに時間がかかっている
- PCのマウスが壊れてしまい/充電が切れてしまい、キーボードである程度操作したい
- フォームの申し込みをしようとしたがエラーが起きている。だけどパッと見どこの項目でエラーが起きているのかわからない
- ある端末でページにアクセスしたら、文字化けしている箇所があり読むことができない
- サイト内で色々ページを回遊していたところ、どこのページにいるのか分からなくなってしまった。しかし現在地を示す表示も、TOPページに戻るリンクも見つからない。
- ページにアクセスしたところ、ビビッドな色彩や激しい画面の点滅に気分が悪くなってしまった（後者はポケモンショックと同じような例ですね）
- あるサイトをスマートフォンで開いたところモバイル対応しておらずPC用のサイズで表示され、非常に使いにくかった。
私たちはいつ何時でもいつもと変わらない状況でWebページにアクセスするとは限りません。こういった、さまざまな状況でも求めている情報にアクセスできることを目指し対応させるのが、Webアクセシビリティに対応するということになります。
そして、何も特殊な状況に対応することのみがWebアクセシビリティへの対応という訳ではありません。Webアクセシビリティがカバーする範囲は広く、「ページの見やすさ」、つまりコンテンツの読みやすさや伝わりやすさなども含まれます。
「誰でもどこでも」というのは文字通り本当に「誰でもどこでも」という意味なのです。
いつアザラシがネットを使い始めるか分からない時代です
何故Webアクセシビリティを向上させるのか
上記を踏まえてみると、普段、特段不自由を感じずにWebページを閲覧している方にもWebアクセシビリティを身近に感じることができたでしょうか。
Webアクセシビリティの向上はページの閲覧や利用において、広い範囲の人々にとって有意義なことであるということは伝わったかと思います。
また、このことは以下に列挙するように、他にもいくつかメリットがあります。
💡SEOの向上
今の所、Webアクセシビリティ対応の全てが直接的にSEOの向上に繋がるという根拠は示されていません。しかし、アクセシビリティに配慮してコンテンツの構成、マークアップを行った結果、適切なマークアップのページが作成されるため、Googleなどの検索エンジンからはより高く評価してもらえることになります。
検索エンジンのクローラーは、視覚や聴覚や深い思考や洞察を使ってWebページを理解し評価しているのではなく、ページの文字情報などを機械的に読み取ります。その際にはやはり、さまざまな状況下でも適切な情報が伝わるように構成されたマークアップ、そしてマシンリーダブルなWebページというのはクローラーに対しても有効になって来ます。
結果的に、Webアクセシビリティへの配慮がSEOへの配慮に間接的に繋がると言っても良いかと思います。
💡多くの人に利用してもらえる
言うまでもありませんが、多くの人々や状況に配慮した結果、より多くの人に快適に利用してもらえるページになる訳なので、より多くのユーザーへの門戸を開放するということになります。「使いやすい」以前に「使えない」ページであればユーザーは離れていってしまいますが、その入り口をまず開くことが重要です。
💡イメージの向上、ユーザーの満足度の向上
上記の派生結果となるわけですが、「配慮のあるサイトorページである」というイメージが根付いていけば、ユーザーの中でのイメージも向上し、同様のジャンルのサイトの中でも「あのサイトを選ぼう」と言う意識が芽生えるかもしれません。例えばオンラインショッピングをする際に、
- ECサイトA：品数は同業他社に比べて格段に多いが、文字は非常に小さく（変更もできない）画像も多いためページの読み込みが非常に遅い。多くの情報量がさまざまなページに分散しており、パンくずもないため自分が今どこにいるかパッと見ではよく分からない。altのない画像が多く、ボイスリーダーには適していない。
- ECサイトB：品数においてはAに劣るが、文字サイズも見やすく画像の読み込みも早い。コンテンツの多いページではページトップへのボタンが表示され、ヘッダーから各ページへの遷移が容易。またパンくずも表示されているので自分がどこにいるか分かりやすく、必要な画像には適切なaltが設定されている。
このような二つのサイトがあった場合、あなたはAを選ぶでしょうか、Bを選ぶでしょうか？
またあなたではないとしても、高齢者、視覚障がい者、色盲や色弱の方々が選ぶとすれば、より多く選ばれるのはどちらになるでしょうか。
私たち制作側が意識しなくてはならないこと
Webページは様々な業種の人々によって制作されます。大まかに分類してここではディレクター、デザイナー、エンジニアとします。
それぞれの業種に、それぞれできることがあるかと思います。上記で挙げた例で当てはめるのならば、
ディレクターはページ構成を考える際にパンくずの設置を提案できます。
デザイナーは読みやすい文字サイズや行間、色のコントラストを考慮してデザインに落とし込むことができます。
フロントエンドエンジニアとしては、コーディングの際に出来ることはあまりにもたくさんあると思っています。
altの設定、画像の遅延読み込み、押しやすいクリッカブルエリアの設定、キーボード操作やボイスリーダーを考慮した上での要素の適切な配置、適切なマークアップ…
そしてこれらはエンジニアだけで完結することではなく、サイトを作っていくチームメンバーと相談して作り上げていくものになります。
「ここ、アクセシビリティ的にもっと改善できるのでは？」と思ったことはどんどん相談し、適切な実装を心がけて行きましょう。
おわりに
今回、 Webアクセシビリティとは何なのかということを皮切りに、どういったメリットがあるのかというところまでをご紹介させていただきました。
ですが、本音を言うと、どういったメリット（数値やコンバージョン）があるかにあまり重きを置きすぎず、「誰にとっても使いやすいサイトを作ろう」という意識こそが根本的に大切なことなのではないかと思っています。
「自分が当事者であるから」「売上に繋がるから」と言う自分事ではなく、もっと広い視野で他者への気遣いを忘れない、そういった当たり前のことがWeb制作にも必要なのではないでしょうか。
私たち製作陣は、文章やイラスト、動画といったWebサイトのコンテンツ内容で誰かを楽しませることができますが、それだけではなくWebサイトの作りそのもので誰かの喜びを作り出したり、手助けをすることができるのです。
そういった気持ちを忘れないよう、これからも精進して行きましょう。
文章が多くなりましたが、ここまでお読みいただきありがとうございました！
メリークリスマス！
トラストバンクでは一緒に働く仲間を募集しております。
ご興味を持たれた方はぜひ一度ご連絡ください！