3

「見えない」補足コンテンツを HTML 要素に追加しようとしていますが、DOM に新しい要素を作成することは避けたいと考えています。また、可能な限りアクセシビリティを維持したいと考えています (つまり、スクリーン リーダーの VoiceOver と JAWS による読み上げ)。どうすればいいですか？

注: 私のコンテキストでは、補足コンテンツは主にヘルプ テキストで構成されていますが、追加情報が表示される場合もあります。たとえば、目の見えるユーザーの場合、このコンテンツは非モーダル アラート ボックスまたはツールチップに表示される場合があります。

  1. title属性を使用できますが、これに関連する問題がかなりあるようです。また、テキストの外観をカスタマイズできるようにしたいと思います (カスタム ツールチップかウィジェットか) title、ブラウザーのデフォルト ツールチップを生成します。

  2. aria-label属性にコンテンツを入れることもできますが、これは補足コンテンツよりも代替コンテンツに適しているようです。

  3. 最もアクセスしやすい方法は のようですがaria-describedby、その場合、ID と ARIA role を使用してコンテンツを別の DOM 要素に入れる必要があり、tooltip現時点では実際には実現可能ではありません。

  4. 最後にHTML5data-*属性があります。これはスクリプトなどでコンテンツを使用するためにありますが、そのアクセシビリティについては何もありません。

attr()JavaScriptを使わなければCSSメソッドでもコンテンツにアクセスできるので、属性が望ましいです。繰り返しになりますが、スクリーン リーダーは生成されたコンテンツを読み上げますか?

4

1 に答える 1

0

DOM 要素の作成を避けたい場合は、次の 3 つのオプションがあります。

そうでない場合は、補足コンテンツにダミー画像を使用します。

<label for="username">User Name
  <img role="presentation" src="required.png" alt="Required" />
</label>
<input type="text" id="username" aria-required="true" />

参考文献

于 2013-10-18T22:30:26.367 に答える