はじめに

最近、WEBアクセシビリティという言葉を聞くけど、実際のところWEBサイトの構築時の実装面において何をして良いのか、わからないというフロントエンドエンジニアの方もいるとおもいますので、その方々に向けて、実はアクセシビリティを意識せず普通にコーディングしていることもアクセシビリティに対応していることもあるので、この記事を読んでアクセシビリティを身近に感じてもらえればと思います。

WEBアクセシビリティとは

Webサイトにおけるアクセシビリティとは何かというと、みなさんが大好き「ウィキペディア」で調べると

WEBサイトにおけるアクセシビリティは、高齢者や障害者、また異なる情報端末やソフトウェアにおいても、情報を取得あるいは発信できる柔軟性に富んでいること（あるいはその度合い）を意味する。公共サービスでは、障害があっても知る権利を保障する情報保障によって重要となる。

 

引用元：ウィキペディア

簡単に言うと、「障害があっても情報（WEBサイト）にアクセス」できることだと思います。ここでアクセシビリティの意味について改めて確認しておくと、JIS X 8341-1:2010※1のアクセシビリティは、以下のように定義されています。

「様々な能力をもつ最も幅広い層の人々に対する製品，サービス，環境又は施設（のインタラクティブシステム）のユーザビリティ」

とあります。突然ユーザビリティという言葉が出てできましたが、ユーザビリティの意味は「なるべく簡単で、迷わず、ストレスを感じずに操作できること」なので、簡単にまとめると、「あらゆる人がサービス（情報）にアクセスできること」だと思います。ユーザビリティとアクセシビリティは違うものと考えがちですがアクセシビリティの中にユーザビリティが含まれると考えていいかもしれません。

ちなみに、ユーザビリティは国際標準化機構によるISO 9241-11※2で以下のように定義されています。

「特定の利用状況において、特定のユーザによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザの満足度の度合い」

また、WEBサイトのアクセシビリティにはWCAG※3 / JIS X 8341-3などでも詳しく定義されているので
興味のある方は、Googleなどで調べてみるといいかもしれません。

WEBアクセシビリティの実装

では、WEBサイトにおけるWEBアクセシビリティの実装ですが、WCAG / JIS X 8341-3に完璧に対応しようとするとハードルが高いです。でもこちらのページも紹介されていますが、「アクセシビリティの確保は、”All or Nothing” ではありません。」
すべてを実装する必要はなく、できることから少しだけでもいいので実装していくのが一番だと思います。
案件によっては、工数をかけられなかったり、スケジュールがタイトでアクセシビリティまで考えてられないこともあるかと思います。あとはフロンエンドエンジニアでは解決できない色の視認性などのデザインよりのものもあったりしますので。

また、実装チェックリストを作成できるツールがあるみたいなので本格的にWEBアクセシビリティを実装したい方は、Googleで検索して確認していくのもいいかもしれません。
すべて対応しようとするとかなりの実装・確認作業など大幅な工数増加になると思いますので、その工数の事前調査と予算を確保できるようにディレクターとの調整は忘れずに。

簡単に実装できるアクセシビリティ

では簡単に実装できる項目を見ていきましょう。
Webアクセシビリティ確保 基本の『キ』のページに紹介されている
以下の１０項目になります。

1. ページの内容が分かるページタイトルを記述する
2. 見出しやリストなどの文書構造をマークアップする
3. リンクテキストは、リンク先が分かる文言にする
4. 情報を伝えている画像に代替テキストを提供する
5. 情報を伝える色の使い方に注意する
6. ユーザーがコンテンツを拡大表示できるようにする
7. キーボードだけでも操作できるようにする
8. フォーム・コントロールのラベルや説明をマークアップする
9. エラーメッセージではエラー箇所と修正方法を明示する
10. 動画にキャプション（字幕）を提供する

フロントエンドエンジニアが対応できるのは2,4,6,7,8,9あたり対応可能範囲だと思います。
普段からコーディングする際して気をつけていることも多いので、ハードルはそこまで高く感じることなく実装できると思います。

アクセシビリティ実装のまとめ

いかがでしたでしょうか？アクセシビリティと聞いて、なんか大変そうだから距離をおいていたり後回しにしたりするかと思います、実際は、コーディングの基礎部分で学んだことで、もうすでに少しはアクセシビリティ対応しているかもしれません。限られた予算、限られた工数で、すべてを完璧に実装するのは難しいと思いますのでできるところから少しづつだけでも実装して慣れていくのが一番だと思います。

※1 日本工業標準調査会（JISC）が制定した、情報通信における機器、ソフトウェアおよびサービスの情報アクセシビリティを確保・向上するために、企画・開発・設計者および経営者が配慮すべき具体的な要件がまとめられた標準規格です。なお、JIS（日本工業規格）とは、日本国内における工業標準化の促進を目的とする『工業標準化法』（昭和24年）に基づいて制定される国家規格である。

※2 ISOとは、スイスのジュネーブに本部を置く非政府機関 International Organization for Standardization（国際標準化機構）の略称です。ISOの主な活動は国際的に通用する規格を制定することであり、ISOが制定した規格をISO規格といいます。

※3 WCAGとは、Web Content Accessibility Guidelinesの省略表記で、ウェブコンテンツのアクセシビリティに関するガイドラインです。