こんにちは。エキサイト株式会社のあはれんです。
エキサイトホールディングス2023アドベントカレンダー 22日目をお届けします。
「法律が改正されるから、サイトのウェブアクセシビリティを気にしたほうがいい」というのを風の便りに聞きました。
私はこれまで「ウェブアクセシビリティ」という言葉を耳にしたことはある程度でしたが、具体的な内容については理解が不十分でした。
そこで調査を行いました。 以下にウェブアクセシビリティに関する知見を共有いたします。
ウェブアクセシビリティてなに？
ウェブアクセシビリティとは、利用者の属性(障がいの有無、年齢、利用環境)に関わらず、すべての人がウェブサイトを利用できることを意味しています。
ウェブアクセシビリティは、障がい者の方向けの対応だけではありません。
荷物を持っており手が塞がっている状態でもウェブサイトを利用可能にすることも含まれます。
ウェブアクセシビリティは努力義務
令和3年（2021年）に、障害者差別解消法（障害を理由とする差別の解消の推進に関する法律）が改正され、国や地方公共団体などに義務付けられている合理的配慮の提供が、民間の事業者も義務化されることになり、令和6年（2024年）4月1日に施行されます。
:
その合理的配慮を的確に行うため、環境の整備が努力義務となっており、ウェブサイトの場合ではJIS X 8341-3:2016に準拠したウェブサイトを作り、ウェブアクセシビリティを確保することがこれに当たります。
障害者差別解消法は改正されますが、ウェブアクセシビリティは以前同様に努力義務のままです。
努力義務ではありますが、提供するウェブサイトがすべての人に使ってもらえる状態が理想ですので、ウェブアクセシビリティの確保は重要なことです。
ウェブアクセシビリティを確保するには、 JIS X 8341-3:2016 に準拠したウェブサイトを制作する必要があるとのことですが、 JIS X 8341-3:2016 とはなんでしょうか？
ウェブアクセシビリティのガイドライン「JIS X 8341-3:2016」とは？
「JIS X 8341-3:2016」の正式名称は、『高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第3部：ウェブコンテンツ』 と言います。
「JIS X 8341-3:2016」は、ウェブアクセシビリティの確保を目的して、ウェブサイトが満たすべきアクセシビリティの品質基準として、「レベルA」「レベルAA」「レベルAAA」という3つのレベルの達成基準が定められています。
例えば、レベルA には「達成基準 2.4.2 ページタイトル」があり、以下のことが書いてあります。
達成基準： ページタイトル: ウェブページには、主題又は目的を説明したタイトルがある。
意図：各ウェブページにその内容を示すページタイトルを付けることによって利用者がコンテンツを見つけやすくするため
事例：HTML で制作したウェブページの内容を示したタイトルが、ユーザエージェントのタイトルバーに表示されるようにマークアップする
他にはどのような達成基準があるか知りたい場合は、レベルA、レベルAAの達成基準 早見表がおすすめです。 以下のURLを参照ください。
JIS X 8341-3:2016 達成基準 早見表（レベルA & AA）
ウェブアクセシビリティに対応したウェブサイトにするにはどうすればいいの？
「JIS X 8341-3:2016」で、ウェブアクセシビリティの達成基準が定義されているので、この達成基準を満たしたウェブサイトを用意すればいいのです。
と、言うのは簡単ですが、実際には基準を達成させるのは難しいです。 ですので、ウェブアクセシビリティを高めるプロセスとして、以下の流れが推奨されています。
- ウェブアクセシビリティの方針策定
- アクセシブルなウェブコンテンツの制作
- 試験の実施と結果の公開
1. ウェブアクセシビリティの方針策定
「適用範囲」「目標とする適合レベル及び対応度」を策定します。 実際に公開しているサイトを見てみると、どのようなものかイメージがつきやすいと思います。
2. アクセシブルなウェブコンテンツの制作
ウェブアクセシビリティ方針において定めた目標を達成できるように、ウェブコンテンツを制作します。 制作すると言っても、まず達成基準を知る必要があります。それには以下の解説集が参考になります。
また、達成すべきことはわかっても、実装する方法はわからないよ。というときには、以下の達成方法集が参考できます。
3. 試験の実施と結果の公開
制作したコンテンツが、目標達成できているのか試験し、その結果を公開します。 ウェブアクセシビリティの試験のチェックツールは存在しますが、チェックツールで確認できるのは達成基準の2〜3割程度だそうです。 試験は、必ず人が目視による確認や操作が必要とされています。
詳細な試験の進め方は、以下のサイトが参考になります。
また、実際に公開しているサイトを見てみると、どのようなものかイメージがつきやすいと思います。
うちのサイトて、ウェブアクセシビリティ確保できていますか？
ウェブアクセシビリティや、ウェブアクセシビリティに対応したウェブサイト制作のプロセスについて知ることはできました。
試しに、弊社のサービスがウェブアクセシビリティを確保できているのか簡単にチェックしてみたいと思います。
ツールでのチェック
ウェブアクセシビリティでのチェックツールはいくつかありますが、 今回は、Chrome のLighthouseを利用しました。
Lighthouseの使い方は以下のページを参考ください。
以下が検査結果のページになります。
結果は90点で、指摘項目は以下になります。
- 背景色と前景色のコントラスト比が不十分です。
- リンクには識別可能な名前がありません
- 画像要素には、冗長テキストである [alt] 属性があります。
手動でのチェック
今回は、以下の達成基準についてチェックします。
キーボード操作だけで、サービスのすべての機能にアクセスすることができるようにする
・キーボード操作時に、フォーカスインジケーター（選択中の要素を枠線等で囲んで示すこと）が表示されるようにしましょう
・キーボード操作時に、フォーカス・入力がキャンセルされたり、フォーカス・入力した瞬間に何かが勝手に動作することがないようにしましょう
以下の動画で、Tabキーでページを巡回しEnterキーでリンク移動操作をすることを確認できました。
以下の動画では、カウンセラーリストのフォーカスインジケーターが見えづらくなっていることが確認されました。
まとめ
ウェブサイトの提供者として、広く多くの人々に利用していただきたいと考えています。 そのためには、ウェブアクセシビリティの確保が非常に重要です。
今回、ウェブアクセシビリティのガイドライン「JIS X 8341-3:2016」を調べ、 普段の開発においてアクセシビリティに十分な意識が行き届いていなかったことに気づきました。
知識不足も一因でしたが、目が使わずウェブサイトを見るなどの通常よりアクセスしづらい状況での利用ケースを想像できていませんでした。
ウェブアクセシビリティを向上させるには、既存のガイドラインを学びつつ、 様々なユーザーの利用ケースを想像し、実際にアクセスが容易かどうかを検証しながら開発していく必要があると感じました。
すぐにウェブアクセシビリティを達成することは難しいかもしれませんが、学びながら着実に改善を進めていきたいと考えています。
ウェブアクセシビリティについて学ぶ際に参考になるサイトとして、以下の2つをご紹介いたします。是非ご覧いただければと思います。
