タグ付けされた質問 「wai-aria」

Bootstrapモーダルを使用して、これらのaria属性をよく見ましたが、それらをどのように使用するかは知りませんでした。 これらの属性を使用するケースを誰かが知っていますか？私はググった-単純な答えを見つけられなかった。

259 twitter-bootstrap  twitter-bootstrap-3  wai-aria 

Angular Materialで作業している間、私はaria属性を見てきました。誰かが私に説明できますか、aria接頭辞は何を意味しますか？しかし、最も重要なことは、私が理解しようとしているのは、属性aria-hiddenとhidden属性の違いです。

256 html  wai-aria 

HTML5 ARIAとは何ですか？実装方法がわかりません。

249 html  wai-aria 

私はaria-*属性が何のために使われるのか知りたいと思いました。それらはどのような値を持つことができますか、それらは定義された値ですか、または私は自分の値を作成できますか？

193 html  accessibility  wai-aria 

多くのARIAデモWebサイトは、次のようなコードを使用しています。 <label for="name" id="label-name">Your Name</label> <input id="name" aria-labelledby="label-name" type="text"> しかしaria-labelledby、この場合、属性を使用する目的は何ですか？input要素がすでにによって標識されているlabel使用している要素forの属性を、そうではありませんか？

84 html  label  accessibility  wai-aria 

「フォーカス可能」であるページ上の要素（ボタン、tabindexを含む要素など）があり、スクリーンリーダーがコンテンツを正しく読み上げます。 ただし、フォーカスできない要素がいくつかあるため（ドロップダウンリストの結果など、多くの要素があるため）、ユーザーがタブを無数にクリックしたくないのですが、左/右/アップ/ダウンキー、およびCSSクラスが「選択」されます（ただし、他の要素（その親）が実際にフォーカスされています） クラスを「選択」して、これらの特定の要素を読者に読み取らせたい。どうすればいいのですか？ （属性aria-label = "read this"を適用しようとしましたが、機能しませんでした。要素が実際にフォーカスされている場合にのみ機能します） 以下は、私が達成したいことを理解するのに役立つ詳細です。 <div tabindex="0" > <span>title1</span> <ul> <li class="selected">item1</li> <li>item2</li> <li>item3</li> </ul> </div> <div tabindex="0"> <span>title2</span> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> </div> これがフィドルです：https : //jsfiddle.net/d5gbjst1/1/ これらの2つのdiv間をタブで移動すると、任意のスクリーンリーダー（Windowsナレーター、NVDA、JAWSで試してみました）は「title1」と最初の項目のすべての項目、「title2」と2番目の項目のすべての項目を読み取ります。焦点がどこにあるかに応じて。 最初のulの最初の項目で「選択された」クラスに注意してください。今、私は自分のulリストを上下矢印で参照し、それに応じて「選択された」クラスが項目間を移動します。（これは独立したJSコードであり、簡単にするためにこの例には含まれていません） 「選択された」クラスが要素に適用されると、読者にそれを強制的に読み取らせたい。まったく可能ですか？ 編集：私はulとliにも属性を追加しようとしましたが、まだうまくいきません： <ul role="list"> <li role="listitem">

8 javascript  html  css  wai-aria 

<input type="text" role="spinbutton" />HTML / JavaScriptの要素を使用して、インクリメント/デクリメントの動作でアクセス可能な入力を実装するのに苦労しています。しかし、VoiceOverでは、予期しない方法で入力の値を変更するインクリメント/デクリメントのためのカスタム（偽？）入力イベントがあるようです。 ユーザーが支援技術を使用してページをナビゲートしているときに、ウィジェットを操作しようとしているときにVoiceOverから不適切なガイダンスを受け取らないようにするにはどうすればよいですか？ たとえば、次のような大幅に削減されたコードを使用します。 function logIt(...args) { document.getElementById('output').appendChild( document.createTextNode(`${args.join(', ')}\n`) ); } document.getElementById("myInput").addEventListener('input', (e) => { debugger; logIt(e.type, e.data, String(e)); e.target.setAttribute('aria-valuenow', e.target.value); }, false); document.getElementById("myInput").addEventListener('keydown', (e) => { logIt(e.type, e.data, String(e)); }, false); <input id="myInput" type="text" role="spinbutton" autocomplete="off" defaultValue="1" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" /> </div> <pre id="output"></pre> …

8 javascript  html  accessibility  wai-aria  voiceover