どうもこんにちは。EgoDiva Zig-zag事業部の中澤です。
今回はWebサイトの「ウェブアクセシビリティ診断（webアクセシビリティチェック）」に関するご案内です。
本記事では、下記のような方に役立つ内容となっております。
ウェブアクセシビリティ（webアクセシビリティ）診断について
- ・以前（または現在）miCheckerでの作業に疲弊した（している）方
- ・効率よく診断やWeb検証・チェックできるツールがないため導入に踏み切れないでいる方
- ・社会的にもニーズが高まっていることにヒヤヒヤしている方
ウェブアクセシビリティ（webアクセシビリティ）とは？
Webサイト、ツール、およびテクノロジーが、身体的な障害の有無に関わらず万人が使用できるよう設計および開発されていることを意味しますが、下記のようなユーザーにもメリットがあります。
- ・端末の画面が小さく、入力モードが異なる機器を使用しているユーザー
- ・加齢により能力が変化しうる高齢者
- ・ケガや器具の紛失などで「一時的な障害」のユーザー
- ・明るい日差しや音声が聞こえない環境など「状況に制限のある」ユーザー
- ・低速のインターネット接続を使用しているユーザーなど
つまり、ウェブアクセシビリティ（webアクセシビリティ）とは、使用端末や言語、年齢・心身の条件によらず、すべての人が支障なくサイトを利用できるようにすることを指しています。WEBサイトのユニバーサルデザイン、またはWebサイトのバリアフリー化とも言えるでしょう。
気軽にウェブアクセシビリティ診断（webアクセシビリティチェック）できる環境を手に入れる
では、そんなウェブアクセシビリティ（webアクセシビリティ）に、気になるWebサイトがどの程度対応しているのか、一体どのようにWeb検証・アクセシビリティチェックできるのでしょうか。
手段としては２つ考えられます。
１）診断サービスを実施している企業に外注する
２）自社で調べる
前者の場合、費用は無料診断～数百万円と、サイトの規模にもよりますが様々です。
後者の場合はどうでしょう。ツールを使っての調査になりますが、できるだけ効率的に、且つ、簡単にウェブアクセシビリティ診断（webアクセシビリティチェック）ができて、どこの何を改善すべきか、これが誰でも簡単に抽出・把握・指示出しまで出来る環境を整えることが理想です。
そんなウェブアクセシビリティ診断（webアクセシビリティチェック）と具体的な改善に適した便利なツールが「Zig-zag」です。このツールでは下記の多角的なウェブアクセシビリティ診断（webアクセシビリティチェック）を実現します。
Zig-zagによる実際のウェブアクセシビリティ診断（webアクセシビリティチェック）
Zig-zagによるウェブアクセシビリティ診断（webアクセシビリティチェック）作業は「サイトのTOPページのURL入力のみ」と簡単です。
次に検証範囲と検証項目を選び、検証ボタンを押せばOK。
ウェブアクセシビリティ診断（webアクセシビリティチェック）については
- ■レベルをA・AA・AAAのいずれかから選びます。
- ■検証ツールを２つのうちいずれかから選びます。
片方はGoogleのLighthouse、もう一方を選ぶと、JIS X 8341-3:2016規格に準じたウェブアクセシビリティ診断（webアクセシビリティチェック）が可能です。
検証結果はネット環境とPC端末があればいつでもどこからでも確認可能。リモート環境にあるWeb分析・Web検証スタッフ間においても、抽出したデータや改善が必要な箇所の詳細まで簡単に共有できます。
検証データによる現場へのディレクション方法
ウェブアクセシビリティ診断（webアクセシビリティチェック）については、
- ■レベルＡに達成するまでに必要な修正箇所
- ■レベルＡＡに達成するまでに必要な修正箇所
- ■レベルＡＡＡに達成するまでに必要な修正箇所
がそれぞれ表示され、検証・チェックしたWebサイト全体または検証・チェックしたWebページ範囲でのトータルスコアが表示されます。
さらにウェブアクセシビリティのどんな項目でどれだけの指摘があるのか、次の画面でこのように確認できます。
こうして見ると、要改善点が項目ごとにどれだけあるかをまず把握できます。
さらに、Zig-zagの本領発揮はココからです。
たとえばこのサイト。
ウェブアクセシビリティ（webアクセシビリティ）の検証・チェック項目のうち「音声ユーザビリティー操作」関連の指摘がサイト全体で比較的多いことが一目瞭然です。（ロービジョン判定も全ページ指摘がありますがｗ）
さらに、
- ・どのページの何行目のソースが
- ・どの定義に抵触していて
- ・どのように改善すべきか
これらを簡単に画面上でソートしながら確認できるのです。
修正すべき箇所が多い場合は、検証項目ごとにエクスポートできるCSVデータを利用すれば、ボリュームや種別によってソート・仕分けしての指示出しも簡単です。
こちらは、重要なTOPページ内に見つかった「音声ユーザビリティの操作」関連での指摘箇所を確認してみたところです。
このページの411行目と517行目に
H3タグの1階層上がH1タグになっているとのことで、見出し(h1,h2…)の入れ子関係を適切なものにしてください。と指摘されていることがわかります。
もう１つは、
このページの547行目に読み上げ可能なテキストが存在しないため、優しくないです！と指摘されていることがわかります。
前者は入れ子関係を修正、後者は適切なテキストを挿入してあげることで、このページのウェブアクセシビリティ（webアクセシビリティ）について「音声ユーザビリティの操作」関連で問題です！と指摘されている箇所は簡単に改善が可能です。
このように、一見、膨大な要改善箇所の数に思わずのけぞってしまうような場合でも、中身を紐解くと、じつは簡単に修正できる、そんな内容も少なくありません。
要は、まずは分析して「どういった要改善箇所（＝のびしろ）がどれだけあるか」を知ることが大切です。
その上で、コーダーなどの現場担当者などに対して
- ・すぐ改善できるもの
- ・工数を算出してもらってから検討したいもの
などと仕分けしながら改善ディレクションを進行すると良いでしょう。
いかがでしたでしょうか。
Zig-zagなら、自社サイトやサービスサイトの改善はもちろん、ウェブアクセシビリティ診断（webアクセシビリティチェック）サービスやWeb検証チェックやテストを展開されている企業様や お客様のWebサイト改善業務をされている企業様の分析業務にもお役立ち可能です。
無料でウェブアクセシビリティ診断（webアクセシビリティチェック）を実施させて頂き、その結果をサンプルとしてご案内いたします。
▼ご希望の際は、下記フォームよりご連絡ください▼
ご希望の際は、下記フォームよりお申込みください。
[ecta id=’1′]