当事者発想ジャーナル

by インクルーシブデザインスタジオ CULUMU(STYZ Inc.)

当事者発想ジャーナル検索

レポート

特集「日経225企業のアクセシビリティ対応状況一斉調査レポート」エピソード3

日経225企業のアクセシビリティ対応状況 ー axe DevToolsによる調査結果

6分で読める当事者発想ジャーナル編集部

【連載第3回】日経225企業のアクセシビリティ対応一斉調査レポート


前回の記事では、日経225企業を対象に、Webアクセシビリティ方針の公開状況やアクセシビリティ試験の実施結果・適合度など、各社がどのようにアクセシビリティ対応を進めているかを見てきました。
本記事では、実際のWebサイトにどの程度アクセシビリティ上の課題が存在しているのかを、より客観的な視点から確認します。アクセシビリティ検査ツールであるaxe DevTools Totalを用いて、日経225企業の各サイトのトップページにおけるアクセシビリティ課題(Issue)の数を調査しました。
また、調査結果に加えて、企業による特徴的なアクセシビリティの取り組み事例や、調査から見えてきたアクセシビリティ課題の傾向についても整理します。本記事では、これらの分析を通して、日経225企業のWebアクセシビリティの現状を見ていきます。

企業ごとのaxe DevTools TotalでのIssue数

多くの企業のトップページにおいては、1〜5箇所の課題が発見されました。一方で、60箇所以上の課題がある企業も見受けられました。
課題が発見されなかった企業も一定数ありましたが、多くの企業については、これからアクセシビリティに取り組んでいく必要があるといえます。

日経225企業トップページのaxe DevToolsによる課題数の分布

axe DevToolsとは

axe DevToolsは、Deque Systems, Inc. が開発、公開している、「axe」というアクセシビリティー・チェック・ツールを各種ブラウザ(Chrome、Firefox、Edge) の拡張機能として利用ができるものです。miCheckerと同等のチェック内容(WCAG 2.1)について、ページ単位でアクセシビリティの確認がおこなえます。
ツールなどを使って機械的にWebページのアクセシビリティをチェックできるのは、全体の20%前後といわれていますが、対応状況の概要を知る上では有効といえます。
より詳細にアクセシビリティの評価、改善をおこなっていく場合は、個別に目視での確認や実際に支援機器(例えばスクリーンリーダーなど)で確認を行う必要があります。
axe DevTools®

アクセシビリティチェックツール「axe DevTools」の実行画面

ウェブアクセシビリティの特徴的な取り組み

花王

花王のウェブサイトは、すべてのユーザーが平等に情報にアクセスできるよう、アクセシビリティに配慮した設計がされています。視覚や聴覚に障害がある人、さらには高齢者やITリテラシーに不慣れなユーザーにも使いやすいウェブサイトを目指して、花王独自のアクセシビリティのガイドラインに沿った工夫が多く取り入れられています。特に以下の3つが特徴としてあげられます。

  • ウェブアクセシビリティ専用のお問い合わせフォームがある
  • 花王ウェブアクセシビリティFAQにて情報発信をしている
  • 自社内だけにとどまらない、社会に開いた取り組みをしている
花王のウェブアクセシビリティ方針と専用FAQページの画面

楽天

楽天は、多様なユーザーが楽天のサービスを使いやすくするため、アクセシビリティ向上に積極的に取り組んでいます。特に、視覚障害者や聴覚障害者をはじめとするさまざまな障害を持つ人々に対応したウェブサイトやアプリケーションを提供し、デジタルアクセスのバリアを取り除くことを重視しています。楽天のアクセシビリティへの取り組みは、技術的な対応だけでなく、ユーザーのニーズに即した継続的な改善によって支えられています。これにより、より多くの人がストレスなくサービスを利用できるように配慮されています。以下が、特徴として挙げられます。

  • ユーザーコミュニケーションの一環として、アクセシビリティを捉えている
  • 広告・マーケティング・機能表示の戦略の1つとしておこなっている
  • 従業員への教育の発信もしており、アクセシビリティの取り組みを社外にも発信している
楽天の責任ある広告・マーケティング機能表示と従業員教育のページ

三井住友銀行

三井住友銀行は、多様な顧客が安全かつ快適にサービスを利用できるよう、アクセシビリティの向上に注力しています。特に、シニア層や障害者の利用者を含むすべての人々にとって使いやすいバンキングサービスの提供を目指し、ウェブサイトや店舗において様々な配慮がなされています。以下が特徴的な点として挙げられます。

  • 「誰もが経済的繁栄と幸福を享受できる社会」を目指す一環として、アクセシビリティにも取り組んでいる
  • アクセシビリティを取り巻く環境やグループとしての取り組みについてその方針と合わせて、ウェブサイト上に情報が記載されている
三井住友銀行のアクセシビリティ方針と取り組みを紹介するページ

TOPPAN

TOPPANは、視覚や聴覚に障害のあるユーザーが使いやすい設計を進めています。同社のウェブサイトは、スクリーンリーダーへの対応や代替テキストの充実、音声操作のサポートなど、視覚障害者が容易にアクセスできるよう工夫されています。また、文字サイズの調整やコントラスト変更機能を提供し、高齢者や視力が低下している人にも使いやすい環境を提供しています。以下が、特徴的な取り組みとして挙げられます。

  • ウェブアクセシビリティ対象ページ・検証試験実施ページリストを同社のWebサイト上で公表している
  • 目標とする適合レベル及び対応度や検証結果を、ウェブアクセシビリティ検証結果としてウェブサイト上で公表している
TOPPANのウェブアクセシビリティ方針と検証結果の公表ページ

アクセシビリティの課題の傾向

デザイン面における、アクセシビリティの課題の傾向

多くの企業のWebサイトで、文字と背景色の色の組み合わせが十分なコントラスト比(4.5:1)を満たしていないという指摘が見られました。
コントラストが十分でない場合、視覚に障害を持つ人にとって見づらく、読みづらいものとなってしまいます。
一方で、色の組み合わせの課題のみが指摘されている企業も多く、正しい色の組み合わせに変更をすることで改善が見込まれるため、アクセシビリティの改善として取り組みやすい課題とも言えます。

コントラスト比不足などのデザイン面における課題を検出した画面例

マークアップ・アクセシビリティ

マークアップ・構造におけるアクセシビリティの課題があげられた企業が多く見られ、特にリスト部分(ulタグやolタグ、liタグ)の文法が正しくないという指摘が多くありました。
正しくマークアップがされていない、または構造化されていない場合、支援機器(例えばスクリーンリーダーなど)が正確に情報を把握することができず、利用者が情報を知ることができなくなってしまいます。
実装面の見直しが必要になりますが、どのようにすれば改善されるかが明確で、比較的対応はしやすい課題ではあります。

リストタグの文法エラーなどマークアップにおける課題を検出した画面例

ラベル(altテキストなど)におけるアクセシビリティの課題の傾向

ラベル(altテキストなど)におけるアクセシビリティの課題があげられた企業が多く見られました。
特に、画像の代替テキスト(altテキスト)やボタンにラベルが設定されていない課題が多くあげられました。
画像に代替テキストがなかったり、ボタンにラベルが設定されていないと、支援機器(例えばスクリーンリーダーなど)が画像の情報について読み上げることができなかったり、なにがおこるボタンなのか利用者が把握することができなくなってしまいます。
画像に適切な代替テキストを作成したり、ボタンのラベルを見直すなど、方針を決めて対応を進めていく必要があります。

画像の代替テキストやボタンラベルの欠如などラベルにおける課題例

まとめ

本稿では、アクセシビリティ課題の状況を確認するとともに、特徴的な取り組みの事例や、全体的に共通して見られる課題の傾向について見てきました。
アクセシビリティに積極的に取り組み、具体的な改善や情報公開を進めている企業がある一方で、多くの企業では依然として多くのアクセシビリティ課題が残っていることが分かりました。
次回の記事では、こうした課題を踏まえ、企業がどのようにWebアクセシビリティに取り組んでいくべきかを具体的に見ていきます。

  • # レポート

この課題に、あなたも関われます

社会課題に取り組む団体を、寄付で応援する

当事者発想ジャーナルを運営する STYZ は、寄付プラットフォーム Syncable も運営しています。3,000を超える NPO・団体から、気になる活動を探して応援できます。

記事一覧へ

関連記事