アクセシビリティとは 日本語対応の規格・チェックリスト・具体例を解説

アクセシビリティとは 日本語対応の規格・チェックリスト・具体例を解説

  • ツギノジダイ
  • 更新日:2021/05/03
No image

アクセシビリティのチェックリスト(freeeのサイトから引用)

アクセシビリティとは、年齢、性別、利用環境の違いや障害の有無などに関係なく、サービスを利用しやすい状態を指します。日本語対応のJIS規格のほか、クラウド会計ソフトを手がけるfreeeが作成した最新版のガイドラインやチェックリスト、具体例をもとにWEBサービス上でどんなことを実現すればよいかを紹介します。

アクセシビリティとは

アクセシビリティとは、年齢、性別、利用環境、障害の有無、その他様々な社会的属性などの違いに関係なく、所要時間、身体的負荷、精神的ストレスなどが無い状態で利用できることを指します。

そのなかでも、WEB(ウェブ)アクセシビリティとは、WEBサイトやアプリで提供されている情報やサービスの利用しやすさを意味します。

ユーザビリティとの違い

ユーザビリティは、WEBサービスの使いやすさを表す言葉です。ユーザビリティとの違いについて、ウェブアクセシビリティ基盤委員会の公式サイトでは「アクセシビリティはユーザビリティより幅広い利用状況、多様な利用者を前提とします」と説明しています。

アクセシビリティの具体例

アクセシビリティの一例を紹介します。会計ソフト「freee」では、入金のプラス、出金のマイナスを色分けで表示する機能があります。

しかし、色覚異常(色覚特性、色覚多様性とも呼ぶ)を持つスタッフにテストしてもらったところ、赤と青のデザインが見分けにくいことがわかりました。

No image

リニューアル前のデザイン(上)と色覚異常の人の見え方。色の違いがわかりにくい

そこで、色覚異常をもつ人でも見分けやすい色にリニューアルしました。

No image

リニューアル後のデザイン(上)と色覚異常の場合の見え方の例。色の違いが判別しやすくなった

このほかにも、国の各省庁や自治体の公式サイトでもアクセシビリティへの対応状況を公表しているところが多くみられ、その対応状況をサイト上で公表しています。

アクセシビリティを担保する規格「JIS X 8341-3」

アクセシビリティに取り組むときに質を担保するのが、JIS規格「JIS X 8341-3」です。2016年以降、ウェブ技術の標準化をめざす団体「W3C」のガイドライン、国際規格のISOとも統一されています。

JIS X 8341-3は、日本規格協会で購入できます。日本産業標準調査会のサイトの「JIS検索」から閲覧することもできます。ここからは印刷・購入はできません。

JIS規格には3つのレベルと61の基準

JIS規格には61の基準があり、その達成状況で3つのレベルに分かれています。たとえば、「レベルAA準拠」と宣言するには、レベルAの25の基準と、レベルAAの13の基準の達成が必要です。

基準を満たすには、たとえば、ページの内容がわかるページタイトルを記述する、文字色と背景色のコントラストを確保するなどさまざまな対応が必要です。

レベルA(25の基準)

アクセシビリティの確保に最低限の基準です。

レベルAA(13の基準)

公的機関のサイトで達成するよう推奨されている基準です。

レベルAAA(23の基準)

発展的な基準です。

freeeはガイドラインとチェックリストを公開

これとは別に、freeeは独自のアクセシビリティガイドラインチェックリストを無償で公開しました。

No image

キャンペーンサイトをアクセシビリティチェックリストを使ってチェックしている風景(freee提供)

抽象的で専門的な内容が多いWC3のガイドラインをもとに、プロダクト開発やサイト製作の現場で使いやすいように具体的な表現に落とし込んでいます。

freeeの広報担当者は「まずはfreee社内で活用することを目的としていましたが、ガイドラインを公開することで他企業のプロダクト開発やサイト制作にかかわる方々の参考になればと思い一般公開しています」と説明しています。

JIS規格との整合性については次のように回答しています。

本ガイドラインの全項目を満たすことでJIS X 8341-3:2016にも適合レベルAAで準拠(加えてレベルAAAで一部準拠)することになります。ただし本ガイドラインでは優先度を変更しているため、JISの適合レベルAに準拠するには「ガイドラインの優先度とWCAG 2.1の適合レベル」をもとに読み替えが必要です。

チェックリストの使用方法

チェックリストは、上記リンク先のGoogle Drive上にあるGoogleスプレッドシートをコピーして利用できます。スプレッドシートの1枚目に、簡単な使い方や更新履歴が書かれているので、参考にしてください。

杉本崇

この記事をお届けした
グノシーの最新ニュース情報を、

でも最新ニュース情報をお届けしています。
  • このエントリーをはてなブックマークに追加