ツールチップのアクセシビリティ

Question

素敵なアクセシブルなウェブページを構築するのは難しいです。現在、私はツールチップWebにアクセス可能にしようとしており、私は助けが必要です。皆さんにはアドバイスがありますか？何のようにアリアの属性を使用する必要があります。または、追加したい他の重要なもの！

さらに、スクリーンリーダーが表示されていない場合、スクリーンリーダーがツールチップを読み取らないようにするにはどうすればよいですか？ここで私のアプローチは、javascriptを使用して、aria-hidden属性の追加と削除を行うことですが、できるだけJSを避けたいのです。あなたがフォーカス可能な要素にツールチップを表示する必要があります

Answer 1

（この要素がフォーカス可能でない場合、あなたはtabindex属性を設定する必要があります）

<input type="text" id="mytextbox" aria-describedby="mytooltip" /> 
<span id="mytooltip" role="tooltip" class="tooltip" aria-hidden="true">Tooltip for the textbox</span> 

aria-describedbyがあなたのフォーカス可能な要素間の関係を設定しますツールチップ。 tooltip役割のサポートはそれほど重要ではありませんが、この主題のために設計されているように使用する必要があります。

これが完了すると、あなただけのCSSでの初期状態を設定する必要があります。

.tooltip[aria-hidden='true'] {display: none} 
    .tooltip[aria-hidden='false'] {display: block} 

をして、お気に入りのJavaScriptコードを使用してfocusかmouseoverイベントで、偽のにtrueにaria-hidden属性を定義しますblurおよびmouseoutイベント。