Sparkle Design

アクセシビリティ

アクセシビリティ カバー

アクセシビリティの概要

アクセシビリティとは

よくアクセシビリティは「ユーザビリティ」と合わせて用いられます。両者の違いとはなんでしょうか。日本産業規格の『JIS Z 8521:2020 人間工学 ー 人とシステムとのインタラクション ー ユーザビリティの定義及び概念』によると両者は以下のように定義されています。

ユーザビリティ
特定のユーザーが特定の利用状況において、システム、製品又はサービスを利用する際に、効果、効率及び満足を伴って特定の目標を達成する度合い
アクセシビリティ
製品、システム、サービス、環境及び施設が、特定の利用状況において特定の目標を達成するために、ユーザーの多様なニーズ、特性及び能力で使える度合い

ユーザビリティは「特定のユーザー視点での使いやすさの度合い」を表す言葉であり、アクセシビリティは「ユーザーが多様なニーズのもとで使える度合い」を表す言葉です。これらの関係性を図示すると下記の画像のように表現できます。

『見えにくい、読みにくい「困った!」を解決するデザイン』P.23より引用(一部改変)した図。
出典:間嶋 沙知『見えにくい、読みにくい「困った!」を解決するデザイン』P.23を元に作成

たとえアクセス対象が同じであっても、上記の画像のようにアクセスができる度合いはユーザーによって異なります。

「電車に乗って移動する」という目的を達成するためには、駅に行く、切符を買う、改札を通る、ホームへ移動する、電車に乗るといった行動が必要になります。しかし、「車椅子の利用者」の場合は「階段やエスカレータでホームへ移動」するのは困難かもしれませんし、目が見えない場合は「券売機での切符の購入」に支障をきたす可能性があります。

これらのような場合に、「車椅子用の昇降機付き階段」があったら、券売機に点字や音声によるナビゲーションが用意されていたら、利用者はホームや発券機に対して簡単にアクセスできるようになるでしょう。

私たちは様々な工夫やデザインによって、あらゆる物や情報、場所をアクセシブルにし、あらゆる利用者に機会を提供することができます。

ソフトウェアも同様に、目の見えない利用者や特定の色を認識できない利用者など、多様な特性や能力を持つユーザーが利用する存在です。だからこそ私たちは多くの利用者の様々なニーズを満たし、誰もがソフトウェアを使うことができるように提供する必要があるのです。

アクセシビリティへの取り組み方

アクセシビリティへの取り組みを行う上で欠かせないのがウェブコンテンツのためのアクセシビリティガイドラインである「WCAG」です。

WCAG (Web Content Accessibility Guidelines) は、ウェブページやウェブアプリケーションのアクセシビリティを確保・維持・向上させるためのガイドラインです。個人・組織・公共機関に向けてウェブコンテンツのアクセシビリティに関する標準規格を提供することで、あらゆる人々がアクセスできるウェブコンテンツを増やすことを目的としています。

ソフトウェア開発におけるどのロールにおいても、WCAGがアクセシビリティへ取り組む上での基準となります。

WCAGを活用してアクセシビリティ向上に取り組む際はウェブアクセシビリティ基盤委員会も提唱しているJIS X 8341-3の利用プロセスに沿って実践するのが効果的です。

このプロセスは大規模なウェブコンテンツのアクセシビリティ向上に取り組むことを踏まえた上で定義されていますが、デザイナーがコンポーネント単位やページ単位で制作を行う際にも有効的です。

WAICによるJIS X 8341-3の利用プロセスのイメージを元に作成した図。
出典:WAICによるJIS X 8341-3の利用プロセスのイメージを元に作成

1. 方針

はじめにアクセシビリティの対応方針を定義することが重要です。

まずは以下2点の方針を定義し、アクセシビリティに取り組むための目当てを定めます。

  • 対象範囲
    • 取り組む対象のページやコンポーネントを具体的に定めます
  • 適合レベル
    • 3つの適合レベル (レベルA、レベルAA、レベルAAA) から、どの適合レベルを目標とするか示します
Sparke UIでは以下の方針に沿ってアクセシビリティへ取り組みます。
Sparkle Design アクセシビリティ方針

2. 制作

策定した方針とWCAGに則ってウェブコンテンツの制作を行います。

とはいえ、WCAGのすべての本文を読みながらアクセシビリティ対応をするのはとても労力を要する作業です。はじめはクイックリファレンスを使用し、目標に置いた適合レベルなどを用いてガイドラインにフィルタリングをかけながら本当に必要な達成基準を参照してデザインに取り組むとよいでしょう。

クイックリファレンスだけでは理解が不十分な場合は解説書にて達成基準が策定された意図や事例を並行して参照することも効果的です。

How to Meet WCAG (Quickref Reference)www.w3.org
WCAG 2.2 解説書 | WAI | W3Cwaic.jp

3. 試験

制作したコンテンツが達成基準を満たしているか試験を行います。ウェブアクセシビリティ基盤委員会によって提供されている試験実施ガイドライン(達成基準チェックリストの例)を参考に、対象範囲に対して試験を行うことが望ましいです。

WAICによる達成基準チェックリストの例を元に作成した図。
出典:WAICによる達成基準チェックリストの例を元に作成

一連のプロセスが完了したら対象範囲の拡張や適合レベルのアップデートを行い、更にアクセシビリティを確保するための活動を行います。

ウェブコンテンツは項目の新規追加や更新によって変化し得るものであり、たとえコンテンツが変化しなくとも、ウェブそのものや利用者の変化によって、アクセシビリティ方針の妥当性・求められる品質が変わり得るため、継続的に取り組む必要があります。

Sparkle Design アクセシビリティ方針

Sparkle Designは「ハートを揺さぶるデザインを世界に増やす」ことの実現を目指しています。

「Sparkle Design」を通じてより多くのデザインをより良い物にするためには、Sparkle Designを用いてデザインしたデザイン成果物をスムーズに利用できることが不可欠です。

この環境を実現するためにSparkle Designではウェブアクセシビリティの確保・維持・向上に継続的に取り組みます。またその指標として、日本産業規格JIS X 8341-3:2016「高齢者・障害者等配慮設計指針 情報通信における機器、ソフトウェア、及びサービス-第3部:ウェブコンテンツ」を活用します。

対象範囲

  • Sparkle Design Guidelines
  • Sparkle Design Assets
    • ライブラリ
    • プラグイン

目標とする適合レベル

  • JIS X 8341-3:2016 (WCAG 2.0) のレベル AAに準拠する。
  • 将来的に準拠することが望ましい基準
    • レベルAAAの一部達成基準
      • 「2.3.2: 3回の閃光」や「2.4.8: 現在位置」など
    • WCAG 2.2 レベル AAの達成基準
本仕様書における「準拠」という表記は、情報通信アクセス協議会ウェブアクセシビリティ基盤委員会「ウェブコンテンツのJISX8341-3:2016対応度表記ガイドライン2016年 3月版」で定められた表記による。

達成期限

  • 正式版のリリース日から1年以内の達成を目処に協議

アウトプットの例

参考資料

HomeAccessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).www.w3.org
ウェブアクセシビリティ基盤委員会 | Web Accessibility Infrastructure Committee (WAIC)Web Accessibility Infrastructure Committeewaic.jp
ウェブアクセシビリティ導入ガイドブック|デジタル庁デジタル庁は、デジタル社会形成の司令塔として、未来志向のDX(デジタル・トランスフォーメーション)を大胆に推進し、デジタル時代の官民のインフラを一気呵成に作り上げることを目指します。www.digital.go.jp
【WCAG 2.2対応】デザイナーのためのWCAGの歩き方|Goodpatch Blog グッドパッチブログアクセシビリティへの理解を深める上で欠かせないのが、ウェブコンテンツのためのガイドラインである「WCAG」です。この記事では、デザイナーに向けてWCAGを理解して読めるようになること、そして、WCAGを活用してコンテンツ制作に取り組めるようになることを目的にWCAGの解説をしています。goodpatch.com
Webアプリケーションアクセシビリティ | 技術評論社アクセシビリティとは「利用可能な状況の幅広さ」のこと。より多くの人が、より多くの環境で、より多くの状態で利用できることです。もちろんそこには視覚・上肢・認知などに障害があるケースも含みます。日々繰り返し利用するWebアプリケーションにこそ、アクセシビリティが求められます。 Webサイトに比べて、多くのインタラクションを行うWebアプリケーションでは、アクセシビリティの確保はやや難易度が高いものです。特に既存のWebアプリケーションは複合的な課題を抱えていることが多く、教科書どおりの方法では必ずしも改善できません。 本書では、Webアクセシビリティの基礎である「HTMLとWAI-ARIA」を解説したうえで、Webアプリケーションの要である「フォーム」、色やテキストなど「UIデザインの基本」、モーダルダイアログや通知など「少し複雑なUIパターン」の3分野に分けて、よくある事例を取り上げながら、現実的で段階的な改善方法を紹介します。 さらには、デザインシステムの活用や組織での推進法など、アクセシビリティの取り組みを定着・推進・向上させるためのノウハウも詳説します。gihyo.jp
トップ | 株式会社ボーンデジタルwww.borndigital.co.jp
小さな気づきや違和感があればお気軽に教えてください。
フィードバック
Chat illustration