フォームコントロールのコントラスト
Silktide は、テキストボックスやドロップダウンメニューなどのフォームフィールドが、周囲の領域から視覚的に際立っているかをチェックします。ページに溶け込んでいるフィールドは、視力の低い人にとって見つけて操作することが困難です。
重要な理由
フォームに入力するには、まずフィールドの位置を確認できなければなりません。白いページ上に境界線のない白い入力欄があると、多くのロービジョンの人には見えません。どこをクリックしたり入力したりすればよいのか判断できないためです。フォームは通常、ウェブサイトの中で最も重要な部分（問い合わせ、購入手続き、登録）であるため、見つけられないフィールドは、そのまま問い合わせや売上の損失につながります。これは の 要件でもあります。
修正方法
- コントロールに、周囲の背景に対する が 3:1 以上の、視認できる境界線またはアウトラインを付けます。通常、スタイルシートを1行変更するだけで対応できます。
/* 白いページ上でフィールドが見えない */
input { background: #fff; border: 1px solid #f2f2f2; }
/* 修正後: 境界線と背景のコントラスト比が3:1以上 */
input { background: #fff; border: 1px solid #767676; }
- あるいは、周囲に対するコントラスト比が少なくとも3:1になる色で、コントロール自体を塗りつぶします。
Silktide によるテスト方法
- ページ上にある、表示されているすべてのテキスト入力、テキストエリア、ドロップダウン（
<input>、<textarea>、<select>）を見つけます。ただし、チェック対象から除外されている要素は除きます。 - チェックボックス、ラジオボタン、送信／リセット／画像ボタン、ファイル選択、非表示の入力など、ブラウザーまたはオペレーティングシステムが外観を描画する入力タイプは除外します。
- 透明度と親要素を考慮し、コントロールの実効的な背景色と、その周囲の領域の背景色を特定します。
- コントロールの塗りつぶしと周囲の背景とのコントラスト比が 3:1 以上であれば合格とします。それ以外の場合は、コントロールの境界線とアウトラインの各色を周囲の背景に対してテストし、いずれかが3:1に達していれば合格とします。
- 3:1に達するものがないコントロールを、確認された最良のコントラストとともに報告します。
トラブルシューティング
測定できない効果
ドロップシャドウ、光彩、グラデーション、背景画像には測定できる単一の色がないため、そのような効果だけによって提供されるコントラストは評価されません。同様に、複数の異なる背景の上に配置されたコントロール（たとえば position: absolute を使用している場合）は、測定できないことがあります。指摘されたコントロールが実際には周囲と区別できる場合は、該当の指摘を してください。
ボタン、チェックボックス、ラジオボタンはチェックされない
ラベルが読みやすければ、ボタンに視認できる境界線は必要ありません。また、チェックボックスとラジオボタンは通常ブラウザーによって描画されるため、このチェックでは意図的に対象外としています。
カスタムスタイルのドロップダウン
一部のコンポーネントライブラリでは、ネイティブコントロールを非表示にして独自の代替要素を描画します。Silktide は非表示のネイティブコントロールをスキップし、可能な場合は表示されている代替要素を他の要素と同様に評価します。