ランサーズでバックエンドエンジニア（時々フロントも）をしている高橋(@t_sumsum)です。
最近アクセシビリティについて興味があり、学習や情報収集をしていく中で考えたことがあったため、アクセシビリティを高めることは「誰にメリットがあるのか」という観点で記事を書いていこうと思います。
そもそもアクセシビリティってなに？
アクセシビリティとはAccess(近づく、アクセスする)とAbillity(能力、〜できること)の二つの単語の意味を持つものです。一般的に「サービスを利用できること、利用しやすさ、またはその到達度」を表す用語として使われています。
webのアクセシビリティでは、利用者の障害の有無やその程度、年齢、利用環境に関わらずそのWebで提供されているサービスを等しく利用できることを意味しています。
引用：Evaluation method of UX “The User Experience Honeycomb” , 坂本貴史
利用者のためのアクセシビリティ~アクセシビリティは全ての利用者のためのもの~
もしかすると、アクセシビリティと聞くと障がい者や高齢者のためのものというイメージがあるかもしれません。しかし「アクセシビリティ = 障がい者・高齢者」といった考え方は誤りです。この考え方は「自分の開発するサービスでは障がい者や高齢者は対象者ではないからアクセシビリティはあまり意識しなくても良いだろう」といった考えに至ってしまうので注意が必要です。
当然障がい者や高齢者の方のためのものでもありますが、アクセシビリティにはもっと広い意味があります。具体的に示した利用状況の例を見てみるとわかりやすいです。
利用状況
- 屋外で眩しくて画面が見えにくい
- スマホのディスプレイやノートPCのトラックパッドが壊れてしまった
- 電車内で動画を見たいのにイヤホンを忘れてしまい音が出せない
- メガネを忘れてしまい目が疲れやすい
これらの例は、皆 健常者ですがそれぞれ障害がありサービスを使いにくい状況にあります。webアクセシビリティの本質は、誰もが環境・状態に関わらず「平等」であることにあると考えています。そのため、アクセシビリティは全ての利用者ためのものと言えます。
開発者のためのアクセシビリティ~テスト品質・読みやすさ・書きやすさの向上~
開発者にとってもアクセシビリティを意識した開発は実はメリットがあります。テストの品質が上がり、コードの書きやすさ、読みやすさが向上することです。
以下の例を見てみましょう。ボタンが存在することのUTのテストコードです。
// divタグで作られたボタンが存在することのテスト（アクセシビリティ❌）
expect(screen.getByText("送信")).toBeInTheDocument();
// buttonタグで作られたボタンが存在することのテスト（アクセシビリティ⭕️）
expect(screen.getByRole("button")).toBeInTheDocument();このテストではボタンが存在するかのみを目的としています。しかし、上の例ではdivタグでボタンが作られているために、ボタンのエレメントを取得するために「送信」というボタンに書かれた文字列から取得する必要があります。もしもボタンの文字列が「送信」から「完了」に変わってしまったら上のテストは失敗してしまいます。
二つのテストを見比べてみると上のコードの方が目的が単一でコードとしての品質が高く、「button」というアクセシブルネームで取得しているため読みやすくなっていることが分かると思います。
また、テスト対象のコードもbuttonタグのボタンと、divタグのボタンがあったら前者はぱっと見でボタンと理解することができるため、読みやすくなっています。
これは一部の例でしかありませんが、アクセシビリティを意識したコードはマシンリーダブルなコードとも言えるため、テスト品質や可読性の観点でもメリットがあります。
運用者のためのアクセシビリティ~SEOで有利になる~
前章でさらっと「マシンリーダブル」という言葉が出てきましたが、これによって生まれるメリットは開発観点だけではありません。それはSEOで有利になるという点です。
機械が読みやすいコードになればなるほどクローラーにとって情報を正確に解釈しやすくなります。これにより、検索で上位に表示されるようになるだけでなく、必要なユーザーに効率的・正確に表示されるようになります。
まとめ
アクセシビリティを充実させることで受ける恩恵についての一例を説明してきましたがいかがだったでしょうか。
簡単にまとめ
アクセシビリティは利用者が等しくサービスを利用できるためのもので、それは障がい者や高齢者だけでなく、健常者にとっても重要です。また、開発者にとっても、アクセシビリティを考慮したコードを書くことでテストの品質が上がり、読みやすいコードが実現できるというメリットがあることを示しました。最後に、運用の観点でもアクセシビリティを考慮したコードはマシンリーダブルなコードであるため、SEOでも有利になります。
アクセシビリティによるメリットは多方面にあり、それを実現するための手段や考えるべきことも多岐に渡ります。そのためここに書いた内容はほんの一部でしかなく、様々な視点から取り組まなければならない課題がまだ多く存在します。
もし興味のある方はデジタル庁が作成している「ウェブアクセシビリティ導入ガイドブック」をご覧になってみてください。
