今回の記事は、ウェブアクセシビリティの基本についてしっかりと解説した記事になっています。
以前も似たテーマで記事を執筆しましたが、今回はさらに深く掘り下げています。
ですので、ウェブ制作関連のお仕事、お勉強をされている方にぜひ読んでいただきたい内容となっています。
難しそうな法律やガイドラインの話も出てきますが、すべてを覚える必要はありません。
現段階では「ウェブアクセシビリティってこういうものなんだ」と感じていただき、興味を持っていただければ嬉しいです。
今回は基本の概念に焦点を当てていますが、ゆくゆくは実装例やコードも紹介する予定です。
1.ウェブアクセシビリティの基本
1-1.ウェブアクセシビリティとは
ウェブアクセシビリティとは、状況、環境に関わらずすべての人々にとってアクセス可能で使いやすいウェブを実現するための取り組みのことです。
よくある誤解として「高齢者、障がい者への配慮＝ウェブアクセシビリティ」というものがありますが、これは正確ではありません。
ウェブアクセシビリティは高齢者、障がい者にとどまらず、老若男女すべての人を対象としています。
ウェブコンテンツを利用する人々には、障がいの有無だけでなく、年齢、性別、居住地域、デバイスの違いなど様々な状況、環境の違いがあることが想定されます。
そのどんな場合においても、利用者がウェブコンテンツを利用できるように工夫することがウェブアクセシビリティなのです。
ただ、高齢者や障がい者は、ウェブを使う際に多くの困難に直面しているという現状があります。
そのため、これらの人はウェブアクセシビリティの恩恵を受けやすいと考えられているのです。
1-2.ウェブアクセシビリティに対応するメリット
ウェブアクセシビリティ対応を行うメリットの一部として、以下が挙げられます。
1-2-1.今より多くの人に情報やサービスが届く
ウェブコンテンツを利用しやすくすることで、高齢者や障がい者を含めた更に多くの人々がウェブサイトやサービスを利用できるようになります。
現在、日本の人口のうち1000万人以上の人が何らかの障がいを持っていると言われています。
参考：障害福祉分野の最近の動向（厚生労働省障害保健福祉部）
さらに、高齢化が進行中の日本では、全人口のうち29%以上が65歳を超えているとのデータもあります。
参考：統計からみた我が国の高齢者－「敬老の日」にちなんで－（総務省統計局）
今までそれだけの人がウェブコンテンツにアクセスしづらい、使いづらい状況だったとすると、ウェブアクセシビリティを向上させることは新しい市場や機会を創出することに繋がるかもしれません。
1-2-2.法令遵守
日本では2024年から障害者差別解消法の改正法が施行され、環境整備が努力義務となります。
この「環境整備」にウェブアクセシビリティ対応が含まれるのです。
また、ウェブアクセシビリティ対応が法律で義務付けられている国、地域があります。
そういった場所で活動を行う法人、団体、個人にとっては、活動先の法律で定められたウェブアクセシビリティの基準に対応することで、訴訟リスクなどを回避することができます。
1-2-3.使いやすくなる
ウェブアクセシビリティを向上させると、どんな人にとっても使いやすいウェブコンテンツにすることができます。
「ターゲットは高齢者じゃないから、ウェブアクセシビリティは不要」
「障がい者向けのサービスじゃないから、ウェブアクセシビリティは気にしなくて良い」
という認識の人がまだまだ多くいます。
しかし、すべての人にとってウェブアクセシビリティは非常に重要です。
誰をターゲットとしたコンテンツ、サービスであっても、ウェブアクセシビリティ対応に取り組むことで使いやすさを向上させることができるのです。
1-3.障害者差別解消法の紹介
上でも出た通り、日本には障害者差別解消法という法律があります。
これは「全ての国民が、障害の有無によって分け隔てられることなく、相互に人格と個性を尊重し合いながら共生する社会の実現に向け、障害を理由とする差別の解消を推進すること」を目的として、2013年に制定されました。
そして、2021年にこの法律の改正が行われ、改正法は2024年から施行されます。
ウェブアクセシビリティ対応は「環境の整備」に位置付けられており、法改正後は民間企業に対して「努力義務」となります。
参照：内閣府ホームページ内の障害者差別解消法に関するページ
1-3-1.対応しないとどうなるの？
法的義務ではなく努力義務なので、すぐに対応しなかったからといって罰則を受けるわけではありません。
ですが、なるべく早く対応を始める必要があるとチャコウェブでは考えています。
その理由の一つとして、アメリカやヨーロッパではすでに「その人の状況に関わらず誰もが同じ情報に触れられるということは守られるべき権利である」という考え方が浸透しはじめているからです。
つまり、ウェブにアクセスできることは人権の一つだと考えられているのです。
さらに「ウェブアクセシビリティ対応をしない＝障がい者差別をしている」と考える人もいるようです。
実際にアメリカでは「ウェブアクセシビリティに配慮していなかった」という理由から訴訟に至る事案が多発しており、ウェブサイト運営側が敗訴しているケースもあります。
海外のウェブアクセシビリティ対応状況と関連訴訟についてはこちらの記事をご覧ください。
参照：海外でウェブアクセシビリティに関する訴訟が急増って本当？現状について紹介
このような海外の動きを見ていると、日本国内でもいずれ「情報に触れられることは当たり前の権利であり、侵害してはいけない」という考え方が主流になってくることが考えられます。
そのため、今のうちから意識を高め対応を行うことが必要なのです。
1-3-2.どんな対応が必要？
ウェブアクセシビリティには世界的に参照されるガイドラインがあり、その中で適応レベルというものが定められています。
目指す適応レベルにより求められる対応は様々ですが、ここでは基本的な例をいくつか紹介します。
- 動画や音声のみのコンテンツには字幕を付ける
- フォームやボタンなどをキーボードで操作できるようにする
- 読み上げソフトとの互換性を確保する
- 画像などの視覚情報は、視覚以外からも情報を得られるように代替手段を用意する
- 誰が見ても分かりやすいように情報を整理して掲載する
これらはほんの一例です。
一定基準を満たしたウェブコンテンツを作成する際には、ガイドラインを参考にもっとたくさんの条件を達成する必要があります。
1-4.ウェブアクセシビリティ対応は制作前段階から考えた方が良い理由
ウェブアクセシビリティを高いレベルで確保するためには、制作前段階からきちんと仕様を決めて設計することが必要です。
ウェブサイト制作においては、デザインやコンテンツの内容が重視され、ウェブアクセシビリティが後回しにされることがよくあります。
しかし、後からウェブアクセシビリティを改善することは非常に困難であり、コストもかかります。
そのため、最初からウェブアクセシビリティを意識した設計を行うことが重要です。
そのウェブサイトをウェブアクセシビリティに対応させるのか、させるとすればどのくらいのレベルに適応させるのかなどは制作前にしっかり決めておいた方が良いでしょう。
1-4-1.既存コンテンツをウェブアクセシビリティ対応させるのは難しい？
既存コンテンツを目標とする適応レベルのウェブアクセシビリティに対応させられるかどうかは、ケースバイケースです。
そのコンテンツのデザインやコーディング方法にもよりますし、CMSやプラグインを導入している場合はその制約も出てきます。
また、対応させられたとしても工数やコストが非常にかかることが予想されるので、場合によっては思い切ってリニューアルしてしまった方が良いケースもあるでしょう。
ただし、全体をリニューアルするとそれなりに費用と時間がかかることは明白です。
そうなると「手間もお金もかかりすぎる」と感じ、ウェブアクセシビリティ対応に消極的になってしまうかもしれません。
しかし、大切なのはすべてを一度に完璧にすることではなく、できるところから少しずつ改善していく姿勢です。
例えば、画像に代替テキストをつける、お問い合わせフォームをキーボードだけで操作できるようにするなど、小さなステップでの対応も十分価値があります。
ウェブアクセシビリティ対応を徹底的に実施することは、確かに重要です。
しかし、今すぐに全面的な取り組みを行うことが難しい場合は、まず実現可能な部分からスタートするのが良いでしょう。
2.ウェブアクセシビリティ対応の基準
ウェブアクセシビリティを深く理解する上で欠かせない、世界標準として参照されているガイドラインがWCAG（ダブリューシーエージーまたはウィーキャグと呼ばれる）です。
これは、ウェブの標準を取り決める国際的なコミュニティであるW3Cが発行しています。
対象となっているのは、ウェブサイトやウェブアプリケーションなど「ウェブ技術を使用したコンテンツすべて」です。
また、日本で良く参照されるウェブアクセシビリティの規格としてはJIS X 8341-3:2016があります。
JISとは日本国内における産業標準化の促進を目的とする「産業標準化法」に基づいて制定される国家規格で、正式名称は日本産業規格と言います。
この規格の中に、ウェブアクセシビリティについて定められているものがあるということです。
それでは、それぞれについて詳しく見てみましょう。
なお、ここで大切となるポイントは
- こういったガイドラインや規格が存在すること
- 達成基準が設けられていること
- 達成基準を満たせば、一定レベルのウェブアクセシビリティが確保されていると言えること
- 分からない点があれば、まずはガイドラインを参照すること
です。
その他の細かい知識も覚えておくと役に立ちますが、冒頭でも述べた通り現段階では「ウェブアクセシビリティってこういうものなんだ」と感じていただければ十分かと思います。
まずは「なるほど、こういう感じなんだ」といった感じで一読していただき、必要に応じて詳しく読み返していただけたら良いかと思います。
2-1.WCAG
ウェブアクセシビリティに取り組む上で中心的な存在となるのが、この国際的なガイドラインWCAGです。
前述の通りW3Cが発行しており、正式名称は「Web Content Accessibility Guidelines」と言います。
古くは1999年に勧告された文章で、現在時点の最新バージョンはWCAG 2.2となっています。
また、詳細はJIS X 8341-3の項目で解説しますが、WCAGはJIS X 8341-3と密接に関係しています。
現在日本で良く参照されるウェブアクセシビリティの規格、JIS X 8341-3:2016はWCAG 2.0と対応しています。
- JIS X 8341-3:2016はWCAG 2.0と対応していること
- WCAG 2.2はまだ勧告されたばかりで日本語訳が存在しないこと
上記2点のため、ここから先はWCAG2.0とWCAG 2.1を前提に解説を進めます。
なお、それぞれのバージョンの簡単な違いについては以下のようになっています。
2-1-1.WCAG 2.0
- 4原則（知覚可能、操作可能、理解可能、堅牢）を定義
- ガイドラインごとに達成基準を定義
- 達成基準事に適合レベルを定義
2-1-2.WCAG 2.1
- WCAG 2.0で不十分だったモバイル対応などの領域を強化
- 達成基準を追加
2-1-3.WCAG 2.2
基本方針として、JIS X 8341-3:2016に準じる場合は対応しているWCAG 2.0を参照することになっています。
ただし、WCAG 2.1ではモバイル領域が強化されていることもあり、WCAG 2.0を基本としつつ適宜WCAG 2.1も参照するという方針が良いかと思われます。
2-1-4.ウェブアクセシビリティの4原則
WCAGには4つの原則が存在します。
それぞれ見ていきましょう。
2-1-4-1.知覚可能
ウェブコンテンツがすべての利用者にとって知覚可能でなければならないことを意味します。
具体的には、視覚だけでなく聴覚や触覚のような異なる感覚を通じて利用者が情報を認識・理解できるようにする必要があるということです。
2-1-4-2.操作可能
ウェブコンテンツがすべての利用者にとって使いやすく、操作可能でなければならないことを意味します。
具体的には、利用者がナビゲーションやボタン、フォームなどの操作を簡単に行えるように設計・制作する必要があるということです。
2-1-4-3.理解可能
ウェブコンテンツ、さらにウェブサイト内の操作が、利用者にとって容易に理解できるようになっている必要があるということ。
2-1-4-4.堅牢
ウェブコンテンツが様々な技術、ブラウザ、デバイスや補助技術と互換性を持ち、しっかりと機能することが求められます。
また、メンテナンスしやすいような仕様、設計にすることで、長期的に利用できるようにする必要があります。
2-1-5.3つの適合レベル
WCAGにはレベルA、AA、AAAという3つの適合レベルがあります。
ガイドラインには、その達成基準がどの適合レベルで求められるものなのかが記載されており、例えばレベルAの達成基準をすべて満たすことで、適合レベルAのウェブサイトであると言えるようになります。
適合レベルAAのウェブサイトを作る際には、レベルAとレベルAAの両方の達成基準をクリアすることが必要となります。
なお、適合レベルAAAはレベルA、AAをさらに強化、厳格にした達成基準が定められています。
しかし現実問題として、レベルAAAへ適合するウェブサイトを作るのはかなり困難です。
ウェブサイトの制作や修正を行う際には、以下を参考に適合レベルを決定すると良いでしょう。
2-1-5-1.レベルA
ウェブアクセシビリティ対応における最低ライン。
そもそもレベルAの基準を満たさないウェブコンテンツは、障がい特性などによっては全くアクセスできない、理解できない可能性がある。
レベルAに適合することができれば、最低限のアクセス、理解は可能になると考えられる。
2-1-5-2.レベルAA
この基準を満たすことができれば、どのような状況の人にとってもそれなりに使いやすいウェブサイトを制作することができる。
国・地方公共団体などは基本的にこの基準を目標として定めている。
コントラスト比の達成基準が入ってくるため、ウェブサイトのデザイン（主に背景色や文字色）によっては達成が難しくなってくるため注意。
2-1-5-3.レベルAAA
かなり厳格にウェブアクセシビリティ対応ができている状態。
ただし、達成するまでの中で解消することが難しい問題が高確率で発生すると想定される。 通常、レベルAAAに適合するようにウェブサイト制作を行うことはない。
2-2.JIS X 8341-3
JIS X 8341-3は、JIS（日本産業規格）の一つです。
正式名称は『高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第3部：ウェブコンテンツ』といい、高齢者や障がいを持つ人々を含むすべての利用者がウェブコンテンツを利用できるようにするための基準を提供しています。
2-2-1.JIS X 8341-3とWCAGの関係
WCAGの解説部分でも述べた通り、JIS X 8341-3はWCAGと密接な関わりがあります。
それだけでなく、ISO/IEC 40500:2012という国際規格とも対応しています。
JIS X 8341-3は2004年に初めて制定され、2010年にはWCAG2.0に対応する形で改定されました。
その後、WCAG 2.0がそのままISO/IEC 40500:2012という国際規格になったことを受けて、2016年にISO/IEC 40500:2012の一致規格となる、現在のJIS X 8341-3:2016に改定されました。
つまり、JIS X 8341-3:2016はISO/IEC 40500:2012の一致規格であり、ISO/IEC 40500:2012は元々WCAG 2.0から作られているため、JIS X 8341-3:2016とWCAG 2.0が対応しているのです。
2-2-2.対応度表記について
JISには「JISマーク表示制度」というものがあります。
この制度は、「国により登録された民間の第三者機関から該当規格への適合性に関する審査を受け、認証されればJISマークを表示することができる」という制度です。
ただ、JIS X 8341-3:2016はこの制度の対象外であるため、JISマークを表示することはできません。
参照：日本産業標準調査会のJISマークについての説明
その場合、「供給者適合宣言」を行うことで規格に適合していることを表明することができます。
ただ、「供給者適合宣言」にも規格があり、ウェブアクセシビリティ対応においてはこの「供給者適合宣言」の規格の要件すべてを満たすことが難しいことがあります。
そこで、そのウェブコンテンツが規格に適合していることを示せるようにと生まれたのが、「対応度表記」です。
これは、情報通信アクセス協議会・ウェブアクセシビリティ基盤委員会により定義されています。
「対応度表記」には、「準拠」「一部準拠」「配慮」の3種類があります。
【対応度表記と条件をまとめた表】
| 対応度表記 |
ウェブアクセシビリティ方針の提示又は公開 |
試験実施の有無 |
試験結果の公開 |
その他に
表記するもの |
| 準拠 |
必須 |
試験を実施し、達成基準をすべて満たしていることを確認する |
必須 |
なし |
| 一部準拠 |
必須 |
試験を実施し、達成基準の一部を満たしていることを確認する |
任意 |
今後の対応方針
部分適合を適用する場合は、その記述 |
| 配慮 |
必須 |
試験の実施は任意、結果は問わない |
任意 |
目標とした適合レベル又は参照した達成基準一覧 |
さらに詳細な条件などは、ウェブアクセシビリティ基盤委員会のホームページを参照してください。
参照：ウェブアクセシビリティ基盤委員会による対応度表記ガイドライン
お役立ち資料 ホームページ作成からマーケティングのことまでよく分かる
みんなが使いやすいホームページを作るために取り組んでいること
3.リニューアル実例
チャコウェブでは、ウェブアクセシビリティ関連事業に先駆けて、まず自社サービスサイトのウェブアクセシビリティ対応を開始しました。
まだ対応しきれていないところもありますが、2023年中にはレベルAAに適合することを目標にしています。
チャコウェブのウェブアクセシビリティ方針
ここからは、チャコウェブサイトのリニューアルについてご紹介します。
今回の記事では簡単なご紹介になりますが、後日別の記事にて実装方法などを解説予定です。
3-1.リニューアル前
こちらが今年の3月頃まで使用していたデザインです。
白を基調とし、他にはオレンジ、青、ピンクが使われています。
3-2.リニューアル後
こちらがリニューアル後のデザインです。
白を基調とし、他には黒やグレーが使われています。
基本的にモノトーンのデザインとなりましたが、差し色として青色が使用されています。
3-3.比較してみると
いかがでしょうか？
コンテンツの内容自体を変更した部分もあるので一概には言えませんが、だいぶ印象が変わったのではないでしょうか？
特に、リニューアル前と比べるとリニューアル後は色数が減っていて、今までのデザインを踏襲しつつよりシンプルで洗練されたデザインになったかと思います。
リニューアルにおいてはミーティングやチャットでの意見交換などを行い、その都度以下のような内容について、方向性の確認を行っていました。
- リニューアル前サイトの問題点の洗い出し
- サイトを修正するか、一から作り直すか
- 適合レベルの決定
- デザイン時に気を付けること
- コーディング時に気を付けること
最初のミーティングで「せっかくなら適合レベルAA準拠を目指していこう！」と決まり、真っ先に問題点として挙がったのがコントラスト比でした。
リニューアル前に多く使われていた色（オレンジ、ピンク、青）と背景や文字として使われていた白のコントラスト比が規定値以下だったのです。
このままでは、色覚特性や視覚障がいを持っている人がウェブサイトを閲覧した際に「ボタンや文字を認識できない」という問題が発生する可能性がありました。
そこで全体をグレースケールにし、差し色としてコントラスト比の要件を満たす濃いめの青を1色使用することとしました。
3-4.「ウェブアクセシビリティ対応＝グレースケール」ではない！
弊社では「スタイリッシュになった！」「かっこよくなった！」と好評だったリニューアルですが、見る人によってはリニューアル前の方がカラフルで良かったと感じられるかもしれません。
ご安心ください！
ウェブアクセシビリティ対応を行うウェブサイトすべてがグレースケールでなければいけないわけではありません。
まず、そもそも文字色と背景色のコントラスト比が達成条件となっているのは、適合レベルAA以上です。
適合レベルAのウェブコンテンツを作成する際にはコントラスト比は達成条件に含まれません。
達成条件に含まれないから配慮しなくて良いというわけではありませんが、レベルAAに適合させる時に比べればデザインの自由度は上がるのではないでしょうか。
また、チャコウェブサイトは上記のようなリニューアルを行いましたが、適合レベルAAを達成しつつ色を取り入れているウェブサイトもたくさんあります。
以下はその例です。
長崎県移住支援公式ホームページ ながさき移住ナビ
奈良県御所市ホームページ
福島県いわき市役所ホームページ
コントラスト比を適切にしないと、ウェブコンテンツが見づらくなる可能性があります。
しかし、それがクリアされていれば色を使用すること自体は問題ありません。
表現したいイメージやデザインと、ウェブアクセシビリティの要件を両立させられるようバランスをとることが重要です。
4.まとめ
この記事では、ウェブアクセシビリティ対応に必要となる知識を詳細に解説しました。
今回は主に基本的な概念や、関連する法律に触れています。
すべてを一度に理解するのは難しいかもしれませんが、大切なのは「ウェブアクセシビリティの基本的な考え方」を掴むことです。
この記事は、ウェブアクセシビリティ対応を行う際の参考資料としていただき、必要に応じて読み返してもらえれば幸いです。
今後、実際の実装方法に関する内容も取り上げていく予定です。
どうぞ、お楽しみに！
