web-dev-qa-db-ja.com

div要素の「alt」属性に相当するものはありますか？

スクリーンリーダーは、「alt」属性に設定されている文字列を読み取ります。この属性の使用は、特に画像タグ用です。

次のようなdivがある場合：

<div id=myCoolDiv tabindex="0"> 2 <div>

Altタグを使用するのと同じ方法で、スクリーンリーダーが属性をピックアップして文字列を読み取る方法はありますか？

下にリストされているdivの場合、スクリーンリーダーは「ショッピングカートアイテム2」と言いますか？

私はaria-labelを使用しようとしましたが、スクリーンリーダーはそれを拾いません：

<div id=myCoolDiv tabindex="0" aria-label="shopping cart items"> 2 <div>
javascripthtmlcssaccessibilityscreen-readers
35
Kode_12

role="listitem"またはrole="group"とaria-labelledby="shopping cart items"を試してください。 例1を参照してください。 2は、コンテンツのコンテキストとして読み取られた属性を持つスクリーンリーダーによって既に読み取られる必要があるテキストコンテンツです。これを参照してください セクション 。

更新2

入力を使用する場合は、aria-readonly=truerole=textboxを追加します。 aria-labelとaria-labelledbyのどちらを使用すべきか疑問がある場合は、この 記事 を読んでください。 JAWSの documentation では、aria-labelが無視されるという事実を自分でサポートしています。さらに、アクセシビリティが重要な場合、セマンティクスは非常に重要です。入力を使用できるときにdivを使用することは意味的に適切ではなく、前述したように、JAWSはdivよりもフォーム要素を簡単に受け入れます。この「ショッピングカート」はフォームまたはフォームの一部であり、境界線が気に入らない場合は、input {border: 0 none transparent}を使用するか、セマンティクスに関してはA +になる<output> *を使用すると仮定します。 。

申し訳ありませんが、@ RadekPechは私に思い出させてくれました。 aria-labelledbyを使用するには可視テキストが必要であり、テキストにはaria-labelledbyの値としてリストされているIDが必要であることを追加するのを忘れました。美観のためにテキストが必要ない場合は、color: transparent、line-height: 0、またはcolor:<same as background>を使用します。これは、DOMに関する限りは可視性を満たし*、それでも肉眼では見えないはずです。これらの手段は、JAWSがaria-labelを無視するためです。

*未検証

実施例3

<span id="shopping">Shopping</span>&nbsp;
<span id="cart">Cart</span>&nbsp;
<span id="items">Items</span>&nbsp;
<input id='cart' tabindex="0" aria-readonly=true readonly role="textbox" aria-labelledby="shopping cart items" value='2'>

更新1

JAWSの場合、おそらく少し設定する必要があります。

  1. クリック Utilities メニュー項目。
  2. それから Settings Center。
  3. Speech and Sounds Schemes
  4. Modiy Scheme...
  5. HTML タブ

この特定のダイアログボックスでは、特定の属性を追加したり、要素にタブを移動したときに表示される内容を追加したりできます。 JAWSはfocusイベントをトリガーできるため、フォーム要素に簡単に応答します。代わりにの例2を使用する方が簡単です：

実施例1

<div id=myCoolDiv tabindex="0" role="listitem" aria-labelledby="shopping cart items"> 2 <div>

実施例2

<input id='semantic' tabindex="0" role="listitem" aria-labelledby="shopping cart items" value='2' readonly>
9
zer00ne

スクリーンリーダーで代替テキストを読むには、2つの方法（組み合わせることができます）があります。

  1. ARIAロールimgを持つものはすべてalt属性を持つことができます（MUST）。 WAI-ARIA img role を参照してください。

    <div role="img" alt="heart">
♥︎
</div>

ただし、これは、要素が実際に画像を表す場合にのみ使用する必要があります（例：ハートUnicodeコード）。

  1. 要素に実際のテキストが含まれていて、読み取りが必要な場合は、ARIAロールをtextに設定し、スクリーンリーダーで読みたいものにaria-labelを追加する必要があります。 WAI-ARIA text role を参照してください。

    <div role=text aria-label="Rating: 60%">
Rating: ★★★☆☆︎
</div>

関連する要素のIDを含むaria-labeledbyと不一致にしないでください。

  1. 前の2つのケースを2つのARIAロールを使用して1つに結合し、altとaria-labelの両方を追加できます。

    <div role="img text" alt="heart" aria-label="heart">
♥︎
</div>

さらにARIAロールが定義されている場合、ブラウザはサポートされている最初のロールを使用し、そのロールで要素を処理する必要があります。

最後に重要なことは、ページタイプをHTML5に設定する必要があることです（これはARIAを設計上サポートしています）。

<!DOCTYPE html>

HTML4またはXHTMLを使用するには、ARIAサポートを有効にするために特別なDTDが必要です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"
   "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
5
Radek Pech

いいえ、<div>要素にはalt属性に相当するものはありません。

あなたがやろうとしていることに関して、ARIAベースのソリューションはやり過ぎです。スクリーンリーダーの互換性の問題にぶつかるだけでなく、必要のない場所にARIA属性を適用しています（<div>などの場合はおそらく属さない）。

代わりに、オフスクリーンテクニックの使用を検討してください（この方法 The Paciello Groupから またはこの方法 WebAIM から）。この手法を使用して隠されたコンテンツは、引き続きスクリーンリーダーで読み取られますが、視覚的に隠されます。

あなたの質問を読んで、これがあなたが求めていることだと思います。

この手法を示すペン を作成しました。 フルページバージョン でテストする方が簡単かもしれません。

Edit：例からHTMLとCSSを追加しましたが、仕様とブラウザ/支援技術の両方が時間の経過とともに変更をサポートすることに注意してください。これは1年以内に上記のリンクを引き続き使用して、このCSSが現在のベストプラクティスであることを確認してください。

HTML

 <div tabindex="0">
  <span class="offscreen">Items in shopping cart: </span>2
 </div>

CSS

.offscreen {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  /* for Internet Explorer */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
3
aardrian

Bootstrap Framework を使用する場合、迅速かつ簡単な解決策があります。 sr-onlyテキストが書き込まれるspan要素では、sr-only sr-only-focusableまたはscreen-reader-only BootstrapのCSS classes を使用する必要があります。

次の例を確認してください。クラスglyphicon glyphicon-shopping-cartのspan要素は、カートアイコンとしても使用されます。

<div id="myCoolDiv">
<h5>
<span class="glyphicon glyphicon-shopping-cart"></span> 2  
<span class="sr-only sr-only-focusable" tabindex="0">shopping cart items</span>
</h5>
<div>

スクリーンリーダー出力： "2つのショッピングカートアイテム"

上記の作業例は次の場所にあります。 Fiddle

Oriol で示唆されているように、 Bootstrap Framework を使用しない場合は、CSSファイルに次を追加します。

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}
3
Peter Darmis

W3Cの代替テキスト計算アルゴリズム および アクセス可能な名前と説明：計算とAPIマッピング1.1 によると、必ずaria-labelを使用する必要があります。

そうは言っても、Jawsでは機能しません。そのような高価なツールにとっては残念です。

残りのオプションは、誰でも満足させるためにtitleとaria-labelの両方を使用して、カートページに移動するリンクを使用する方法です

<a href="#cart" title="2 shopping cart items" aria-label="2 shopping cart items">2</a>

透明な1ピクセルオプションを使用することもできます。

2 <img src="pixel.png" height="1" width="1" alt="shopping cart items" />
2
Adam

試してください：

HTML

<div id=myCoolDiv tabindex="0"><span class="aria-hidden">shopping cart items</span>2<div>

CSS

.aria-hidden {
  position: absolute;
  left: -100000px;
}

これにより、スパン内のテキストが通知されます。そして、親divは視覚的なフォーカスを失うことはありません。 Aria-hiddenクラスは、表示されている画面領域からスパンを非表示にしますが、フォーカスがあるdiv内でスパンを読み取ります。

0
UIPassion

alt属性としてラベルを持つdiv内の画像を使用します。そうすれば、スクリーンリーダーのない人には数字と画像だけが表示されますが、リーダーのある人には文全体が聞こえます。

<div>
    <img src="http://tny.im/57j" alt="Shopping cart items" />
    2
</div>

ショッピングカートアイテムhttp://icons.iconarchive.com/icons/icons8/ios7/16/Ecommerce-Shopping-Cart-Empty-icon.png 2

読み取り：「ショッピングカートアイテム：2」

alt属性が画像に存在するのは、画像のコンテンツを「読み上げる」方法がないため、代わりに提供されたテキストが使用されるためです。ただし、divの場合は、すでにテキストと画像が含まれています。したがって、スクリーンリーダーで読み上げたい場合は、divのコンテンツにテキストとaltテキストを含める必要があります。

0
rvighne

次のcssを使用して、screen-reader-textなどのクラスを作成できます。

.screen-reader-text { 
   clip: rect(1px, 1px, 1px, 1px); 
   height: 1px; 
   width: 1px; 
   overflow: hidden; 
   position: absolute !important;
}

次に、コードで、スクリーンリーダーのテキストに<span>を追加するだけです。

<div>
I am a div!
<span class="screen-reader-text">This is my screen reader text</span> 
</div>

こちらの例をご覧ください： https://jsfiddle.net/zj1zuk9y/

（情報源： http://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/ ）

0
Ashwin Ramaswami