目次
アクセシビリティとは？
アクセシビリティ（Accessibility）とは「アクセスのしやすさ」や「近づきやすさ」などの意味を持つ単語です。製造業やITの分野では、転じて「製品やサービスの利用しやすさ」という意味合いで使われます。
高齢者や障害のある方を含めたすべての人が、環境に左右されずに製品を利用できるよう設計を考慮することを表す用語です。
アクセシビリティとユーザビリティの違い
アクセシビリティと似た言葉に「ユーザビリティ（Usability）があります。アクセシビリティとユーザビリティの違いは「多様性」または「利便性」のどちらに焦点を当てているかです。
ユーザビリティは「使いやすさ」や「使い勝手」などと訳され、アクセシビリティと意味合い的に似通っています。
しかし、アクセシビリティが「すべてのユーザーが製品やサービスを利用して目的を達成できるか」を意味するのに対して、ユーザビリティは「いかに製品やサービスを操作しやすくして目的達成を容易にできるか」を意味します。
つまり、アクセシビリティはさまざまな人を目的達成まで導く「多様性」、ユーザビリティは目的達成までの難易度を容易にする「利便性」に焦点を当てているのです。
アクセシビリティとバリアフリーの違い
高齢者や障害のある方向けの設計と聞くと、バリアフリー（Barrier-free）という言葉も浮かんできます。
目的達成までの障害を取り除くのがバリアフリーの考え方ですが、アクセシビリティの考え方はそもそも設計段階から障害を残さず、ユーザーの目的達成を最優先に設計することにあります。
また、アクセシビリティは高齢者や障害のある方だけではなく、その製品やサービスを利用する全ユーザーを対象としているため、バリアフリーよりも多くの人々が対象となります。
Webアクセシビリティとは？
Webアクセシビリティとは、Webサイトにおけるアクセシビリティのことです。Webサイト上にある情報や機能の利用しやすさを意味します。
さまざまな端末や状況でWebサイトが利用される現代において、Webアクセシビリティを考慮したサイト設計は必要不可欠です。
2016年4月に施行された「障害者差別解消法」では、公的機関のWebアクセシビリティ対応が義務化され、一般企業は可能な限り対処する努力義務が課せられています。
アクセシビリティの機能例
それでは、アクセシビリティの機能例をご紹介します。
テキストリーダー
テキストリーダーとは、表示されているテキストを音声に変換する機能です。変換された音声をその場で読み上げてくれるため、テキスト読み上げツールともいわれます。
スマホやPCからWebサイトを閲覧すると、表示されているWebサイト内のテキストを、テキストリーダーが音声として読み上げます。
テキストリーダーを利用することでサイト内の情報を耳から得られるため、視覚に障害のある方や文字が読みづらい高齢者の方などは利用する機会が多い機能だといえるでしょう。
Webアクセシビリティの例
次に、Webアクセシビリティの実施例をご紹介します。誰もが利用しやすいサービスにするためにも、ご自身がWeb制作を行う際は以下の実施例を参考にしましょう。
メニュー名などをわかりやすい言葉に
サイト内のメニュー名には、誰が見てもわかりやすい言葉を選びましょう。
サイトにはデザインの観点から、英語や流行語などを取り入れることも大切です。しかし、なるべくは多用を避けて、サイト訪問者の属性に合わせた表記を心がけましょう。
テキストだけでなくアイコンや図も使う
テキストだけでなくアイコンや図を使うことで、その要素が何を表しているのか判別を促せます。
たとえば「電話番号」は、隣に電話のアイコンがついていれば、ひと目で電話番号だと判別できます。また「閉じるボタン」は隣に「×アイコン」がついていることで、文字だけを見るよりも容易に判断が可能です。
さらに、専門用語の解説のようなテキストのみでの説明が難しいコンテンツは、画像や図をつけることでより具体的な説明ができます。
画像にはalt属性を設定
サイトに画像を貼り付ける場合はalt属性を設定しましょう。alt属性とは、画像の代わりになるテキスト情報を指します。
alt属性にテキストを設定しておくと、何らかの原因で画像が表示されなかった場合には、設定したテキストが代わりに表示されます。
alt属性はテキストリーダーによる音声での読み上げにも対応しており、視覚に障害がある方へも画像の意味を伝えることが可能です。
また、alt属性の設定は画像の情報を検索エンジンに伝える役割も果たすため、SEO対策面でも一役を担います。さまざまなメリットがあるため、alt属性はなるべく設定しておきましょう。
文字の拡大機能
Webサイトはさまざまな方が利用するため、スマホやPCで文字の拡大・縮小が可能な作りであることが推奨されます。
上記を実現させるには、各端末の設定や画面の幅に応じて、文字の大きさが相対的に変化する必要があります。フォントサイズは「px」で固定するのではなく、「em」や「rem」を用いた相対指定にしましょう。
また、スマホでは「ピンチイン」「ピンチアウト」「ダブルタップ」といった操作で画面の拡大縮小ができることはご存知かと思います。
デザイン性や、拡大縮小による不具合を防ぐために上記の操作を無効化したい場合は、コーディング時、meta viewportに「user-scalable=no」を指定することで設定が可能ですが、不必要な設定は避けましょう。
コントラストがハッキリした色の組み合わせ
色覚障害の方の区別がつくよう、色の組み合わせは明瞭なコントラストを意識しましょう。また、色だけに頼ったデザインにはせず、コンテンツの配置や表現方法を工夫することも大切です。
Webアクセシビリティ規格「JIS X 8341-3」とは
「JIS X 8341-3」とは、日本工業標準調査会（JISC）が2004年に公示した、Webアクセシビリティの確保に関する規格です。
正式名称を「高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第3部：ウェブコンテンツ」といい、規格番号の8341は「やさしい」の語呂合わせが由来です。
当初は、国内外にあるWebアクセシビリティに関する既存のガイドラインを参考にして、日本語特有の事項も網羅した独自の指針として設計していました。
一方、世界的には2008年に、Web技術標準化のための国際的ルールを決める非営利団体「W3C」によって、Webコンテンツのアクセシビリティに関するガイドライン「WCAG（Web Content Accessibility Guidelines）2.0」がW3C勧告として発表されました。
これを受けてJIS X 8341-3も改正され、さらには「WCAG」が2016年にそのまま国際規格「ISO/IEC 40500:2012」となったため、再び改正が行われたのです。
JIS X 8341-3の達成基準/早見表
JIS X 8341-3の最新版であるJIS X 8341-3:2016では「レベルA」「レベルAA」「レベルAAA」の3つの適合レベルを設けています。Webサイト制作時に対応すべき個別の要件について、各レベルごとに達成基準を記載しています。
達成基準は「レベルAで25項目」「レベルAAで13項目」「レベルAAAで23項目」の計61項目です。各項目の達成基準については下記リンク先のサイトに早見表が掲載されているので、ぜひご覧ください。
参考：JIS X 8341-3:2016 達成基準 早見表（レベルA & AA） | ウェブアクセシビリティ基盤委員会（WAIC）
まとめ
今回は、アクセシビリティについての概要や、製品やWebにおける実際の機能例をご紹介しました。
アクセシビリティとは、高齢者や障害のある方をはじめとしたすべての人々が、製品やサービスに対して同じ体験を得られるようにデザイン設計するための概念です。これは、WebアクセシビリティとしてWebの世界にも当てはまることです。
Webアクセシビリティに対応したサイト作りは、アクセス数の増加やSEO対策、UI/UXの観点からも推奨されています。
現在は公的機関のみ義務化されているWebアクセシビリティ対応ですが、今後さらに対応範囲が広がることが予想されます。JIS X 8341-3:2016の早見表を確認すれば最新の情報が得られるので、ぜひ活用してみてください。
