こんにちは
プロモーション・デザインユニット（以下、プロモ・デザインU）の安田です。
前回はOKRの取り組みの一つであるインシデント対応訓練に関して書きましたが、あれからもう1年経つんですね。
今回も同じOKRの取り組み紹介ですが、WCAG対応のお話です！
2023年度に取り組んだインシデント対応訓練の記事は以下をご参照ください。
Webアクセシビリティとは何か
現代社会において、インターネットは単なる便利なツールを超えて、私たちの日常生活における不可欠なインフラとなっています。
Webアクセシビリティとは、すべての人がWebサイト利用時に直面するデジタルデバイド*1を解消し、障害者や高齢者なども不自由なく利用できるようにする考え方です。視覚障害者のためのスクリーンリーダー対応、色覚特性に配慮したカラーデザイン、キーボードのみでの操作対応など、多様なユーザーのニーズに応える取り組みを指します。アクセシビリティ向上は、すべての利用者が同じレベルの利便性を享受できる社会づくりの一環でもあり、ビジネスや公共サービスにおいても重要視されています。
WCAGの概要と基準レベルの種類
WCAG（Web Content Accessibility Guidelines）は、W3C（World Wide Web Consortium）によって策定された、Webコンテンツのアクセシビリティの国際規格です。
WCAGは、達成基準を3つの適合レベル（A、AA、AAA）に分類しています。
AA：標準的な基準。この基準を満たすと、支援技術を駆使しなくても多くの環境でWebサイトを閲覧できるようになる。
AAA：最高水準の基準。この基準を満たすと、よりWebサイトが閲覧しやすくなる。
現在、多くの組織でAAレベルの規格適合が求められる傾向にあります。
今期私たちのユニットでは、OPTiMのWebサイトを運用する上で、Webアクセシビリティに配慮して誰にでもご利用いただけるようにすることをOKRの一つとして設定し、WCAGへの準拠を進めています。
WCAG対応の流れ
WCAG対応は、以下の流れで進行しています。記事執筆現在（2025年3月）も鋭意対応中です。
1. WCAGの理解と対応範囲の確認
2. 優先的に改修を行うガイドラインの選定
3. 実装する
1. WCAGの理解と対応範囲の確認
まず、WCAGの内容理解と、非準拠時のリスク分析、対応スケジュールなどを確認しました。
プロモ・デザインUではAAレベルへの準拠を目標とし、1つのWebサイトを例に準拠状況の確認を実施しました。
現在、私たちのユニットでは約50のWebサイトを運用しています。
全てのサイトを更新するにはリソースが限られているため、2024年度は注力しているサービスに絞り、影響の大きいと判断した5つを優先的に進めることとしました。
2. 優先的に改修を行うガイドラインの選定
以下の5つのガイドラインを優先的な改修対象としています。
1. 画像に適切な代替テキストを追加する（ガイドライン1.1.1）。
2. 背景と文字のコントラスト比を最低4.5:1にする（ガイドライン1.4.3）。
3. リフローできる（ガイドライン1.4.10）。
4. すべての機能がキーボード操作で利用可能であることを確保する（ガイドライン2.1.1）。
5. HTMLを正しく記述する（ガイドライン4.1.1）。
3. 実装する
改修方針が決まればあとは手を動かすのみ…！！！
どのような改修を行なったのかは次で詳しく説明します。
実装の進め方
画像に適切な代替テキストを追加する
以下の画像を例に、代替テキストの修正前と修正後を確認してみましょう。
修正前：「課題01のイメージ」
修正後：「サポートスタッフの支援により問題が解決したことを示すイラスト。赤い「解決」スタンプ付き」
今までは単に「メインビイジュアル画像」や「OPTiM ◯◯のイメージ写真」といった簡素な説明がほとんどでした。
WCAGに準拠した代替テキストの作成には、画像の特徴を簡潔に伝える必要がありますが、言語化が苦手な私にはとてつもなく時間がかかりそうな予感が。
この課題を解決するために、社内で利用可能なLLM（大規模言語モデル）を活用しています。
LLMへ「この画像にWCAGに配慮したaltを30字程度で作成してください。」と依頼すると、ものの数秒で考えてくれるんです！
特に「Amazon Nova」モデルが代替テキストの作成に大活躍でした。
背景と文字のコントラスト比を最低4.5:1にする
こちらはFigmaのコンポーネントの中でカラー定義をしてくれているので、それを反映するだけ。
FigmaでWebデザインシステムの設計した話は以下の記事を参照ください。
ここで一つ問題が。
CTAボタンの最適な色については、様々な研究が行われており、赤やオレンジ、青、緑が効果的だと報告されています。
特にオレンジは、青を基調としたサイトにおいて補色として機能し、高い視認性を実現できることが特徴です。
オプティムはコーポレートカラーが青のため、CTAボタンに使うアクセントカラーは補色であるオレンジを採用しています。
オレンジ背景に白文字だとコントラスト比が低くなり、黒文字だと全体的に重い印象になってしまいます。
コントラスト比4.5を準拠しようとしたら、もはやオレンジ…？と首を傾げたくなる色味に。
そんな中、W3CによってWCAG 3.0の策定作業が進められています。
WCAG 2.0と比較して、多くのユーザーのニーズをカバーすること、WebコンテンツだけではなくWebアプリケーションやツール・出版物にも適用範囲を広げるなど、より包括的で柔軟なガイドラインとなる予定です。
その中でも、私たちはアクセシビリティの「コントラスト比」を算出する計算アルゴリズムの変更に注目しています。
オプティムのCTAで採用している「オレンジ背景に白文字」は見た目の印象と異なって、コントラスト比が低く出る傾向にありますが、APCA（新しいコントラスト基準）では人間の視覚特性を考慮し、より正確に視認性を評価することを目指しています。
そこで、WCAG 2.0の準拠がされている方を採用するか、WCAG 3.0で検討されている方を採用するか、現在チーム内で確認を進めています。
APCAの方だとちゃんとオレンジ…！！！
リフローできる
画面を拡大した時に画面崩れがおきていないか、意図しない箇所で左右にスクロールせず閲覧できるかを確認します（こちらは現在も対応継続中）。
すべての機能がキーボード操作で利用可能であることを確保する
ヘッダーのメガメニューや、よくある質問などのアコーディオン実装などが例に挙げられるのですが、どちらもキーボード操作がNGでした…
キーボード操作を可能にするために実装方法を調べていたのですが、アコーディオンに関しては大きく2つの実装方法があることがわかりました。
-
details/summary要素による実装
- メリット：ブラウザの検索機能で全文検索可能
- デメリット：アニメーション実装にJavaScriptが必要
-
input/label要素による実装
- メリット：CSSのみでアニメーション実装可能
- デメリット：非表示状態の文字列が検索不可
検討の結果、サイト内検索の利便性を重視し、details/summary要素とスムーズなアニメーションはJavaScriptで実装しました。
フッターメニューもdetails/summary要素で実装しましたが、PCサイズのブラウザではクリックしてもメニューを開きっぱなしにしておきたい要望があったため、open属性とCSSのpointer-events: none;で実装しています。
HTMLを正しく記述する
基本の基なのですが、見た目重視で実装している場合はHTMLのルールに沿っていないことも多く、エラーになっていました…
やったことはThe W3C Markup Validation Serviceでチェックしてエラーになっている箇所を修正する。これだけ！
ローカル実装時にもテキストエリアにHTMLを直接入力してチェックが可能なのでリリース前にチェックする癖つけをしたいです。
利用ツールの紹介
WCAG対応を進める上で使っているツールをいくつか紹介します。
Google Chromeのデベロッパーツール
背景と文字のコントラスト比を確認するときに重宝しています。
確認したい要素にフォーカスするだけでチェックができる！
Contrast部分に緑のチェックマークの時は満たしているので大丈夫なのですが、オレンジのびっくりマークがついている場合はコントラスト比が足りておらず修正が必要です。
オレンジィィィ…
Keyboard-focusableでキーボード操作ができるかどうかも合わせてチェックしておきたいですね。
The W3C Markup Validation Service（Webサイト）
実装担当の人にはお馴染みだと思います。
https://validator.w3.org/
ただ、コードチェックを自動化できたらいいよね。とユニット内で話しており、以下2つを検討中です。
1. Lintツールを用いた自動チェック（Visual Studio Code）
2. マージリクエスト時にLintで検知できなかったエラーをLLMを利用してチェック（GitLab）
ちゃんとしたコードでないとリリースできない仕組みにしてある方が絶対良さそう…！
Contrast（Figmaプラグイン）
デザインをFigmaで作成しているため、コントラスト比のチェックはプラグインを使って確認しています。
https://www.figma.com/community/plugin/748533339900865323
APCAコントラスト日本語フォント検証（Webサイト）
CTAボタンの色味を検討する際に利用しました。
https://apca-ja.studio-ito.net/
まとめ
Webアクセシビリティへの対応は、すべてのユーザーに平等な利用環境を提供するために不可欠です。
今後も継続的な改善を進めていきます。
おわり
オプティムでは、エンジニアだけではなくプロモ・デザインUで一緒に働いてくださるメンバーも探しています。
プロモ・デザインUでは、UI/UXデザインやブランディング、Web制作、マーケティングなどオプティム製品にまつわる様々なデザインのお仕事をしています。
UI/UX、ブランディング、Webプロモーションなどに興味がある方、ぜひご応募お待ちしています。
*1:インターネットやパソコンなどの情報通信技術を利用できる人と、利用できない人の間に生じる情報格差のこと
