駒瑠市（こまるしKomaru City） アクセシビリティ上の問題の体験サイト

体験サイトのイメージ画像

障壁（バリア）の設定

プリセット版

問題をあらかじめ設定（プリセット）した駒瑠市サイトです。カスタマイズ版にのみ存在する障壁もあります。

プリセット版で使うWCAGのバージョンを選択してください

WCAG 2.0以外のバリアは、徐々に増やしています。WCAG 2.2のバリアはまだありません。

カスタマイズ版

パターンコードからサイトを生成します

カスタマイズ版で使うWCAGのバージョンを選択してください（準備中です）
  1. 障壁の設定 サイトに実装する障壁の設定を行います。ランダムな問題生成か個別指定を選んでください
  2. 障壁パターンコードの出力 「障壁パターンコードを生成」のボタンを押すと、障壁パターンコードがこのページのtextareaに出力されます
  3. サイトを生成 「サイトを生成する」を押すことで、設定に応じたサイトが生成されます

※設定した障壁を使いまわしたい時には、この障壁パターンコードを保存しておいてください。ふたたびこのページのtextareaに貼付することで、おなじ障壁を再現できます
※開発中のサービスですので、障壁の種類や箇所は随時変更があります。障壁パターンコードがうまく機能しなくなった場合は、障壁パターンコードを再生成してください

設定項目を表示します
  • 1.1.1 非テキストコンテンツ
    • 1.1.1a
    • 1.1.1b
    • 1.1.1c
    • 1.1.1d
    • 1.1.1e
    • 1.1.1f
    • 1.1.1g
    • 1.1.1h
  • 1.2.1 音声のみ及び映像のみ (収録済)
    • 1.2.1a
    • 1.2.1b
  • 1.2 時間依存メディア
    • 1.2a
  • 1.3.1 情報及び関係性
    • 1.3.1a
    • 1.3.1b
    • 1.3.1c
    • 1.3.1d
    • 1.3.1e
    • 1.3.1f
    • 1.3.1g
    • 1.3.1h
  • 1.3.3 感覚的な特徴
    • 1.3.3a
  • 1.3.4 表示の向き
    • 1.3.4a
  • 1.3.5 入力目的の特定
    • 1.3.5a
  • 1.4.13 ホバー又はフォーカスで表示されるコンテンツ
    • 1.4.13a
  • 1.4.1 色の使用
    • 1.4.1a
    • 1.4.1b
    • 1.4.1c
  • 1.4.2 音声の制御
    • 1.4.2a
  • 1.4.3 コントラスト (最低限)
    • 1.4.3a
    • 1.4.3b
    • 1.4.3c
    • 1.4.3d
    • 1.4.3e
    • 1.4.3f
    • 1.4.3g
  • 1.4.4 テキストのサイズ変更
    • 1.4.4a
    • 1.4.4b
  • 1.4.5 文字画像
    • 1.4.5a
    • 1.4.5b
  • 2.1.1 キーボード
    • 2.1.1a
    • 2.1.1b
    • 2.1.1c
  • 2.1.2 キーボードトラップなし
    • 2.1.2a
    • 2.1.2b
    • 2.1.2c
  • 2.1.4 文字キーのショートカット
    • 2.1.4a
  • 2.2.1 タイミング調整可能
    • 2.2.1a
  • 2.2.2 一時停止、停止、非表示
    • 2.2.2a
    • 2.2.2b
    • 2.2.2c
    • 2.2.2d
  • 2.4.1 ブロックスキップ
    • 2.4.1a
    • 2.4.1b
    • 2.4.1c
  • 2.4.2 ページタイトル
    • 2.4.2a
  • 2.4.3 フォーカス順序
    • 2.4.3a
  • 2.4.4 リンクの目的 (コンテキスト内)
    • 2.4.4a
  • 2.4.5 複数の手段
    • 2.4.5a
  • 2.4.6 見出し及びラベル
    • 2.4.6a
  • 2.4.7 フォーカスの可視化
    • 2.4.7a
  • 3.1.1 ページの言語
    • 3.1.1a
  • 3.1.2 一部分の言語
    • 3.1.2a
  • 3.2.1 フォーカス時
    • 3.2.1a
  • 3.2.2 入力時
    • 3.2.2a
  • 3.2.3 一貫したナビゲーション
    • 3.2.3a
  • 3.2.4 一貫した識別性
    • 3.2.4a
    • 3.2.4b
  • 3.3.1 エラーの特定
    • 3.3.1a
  • 3.3.2 ラベル又は説明
    • 3.3.2a
    • 3.3.2b
    • 3.3.2c
  • 3.3.3 エラー修正の提案
    • 3.3.3a
  • 3.3.4 エラー回避 (法的、金融、データ)
    • 3.3.4a
    • 3.3.7a
  • 4.1.1 構文解析
    • 4.1.1a
  • 4.1.2 名前 (name) ・役割 (role) 及び値 (value)
    • 4.1.2a

※設定した障壁を使いまわしたい時には、障壁パターンコードを保存しておいてください。ふたたびこのtextareaに貼付することで、おなじ障壁を再現できます
※開発中のサービスですので、障壁の種類や箇所は随時変更があります。障壁パターンコードによるサイトの生成がうまく機能しなくなった場合は、障壁パターンコードを再生成してください

URLによるカスタマイズ

?criteria=の形式のURLを使うことで、個別に障壁や達成事例を設定できます。criteriaが受け付けるのは、以下のような形式です。カンマ区切りで複数指定も可能です（?criteria=2.1.1,2.4.1）

ストーリー版

駒瑠市地球温暖化防止課の過去4年を振り返り、改善されていく様子をみてみましょう。
また、それぞれの年に存在するバリアに対応した試験結果を用意しているので、あわせて参考にしてください。

  • 4年前の駒瑠市

    サイトには多くのバリアが存在している状態。試験結果を公開していないのにもかかわらず、AA準拠の表記をしている。

  • 3年前の駒瑠市

    アクセシビリティの対応状況について、駒瑠市情報化推進室から指摘があり、急遽アクセシビリティ改修を行うことになった。試験結果はA一部準拠になった。試験結果の公開も行っている。

  • 2年前の駒瑠市

    動画とPDFのアクセシビリティに課題を残しているが、改善を行ったことでAA一部準拠（A準拠）を達成した。

  • 昨年の駒瑠市

    動画とPDFについてのアクセシビリティ改善を行い、AA準拠を達成。アクセシビリティ方針に「追加するレベルAAAの達成基準」を追加した。

注意事項

  • このサイトは「架空の地方自治体（駒瑠市・こまるし）のとある課のサイト」という設定でできています
  • サイトには意図的にアクセシビリティ上の問題が仕込んであります。利用には不快感を伴うことがあります
  • フォームの送信後のページなど、対象外の箇所には「試験対象外」というテキストが付与されています
  • PDFによる情報提供が存在します。当然ながらHTMLで情報提供した方が良いのですが、このサイトでは、「『お知らせ』はPDFによる添付しかできない困ったCMSを使っている」というような設定だとご理解ください
  • ブラウザで音声の自動再生をオフにしている場合で、自動再生の不具合を確認したい場合は、ブラウザの設定を調整してください
  • 「障壁の設定」では便宜上達成基準の番号ごとのまとまりを持っていますが、システムの都合上、必ずしも障壁の内容と達成基準の番号は一致しません
  • 意図的にアクセシビリティ上の問題を生成するため、HTMLの文法に誤った箇所が含まれている場合があります
  • いくつかの達成基準の項目について、障壁が実装されていないものがありますが、「2.3.1 3回の閃光又は閾値以下」の障壁については、将来的にも実装の予定はありません
  • 現在も制作を続けておりますので、バグが含まれている可能性があることをご了承ください

問い合わせ等

Google Analyticsについて

Google Analyticsをつかってアクセス解析を行っています。

変更履歴

    • トップページの「あなたにもできる取り組み」の画像にツールチップを実装し、「1.4.13 ホバー又はフォーカスで表示されるコンテンツ (AA)」の不適合事例を実装しました（2秒以内で消えるツールチップ、消せないツールチップ、ホバーできないツールチップ）
    • 1.4.13の不具合の実装のついでに、トップページの「あなたにもできる取り組み」の周辺で、1.1.1や2.1.1のバリアをいくつか追加
    • キーボードトラップの事例をハンバーガーメニュー部分に実装しました。キーボードトラップの2.2.2のプリセットもこちらに変更しています（古いバリアは消してはいません）。
    • 「駒瑠市環境イベント エこ・まるシェ」のページを追加し、「1.1.1 非テキストコンテンツ (A)」の不適合事例として、短い文章で説明できない内容の画像を足しました（1.1.1f）
    • 「駒瑠市環境イベント エこ・まるシェ」のページを追加し、「1.4.3 コントラスト (最低限) (AA)」の不適合事例のチラシ画像を足しました（1.4.3g）