web-dev-qa-db-ja.com

ホバー状態ボタンのテキストは、アクセシビリティガイドラインを満たす必要がありますか?

アクセシビリティの基本的な理解と、それが製品の視覚要素にどのように適用されるかを理解しました。できる限りガイドラインを適用したいと思っています。

私の質問は、ホバー状態ボタンのテキストも、通常の状態だけでなく、アクセシビリティガイドラインにも準拠する必要があるかどうかです。

3
D Smith

マウスホバーで強調表示されているテーブル行の例を見てみましょう。 Sooraj MVで述べたように、WCAGは、AAレベルのアクセシビリティーに対して最小4.5:1のコントラスト比を適用します。

OKですが、要素にホバリング/フォーカスしていないときは、色のコントラストが良いと主張できます。問題は、視力の弱い人が画面拡大鏡を使用することです。たとえば、テーブルの行を読むには、マウスをホバーする必要があります。つまり、行を読み取るたびにホバー操作がトリガーされ、この場合は良好な色のコントラストが必須になります。

フォーカスされた要素のコントラストについては、問題はそれほど明白ではないように見えますが、ユーザーは通常、相互作用をトリガーする直前に要素(つまりボタン)に焦点を合わせます。彼らが焦点を当てたものを読むことができない場合、彼らはどのようにして行動が何であるかを知っているはずですか?彼らは行き来する必要があります。明らかにこれは良いユーザー体験ではありません。

アクセシビリティWebサイトの設計に役立つアクセシビリティガイドラインがここにあることを忘れないでください。結局、アクセス可能かどうかを判断できるのはユーザーテストだけです。そして、WCAG AAを尊重しながら、非常に悪いユーザー体験を提供することができます...ガイドラインよりもユーザーのフィードバックを優先してください

3
Leths

はい、もちろん。 WCAG 2.0バージョン1.4.3は、ホバー/フォーカス状態のボタンテキストの色の変更に関して特に言及していません。ホバー/フォーカス状態のボタンテキストは、WCAG 2.0のAA適合レベルに合格するために、4.5:1以上のコントラスト比を維持する必要があると想定しても安全です。詳細はここにあります: https://webaim.org/articles/contrast/

一般的なフォーカス/ホバー状態に関するコンテンツのアクセシビリティガイドラインを探している場合、それらは達成基準1.4.13の最新バージョンのWCAG 2.1 2018バージョンで明確に説明されています https://www.w3.org/ WAI/WCAG21/Understanding/content-on-hover-or-focus.html

2
Sooraj MV

最初に、うまくいけば、ホバー状態もキーボードフォーカスで示されます。 (:hoverおよび:focusと同じスタイル定義)。

ボタンがフォーカスされているか、ホバーされているかどうかに関係なく、ボタンのテキストは背景色と十分なコントラストを持っている必要があります。そうしなかった場合、フォーカス/ホバーを受け取ったときにテキストが非表示になる可能性があり、テキストが表示されないためボタンを選択する必要があるかどうかわかりません。

ただし、 1.4.11 は、フォーカスの色またはホバーの色にデフォルトの状態との十分なコントラストが必要ないことを示しています。つまり、ボタンの背景がホバー状態とデフォルト状態の間でわずかに変化する場合、その色の違いにはコントラスト要件はありません。

2
slugolicious

あなたは非常に一般的なアクセシビリティについての考え方を説明します。

それがコンタクトフォームのためのものであると仮定して、それらの質問をしてみましょう:

  1. ホバー状態にアクセスできる必要がありますか、それともボタン全体ですか?
  2. ボタンはアクセス可能にする必要がありますか、それともフォームを送信する方法ですか?
  3. フォームはアクセス可能である必要がありますか、それとも人々があなたに連絡できるという事実だけですか?

障害者が連絡先フォームにアクセスできるようにするのに苦労していて、障害者が電話をかけることを好むことがわかるかもしれません。ページに電話番号を追加するだけで、それらの人々があなたに連絡するのがずっと簡単になります。これは単なる例ですが、ポイントが明確になることを願っています。すべてのユーザーは、ボタンの機能とフォームのコンテキストでのボタンの動作を理解できますか?

ホバー状態だけでなく、ボタン全体にフォーカスし、ホバー状態がボタンのアクセシビリティを向上または低下させるかどうか、およびその方法を確認してください。

ボタンのホバー状態はいくつかの重要な情報を伝えますか?この情報を別の方法で提供します。ホバー状態がキーボードユーザーのフォーカス状態と同じ機能を持つ場合は、アクセス可能にする必要があります。

1
jazZRo

はい、そうです。ホバー状態はUIコントロールの状態の1つにすぎないため、すべての要件が適用されます。

無効な(非アクティブな)状態のみが、カラーコントラストの要件から除外されます。

を参照してください。成功基準1.4.3コントラストが強いテキスト(最小)付随的

1
Davyd Geyl