はじめに

本記事は「アクセシビリティガイドラインの更新事例　K社様」（以降、前プロジェクト）の続きとなります。未読の場合は、先にご一読いただくことを推奨します。

• アクセシビリティガイドラインの更新事例　K社様

プロジェクト概要

以前アクセシビリティガイドラインの更新でご相談いただいたK社様より、アクセシビリティ診断、および診断で見つかった非適合箇所の修正のご相談をいただきました。本記事では、アクセシビリティ診断をフェーズ1、非適合箇所の修正をフェーズ2として紹介していきます。

前プロジェクトによって、K社様のアクセシビリティガイドラインはWCAG 2.1のレベルAに準拠した形となりました。その次に取り組んだのは、K社様のコーポレートサイトがアクセシビリティ的にどの程度適合し、どの部分にどのような課題があるかの把握でした。そこで、コーポレートサイトの主要ページに対してアクセシビリティ診断を行いました（フェーズ1）。

さらに、同時期にコーポレートサイトのヘッダー＆フッターの改定やコンポーネントを追加するプロジェクトが動いていました。これは他の会社様が担当されていたのですが、これらの改定版のヘッダー＆フッターや追加コンポーネントに対するアクセシビリティ診断と修正、およびフェーズ1の修正も実施しました（フェーズ2）。

ご提案・実施内容

コーポレートサイトに対するアクセシビリティ診断（フェーズ1）

前プロジェクトによって完成したK社様のアクセシビリティガイドラインを基準に診断しています。このガイドラインはWCAG 2.1のレベルAを内包しており、さらに18件の項目を含んでます（6件のレベルAA、5件のレベルAAA、7件の独自項目）。

K社様はコンポーネントによるサイト作成が行き届いていたため、診断対象ページは、主要ページに加え「コンポーネントの網羅性」を観点に合計で16ページとしました。
ページの選定については、一般的には30〜40ページであることが多い（※1）です。しかし診断対象ページ数を30〜40ページにしても、複数のページで重複したコンポーネントの検証が増すばかりでスケールメリットが得られませんでした。一般的なページ選定方法と比べると、今回のやり方は対象ページを半分に抑えられたので、効率的に診断を進められました。

診断はウェブアクセシビリティ基盤委員会（WAIC）が公開している実装チェックリストを利用しました。ただし、この実装チェックリストがカバーしているのはWCAG 2.0のレベルAおよびレベルAAのみであったため、K社様のアクセシビリティガイドラインを全てカバーするよう不足分を補完したチェックリストを作成して診断を実施しました。診断自体は機械的なチェックと人の目によるチェックを使い分けて行いました。だだ機械的なチェックに頼ったのは色のコントラスト比やHTMLの構文くらいで全体の2%程度であり、残りの98%は人の目によるチェックです。

診断の結果見つかった非適合箇所には、意味が読み取れないもの、キーボードでは操作できないもの、代替テキストや代替コンテンツがないものなど様々で、特にフォームやJavaScriptを利用している箇所で多く見つかっています。

※1 参考

• b) ランダムに選択する場合.2.2 ウェブページ一式単位での試験.2. JIS X 8341-3:2016「JB.1 適合試験の要件」に対する補足事項.JIS X 8341-3:2016 試験実施ガイドライン.ウェブアクセシビリティ基盤委員会 | Web Accessibility Infrastructure Committee (WAIC).（参照 2024-01-16）

改訂版のヘッダー＆フッター、追加コンポーネントに対するアクセシビリティ診断（フェーズ2）

フェーズ1と同時期に別プロジェクトとして、改訂版のヘッダー＆フッターおよび追加コンポーネントの追加施策を他社様が実施していました。他社様が制作された改訂版のヘッダー＆フッターおよび追加コンポーネントのデータを提供いただき、フェーズ1と同等のアクセシビリティ診断を行いました。

非適合箇所の修正（フェーズ2）

フェーズ1、2の診断で見つかった非適合箇所の修正を行いました。HTML、CSS、JavaScript等の修正が中心であり、ブラウザでの表示上の変化はほとんどありませんでした。

たとえば、

• キーボードのみでも操作可能にする。
• 可視ラベルを付与できない箇所では不可視ラベルを付与する。
• コンテンツの文脈とHTMLコードの順番を一致させる。

などがあります。

成果

• ヘッダー＆フッターは既存ページも含めガイドライン通りとなり、アクセシビリティが向上した。
• 修正版のコンポーネントを利用して新規作成されるページはガイドライン通りのアクセシビリティになる。

プロジェクト期間

フェーズ1：1ヶ月
フェーズ2：2ヶ月

プロジェクトメンバー

BAのプロジェクトメンバー構成は、フェーズ1では、アカウント、アクセシビリティスペシャリストが参画。フェーズ2では、フェーズ1のメンバーに加え、フロントエンドエンジニアが参画しました。