1. home
  2. 用語集一覧

Glossary

border

ウェブアクセシビリティ

ウェブアクセシビリティとは？

ウェブアクセシビリティ（Web Accessibility）とは、すべての人が平等にウェブサービスや情報にアクセスし、利用できるようにするための取り組みです。特に、視覚や聴覚、運動機能に制約がある方々にも使いやすい環境を提供することが重要です。特に、医療や健康関連のデジタルサービスにおいては、高齢者や疾患を抱えた患者も利用することを考えると、ウェブアクセシビリティへの対応は重要であると考えられます。

 

WCAG（Web Content Accessibility Guidelines）

アクセシビリティに取り組む時によく参照されるのがWeb Content Accessibility Guidelinesです。これはWCAGと略し、ダブリューシーエージーと読むほか、ウィーキャグと発音したりします。ウェブコンテンツやアプリケーションがすべてのユーザー、特に障害を持つ人にとって利用可能であることを保証するための国際的なガイドラインです。 これにより、アクセシビリティ基準に準拠したアプリやウェブサイトが開発されます。

最新バージョンであるWCAG 2.2は2023年10月に公開されました。このWCAG2.2が対象としているのは、Web技術を使ったコンテンツすべてとなります。つまり、WebサイトやWebアプリケーション、Nativeアプリケーション上で表示しているWebページや、HTML製のヘルプ、キオスク端末のインタフェース、電子書籍フォーマットのEPUB、PDFなどもすべて対象となります。また一般公開の有無も問わず、いち消費者としてアクセスできるWebサイトやWebサービスだけでなく、公開していない管理画面や業務アプリケーションなども対象となります。

WCAG2.2は、4つの原則、その原則を分解した個別のガイドライン、それに対して取り組むべきことを示した達成基準、という構成になっています。このうち原則は比較的わかりやすく書かれています。まず４つの原則があります。

  1. 知覚可能（Perceivable）: 情報及びユーザインタフェース コンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければならない。
    • 例: VoiceOver(iOS)やTalkBack(Android)を利用して、視覚障害者でもテキストやボタンの内容が音声で読み上げられるように設 計する。
  2. 操作可能（Operable）: ユーザインタフェース コンポーネント及びナビゲーションは操作可能でなければならない。
    • 例: ジェスチャーや音声コントロールを使用して、障害を持つユーザーでもアプリ内を簡単に操作できるようにする。
  3. 理解可能（Understandable）: 情報及びユーザインタフェースの操作は理解可能でなければならない。
    • 例: フォームエラーや通知が音声でわかりやすく説明され、ユーザーが適切に対応できるようにする。
  4. 堅牢（Robust）: コンテンツは、支援技術を含む様々なユーザエージェントが確実に解釈できるように十分に堅牢 (robust) でなければならない。
    • 例: アプリがOSやデバイスの更新に合わせてアクセシビリティを維持できる設計を行う。

 

カラーアクセシビリティ

カラーアクセシビリティ（Color Accessibility）とは、色覚に異常のあるユーザーがデジタルコンテンツやアプリケーションを問題なく利用できるように、色の使い方を最適化する取り組みを指します。特にUIデザインにおいては、色だけに依存しない情報提供や、十分なコントラストを確保することが重要となります。

色覚異常の種類

人間の目の内部には網膜と呼ばれる部分があります。網膜にはスクリーンのように、瞳孔や水晶体（レンズ）を通った光の像が投影されます。この網膜には桿体（かんたい）細胞と錐体（すいたい）細胞とうい２種類の視細胞があり、桿体細胞は光の明暗、形や動きを捉え、錐体細胞は色を知覚する細胞です。さらにこの錐体細胞には3種類の錐体細胞（L錐体、M錐体、S錐体）があり、それぞれが異なる波長の光に反応して色を認識します。しかし、これらの錐体細胞に異常がある場合、色覚に異常が生じます。主な色覚異常の種類は以下の通りとなります。

  • 1型2色覚（Protanopia）: 赤色が見えにくい。
  • 2型2色覚（Deuteranopia）: 緑色が見えにくい。
  • 3型2色覚（Tritanopia）: 青色が見えにくい。

カラーアクセシビリティにおける具体的な配慮

色覚異常を持つユーザーに配慮するため、次のようなデザイン上の工夫が必要となります。

  • 色だけに頼らない情報伝達：例えば、エラーメッセージを赤色だけで表示するのではなく、アイコンやテキストを併用する。
  • 十分なコントラスト：色覚異常のない人でも、低コントラストのUIは見づらいことがあるため、背景色とテキストの間に十分なコントラストを確保する。
  • 色覚異常シミュレーション：デザインプロセスにおいて、色覚異常シミュレーションツールを使用し、問題がないか確認する。

コントラスト基準

WCAG 2.2には3つの適合レベル（A、AA、AAA）があり、それぞれユーザーの利用しやすさに応じた達成基準を定めています。

  • レベルA（最低限の要件）
  • レベルAA（多くの法律で推奨される標準レベル）
  • レベルAAA（最高レベルの要件）

WCAG 2.2では、テキストと背景色のコントラスト比が定められており、次の基準に従うことが推奨されます：

  • 通常のテキスト：最低でもコントラスト比 4.5:1（レベルAA）
  • 大きなテキスト（18pt以上、または14ptで太字）：最低でもコントラスト比 3:1（レベルAA）
  • AAA基準：通常のテキストは 7:1、大きなテキストは 4.5:1 のコントラスト比が求められます。

このコントラスト基準を満たすことで、視覚に制約のある利用者でも、より快適にコンテンツを利用できるようになります。色覚異常を持つユーザー向けには、色だけに依存しない情報伝達や十分なコントラストの確保が重要になります。

医療ヘルスケア領域でのカラーアクセシビリティの重要性

特に医療・ヘルスケア関連のアプリケーションでは、先天的な色覚異常の利用者のみではなく、後天的な色覚異常の方も考慮に入れていく必要があります。特に色覚の変化には加齢をと伴うものがあります。その１つに水晶体の黄変化があり、これにより短波長側（青色側）での吸収が多くなり、水晶体の透過率が低下します。短波長側の透過率は、70歳代では20歳代に比べると半分程度になることから、高齢者の利用者が多い医療・ヘルスケアアプリにおいては色覚異常に対応したデザインが重要になってきます。

また日常生活に不自由をきたすほど視覚的機能が低い状態をロービジョンといいます。ロービジョンになる原因には、角膜から大脳視覚野までの疾病が重症化した場合や、事故などで視神経が損傷を受け視覚障害が生じた場合があります。疾病の例では、角膜白斑（角膜が虹彩や瞳孔が確認できないほど白濁化する）、白内障（水晶体が白濁化して眩しさ、視力低下などの症状が現れる）、緑内障（眼圧が上昇し視野欠損となる）などがあります。

PHR（Personal Health Record）アプリでは、病歴や投薬情報を管理し、生活者・患者と医療機関や薬局などが医療ヘルスケア情報を共有するための重要な役割を果たしており、また、このようなアプリは、疾患を抱えた患者や、高齢者などが使用するケースも多いと考えられます。よってカラー・アクセシビリティだけでなく、他の視覚的な要素や音声ガイドなども組み合わせて、すべてのユーザーが安心して利用できる環境を提供する必要があります。

 

アクセシビリティにおける具体的な機能

カラー・アクセシビリティはUIデザインの工夫で対応をしていくことができますが、視覚障がい者や弱視の方などに対しては、スマホのOS機能として、以下のような支援機能が備わっています。

  • VoiceOver（iOSの音声読み上げ機能）: 視覚障がい者や弱視の方がiPhoneやiPadを操作できるように、画面の要素を音声で読み上げます。ボタンやテキストの内容を音声で伝えることで、視覚に頼らず操作が可能です。
  • TalkBack（Androidの音声読み上げ機能）: TalkBackはAndroidデバイスのスクリーンリーダー機能で、iOSのVoiceOverに相当します。TalkBackを利用することで、視覚障がい者や弱視の方がスマートフォンを操作する際に、画面上の情報や操作のガイドが音声で提供されます。
  • キーボードナビゲーション: 障がいのある方がマウスを使わず、キーボードだけでウェブページやアプリを操作できるよう、ナビゲーションが最適化されています。これは特に運動機能に制約がある方にとって重要です。
  • 色覚バリアフリー対応: 色覚に障がいのある方でも、視覚情報を正しく認識できるよう、色のコントラストや配色が調整されています。また、視覚に頼らない情報伝達（テキストやアイコン）を併用しています。

 

メディエイドのアクセシビリティへの取り組み

メディエイドは、アクセシビリティに対応したデザインシステムを導入し、プロダクトサービスに適用していく予定です。特に、PHRアプリ「LiNQ-Palette｜リンクパレット」では、VoiceOverやTalkBackなどのスクリーンリーダー対応をはじめ、色覚バリアフリーを意識したカラーアクセシビリティの反映を順次行ってまいります。

色覚バリアフリー対応については、デザインシステムに反映し、配色やコントラストのガイドラインを設定することで、全てのユーザーが快適にサービスを利用できる環境を目指しています。

将来的には、音声入力や画面拡大機能などのアクセシビリティ機能も追加していく予定です。メディエイドは、誰もが平等にデジタルヘルスケアを利用できる社会の実現を目指し、アクセシビリティ対応を強化していきます。

メディエイドのPHRアプリ開発等にご興味をお持ちいただきましたら、以下からお気軽にお問い合わせください。

PHRアプリ開発等のご相談・お問い合わせはこちら