Webデザインアクセシビリティフィードバック入門

この記事は、Goodpatch Advent Calendar 2025 1日目の記事です 🎄

こんにちは！エンジニアのyukaです。

わたしはWebアクセシビリティ初心者なのですが、グッドパッチに入社してから、アクセシビリティスペシャリストのメンターのもとで、Webアクセシビリティについて実践的に学んでいます。

先日、実際のWebサイトデザインに対して「アクセシビリティに配慮できているか」をチェックし、フィードバックする機会がありました。今回はその際にどのような手順でレビューを進めたのか、初心者視点でまとめて紹介します。

「作成中のWebデザインがアクセシビリティに配慮できているか、チェックしてみたい」

「アクセシビリティに配慮したWebサイトを作成したいけれど、どこからはじめたらいいかわからない」

という方のご参考になればうれしいです！

Webデザインのチェックを始める前に、どのような観点でフィードバックを行うか、フィードバックをする相手(ご自身かもしれません)と確認しましょう。

たとえば、下記の表の内容について確認しておくと、フィードバックの対象や内容が明確になり、Webデザインのチェックがスムーズに進められます。

項目	内容例
フィードバックの目的	作成中のサイトで、アクセシビリティ対応が不足している箇所を洗い出すため
フィードバックの対象	サイト全体ではなく、デザインが完成している TOP ページ、〇〇ページ、××ページのデザイン（デザインのみを対象とし、実装は含まない）
フィードバックの方法	Figmaのデザインファイルを確認し、フィードバック結果をスライドにまとめて共有する
WCAG（Web Content Accessibility Guidelines）¹ のバージョン	2025年時点での最新バージョンである 2.2
WCAG の適合レベル	適合レベルAを満たし、最低限クリアすべき基準を達成することを目指す

上記の表の内容を参考に、まずは始めてみることをおすすめします！

ステップ1で確認したWCAGのバージョンと適合レベルについて、WCAGのドキュメント(たとえば、2.2のドキュメント) を確認し、実装フェーズではなく、デザインフェーズでチェックできる項目を洗い出します。

例えば、適合レベルAでチェックを行いたい場合、下記の項目はデザインフェーズでチェックすることができます。

達成基準 1.4.1 色の使用 (レベル A)

色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。

ステップ2で洗い出した項目について、実際のWebデザインをチェックしていきます。

WCAG 2.2 適合レベルA の場合、たとえば下記の観点でデザインをチェックし、改善が必要な箇所を洗い出していきます。

色の違いだけで情報を伝えていないか？たとえば、テキストの色だけで状態が表現されていないか？
- 達成基準 1.4.1 色の使用 (レベルA)
情報の階層が整理されているか？UIが一貫しているか？
- 達成基準 1.3.1 情報及び関係性 (レベル A)
リンクテキストだけでリンクの目的がわかるか？たとえば、「くわしくはこちら」のようなテキストになっていないか？
- 達成基準 2.4.4 リンクの目的 (コンテキスト内) (レベルA)

ステップ3で発見した、改善が必要な箇所について、ガイドラインを参照し、改善が必要な理由の説明を行います。たとえば、

このボタンは、その前のコンテンツ（見出しや説明文）を確認しなければ、リンク先が不明瞭です。

達成基準 2.4.4 リンクの目的 (コンテキスト内) (レベルA)」

気づきだけでおわらず、実際に改善に繋げられるように、改善提案もしてみましょう！

わたしはグッドパッチに入社してから、Webアクセシビリティについてちゃんと勉強をはじめました。まだまだ入門したばかりですが、基本的なところからでも、誰にとっても使いやすいWebサイトを目指すことができることがわかってきました。

今回ご紹介したフローや内容が、アクセシビリティに関心のある方のご参考になれば幸いです！

グッドパッチではアクセシビリティに関心のあるエンジニアの仲間を募集しています。少しでもご興味を持たれた方は、ぜひ一度カジュアルにお話ししましょう！

Web Content Accessibility Guidelines（WCAG）は、障害の有無にかかわらず、誰もが情報へアクセスしやすいウェブサイトを実現するための基準をまとめたもの。日本語訳はウェブアクセシビリティ基盤委員会によって公開されており、現在の最新バージョンは WCAG 2.2（2025年時点）。↩