ここ数年、デジタルプロダクトに関連するUI・UXデザインを中心に「アクセシビリティ」という言葉をよく耳にするようになってきました。誰もが製品やサービスを平等に利用できるようにしていく上で重要な考え方であるこの「アクセシビリティ」に対しては、数多くのチェックツールやサポートツールが開発・提供されています。
そこで今回は「アクセシビリティ」の基本とそれをチェック&サポートするツールについて、いろいろと解説していきたいと思います。
よくわかる「アクセシビリティ」の基礎知識
▶アクセシビリティとは何か
「アクセシビリティ」とは、誰もが平等に製品、サービス、情報、環境を快適に利用できるようにする考え方や取り組みを指します。英単語の「Accessibility」の意味は、直訳すると「近づきやすさ・手の届きやすさ」になりますので、「いかにアクセスしやすくするか」を考慮していく概念であると考えるとイメージしやすいでしょう。このアクセシビリティは高齢者や障害者といった特別な配慮が必要な社会的弱者のためのものと捉えられがちですが、すべての人々の利便性を向上することを目標としています。
アクセシビリティという言葉は目新しく思えるかもしれませんが、その背景にある考え方は決して新しいものではありません。昭和生まれの方であれば記憶にあると思いますが、新聞や文庫版の文字のサイズは今よりも小さく、ある時期を境にサイズが大きくなりました。こうした、私たちが過去に経験している文字のサイズの変化もアクセシビリティが少しずつ強化されてきた歴史の一端と言えるでしょう。
1990年代から「バリアフリー」という和製英語が徐々に普及しはじめ、2000年代にはバリアフリーに関連する法制度が整備されました。このバリアフリーという考え方は、建築デザイン、工業デザイン、家電デザイン、パッケージデザインといった分野を中心に日本でも広く浸透していきます。そして、この「バリアフリー」の考え方が「アクセシビリティ」へと発展していき、今日ではより世界的にスタンダードな用語として「アクセシビリティ」という言葉のほうが用いられる機会が増えているのです。
また、アクセシビリティに関連して「ユニバーサルデザイン」「UI・UXデザイン」「インクルーシブデザイン」というデザインの考え方も一般的になってきています。
▶デザインにおけるアクセシビリティの重要性
アクセシビリティを強化・整備していくためには、人間工学や工業規格に関する知識が必要不可欠です。そのため、かつては工学に関する専門知識を持ったプロダクトデザイナーやインダストリアルデザイナーが担う特殊な領域とされていました。しかし、IT化が進む中で、従来ハードウェア中心だったプロダクトの概念がソフトウェア領域にも広がり、その境界線が曖昧になってきています。その結果、WebサイトやWebアプリといったデジタルプロダクトにも、人間工学や工業規格の知識に基づく「アクセシビリティ」を考慮することが、これまで以上に重要になってきているのです。
▶アクセシビリティに関するガイドライン
すべての人々の利便性を向上するためには、共通した基準が必要です。そのため、アクセシビリティに関しては、いくつかの国際的なガイドラインが存在します。以下が代表的な国際的アクセシビリティガイドラインの一覧になります。
国際的なアクセシビリティガイドライン
| 規格 | 説明 |
|---|---|
| WCAG | WCAGは「Web Content Accessibility Guidelines」の略。W3C(World Wide Web Consortium)によって制定されているガイドライン。知覚可能、操作可能、理解可能、堅牢という4つの原則に基づくガイドラインであるのが特徴。最新バージョンは、現在WCAG 2.1(2024年12月時点)で、現在はWCAG 2.2が策定中。 |
| ARIA | ARIAは「Accessible Rich Internet Applications」の略。WCAGと連携して利用される、動的なWebコンテンツのアクセシビリティを高める仕様に関するガイドライン。JavaScriptをはじめとした動的な要素に特化した規格である。 |
| ISO/IEC 40500 | Webアクセシビリティに関する国際標準規格。WCAGとほぼ同内容のガイドライン。 |
| ISO 9241-171 | ソフトウェアアクセシビリティのための国際規格。 |
アクセシビリティには国際的な規格だけでなく、日本国内の規格もあります。国内の社会基盤事情や社会福祉などにも考慮したガイドラインになりますが、Webアクセシビリティの観点では、日本語の文字(漢字・ひらがな・カタカナ)に関する情報なども含まれています。以下が代表的な日本国内のガイドラインになります。
日本国内のアクセシビリティガイドライン
| 規格 | 説明 |
|---|---|
| JIS X 8341 シリーズ | 日本産業標準調査会によって制定されているJIS(日本産業規格)で定められた日本国内のアクセシビリティ規格。ウェブコンテンツのアクセシビリティの規格である「JIS X 8341-3」、ICT製品とサービスのアクセシビリティの規格である「JIS X 8341-5」などがある。 |
| 障害者差別解消法ガイドライン | 日本国内の障害者差別解消法(2024年5月に改正)という公共機関や企業に対し、合理的配慮の提供を求める法律に基づくガイドライン。 |
上記に挙げた機関は、規格に沿った製品やサービスには認証を与えるといった評価なども行っています(JIS X 8341-3などは試験も実施されている)。これらの認証を得ることで、製品やサービスおよび企業ブランドなどの社会的な価値を高めていくことができるのです。
なお、Webアクセシビリティに関してはデジタル庁が導入ガイドブックがよくまとまっていると評価されていますのでこちらも参考にしてみてください。
※参考URL:デジタル庁:ウェブアクセシビリティ導入ガイドブック(デジタル庁)
その他にも「accrefs」といったWebアクセシビリティに関する参考資料をまとめたサイトなど、アクセシビリティに関する情報発信は、個人レベルでもさまざま専門家によって提供されています。
「アクセシビリティ」を強化&チェックするツール(Part1)
▶コントラストチェッカー、▶視覚シミュレーター、▶スクリーンリーダー、▶画像メタデータ確認
基本知識が確認できたので、ここからはアクセシビリティを強化・チェックするツールについて、カテゴリー別に詳しく解説していきます。アクセシビリティに関連するツールは、デザインやエンジニアリングの現場で用いられる特殊なツールもありますが、IoTやAIの普及によってすでに私たちの生活に浸透しているツールも数多く含まれます。
1. 視覚のアクセシビリティチェックツール
視覚障害のあるユーザーや視覚に困難を抱えるユーザーをサポートするツールです。弱視や色覚異常(最近は差別的であるとして色覚特性・色覚多様性という用語が使われる場合もある)といった障害を抱える人だけでなく、視力が低下している高齢者、メガネやコンタクトレンズのサポートが必要な視力が弱い人にとってのアクセシビリティ強化にも役立つツールです。
▶コントラストチェッカー
コントラストチェッカーは、文字色と背景色のコントラストを確認するツールです。一般的な色の見え方とは違う色の見え方をする色覚異常(色覚特性・色覚多様性)は、日本人の場合、男性の20人に1人(男性の約5%)存在するというデータがあり、決して少なくない数です。こうした色覚異常の方々のアクセシビリティ強化にコントラストチェッカーが役立ちます。コントラストチェッカーを使うことで、例えばコーポレートカラーやブランドイメージに合ったカラーに最適なコントラストを持つ色味を選択することも容易になります。ツールはさまざまな種類が提供されていますが、単にコントラストを確認するものではなく、ガイドラインに関する情報もチェックできるツールを選ぶとよいでしょう。
代表的なツール
| ツール名 | 説明 |
|---|---|
| Web AIM : Contrast Checker | ユタ州立大学の研究機関(Institute for Disability Research, Policy & Practice)が開発・提供しているコントラストチェッカー。 |
| Accessible Brand Colors | ADA(米国障害者協会)の定める基準に準拠しているかを確認できるコントラストチェッカー。 |
| Color Contrast Checker | Webデザイナー兼エンジニアのFabrizio Bianchi氏が開発・提供するコントラストチェッカー。 |
| Colour Contrast Analyser | ローカル端末にインストールして利用可能なコントラストチェッカーのアプリケーション。日本語化にも対応している。 |
| コントラストチェッカー | 日本人デザイナーであるnakanishy氏が開発したコントラストチェッカー。 |
▶視覚シミュレーター
さまざまな色覚特性を持つ方の見え方でデザインを確認するツールです。色の見え方には、いくつかの型がありますので、そうした型による違いを確認できるツールもあります。
代表的なツール
| ツール名 | 説明 |
|---|---|
| Colorblind Web Page Filter | 様々な色覚特性を持つ人の色の見え方をチェックできる視覚シュミレーター |
| 色のシミュレータ | 様々な色覚特性を持つ人の色の見え方を体験するためのスマートフォン端末向け色覚シミュレーションツール。1型(P型)、2型(D型)、3型(T型)の2色覚の色の見えをリアルタイムに確認し、一般型(C型)の色の見えと比較することが可能。 |
▶スクリーンリーダー
画面の内容を音声で読み上げるツールです。macOSやWindowsなどのOSには、基本的なスクリーンリーダーが標準搭載されていますが、より高度な操作が可能なツールも数多く提供されています。スクリーンリーダー自体は、アクセシビリティをチェックするツールではありませんが、アクセシビリティをサポートするツールとして広く利用されていることを知っておくことは非常に大切です。
▶画像メタデータ確認ツール
サイトのコンテンツにAlt(画像の代替テキスト)やMeta情報が含まれているかを確認できるツールです。視覚障害を持つ方が、画像に関する情報も取得できるかをチェックすることでアクセシビリティを高めることができます。また、SEOとしてサイト評価の改善にもつながります。
代表的なツール
| ツール名 | 説明 |
|---|---|
| Alt & Meta viewer | AltやMeta情報が含まれているかをチェックできるGoogle Chrome用のアドオン。 |
| Ranktracker | 無料で利用できる画像メタデータテストツールが利用可能。 |
2024.12.17 Tue