Gibt es ein äquivalent zu der "alt" - Attribut für div-Elemente?

Versuchen role="listitem" oder role="group" und aria-labelledby="shopping cart items". Sehen Beispiel 1. Die 2 ist der text-Inhalte, die gelesen werden soll, screen-reader, die bereits mit dem Attribut read-als Kontext zu den Inhalten. Finden Sie auf dieser Abschnitt.

UPDATE 2

Hinzufügen aria-readonly=true role=textbox wenn Sie eine Eingabe. Wenn es Zweifel, ob aria-label oder aria-labelledby, Lesen Sie diese Artikel. In der Dokumentation für KIEFER und testen es selbst unterstützt die Tatsache, dass aria-label ignoriert. Darüber hinaus Semantik sind sehr wichtig, wenn die Zugänglichkeit ist Ihr Anliegen. Mit einem div, wenn Sie eine Eingabe ist nicht semantisch sound und wie ich schon sagte, KIEFER akzeptieren würde, ein form-element leichter als div. Ich gehe davon aus, dass dieser "Warenkorb" ist eine form oder ein Teil einer form, und wenn Sie mögen es nicht Grenzen, die input {border: 0 none transparent} oder verwenden Sie <output>* das wäre dann Ein+, so weit als Semantik betroffen sind.

Sorry, @RadekPech erinnerte mich; ich vergaß hinzuzufügen, dass die Verwendung aria-labelledby Bedürfnisse sichtbaren text und der text benötigt eine id, die ist auch aufgeführt, da der Wert(s) von aria-labelledby. Wenn Sie nicht möchten, dass der text wegen der ästhetik, verwenden Sie color: transparent, line-height: 0 oder color:<same as background>. Das sollte genügen Sichtbarkeit so weit als der DOM* und immer noch unsichtbar für das bloße Auge. Beachten Sie diese Maßnahmen, weil JAWS ignoriert aria-label.

*ungetestet

BEISPIEL 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'>

UPDATE 1

Für JAWS, werden Sie wahrscheinlich haben, um es zu konfigurieren, ein wenig:

1. Klicken Sie auf die Dienstprogramme Menüpunkt.
2. Dann Einstellungen-Center.
3. Text und Sounds Systeme
4. zu modiy Schema...
5. HTML Tab

In diesem besonderen dialog-box, die Sie hinzufügen können spezifische Attribute und das, was gesagt wird, wenn ein element ist ein Tab zu. KIEFERN reagieren auf form-Elementen einfacher, weil Sie auslösen können, die focus Veranstaltung. Sie ' ll haben eine einfachere Zeit zu tun Beispiel 2 statt:

BEISPIEL 1

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

BEISPIEL 2

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

Im Falle der Verwendung Bootstrap-Framework es ist eine schnelle und einfache Lösung. Sollten Sie verwenden sr-only oder sr-only sr-only-focusable Bootstrap-CSS - Klassen in einem span element, wo Ihre screen-reader-only text geschrieben werden.

Überprüfen Sie das folgende Beispiel, eine span element mit der Klasse glyphicon glyphicon-shopping-cart ist auch als Einkaufswagen-Symbol.

<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>

Ausgabe von Screen-Readern: "zwei Artikel im Warenkorb"

• zur Verfügung gestellt von Fangs Screen Reader Emulator Addon für Firefox

Finden Sie das obige Beispiel in diesem: Fiddle

Vorgeschlagen von Oriol, in Fall, dass Sie nicht verwenden Bootstrap-Framework dann fügen Sie einfach Folgendes in deine CSS-Datei.

.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;
}

Entsprechend der text-alternative Berechnung Algorithmus des W3C und die
Erreichbar Name und Beschreibung: die Berechnung und die API-Zuordnungen 1.1 Sie auf jeden Fall nutzen sollte aria-label.

Dass gesagt wird, es funktioniert nicht mit Backen, ist es eine Schande für so teure tool.

Die Verbleibende Möglichkeit ist die Verwendung eines link, gehen Sie zu Ihrem Warenkorb-Seite, indem Sie beide title und aria-label zu befriedigen jedermann:

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

Können Sie auch eine transparente 1-pixel-option:

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

Versuchen:

HTML

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

CSS

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

Diese bekannt wird der text im span. Und das Übergeordnete div nicht verlieren visuellen Fokus. Aria-hidden-Klasse verstecken, die Spanne aus dem sichtbaren Bildschirm-Bereich, aber es zu Lesen, wie Ihr im inneren des div, die den Fokus hat.