ゼスト Tech Blog

ゼストは「護りたい。その想いを護る。」をミッションに、在宅医療・介護業界向けのSaaSを開発しています。

ウェブアクセシビリティについて学ぶ

ウェブアクセシビリティについて学ぶ-JIS X 8341-3とは?- こんにちは、 株式会社ゼストでプロダクトデザインを担当している池田です。

2024年4月1日に民間事業者の合理的配慮が義務化になり、約半年。 ウェブアクセシビリティについて知っておかないとと思い調べ、自分なりにまとめてみました。

民間事業者の合理的配慮とは

まず、「民間事業者の合理的配慮」とは何か? ひと言で言うと、障がいを持つ方にとって不便なことが何かを知り、可能な範囲でそれに対応する事です。

では、ウェブサイトで対応すべきこと、対応可能なことはなんでしょう? それは、「JIS X 8341-3:2016に準拠したウェブサイトを作り、ウェブアクセシビリティを確保すること。」です。

JIS X 8341-3:2016とは

正式名称は「高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第 3部:ウェブコンテンツ」と言います。

元々、JIS X 8341-3は2004年に一般的なアクセシビリティの課題と、 日本語固有の課題を解消するための要件を盛り込んだ形で作成されました。 2010年にWCAG 2.0の内容を取り込む形で大きく改定され、 さらに2016年に改訂されWCAG 2.0とISO/IEC 40500:2012とJIS X 8341-3:2016は同じ内容となりました。

ここまでを見ると、単純にJIS X 8341-3:2016に準拠したウェブサイトを作ればいいのか!となるのですが、 実際はJIS X 8341-3:2016単体では完結しておらず、WCAG 2.0の理解も必要なのです。

なぜか?

それは、JIS X 8341-3:2016には本文しかなく、解説書や達成方法はWCAG 2.0を理解する必要があるのです。 例えば、JIS X 8341-3の「1.1 代替テキストのガイドライン」に準拠するには、 WCAG 2.0の解説書と照らし合わせ、具体的な内容を理解し、 記載されている達成方法がなされているかを確認する必要があります。

ウェブアクセシビリティの確認方法

では、実際にはどのように確認、実装していくのがいいのかというと、大きく2つ方法になりそうです。

1.「試験実施ガイドライン」を参照しながら確認

試験実施ガイドライン」は、WAICというJIS X 8341-3改正原案作成メンバーや関連企業、関連省庁、ウェブの利用者から構成されているウェブアクセシビリティ基盤委員会が作成したガイドラインになります。 後述している、アクセシビリティサポーテッドテスト体験会で行うテストを、検証したいサイトで検証する形になるかと思います。

2.「miChecker」で確認

miChecker」は総務省が開発し、提供しているアクセシビリティ評価ツールになります。 「miChecker」の動作環境は以下になります。(令和6年3月29日時点)

  • OS:Windows 10、11
  • ブラウザ:Microsoft Edge
  • メモリ:4GB以上
  • ハードディスク空き容量:250MB以上(導入先フォルダにユーザーの書き込み権限が必要です)
  • Java実行環境:Java 64bit版 Version 17

Macで使用できないのが残念です。。

WAICが主催するアクセシビリティサポーテッド(AS)テスト体験会

JIS X 8341-3やらWCAG 2.0やら、具体的に何をすればいいの? と思い、色々調べていたら「アクセシビリティサポーテッド(AS)テスト体験会」というものが開催されていることを知り、参加してみました。

この会は、WCAG 2.0の達成基準と達成方法が、現存する支援技術やブラウザ等で実際に検証可能かどうかを確認する会、 ということで、実際に手順に沿って試してみるという会でした。 具体的には、WAICで作成されたサイトにアクセスし、GitHubで管理されたテスト項目を手順に沿って実行し、 期待される結果になっているかを、実際に自分のブラウザで視覚と音声にて確認し、その結果をWAICに送るというものでした。

GitHubに記載されているテストケースは、テストの目的や手順がとても詳細に書かれており、 テスト体験することで、実際に自分のサイトでどのようにテストしていけばいいのかわかるようになっています。

こちらのテストかいは定期的に行われているようなので、ご興味のある方は参加してみてはいかがでしょう? ウェブアクセシビリティ基盤委員会のサイトから確認できます。

まとめ

デザイナーとしてできることは、「知覚可能」の中にあるコントラストの確認や 「理解可能」にあるフォームやエラー、ナビゲーションにおける画面仕様の定義をきちんとしておくことだなと感じました。

ゼストのデザインチームではコンポーネントの定義に加え、細かく画面構造、画面仕様を作成、定義することで、 開発チームとの齟齬がないように進めるようにしています。 今後も、よりよいサービスの提供ができるよう、アクセシビリティの向上を図っていきたいと思います。

備忘録として、ウェブアクセシビリティってなんだっけ?と思った時によく見返していたサイトを以下に記しておきます。

ウェブアクセシビリティの概要を知りたい時

政府広報オンラインウェブアクセシビリティとは? 分かりやすくゼロから解説!

デジタル庁:ウェブアクセシビリティ導入ガイドブック(PDF)

ウェブアクセシビリティ基盤委員会

ウェブアクセシビリティの検証を始めたい時

JIS X 8341-3:2016 達成基準 早見表(レベルA & AA)

JIS X 8341-3:2016試験実施ガイドライン