試験結果の概要
Collableの公式ウェブサイトについて、WCAG 2.2の適合レベルA及びAAの達成基準に基づくウェブアクセシビリティ試験の結果を掲載します。
試験対象は主要6ページです。一部の達成基準を満たしておらず、試験対象ページについてWCAG 2.2の適合レベルAAへの適合を表明するものではありません。本ページは初回試験の結果を示しており、修正後の再試験結果は反映していません。試験の後に行った改修の内容は、このページの後半「試験後の改修対応」に掲載しています。
| 項目 | 内容 |
|---|---|
| 参照した基準 | Web Content Accessibility Guidelines（WCAG）2.2 |
| 目標とする適合レベル | AA（レベルA及びAAの達成基準を確認） |
| 試験対象 | Collable公式ウェブサイト（https://collable.org/）の主要6ページ |
| 試験実施期間 | 2026年8月31日～9月10日 |
| 公開日 | 2026年10月30日 |
試験対象ページ
ページの構成、コンテンツ及び機能の違いをできるだけ幅広く確認するため、トップページ、団体紹介、事業紹介、事例紹介、お問い合わせの各ページから、以下の6ページを選定しました。本結果は、以下のページを対象としたものです。
| ページ名 | URL |
|---|---|
| TOP | https://collable.org/ |
| Collable（コラブル）について | https://collable.org/mission/ |
| 団体概要 | https://collable.org/about/ |
| デザインリサーチ＆コンサルティング | https://collable.org/what-we-do/design-research/ |
| 事例：アクセシビリティ講座｜アートノト（2024） | https://collable.org/project-case/q7/ |
| お問い合わせ | https://collable.org/contact/ |
試験方法と確認環境
チェックツールWAIV2を用いた確認と、以下のブラウザーを用いた確認により、達成基準ごとの判定を行いました。
| 項目 | 内容 |
|---|---|
| 試験に使用したチェックツール | WAIV2 |
| ブラウザー | Microsoft Edge／Google Chrome |
| 使用したウェブコンテンツ技術 | HTML、CSS、JavaScript、WAI-ARIA |
WCAG 2.2 A・AA 試験結果一覧
試験結果は、主要6ページの判定を達成基準ごとにまとめたものです。
- 合格：その基準が該当するすべてのページで、基準を満たしています。該当するコンテンツや機能がないページは、判定から除いています。
- 該当なし：全6ページに、その基準が対象とするコンテンツや機能がありません。
- 一部不合格：6ページのうち、一部のページで基準を満たしていません。
- 不合格：全6ページで基準を満たしていません。
「一部不合格」の場合も、その達成基準への適合とはみなしません。
不合格となった内容と、試験の後に行った改修の内容は、このページの後半「試験後の改修対応」に掲載しています。
| 達成基準No | 達成基準 | 適合レベル | 試験結果 |
|---|---|---|---|
| 1.1.1 | 非テキストコンテンツ | A | 一部不合格 |
| 1.2.1 | 音声だけ及び映像だけ（収録済み） | A | 該当なし |
| 1.2.2 | キャプション（収録済み） | A | 合格 |
| 1.2.3 | 音声解説又はメディアに対する代替コンテンツ（収録済み） | A | 合格 |
| 1.2.4 | キャプション (ライブ) | AA | 該当なし |
| 1.2.5 | 音声解説 (収録済) | AA | 合格 |
| 1.3.1 | 情報及び関係性 | A | 不合格 |
| 1.3.2 | 意味のある順序 | A | 合格 |
| 1.3.3 | 感覚的な特徴 | A | 合格 |
| 1.3.4 | 表示の向き | AA | 合格 |
| 1.3.5 | 入力目的の特定 | AA | 一部不合格 |
| 1.4.1 | 色の使用 | A | 合格 |
| 1.4.2 | 音声の制御 | A | 合格 |
| 1.4.3 | コントラスト (最低限) | AA | 不合格 |
| 1.4.4 | テキストのサイズ変更 | AA | 合格 |
| 1.4.5 | 文字画像 | AA | 合格 |
| 1.4.10 | リフロー | AA | 一部不合格 |
| 1.4.11 | 非テキストのコントラスト | AA | 不合格 |
| 1.4.12 | テキストの間隔 | AA | 不合格 |
| 1.4.13 | ホバー又はフォーカスで表示されるコンテンツ | AA | 合格 |
| 2.1.1 | キーボード | A | 一部不合格 |
| 2.1.2 | キーボードトラップなし | A | 合格 |
| 2.1.4 | 文字キーのショートカット | A | 該当なし |
| 2.2.1 | タイミング調整可能 | A | 合格 |
| 2.2.2 | 一時停止，停止及び非表示 | A | 合格 |
| 2.3.1 | 3回のせん（閃）光，又はしきい（閾）値以下 | A | 合格 |
| 2.4.1 | ブロックスキップ | A | 不合格 |
| 2.4.2 | ページタイトル | A | 合格 |
| 2.4.3 | フォーカス順序 | A | 合格 |
| 2.4.4 | リンクの目的（コンテキスト内） | A | 一部不合格 |
| 2.4.5 | 複数の手段 | AA | 合格 |
| 2.4.6 | 見出し及びラベル | AA | 不合格 |
| 2.4.7 | フォーカスの可視化 | AA | 一部不合格 |
| 2.4.11 | フォーカスが隠されない（最低限） | AA | 合格 |
| 2.5.1 | ポインタのジェスチャ | A | 合格 |
| 2.5.2 | ポインタのキャンセル | A | 合格 |
| 2.5.3 | ラベルを含む名前 (name) | A | 一部不合格 |
| 2.5.4 | 動きによる起動 | A | 該当なし |
| 2.5.7 | ドラッグ動作 | AA | 該当なし |
| 2.5.8 | ターゲットのサイズ（最低限） | AA | 合格 |
| 3.1.1 | ページの言語 | A | 合格 |
| 3.1.2 | 一部分の言語 | AA | 合格 |
| 3.2.1 | フォーカス時 | A | 合格 |
| 3.2.2 | 入力時 | A | 合格 |
| 3.2.3 | 一貫したナビゲーション | AA | 合格 |
| 3.2.4 | 一貫した識別性 | AA | 合格 |
| 3.2.6 | 一貫したヘルプ | A | 合格 |
| 3.3.1 | エラーの特定 | A | 合格 |
| 3.3.2 | ラベル又は説明 | A | 不合格 |
| 3.3.3 | エラー修正の提案 | AA | 合格 |
| 3.3.4 | エラー回避 (法的、金融、データ) | AA | 該当なし |
| 3.3.7 | 冗長な入力 | A | 合格 |
| 3.3.8 | アクセシブルな認証（最低限） | AA | 該当なし |
| 4.1.2 | 名前（name），役割（role）及び値（value） | A | 不合格 |
| 4.1.3 | ステータスメッセージ | AA | 該当なし |
試験後の改修対応
初回試験の結果を受けて、2026年10月に以下の改修を行いました。改修後の再試験は行っていないため、改修後の適合状況を表明するものではありません。
画像の下に「改修前」「改修後」を記載しています。パソコンでは左右に、スマートフォンでは上下に並びます。
全ページ共通
「本文へスキップ」リンクを追加しました（達成基準 2.4.1）
- 初回試験での指摘：ページの本文の位置がプログラムから判別できず、キーボードで操作する場合に、毎回メニューを通り過ぎないと本文に進めませんでした。
- 対応：本文の範囲を示す目印（main 要素）を付け、キーボードの Tab キーを押すと最初に「本文へスキップ」のリンクが表示されるようにしました。Enter キーで本文に移動できます。
メニューボタンに名前を付けました（達成基準 4.1.2・3.3.2・2.4.6）
- 初回試験での指摘：スマートフォン表示のメニューボタンに名前がなく、スクリーンリーダーでは何のボタンかわかりませんでした。
- 対応：「メニューを開く」という名前と、開いているか閉じているかの状態を読み上げられるようにしました。開くと「メニューを閉じる」に変わり、Esc キーで閉じるとボタンに戻ります。見た目は変わりません。
パンくずリストを追加しました
- 初回試験での指摘：なし（改修の打ち合わせで、現在地がわかる案内があった方がよいと判断して追加しました）
- 対応：トップページ以外のページで、ページの見出しの上に「ホーム » ページ名」を表示するようにしました。
日付を機械で読み取れる形にしました
- 初回試験での指摘：なし（推奨の対応として追加しました）
- 対応：お知らせや記事の日付を、支援技術や検索エンジンが日付として読み取れる形式でも記述しました。見た目は変わりません。
メニューの文字色・「お問い合わせ」ボタンの色（達成基準 1.4.3）
- 初回試験での指摘：ブランドカラー（ピンク #EB6370）の文字と白い背景のコントラスト比が 3.21:1 で、通常の大きさの文字に求められる 4.5:1 に届いていません。メニューの文字、「お問い合わせ」ボタン、本文の小見出しなど、全ページに該当します。
- 対応：18px 以下の文字とボタンの背景だけを、基準を満たす色（#D91C2E・5.05:1）に変える案を試作し、従来の色と比べました。同じ色味のまま基準を満たす色はいずれも赤みが強くなり、ブランドカラーやサイト全体の配色との調和を損なうと判断したため、今回は色の変更を見送り、従来の色を維持しています。この項目は引き続き検討事項とし、今後サイトをリニューアルする機会に、配色やデザイン全体の中で改めて検討します。
トップページ
お知らせ欄の構造を見直しました（達成基準 1.3.1・2.4.6）
- 初回試験での指摘：ページ上部のお知らせ欄が、見出しのない「区切り（section）」として作られており、構造が支援技術に正しく伝わりませんでした。
- 対応：見出しを持たない、ただのまとまり（div）に変更しました。見た目は変わりません。
事業紹介のカードのリンク名を、表示されている文字と一致させました（達成基準 2.5.3）
- 初回試験での指摘：3つの事業紹介のカードで、読み上げられるリンク名（例：「デザインリサーチ＆コンサルティングの詳細を読む」）が、画面に表示されている文字と一致していませんでした。音声で操作する場合に、表示されている言葉でリンクを指定できません。
- 対応：読み上げ用の別の名前を外し、カードに表示されている見出し・説明・「詳細を読む」がそのままリンク名になるようにしました。見た目は変わりません。
事例・note のサムネイル画像のリンクを整理しました（達成基準 1.1.1・2.4.4・4.1.2）
- 初回試験での指摘：事例と note の記事一覧で、サムネイル画像だけのリンクがあり、リンク先が音声で判別できませんでした。
- 対応：サムネイル画像のリンクは読み上げと Tab キーの移動の対象から外し、隣にある記事タイトルのリンクだけで操作できるようにしました。同じリンク先が2回読み上げられることもなくなります。見た目は変わりません。
実践と成果（事例）
事例のカテゴリー名を「実践と成果」に統一しました
- 初回試験での指摘：なし（事例の詳細ページの見出しの改修にあわせて、表記を統一しました）
- 対応：メニュー、一覧ページの見出し、ブラウザーのタブに表示されるページ名を、「Quest」から「実践と成果」に統一しました。
事例の詳細ページの見出しを整理しました（達成基準 1.3.1）
- 初回試験での指摘：詳細ページで、カテゴリー名の「Quest」と記事のタイトルの両方が、ページで最も大きな見出し（h1）になっていました。
- 対応：最も大きな見出しを記事のタイトルだけにし、ページ上部のカテゴリー名は「実践と成果 一覧へ」のリンクに変えました。お知らせ・コンテンツの詳細ページも同じ形にしています。
詳細ページに「一覧に戻る」ボタンを追加しました
- 初回試験での指摘：なし（改修の打ち合わせで、一覧に戻る導線があった方がよいと判断して追加しました）
- 対応：記事の下部の「前の記事」「次の記事」の間に、「一覧に戻る」ボタンを追加しました。
お問い合わせフォーム
「種別」の選択肢にグループ名を付けました（達成基準 1.3.1）
- 初回試験での指摘：「種別」の選択肢（個人・法人）に、まとまりとしての名前が付いておらず、何を選ぶ項目なのかが支援技術に伝わりませんでした。
- 対応：選択肢全体に「種別（必須）」というグループ名を付けました。見た目は変わりません。
「種別」の選択肢をキーボードで選べるようにしました（達成基準 2.1.1）
- 初回試験での指摘：「種別」の選択肢がキーボードで選べず、Tab キーを押すと飛ばされていました。
- 対応：キーボードで選択肢に移動できるようにし、矢印キーで選べるようにしました。選択中の項目には、黒と白の枠を表示します。
同意のチェックボックスをキーボードで操作できるようにしました（達成基準 2.1.1・2.5.3）
- 初回試験での指摘：「プライバシーポリシーに同意する」のチェックボックスがキーボードで操作できず、表示されている文字とチェックボックスも結び付いていませんでした。
- 対応：キーボードで移動して、スペースキーでチェックできるようにしました。読み上げでは「プライバシーポリシーに同意する」と伝わります。
「確認する」ボタンの選択中の表示をわかりやすくしました（達成基準 2.4.7）
- 初回試験での指摘：キーボードで「確認する」ボタンを選んだとき、選択中の枠がボタンの色にまぎれて見えませんでした。
- 対応：サイト全体で、選択中の場所に黒と白の二重の枠を表示するようにしました。暗い色のボタンでも見分けられます。
入力欄の自動入力と必須の伝え方を見直しました（達成基準 1.3.5・1.3.1）
- 初回試験での指摘：お名前・所属・メールアドレスの欄で、何を入力する欄なのかがプログラムで判別できず、ブラウザーの自動入力が使いにくい状態でした。また、必須の項目であることが支援技術に伝わりませんでした。
- 対応：お名前・所属・メールアドレスの欄で自動入力が使えるようにし、必須の項目は読み上げで「必須」と伝わるようにしました。見た目は変わりません。
個別のページ
団体概要の表を、スマートフォンでも横にスクロールせずに読めるようにしました（達成基準 1.4.10）
- 初回試験での指摘：画面の幅が狭いとき（320px 相当）、団体概要の表の右側が切れて、横にスクロールしないと読めませんでした。
- 対応：画面の幅が狭いときは、項目名と内容を縦に並べて表示するようにしました。
料金・期間の表に表題を付けました（達成基準 1.3.1）
- 初回試験での指摘：「デザインリサーチ＆コンサルティング」のページの表に表題がなく、何の表なのかが読み上げで先に伝わりませんでした。
- 対応：表の上に「料金・期間の目安」という表題を付けました。
埋め込み動画の選択中の表示を追加しました（達成基準 2.4.7）
- 初回試験での指摘：事例のページに埋め込んだ YouTube の動画を、キーボードで選んだときに、選択中であることが見えませんでした。
- 対応：キーボードで動画を選んだとき、動画のまわりに枠を表示するようにしました。
本文の小見出しの文字色（達成基準 1.4.3）
- 初回試験での指摘：本文中のピンクの小見出しなどが、背景とのコントラストの基準（4.5:1）に届いていません。
- 対応：「メニューの文字色・『お問い合わせ』ボタンの色」と同じく、基準を満たす色を試作して比べたうえで、今回は色の変更を見送り、従来の色を維持しています。
初回試験で不合格となった達成基準 1.4.11・1.4.12 について
初回試験では、「1.4.11 非テキストのコントラスト」と「1.4.12 テキストの間隔」が全6ページで不合格となりました。これを受けて当団体で同じ6ページを確認したところ、次のとおりでした。上の試験結果一覧は、初回試験の判定のまま掲載しています。
- 1.4.11 非テキストのコントラスト：試験で指摘されたアイコン（フッターの SNS アイコン）、メニューボタンの線、お問い合わせフォームの入力欄の枠線は、いずれも背景とのコントラスト比が 3:1 以上（4.0:1〜21:1）でした。
- 1.4.12 テキストの間隔：行の高さ・段落の間隔・文字の間隔・単語の間隔を、達成基準で定める値に広げて表示しても、パソコン・スマートフォンのどちらの表示でも、文字の切れや重なり、横スクロールは生じませんでした。