34

次のHTMLは、jQueryグリッドプラグインによって挿入されます。

<td role="gridcell" style="" aria-describedby="list_createdBy">Sam</td>

'aria-describeby'プロパティの意味は何ですか？

4

4 に答える 4

27

これは、aria仕様に記載されています。これは、一部のユーザーが必要とする可能性のある現在の要素に関する追加情報を提供する要素のIDを提供します。

于 2011-01-03T07:26:44.913 に答える
4

で定義されているため、一見すると、aria-describedbyここでは無視される可能性が高いと思います<td>。ほとんどのブラウザーとスクリーン リーダーaria-describedbyは、インタラクティブでない (フォーカス可能) 要素に設定されている場合、情報を無視します。

role="gridcell"ただし、特定の例は、のセマンティクスをオーバーライドするため、もう少し複雑です。<td>したがって、提供された例は、 gridcell の ARIA 仕様に従っている場合に有効です。カスタムコンポーネントです。

一般的に言えば、この属性は、要素のコンテンツに沿ってアナウンスされるaria-describedby追加情報をスクリーン リーダーに提供します (唯一の使用例ではなく、最も一般的な使用例です)。

たとえば"Logout"、スクリーン リーダーだけではなく、次のようにアナウンスし"Logout, John Doe"ます。

    Logged-in as <span id="user">John Doe</span>.
    <a aria-describedby="user" href="/logout">Logout</a>

または、ツールチップの例 (ヒント: Javascript の部分がここにありません):

    <button type="button" aria-describedby="my-tooltip">Snipping Tool</button>
    <div hidden id="my-tooltip" role="tooltip">
        It can take still screenshots of an open window,
        rectangular areas, a free-form area,
        or the entire screen.
    </div>

または、別の一般的なユースケースであるフォーム要素の例:

    <form ...>
        <label for="my-name">Full name</label>
        <input aria-describedby="my-name-desc" id="my-name" type="text"/>
        <p id="my-name-desc">
            Please tell us your full name.
        </p>
    </form>

上記の例では、ユーザーが入力フィールドにフォーカスすると、すぐに<label>と追加の説明 ( で定義) の両方がアナウンスされます。aria-describedby何が入力されるかを理解するために周囲を読む必要がなくなるだけでなく<form>、スクリーン リーダーのユーザーにとってはフォーム コントロール以外のすべての要素を読むのがより複雑になる可能性があります。ページの残りの部分を読むのとは異なる体験です。キーボード イベントは、スクリーン リーダーまたはフォーム コントロールのいずれかと対話できますが、同時に両方と対話することはほとんどないためです。言うまでもなく、スクリーン リーダーには便利なキーボード ショートカットが多数用意されています。たとえば、「H」を押すと次の見出しにジャンプしますが、<input>フィールドがフォーカスされている場合はジャンプしません。に「H」が入り<input>ます。

ARIAについて：

  • ARIA は一般的に、スクリーン リーダー(だけでなく、ほとんどが atm.) のアクセシビリティを向上させるために使用されます。
  • ARIA を使用しても、必ずしも状況が改善されるわけではありません。ARIA が適切に実装およびテストされていない場合、簡単にアクセシビリティが大幅に低下する可能性があります。. 完全に理解していない「クールなもの」をコードに含めるためだけに ARIA を使用しないでください。悲しいことに、ARIA の実装は、アクセシビリティの点でソリューションよりも多くの問題を導入することが多すぎます。目の見えるユーザーや開発者は、スクリーン リーダーを使用した大規模なテストに余分な労力を費やす可能性が低いため、これはかなり一般的です。一方、ARIA の仕様とバリデーターは現在、完全にはほど遠いものであり、場合によっては混乱を招くことさえあります。その上、各ブラウザーとスクリーン リーダーは ARIA サポートを不均一に実装しており、動作に大きな矛盾が生じています。多くの場合、ARIA が何をするか、どのように動作するかが明確ではなく、すべてのスクリーン リーダーとブラウザー (または少なくとも最も一般的な組み合わせ) で集中的にテストされない場合は、ARIA を完全に回避することをお勧めします。）。免責事項: 私の意図は、ARIA を汚すことではなく、その悪い ARIA 実装を汚すことです。実際、HTML5 が、ARIA の実装がアクセシビリティに大きなメリットをもたらす他の代替手段を提供しないことは、それほど珍しいことではありませaria-hiddenんaria-expanded。ただし、適切に実装およびテストされた場合に限ります。

aria-記述者について

  • 要素のコンテンツに沿って追加情報を提供します
  • フォーカス可能な要素 (ボタン、入力、a など) で期待どおりに動作します。他の要素ではほとんど役に立たない (「ほとんど」例外あり)
  • IE 11 は少しトリッキーです。無視されることもあります。参照される要素が非表示 ( ) であるか、その位置 (内部要素が参照されているか)、またはa(たとえば) がある場合などに実装すると、違いが生じる可能性があります。すべてのスクリーン リーダーを必ずテストしてください。buttondisplay:nonetabindex="-1"rolerole="none"
  • スクリーン リーダーがフォーカス モード (TAB キー) または仮想モード (矢印キーでコンテンツを読み取る) で使用されている場合、動作が異なる場合があります。
  • Firefox と Internet Explorer はどちらもaria-describedby、フォーカス モードでのみ尊重します。そのため、フォーカスできない要素に追加しても意味がありません。差出人：ADG
  • NVDA は説明をすぐにアナウンスしますが、JAWS は手動でJAWS+ Alt+Rを押してアナウンスするように指示することがあります。差出人：ADG
  • 参照された要素が非表示の場合、検索できませんCtrl+F(これは、ユーザーが探しているものをすばやく見つけるために Web サイトをナビゲートする一般的な方法です)。差出人：ADG
  • の使用を真に推奨する唯一のケースはaria-describedby、インタラクティブな要素に追加情報を添付する場合です (たとえば、フォーム コントロールなどの可視情報を関連付けるため)。差出人：ADG
  • 良い考え:フォーム コントロール エラーに対して (aria-describedbyフォーム コントロール上で) とrole="alert"(SPAN 上で) の組み合わせを使用します。出典: W3.org
于 2020-07-17T12:05:18.683 に答える