ヘルプツールチップとスクリーンリーダー
多くのフィールドラベルのヘルプツールチップを含む入力フォームがあります（通常は例よりも意味があります）。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
これらのツールチップのスクリーンリーダーにアクセスできるようにする適切な/標準的な方法は何ですか？
(?)要素にツールチップを埋め込むだけで十分ですか？ヘルプテキストをalt属性などにコピーする必要がありますか？
アクセシビリティはスクリーンリーダーに対応するだけではありません。
ツールチップは、多くの状況で問題になる可能性があります。
- スクリーンリーダー（言及）
- 非マウスアクセス（キーボード、タッチデバイスなど）
- 器用さの課題（（？）アイコンは非常に小さいことが多い）
一般的に、次のことを行います。
- ターゲットをできるだけ大きくします
- フィールドの
labelのツールチップテキスト部分を作成するか、aria属性を使用して適切な論理接続を作成します - onfocusおよびtouchイベントを介してトリガーできることを確認してください。
個人的に、私は常に一般的な形で使用するためのツールチップに反対します。ツールチップ情報が役立つ場合は、画面に直接表示します。それが最も扱いやすい方法です。画面に直接表示するほど情報が役に立たない場合は、そもそも有用な情報ではないので、それをやめることができます。
alt属性を含めることは、Web上のアクセシビリティをサポートするための最初のステップです。
WebAIM（Web Accessibility in Mind）には、いくつかのヒントがある記事があります スクリーンリーダーの互換性のための設計 。多くのヒントの中には：
代替テキストが存在する場合、スクリーンリーダーは画像の代替テキストを読み上げます。 JAWSは、代替テキストの前に「グラフィック」という単語を付けます。画像がリンクの場合、JAWSは代替テキストの前に「グラフィックリンク」を付けます。
W3Cは WAI-ARIA と呼ばれる標準を定義しており、これはWebでのアクセシビリティをさらに強化します。
Accessible Rich Internet Applications SuiteであるWAI-ARIAは、障害を持つ人々がWebコンテンツおよびWebアプリケーションにアクセスしやすくする方法を定義しています。
ここで1.0仕様を見つけることができます： http://www.w3.org/TR/wai-aria/
マークアップを改善してサイト内のさまざまな地域の役割を定義する方法について詳しく説明します。仕様の要約から：
支援技術が障害のある人に適切な情報を伝達できるようにするために、Webコンテンツのアクセシビリティには、ウィジェット、構造、および動作に関するセマンティック情報が必要です。この仕様は、アクセス可能なユーザーインターフェイス要素を定義する役割、状態、プロパティのオントロジーを提供し、Webコンテンツとアプリケーションのアクセシビリティと相互運用性を向上させるために使用できます。これらのセマンティクスは、作成者がユーザーインターフェイスの動作と構造情報をドキュメントレベルのマークアップで支援技術に適切に伝達できるように設計されています。
たとえば、 label を textbox に関連付け、両方を form 領域内に配置できます。これにより、アクセシビリティソフトウェアにサイトの構造についてのより優れたアイデアが提供され、ユーザーにそれをよりよく伝えることができます。
このページ の W3C で示されるツールチップの例は次のとおりです。
<div class="text">
<label id="tp1-label" for="first">First Name:</label>
<input type="text" id="first" name="first" size="20" aria-labelledby="tp1-label" aria-describedby="tp1" aria-required="false" />
<div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">Your first name is a optional</div>
</div>
これ Bootstrap Accessibilityプラグインページ はさらに詳しく説明します：
- ツールチップの役割をツールチップdivに追加します。
- ランダムなIDを生成し、それをツールチップdivに割り当て、ARIA属性「aria-describedby」を使用してTooltip要素から参照します。
- ツールチップが非表示のときにaria-describebyを削除します。
スタイルが無効になっているとツールチップが表示される場合があるため、まずブラウザでCSSを無効にして、ツールチップが表示されているかどうかを確認します。これを行う1つの方法は、Web Developerブラウザー拡張を使用することです。これが Chrome および Firefox の場合です。それらにタブで移動して、それらが表示されるかどうかを確認できます。スタイルが無効になっているときにそれらが表示されない場合は、キーボードのみを使用してツールチップにアクセスできることを確認してください。キーボードでタブに移動します。作動しますか？これに加えて、ブラウザにWAVEツールバーを追加して、ページでWAVEを実行します。これにより、見逃した可能性のあるアクセシビリティエラーが表示されます。 Wave for Firefox および Wave for Chrome へのリンクを次に示します。