アクセシビリティに関する声明

この翻訳は参考用です。本ページは英語版が正文となります。

1. 私の姿勢

本サイトは、キーボード、スクリーンリーダー、拡大表示、動きの抑制や高コントラストの設定を使って閲覧される方を含め、どなたにも使えるものでありたいと考えています。アクセシビリティは最後の確認作業ではなく、開発の一部として扱っています。以下に挙げる対策のいくつかは、後退があればビルドを失敗させる自動テストによって守られています。

2. 適合状況

本サイトはウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG）2.2 のレベル AA への適合を目指しています。私の知る限り、また私が行った検証の範囲において、レベル AA の達成基準を満たしており、実質的に適合していると考えています。

完全適合は意図的に主張していません。第三者による独立したアクセシビリティ監査は実施しておらず、本サイトについて WCAG-EM に基づく正式な評価報告書も存在しません。これは主張を裏づける根拠の限界であって、既知の不備ではありません。不備を見つけた場合は第 5 節に記載します。

3. 実装している内容

キーボードとフォーカス

サイトナビゲーションを含むすべてのページで、スキップリンクが最初にフォーカスを受ける要素であり、単にスクロールするのではなく、フォーカスを本文へ移動します。
すべての操作要素に視認できるフォーカス表示があります。これを描画するルールはユーティリティクラスで無効化できず、その点はテストで保証されています。
モバイルメニューはフォーカストラップです。開くとフォーカスが中に入り、 Tab で内部を巡回し、Escape で閉じ、開いたボタンへ戻ります。
正の tabindex を持つ要素はないため、タブ順はページの並びに従います。

構造とスクリーンリーダー

各ページに main ランドマークがちょうど 1 つ、サイトのヘッダーとフッターが存在する箇所には banner と contentinfo がそれぞれ 1 つ、加えて名前付きのナビゲーションランドマークがあります。
各ページに h1 がちょうど 1 つあり、その下の見出しは順序どおりに入れ子となり、レベルの飛びはありません。
すべての画像に代替テキストがあり、装飾的な画像は埋め草の説明を与えるのではなく、支援技術から隠しています。
アイコンがコントロールの意味を担う場合、そのコントロールにはテキストの名前があります。見えるラベルが常にその名前の先頭となるため、音声入力でも表示どおりの語で操作できます。
ページの言語が宣言されており、各ページに固有で内容を表すタイトルがあります。

色・コントラスト・文字

テキストと UI の色はビルド時に導出し、それぞれの背景に対して検証しています。本文は 4.5:1 以上、主要テキストは 7:1 を満たし、ボタンのべた塗りは、ラベルが 4.5:1 を超えるまで暗くします。
本サイトのテキストが 12px を下回って表示されることはありません。これは下限であり、テストで保証しています。
色だけで情報を伝えることはありません。選択状態にはラベル、形状、または aria-current の値も伴います。
ライトとダークの 2 つのテーマを用意しています。本サイトはシステム設定を読み取るのではなくダークで開き、ヘッダーの切り替えで選ばれたテーマを記憶します。

動き・ズーム・ポインター

動きの抑制を尊重します。システムがこれを要求している場合、登場アニメーション、スクロール時の表示演出、ビュー遷移を抑制します。
コントラストの強調と Windows のハイコントラストモードに対応しています。グラデーションの文字は単色に切り替わり、塗りだけで示していた状態にはシステム色の枠線が付きます。
ズームは妨げていません。ページは 500 % まで拡大でき、WCAG 1.4.10「リフロー」が定める 320px 幅では、横スクロールなしの 1 カラムで表示されます。320px から 1920px までのすべての幅を確認しており、名前の付いたブレークポイントだけではありません。
操作要素は少なくとも 44 × 44 px のターゲットを備え、 WCAG 2.2 の最小値 24 × 24 px を上回ります。それより小さく描画される場合は、小さいままにせず、背後のクリック領域を広げています。唯一の例外は文中のリンクで、 WCAG 2.5.8 のインライン例外に該当します。ここで高さを固定すると、前後の段落の行間が崩れてしまうためです。

フォーム

すべての項目にプログラムから関連づけられた名前があります。項目が複数あるフォーム（お問い合わせフォームと Cookie 設定パネル）では、その名前は目に見える <label> です。単一項目のコントロール（ニュースレター登録、一覧の検索、コメント入力、メールでのサインイン）は aria-label から名前を取り、隣接する見出し・アイコン・ボタンが画面上で同じ意味を担います。
エラーは色だけでなく、該当項目のそばにテキストで示し、その項目と関連づけているため、フォーカスが当たるとスクリーンリーダーがメッセージを読み上げます。
不正な項目があるままフォームを送信すると、フォーカスがその項目へ移動します。利用者が問題を探すのではなく、問題のほうから届く形にしています。
タッチ端末ではテキスト項目を 16px で表示するため、フォーカスしても元に戻せない iOS のズームが起きません。

4. 評価の方法

自己評価により、自動と手動の確認を組み合わせて実施しました。

プロジェクト自身のテスト群による自動テスト。フォーカス表示、テキストの最小サイズ、ターゲットサイズ、ランドマーク構造、画像の代替テキスト、見出し順序のいずれかが後退するとビルドが失敗します。
宣言された色を読むのではなく、半透明のレイヤーを合成し、実際に描画されたピクセルからコントラストを測定。
320px から 1920px までのビューポート走査。名前の付いたブレークポイントだけでなく、その間のすべての段階で、横方向のはみ出し、要素の重なり、テキストの切れを確認。
手動でのキーボード操作確認と、Chromium・Firefox・WebKit による複数エンジンでの検証。

5. 既知の限界

独立した監査がないこと。上記はすべて自己評価です。制作者以外による監査があれば、第 2 節の適合の主張はより強い根拠を持つことになります。
支援技術での検証が限定的であること。構造と挙動はアクセシビリティツリーとキーボードで検証していますが、主要なスクリーンリーダーすべてで通しの検証は行っていません。
第三者のコンテンツ。日程調整は外部の予約サービスが自社ドメインで提供しており、そのアクセシビリティを私が制御することはできません。これが障壁となる場合は、第 6 節の連絡手段をご利用ください。通話はメールでいつでも調整できます。
埋め込みメディア。現在、本サイトに公開されている動画はありません。「私について」のページで予告している紹介動画はまだ収録していません。収録した際には、上記で主張する適合レベルのために、WCAG 1.2.2 および 1.2.3 が字幕と書き起こしを求めます。

6. ご意見と連絡方法

本サイトで障壁に遭遇された場合は、ぜひお知らせください。修正への最短の道筋です。問題が私の側にあるか確信が持てない場合でも、ご報告を歓迎します。

メール：contact@mhsaeed.com — 優先的に対応してほしい場合は、件名に「アクセシビリティ」とお書きください。
またはお問い合わせフォームをご利用ください。

お問い合わせページと同じ約束として、24 時間以内に返信します。差し支えなければ、ページ、行おうとしていた操作、お使いのブラウザーまたは支援技術をお知らせください。問題の再現がはるかに速くなります。