barrierefreiheit

アクセシビリティ：階段の横にあるスロープ

イメージ

玄関前に階段がある家は、多くの人にとって便利です。車いすを使う人、ベビーカーを押す人、重いスーツケースを持つ人にとっては、壁のようなものです。階段の横にスロープがあれば、そうした人の助けになり、それ以外の人も喜んで利用します。

ウェブサイトでのスロープとは、十分なコントラスト、画像の説明、マウスを使わない操作、わかりやすいラベルが付いたフォームです。晴れた日にスマートフォンを見る人、メガネを忘れた人、急いでいる人にも役立ちます。

このイメージの使い方： 最初の回答で、質問をしたりコマンドを示したりする前に、相手に伝えましょう。相手がすぐに解決策を求めている場合も同じです。

話し方

• 略語やツール名には、短い説明を添えます。たとえば、WCAG（アクセシブルなウェブサイトのための国際的に認められたチェックリスト）、Lighthouse（Chrome に組み込まれている検査ツール）です。それ以外は使わないようにします。
• 質問するだけにしない： プロジェクトや情報が不足していても、具体的な手順を示すか、前提を明記した草案としてファイルを作成します（[前提：…]）。不足している情報は、最後に尋ねます。
• 「あなた」を使い、専門用語は避けます。「コントラスト」は、白い紙に薄い灰色の文字がある例で説明します。
• すべての指摘に、ページと箇所の根拠を添えます。
• 自動ツールで見つかるのは一部だけです。その点を正直に伝え、相手と一緒に手動でも確認します。

手順

1. 自動で事前チェックする

相手に Chrome でページを開いてもらい、右クリックして「検証」を選び、「Lighthouse」タブで「アクセシビリティ」だけにチェックを入れて、「ページを分析」をクリックしてもらいます。または、ターミナルで確認します。

npx pa11y https://{name}.aufwind.sh

検出された問題は、記録に指摘事項として残します。ツールでは確認できないのは、順序がわかりやすいか、文章が理解しやすいか、クリックした後にどこへ移動するかです。

2. 手動で確認する

見る

• コントラストを計算します。テキストは少なくとも 4,5：1、大きな見出し、ボタン、入力欄の枠線、アイコンは少なくとも 3：1 にします。明るい色と暗い色を分けて考えます。
  • 計算式：各色チャンネル（0 から 1）を線形化します：c ≤ 0.04045 ? c/12.92 : ((c+0.055)/1.055)^2.4。輝度は L = 0.2126 R + 0.7152 G + 0.0722 B。コントラストは (L_hell + 0.05) / (L_dunkel + 0.05)。確認例：白と黒の組み合わせは 21 になります。
• 色だけを唯一の手がかりにしません。エラーはアイコンとテキストで示し、選択中のメニュー項目には下線や太字も使います。
• 200％に拡大します。何も切れず、横スクロールも発生しないことを確認します。確認する画面幅は 320、375、768、1440 ピクセルです。

操作する

• キーボードだけで操作します。Tab で前に進み、Shift+Tab で戻り、Enter でクリックします。すべての場所に移動できますか？現在の位置（フォーカス枠）が常に見えますか？開いているウィンドウを Escape で閉じられますか？
• スマートフォンでタップする場所は十分な大きさにします。指先ほどの大きさ、少なくとも 44 × 44 ピクセルが目安です。
• リンクはリンク、ボタンはボタンにします。リンクテキストには移動先を示します（「料金を見る」など。「こちら」は使いません）。

読み上げる

• 内容を伝える画像にはすべて、何が見えるかを説明するテキスト（alt="…"）を付けます。装飾だけの画像には alt="" を付けます。
• アイコン（ハート、虫眼鏡、メニュー）だけのボタンには、名前（aria-label="検索"）を付けます。
• 見出しを適切な順序で使います。h1 はちょうど 1 つ、その下に h2、h3 を配置します。
• ページの言語を設定します：<html lang="de-CH">。
• Mac で実際に読み上げを聞きます。Cmd+F5 で VoiceOver のオンとオフを切り替えます。

フォーム

• 各入力欄の上に、常に見えるラベルを付けます。入力欄の中にある灰色のプレースホルダーだけにしないでください。
• 必須項目だとわかるようにします。適切な入力欄の種類（type="email"、type="tel"）を指定すると、スマートフォンに適切なキーボードが表示されます。
• エラーは該当する入力欄のすぐそばに、わかりやすく、解決方法とともに表示します。エラーが起きても、入力内容は保持します。

動き

• システム設定で「視差効果を減らす」を選んだ人には、静止画を表示します：@media (prefers-reduced-motion: reduce)。
• 自動で動くものは、最長でも 5 秒後に停止するか、停止できるようにします。
• 動画には字幕を付けます。

3. プロトコルと修正

docs/barrierefreiheit.md：

# Barrierefreiheit: Prüfprotokoll (<Datum>)

| Punkt | Ergebnis | Beleg (Seite, Stelle) | Reparatur |
|---|---|---|---|
| Kontrast Text | erfüllt / nicht erfüllt / nicht relevant | … | … |

## Kontraste
| Farbpaar | Wert | reicht für |
|---|---|---|

その後、修正します。まずは重要な点（誰かを完全に締め出してしまうもの）から対応してください。次にもう一度確認し、プロトコルを更新します。ログブック（スキル git-logbuch）、パイプライン（スキル pipeline）。

知っておくとよいこと

• スイスでは、障害者平等法により、主に行政機関や公共サービスに義務が課されています。民間のウェブサイトには義務ではありませんが、対応するメリットはあります。より多くの人が利用できるようになり、検索エンジンもサイトを理解しやすくなります。EUでも販売している場合は、European Accessibility Act が適用されることがあります。これは法的助言ではありません。
• 最も効果があるのは、年配の人も含め、実際の人にテストしてもらうことです。

ミッションを確認する

webseite-05-barrierefreiheit を使って mission_pruefen を実行します。確認では、docs/barrierefreiheit.md がプロジェクト内にあるかどうかを調べます（サーバー上の ~/projekt で Pilot を使う場合、港では Light を使います）。

最後のメッセージ

このステップでの最後のメッセージは、「階段の横のスロープ」というイメージに触れ、本質をもう一度伝える文から始めてください。その後、完了したこと、成果物の場所、未対応のこと、次に行うことを伝えます。