重要性が高まる「アクセシビリティ」の基本とそれを強化＆チェックするツールの選び方

ここ数年、デジタルプロダクトに関連するUI・UXデザインを中心に「アクセシビリティ」という言葉をよく耳にするようになってきました。誰もが製品やサービスを平等に利用できるようにしていく上で重要な考え方であるこの「アクセシビリティ」に対しては、数多くのチェックツールやサポートツールが開発・提供されています。

そこで今回は「アクセシビリティ」の基本とそれをチェック＆サポートするツールについて、いろいろと解説していきたいと思います。

目次

よくわかる「アクセシビリティ」の基礎知識

▶アクセシビリティとは何か
「アクセシビリティ」とは、誰もが平等に製品、サービス、情報、環境を快適に利用できるようにする考え方や取り組みを指します。英単語の「Accessibility」の意味は、直訳すると「近づきやすさ・手の届きやすさ」になりますので、「いかにアクセスしやすくするか」を考慮していく概念であると考えるとイメージしやすいでしょう。このアクセシビリティは高齢者や障害者といった特別な配慮が必要な社会的弱者のためのものと捉えられがちですが、すべての人々の利便性を向上することを目標としています。

アクセシビリティという言葉は目新しく思えるかもしれませんが、その背景にある考え方は決して新しいものではありません。昭和生まれの方であれば記憶にあると思いますが、新聞や文庫版の文字のサイズは今よりも小さく、ある時期を境にサイズが大きくなりました。こうした、私たちが過去に経験している文字のサイズの変化もアクセシビリティが少しずつ強化されてきた歴史の一端と言えるでしょう。

1990年代から「バリアフリー」という和製英語が徐々に普及しはじめ、2000年代にはバリアフリーに関連する法制度が整備されました。このバリアフリーという考え方は、建築デザイン、工業デザイン、家電デザイン、パッケージデザインといった分野を中心に日本でも広く浸透していきます。そして、この「バリアフリー」の考え方が「アクセシビリティ」へと発展していき、今日ではより世界的にスタンダードな用語として「アクセシビリティ」という言葉のほうが用いられる機会が増えているのです。

また、アクセシビリティに関連して「ユニバーサルデザイン」「UI・UXデザイン」「インクルーシブデザイン」というデザインの考え方も一般的になってきています。

▶デザインにおけるアクセシビリティの重要性
アクセシビリティを強化・整備していくためには、人間工学や工業規格に関する知識が必要不可欠です。そのため、かつては工学に関する専門知識を持ったプロダクトデザイナーやインダストリアルデザイナーが担う特殊な領域とされていました。しかし、IT化が進む中で、従来ハードウェア中心だったプロダクトの概念がソフトウェア領域にも広がり、その境界線が曖昧になってきています。その結果、WebサイトやWebアプリといったデジタルプロダクトにも、人間工学や工業規格の知識に基づく「アクセシビリティ」を考慮することが、これまで以上に重要になってきているのです。

▶アクセシビリティに関するガイドラインや技術仕様・対応指針
すべての人々の利便性を向上するためには、共通した基準が必要です。そのため、アクセシビリティに関しては、いくつかの国際的なガイドラインや技術仕様・対応指針が存在します。以下が代表的な国際的アクセシビリティガイドラインと技術仕様の一覧になります。

※ガイドラインについて、いくつか誤りがあるとのご指摘を受けました。赤字部分が修正箇所となります。読者の皆様と関係各所の方々にご迷惑をおかけいたしましたことを、お詫び申し上げます。

国際的なアクセシビリティガイドラインや技術仕様

規格説明WCAGWCAGは「Web Content Accessibility Guidelines」の略。W3C（World Wide Web Consortium）によって制定されているガイドライン。知覚可能、操作可能、理解可能、堅牢という４つの原則に基づくガイドラインであるのが特徴。最新バージョンは、WCAG 2.2（2023年10月に勧告）となっています。ARIAARIAは「Accessible Rich Internet Applications」の略。WCAGと連携して利用される、動的なWebコンテンツのアクセシビリティを高める技術仕様。JavaScriptをはじめとした動的な要素に特化した技術仕様である。ISO/IEC 40500Webアクセシビリティに関する国際標準規格。ISO 40500:2012とWCAG 2.0は、技術的に同等の内容。ISO 9241-171ソフトウェアアクセシビリティのための国際規格。アクセシビリティには国際的な規格だけでなく、日本国内の規格や対応指針などもあります。国内の社会基盤事情や社会福祉などにも考慮したガイドラインになりますが、Webアクセシビリティの観点では、日本語に関する情報なども含まれています。以下が代表的な日本国内のガイドラインと対応指針になります。

日本国内のアクセシビリティガイドラインや対応指針

規格説明JIS X 8341 シリーズ日本産業標準調査会によって制定されているJIS（日本産業規格）で定められた日本国内のアクセシビリティ規格。ウェブコンテンツのアクセシビリティの規格である「JIS X 8341-3」、ICT製品とサービスのアクセシビリティの規格である「JIS X 8341-5」などがある。障害者差別解消法日本国内の障害者差別解消法（2024年5月に改正）という公共機関や企業に対し、合理的配慮の提供を求める法律に基づく対応指針。上記に挙げた機関の中には、規格に沿った製品やサービスには認証を与えるといった評価なども行ってる機関もあります。 一部の業界や団体では、これらガイドラインに対して独自の認証基準を設けているケースがあります（JIS X 8341シリーズはJISマークを付与できない規格のため、認証機関は存在しません）。これらの認証基準をクリアすることで、製品やサービスおよび企業ブランドなどの社会的な価値を高めていくこともできます。

なお、Webアクセシビリティに関してはデジタル庁が導入ガイドブックがよくまとまっていると評価されていますのでこちらも参考にしてみてください。
※参考URL：デジタル庁：ウェブアクセシビリティ導入ガイドブック（デジタル庁）

その他にも「accrefs」といったWebアクセシビリティに関する参考資料をまとめたサイトなど、アクセシビリティに関する情報発信は、個人レベルでもさまざま専門家によって提供されています。

｢アクセシビリティ」を強化＆チェックするツール（Part1）
▶コントラストチェッカー、▶視覚シミュレーター、▶スクリーンリーダー、▶画像メタデータ確認

基本知識が確認できたので、ここからはアクセシビリティを強化・チェックするツールについて、カテゴリー別に詳しく解説していきます。アクセシビリティに関連するツールは、デザインやエンジニアリングの現場で用いられる特殊なツールもありますが、IoTやAIの普及によってすでに私たちの生活に浸透しているツールも数多く含まれます。

1. 視覚のアクセシビリティチェックツール
視覚障害のあるユーザーや視覚に困難を抱えるユーザーをサポートするツールです。弱視や一般的な色の見え方とは違う色の見え方をする色覚異常（最近は差別的であるとして色覚特性・色覚多様性という用語が使われる場合もある）といった障害を抱える人だけでなく、視力が低下している高齢者、メガネやコンタクトレンズのサポートが必要な視力が弱い人にとってのアクセシビリティ強化にも役立つツールです。色覚異常に関しては、日本人の場合、男性の20人に1人（男性の約5％）存在するというデータがあり、決して少なくない数であることがわかります。そうした視覚に困難を抱える方々のアクセシビリティを強化するには主に以下のようなツールが用いられます。

▶コントラストチェッカー

ユタ州立大学の研究機関が開発・提供しているコントラストチェッカーの「WebAIM : Contrast Checker」コントラストチェッカーは、文字色と背景色のコントラストを確認するツールです。コントラストチェッカーを使うことで、例えばコーポレートカラーやブランドイメージに合ったカラーに対して視覚に困難を抱えるユーザーにとっても見やすい最適なコントラストを持つ色味を選択することも容易になります。ツールはさまざまな種類が提供されていますが、単にコントラストを確認するものではなく、ガイドラインに関する情報もチェックできるツールを選ぶとよいでしょう。

代表的なツール

ツール名説明Web AIM : Contrast Checkerユタ州立大学の研究機関（Institute for Disability Research, Policy & Practice）が開発・提供しているコントラストチェッカー。Accessible Brand ColorsADA（米国障害者協会）の定める基準に準拠しているかを確認できるコントラストチェッカー。Color Contrast CheckerWebデザイナー兼エンジニアのFabrizio Bianchi氏が開発・提供するコントラストチェッカー。Colour Contrast Analyserローカル端末にインストールして利用可能なコントラストチェッカーのアプリケーション。日本語化にも対応している。コントラストチェッカー日本人デザイナーであるnakanishy氏が開発したコントラストチェッカー。▶視覚シミュレーター

様々な色覚特性を持つ人の色の見え方をチェックできる視覚シュミレーターの「Colorblind Web Page Filter」さまざまな色覚特性を持つ方の見え方でデザインを確認するツールです。色の見え方には、いくつかの型がありますので、そうした型による違いを確認できるツールもあります。

代表的なツール

ツール名説明Colorblind Web Page Filter様々な色覚特性を持つ人の色の見え方をチェックできる視覚シュミレーター色のシミュレータ様々な色覚特性を持つ人の色の見え方を体験するためのスマートフォン端末向け色覚シミュレーションツール。1型（P型）、2型（D型）、3型（T型）の2色覚の色の見えをリアルタイムに確認し、一般型（C型）の色の見えと比較することが可能。▶スクリーンリーダー

macOSに標準搭載されたスクリーンリーダーである「VoiceOver」画面の内容を音声で読み上げるツールです。macOSやWindowsなどのOSには、基本的なスクリーンリーダーが標準搭載されていますが、より高度な操作が可能なツールも数多く提供されています。スクリーンリーダー自体は、アクセシビリティをチェックするツールではありませんが、アクセシビリティをサポートするツールとして広く利用されていることを知っておくことは非常に大切です。

代表的なツール

ツール名説明VoiceOvermacOSに標準搭載されたスクリーンリーダーナレーターWindowsに標準搭載されたスクリーンリーダーNVDAWindows 用のスクリーンリーダー（日本語版も提供されている）RevealVoiceOver や Voice Controlといった音声インターフェースを一度に表示することで、ユーザーの体験を改善することが可能なアクセシビリティチェックツール▶画像メタデータ確認ツール

画像メタデータ確認を確認できるGoogle Chrome用のアドオンの「Alt & Meta viewer」サイトのコンテンツにAlt（画像の代替テキスト）やMeta情報が含まれているかを確認できるツールです。視覚障害を持つ方が、画像に関する情報も取得できるかをチェックすることでアクセシビリティを高めることができます。また、SEOとしてサイト評価の改善にもつながります。

代表的なツール

ツール名説明Alt & Meta viewerAltやMeta情報が含まれているかをチェックできるGoogle Chrome用のアドオン。Ranktracker無料で利用できる画像メタデータテストツールが利用可能。 

｢アクセシビリティ」を強化＆チェックするツール（Part2）
▶字幕生成および確認、▶音声ファイル文字越し、▶マウスジェスチャー支援、▶音声入力

2. 聴覚のアクセシビリティチェックツール
聴覚障害のあるユーザーや聴覚に困難を抱えるユーザーをサポートするツールです。視覚と同様に、高齢者になると聴覚が低下しますので、聴覚障害だけでなく全ての人に役立つアクセシビリティ強化ツールです。また、字幕生成や文字起こしといった用途で、ビジネスの現場でも広く用いられているツールが多くあります。

聴覚に関するアクセシビリティでデザイナーができることは限られていますが、キャプションや字幕の提供、トランスクリプトの提供、手話通訳の提供などコンテンツ制作を通じたサポートが可能です。以下のようなアクセシビリティ強化ツールがあることを知っておくことが大切です。

▶字幕生成および確認ツール

AIを活用した字幕生成ツールである「Vrew」動画コンテンツで字幕を生成したり、確認できるツールです。聴覚障害を持った方のアクセシビリティ向上に貢献するツールです。

代表的なツール

ツール名説明YouTube StudioYouTubeが提供する編集ツールで字幕を生成できる。Amaraオンライン上で字幕の制作と提供を行う非営利サービス。日本語対応もしている。Vrew韓国のITベンチャー企業であるVoyagerXが開発したAIを活用した字幕生成ツール。日本語対応もしている。▶音声ファイル文字越しツール

使い勝手の良いフリープランも提供されている文字起こしツールの「CLOVA Note」音声をテキスト化するツールです。Macで使える無料の文字起こしツールに関しては「Macユーザーにおすすめの無料で使える自動文字起こしアプリ 5選！【2024年版】」で詳しく解説していますので、そちらも参考にしてみてください。

代表的なツール

ツール名説明CLOVA NoteLINEヤフーが提供する自動文字起こしツール。フリープランも提供。RIMO Voice日本企業が開発した日本語に特化したAIによる自動文字起こしツール。notta日本企業が開発した自動文字起こしツール。フリープランも提供。Otter.ai世界的にも人気の高い自動文字起こしツール。日本語対応済み。3. 身体的アクセシビリティチェックツール
身体的な障害のあるユーザーや、身体に困難を抱えるユーザーをサポートするツールです。怪我や病気などで一時的に身体に困難を抱えることもありますので、こうしたアクセシビリティ強化も全ての人に役立つものになります。

▶マウスジェスチャー支援ツール

Google Chromeの拡張機能のマウスジェスチャー支援ツールである「crxMouse Chrome™ Gestures」マウスジェスチャー支援ツールは、ユーザーがドラッグ、スクロール、スワイプなどのジェスチャーをマウスやトラックパッドで行うことで、パソコン端末を操作できるようにするツールです。視覚障害のある方、上肢に障害がある方、高齢者など、キーボードでの操作が困難なユーザーが、より直感的にパソコンを操作することを可能にし、作業しやすいように支援するツールです。

代表的なツール

ツール名説明StrokeItフリーソフトとして提供されているマウスジェスチャー支援ツール。crxMouse Chrome™ GesturesGoogle Chromeで利用できるマウスジェスチャーツールのアドオンTouch gestures for WindowsWindowsに搭載されたマウスジェスチャーツール機能MouseGestureL.ahkWindows用のマウスジェスチャーツール。Multi-Touch ジェスチャMulti-Touchトラックパッドまたは Magic Mouseを使って、ジェスチャー操作を実行できるmacOSに標準搭載された機能。BetterTouchToolmacOSに標準搭載されたジェスチャー機能をカスタマイズできるツール。▶音声入力ツール

Appleの端末に搭載された音声入力ツール「siri」音声で操作するツールです。音声での入力によってキーボードやマウスの利用が困難なユーザーをサポートすることができます。音声による操作はAmazonのAlexa、Google Nestなどにも搭載されていますので、すでに多くの人が利用してる技術です。こうした音声入力に対応した製品・サービスを提供していくことも非常に大切です。

代表的なツール

ツール名説明SirimacOSやiOSなどAppleの端末に搭載された音声入力ツールWindowsの音声入力機能Windowsに搭載された音声入力機能Google Assistant音声でGoogleの家電やスマートデバイスを操作できるツールAmazon Alexa音声コマンドでAmazonのAlexaデバイスを操作できるツールDragon NaturallySpeaking音声でテキスト入力やコンピューターの操作を行うことができるツール 

｢アクセシビリティ」を強化＆チェックするツール（Part3）
▶リーダビリティ評価、▶コンテンツ読み上げ、▶Webアクセシビリティ、▶総合型

4. 認知的アクセシビリティチェックツール
認知に課題のあるユーザーの体験を改善するためのツール。高齢者の方や知的障害、発達障害を抱える方などのアクセシビリティを高めることができます。

▶リーダビリティ評価ツール

日本語の記事のリーダビリティーをチェックできる「jReadability Portal」文章の読みやすさを数値化・評価するツールです。文章を読みやすくしたり、漢字の使用率を低くすることで、小・中学生や知的障害者・発達障害者などの他に、在日外国人の方のアクセシビリティを強化することもできます。

代表的なツール

ツール名説明リーダビリティ測定ツール長岡技術科学大学のリーダビリティー・リサーチ・ラボが提供する日本語リーダビリティー測定ツール。jReadability Portal日本語の記事の読みやすさを6段階で評価し、リーダビリティーをチェックできるツール。リーディング チュウ太筑波大学の研究機関である日本語・日本事情遠隔教育拠点が提供する日本語学習支援システム。文章全体にルビを自動に生成する機能や日本語能力試験を基準にして単語の難易度を判定できるリーダビリティー測定ツールとしての機能も搭載。▶コンテンツ読み上げツール

日本語によるコンテンツ読み上げにも対応している「Natural Readers」Webサイトに記載されているテキストなどのコンテンツを読み上げるツールです。視覚に困難を抱える方だけでなく、発達障害の一種である読字障害（ディスレクシア）など、学習障害を抱える方にとっても、聴覚からの情報取得が可能になっていることが重要なサポートです。こうしたコンテンツ読み上げ機能を最大限に活かすため、デザイナーは文字や画像の配置など、視覚情報と聴覚情報の連携に配慮した設計を行うことが求められます。コンテンツ読み上げツールは、作成したコンテンツが意図した通りに読み上げられるかをチェックするのに役立ちます。

代表的なツール

ツール名説明Natural Reader全世界に1,000万人以上のユーザーがいるAIテキスト読み上げツール。コエステーション株式会社エーアイが開発・提供する国産のコンテンツ読み上げツール。macOSの音声読み上げ機能macOSに標準搭載された画面上のテキストを読み上げる機能5. Webアクセシビリティチェックツール
Webサイト全体のアクセシビリティをチェックするツールです。アクセシビリティは、誰もが平等にアクセスできるといった考え方だけでなく、Webサイト・Webアプリの性能を評価する文脈でもよく用いられる用語であることも、覚えておきましょう。

サイトのパフォーマンスを自動評価するツールの「PageSpeed Insights」Webアクセシビリティチェックツールは、Webアクセシビリティのパフォーマンスをスキャンして自動診断で指摘するツールです。Googleが提供する「PageSpeed Insights」をはじめとして多数のWebアクセシビリティチェックツールが提供されていますので、いくつかのツールでWebサイトのパフォーマンスをチェックしてみましょう。

代表的なツール

ツール名説明Google PageSpeed InsightsGoogleの提供するWebサイト読み込みスピード評価チェックツール。GTmetrix計測指標はGoogleと同様だが独自の指標でも評価してくれるWebアクセシビリティチェックツール。LighthouseGoogleが求めるページの品質の1要素としてアクセシビリティのチェックができるツール。6. 総合型アクセシビリティチェックツール

総務省が提供している総合型アクセシビリティチェックツール「miChecker」ここまで紹介したアクセシビリティに関する複数の課題に対応できるオールインワンツールも数多く提供されています。

代表的なツール

ツール名説明miChecker総務省が提供しているWindows用の総合型アクセシビリティチェックツールaXeWeb開発現場で用いられているアクセシビリティの自動テストライブラリー。キーボードナビゲーションチェックツールなど様々なアクセシビリティチェックが可能。WaveWebアクセシビリティに関して多機能なチェックが可能なGoogle Chromeのアドオン。Web Accessibility Annotation KitFigma用のWebアクセシビリティキット。Access GuideWebアクセシビリティに関する情報を網羅した海外の情報提供サイト。ここで挙げたツール以外にも、様々なアクセシビリティを強化するチェックツール、支援ツールが存在します。本記事で全てを網羅することは難しいので、ここで挙げたツールを参考に自身でもアクセシビリティ関連ツールをネットで調べてみましょう。

｢アクセシビリティ」チェックツールを活用していく上での注意

1.最新の規格に準拠したツールを選ぶ
WCAGなどのガイドラインは、定期的にアップデートされています。アクセシビリティに関連したツールは、最新のアクセシビリティ基準に準拠したツールを選ぶこと、またツールのバージョンアップにも注意を払い、最新の状態を保つことが重要になります。

2.複数のツールを組み合わせて活用する
一つのツールに頼らず、複数のツールを組み合わせてチェックを行うことで、より丁寧で正確なアクセシビリティチェックが可能になります。

3.人間によるチェックも合わせて行う
AI技術が発達し各チェック機能の精度も向上していますが、アクセシビリティに関するすべての問題を検出できるわけではありません。人間が使うという前提に立てば、必ず人間の五感によるマニュアルチェックを併用することが大切です。グラフィックデザイナーは、カーニングをピクセル単位で調整し視認性を高めるといった作業を目視で行っていると思いますが、こうした人間によるチェックや微調整も、アクセシビリティの強化では非常に重要なプロセスになります。

4.必要に応じて各種関連団体の情報提供などから知識をアップデートしておく
「アクセシビリティ」「ユニバーサルデザイン」「インクルーシブデザイン」といったキーワードと「協会」「NPO法人」「社団法人」「団体」といったキーワードを組み合わせると、かなりの数の関連団体がヒットします。また、各障害名でも同様に検索すると、関連団体を見つけることができます。こうした団体・組織では、最新の情報提供や勉強会といったイベントなどが開催されてますので、必要に応じて知識のアップデートに活用してみましょう。ごく一部ですが、以下に主な団体を紹介います。

アクセシビリティに関する関連団体

団体名説明一般社団法人 日本ウェブアクセシビリティ協会JISの示す要件に従って、Webアクセシビリティの持続性の確保、向上に取り組んでいる団体。ウェブアクセシビリティ推進協会Webアクセシビリティに関する国内標準（JIS X8341-3）を基盤として、アクセシビリティの高いウェブを広く普及・推進する活動を行う団体。ウェブアクセシビリティ基盤委員会JIS X 8341-3を改正している改正原案作成団体。ACCESSIBILITY.comアクセシビリティに関する情報を提供する海外サイトNPO法人メディア・ユニバーサル・デザイン協会内閣府が認証するメディアに関するユニバーサルデザインを推進する団体一般社団法人 ユニバーサルコミュニケーションデザイン協会ユニバーサルデザインを推進する団体国際ユニヴァーサルデザイン協議会国際的なユニバーサルデザインを推進する団体NPO法人カラーユニバーサルデザイン機構視覚アクセシビリティに関する情報提供などを行う団体。NPO法人 日本ユニバーサル・サウンドデザイン協会聴覚に関するユニバーサルデザインを推進する団体一般社団法人インクルーシブデザイン協会インクルーシブデザインを推進する団体特定非営利活動法人インクルーシブデザインネットワークインクルーシブデザインを推進する団体

まとめ

デザイン自体は生成AI機能などを搭載したクリエイティブツールなどの登場によって誰にでもできる作業になりつつあります。しかし、本記事で紹介したような、アクセシビリティという考え方に基づく、誰にとっても使いやすい製品やサービスを提供するための知識や技術というものは、プロのデザイナーしか実現することのできない領域だと思います。

私はデザイン科の卒業ですが、恩師から「デザインとファインアートは違う。デザインは社会活動の上に成り立っているものなので、自己満足ではいけない」といった主旨のことを繰り返し教えられました。私自身はデザイナーにはなりませんでしたが、その言葉は今も深く心に刻ままれています。アクセシビリティに限らず、すべての人に使いやすい機能性と美しさを兼ね備えたテザインを提供するという考え方は、先達のデザイナーから脈々と受け継がれているデザインの本質なのでしょう。

デザイナーは、クリエイティブな職業であるとともに、創作する製品やサービスによって、人々の生活を豊かにし、社会的な課題解決の一端を担うことができる稀有な職業であると思います。アクセシビリティに関するトピックは、そうしたデザイナーが担う社会貢献の中でも特に重要な知識や技術だと思いますので、本記事が一助になりますと幸いです。