組み込んだ取り組みと、まだ足りない点

当社は、ウェブコンテンツ・アクセシビリティ・ガイドライン(WCAG)バージョン2.2のレベルAAに沿って構築しています。これは、欧州アクセシビリティ法や米国のSection 508が参照しているレベルです。色のコントラストについては、さらにレベルAAAを目標としています。このサイトの大部分は、ほぼ黒の背景に白とグレーの文字で構成されており、低い基準で妥協する理由がなかったためです。

当サイトが適合していると主張するものではありません。適合の主張は試験に基づくべきですが、このサイトは社外の誰かによる監査を受けておらず、スクリーンリーダーを日常的に使用している方々による試験も受けていません。その代わりに行ったのは計測です。すべての文字色を、目視ではなく、それが置かれた背景に対して計算しました。すべてのページについて、機械的に確認できる項目を機械的に確認しました。メニュー、表、カルーセルを通るキーボード操作の経路も、ブラウザで実際にたどって確認しました。これは誠実な取り組みですが、監査と同じものではありません。

この声明は、www.surglasses.comの公開ページを対象としています。ニュースやイベントの公開に当社スタッフが使用する編集ツール(パスワードで保護された社内ツールです)は対象外です。また、当社の医療機器や教育システムの内部にあるソフトウェアも対象外です—これらには、それぞれ独自の文書と規制上の要件があります。

• 「メインコンテンツへスキップ」リンクが、すべてのページで最初に到達する項目です。ページごとにメニュー全体をTabキーで移動する必要はありません。
• キーボードのフォーカスは常に表示されます。フォーカスのある要素の周囲に緑色のアウトラインが描かれ、境界線に隠れないよう要素から少し離して表示されます。キーボード操作のときだけ表示され、マウスのクリックでは表示されないため、必要なときには見え、不要なときには邪魔になりません。
• メニューは、メニューとして動作します。4つのドロップダウンの操作部分は、ボタンのふりをしたリンクではなく本物のボタンで、開いているかどうかを通知します。下矢印キーでメニューを開いて中へ移動し、上下の矢印キーで項目間を移動し、Escapeキーで閉じてフォーカスを操作部分に戻します。デスクトップでは、JavaScriptがなくてもフォーカスで開きます。
• 幅の広い比較表は、キーボードでスクロールできます。それぞれの表は、独自の名前を持つフォーカス可能な領域に置かれているため、表はその枠の中で横にスクロールし、ページ自体は横にスクロールしません。
• 年ごとの沿革は、私たちについてページで、本物のタブリストとして作られています。左右の矢印キーで年を移動し、HomeキーとEndキーで最初と最後の年へ移動でき、各年のパネルはそのタブに関連付けられています。
• タブ順序を勝手に変えるものはありません。サイト内のどの要素にも、タブ順序の独自の位置は設定していないため、フォーカスはページ内の表示順に従って移動します。
• ボタンは、文字ではなくアイコンの場合、少なくとも44ピクセル四方です。メニューボタン、ソーシャルリンク、カルーセルの操作ボタンが該当します。

内部的には、各ページは通常のHTMLです。ページごとに1つの主見出しがあり、その下に残りの見出しが順番に入れ子になっています。ヘッダー、ナビゲーション、メイン、フッターの各領域、そして本物のリストと表を使っています。サイトの比較表にある59個の見出しセルはすべて、行の見出しか列の見出しかを宣言しています。すべての画像には代替テキストがあり、純粋に装飾用の25点は、スクリーンリーダーがファイル名を読み上げずに飛ばせるよう、その旨を示しています。また、当社スタッフがニュースやイベントに画像を追加するときは、編集画面が同時に説明文の入力を求めます。

ニュースページでは、カテゴリを変えたりページをめくったりすると、再読み込みではなく一覧がその場で入れ替わります。これでは、スクリーンリーダーの利用者に何か起きたことが伝わらない場合があるため、読み込み中は一覧に処理中であることを示し、新しい一覧が表示されたらフォーカスをその中へ移動します。

このサイトには、お問い合わせページと購入についてのページの2つのフォームがあり、このページの内容を念頭に作られています。

• 自動チェックがありますが、解かなければならないタイプのものではありません。フォームには1つのチェックを設けています。自動化されたソフトウェアだけが入力する隠し欄や、1つの接続から送れるメッセージ数の制限といった、利用者に何も求めない対策だけでは、フォームを正しく入力して送ってくる送信者を止められないためです。選んだチェックは、パズルを出す代わりにブラウザの挙動を観察します。信号機を選んだり、歪んだ文字を書き写したりする必要はなく、たいていは自動で完了し、その旨を示す小さなボックスが表示されるだけです。ただし、負担がまったくないとは言いません。JavaScriptが必要であり、確認のために1回のクリックを求めることがあり、第三者のコンポーネントです。何らかの理由で妨げになる場合は、代わりにお電話ください(電話番号はこのページの下部にあります)—この経路にはチェックがなく、同じように対応します。
• すべての入力欄に、本物のラベルがあります。入力を始めると消えてしまうプレースホルダーではなく、常に入力ボックスの上に表示されます。必須の入力欄はブラウザに対して必須として示されるため、送信前にお使いのソフトウェアが知らせることができます。
• 入力欄は、何のためのものかを宣言しています。お名前、メールアドレス、所属、国、電話番号などがあり、ブラウザやパスワードマネージャーの自動入力で補完できます。
• 複数の製品の選択はチェックボックスです。複数選択リストではありません。そうしたリストはCtrlキーを押しながらのクリックが必要で、スマートフォンではほとんど使えません。
• 時間制限はなく、期限切れになるセッションもありません。お好きなだけ時間をかけて入力できます。唯一の時間に関する規則は下限で、ページを開いてからおよそ3秒以内に送信されたフォームは、自動送信として扱われます。
• フォームにはJavaScriptが必要です。セキュリティチェックもフォームの送信も必要とするため、無効にしているとフォームを送信できません。その場合、フォームにその旨が表示され、代わりに当社の電話番号が案内されます。JavaScriptが有効であれば、送信できた、または修正が必要な点がある、という結果が、ボタンの横のメッセージに表示され、スクリーンリーダーが読み上げ、キーボードのフォーカスもそこへ移動します。

フォームがどのような理由でもご自身に合わない場合は、無理に使わず、お電話ください。電話番号はこのページの下部と、拠点のページにあります。.

このサイトは、通常のHTML、CSS、JavaScriptでできています。インストールするプラグインやアプリはありません。ここで公開しているものに、PDFでしか入手できないものはなく、すべてのページがWebページなので、ブラウザ標準の読み上げ補助機能がすべてに使えます。また、他社から埋め込まれているものはほとんどありません。チャットのバブル、第三者の動画プレーヤー、オーバーレイ型のウィジェットはありません。これは思う以上に重要です。そうしたオーバーレイは、キーボード利用者がページで行き詰まる最も一般的な原因の1つですが、ここにはありません。唯一の例外は、上記のフォームで説明した2つのフォームのセキュリティチェックで、これらのページ以外にはありません。

当社独自のお知らせは1つだけです。広告と分析の計測に関するCookieのお知らせで、回答するまで1回表示されます。購入したものではなく自社で作成したため、きちんと動作します。キーボード利用者のためにページの末尾ではなく冒頭近くに置かれ、フォーカスを閉じ込めたり背後のページを操作不能にしたりせず、2つのボタンは同じ大きさでキーボードで操作でき、一度回答すれば終わりです。辞退した場合でも、このサイトで利用できなくなるものはありません。

JavaScriptを無効にしても、サイト全体を読むことができます。これらのページのすべての文章、画像、表、動画はHTMLそのものに含まれています。失われるのは利便性です。セクションのショートカット一覧は作られず、ホームページのカルーセルの最初のスライドはそのまま止まり、セクションはフェードインせずにすぐ表示され、ニュースページは一般的なサイトと同じように新しいページを読み込んでページを送ります。動画には通常のコントロールがあります。2つのフォームは、セキュリティチェックがあるため、JavaScriptなしでは動作しない唯一のものです。フォームにその旨が表示され、代わりに当社の電話番号が案内されます。

このサイトは、Windows、macOS、iOS、AndroidのChrome、Edge、Firefox、Safariの現行バージョンで動作するよう作られており、いずれか1つでしか対応していない機能は意図的に使っていません。透過の製品アニメーションが動画ではなく画像なのもそのためで、透過動画は4つのブラウザすべてが再生できる形式がありません。ページの動作がおかしい場合は、ブラウザとバージョンをお知らせください。たいていそれで再現できます。