it-swarm.com.de

Gibt es ein Äquivalent zum "alt" -Attribut für div-Elemente?

Screenreader lesen die Zeichenfolge, die auf das Attribut "alt" gesetzt ist. Die Verwendung dieses Attributs gilt speziell für Image-Tags.

Wenn ich ein div so habe:

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

Gibt es eine Möglichkeit, einen Bildschirmleser ein Attribut abrufen zu lassen, um eine Zeichenfolge auf dieselbe Weise wie ein alt-Tag zu lesen?

Für das unten aufgeführte Div wird der Bildschirmleser also sagen: "Warenkorb Artikel 2"?

Ich habe es mit aria-label versucht, aber der Screenreader kann ihn nicht aufheben:

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

Spróbuj role="listitem" lub role="group" i aria-labelledby="shopping cart items". Zobacz Przykład 1 . Kod 2 jest treścią tekstową, która powinna być czytana przez czytnik ekranu z atrybutem odczytywanym jako kontekst treści. Zobacz bis sekcja .

AKTUALIZACJA 2

Dodaj kod aria-readonly=truerole=textbox, jeśli używasz wejścia. Jeśli istnieją wątpliwości, czy użyć aria-label lub aria-labelledby, przeczytaj to artykuł . W dokumentacja dla JAWS i testowanie go osobiście obsługuje fakt, że aria-label jest ignorowany. Ponadto semantyka jest bardzo ważna, gdy chodzi o dostępność. Używanie div, gdy można użyć wejścia, nie jest semantycznie rozsądne i, jak powiedziałem wcześniej, JAWS chętniej akceptuje element formularza niż div. Zakładam, że ten „koszyk” formą lub częścią formularza, jeśli nie lubisz jego granic, input {border: 0 none transparent} lub użyj <output> *, który byłby A +, jeśli chodzi o semantykę.

Przepraszam, przypomniał mi @RadekPech; Zapomniałem dodać, że użycie aria-labelledby wymaga widocznego tekstu i że tekst potrzebuje identyfikatora, który jest również wymieniony jako wartość aria-labelledby. Jeśli nie chcesz tekstu ze względu na estetykę, użyj color: transparent, line-height: 0 lub color:<same as background>. To powinno zaspokoić widoczność w odniesieniu do DOM * i nadal być niewidoczne gołym okiem. Pamiętaj, że te środki są dlatego, że JAWS ignoruje aria-label.

* niesprawdzony

PRZYKŁAD 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'>

AKTUALIZACJA 1

W przypadku JAWS prawdopodobnie musisz go trochę skonfigurować:

  1. KliknijUtilitiespozycja w menu.
  2. NastępnieSettings Center.
  3. Speech and Sounds Schemes
  4. Modiy Scheme...
  5. HTMLPatka

W tym konkretnym oknie dialogowym możesz dodać określone atrybuty i to, co jest powiedziane, gdy element jest kartowany. JAWS będzie łatwiej odpowiadać na elementy formularza, ponieważ mogą wywołać zdarzenie focus. Będziesz mieć łatwiejszy czas do wykonania Przykład 2 zamiast:

PRZYKŁAD 1

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

PRZYKŁAD 2

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

Es gibt zwei Möglichkeiten (die kombiniert werden können), um einen Bildschirmleser zum Lesen von alternativem Text zu verwenden:

  1. Alles mit der ARIA-Rolle img kann (muss) das Attribut alt haben. Siehe WAI-ARIA img Rolle .

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

Dies sollte jedoch nur verwendet werden, wenn das Element wirklich ein Bild darstellt (z. B. das Unicode-Zeichen des Herzens).

  1. Wenn ein Element tatsächlichen Text enthält, für den lediglich ein anderes Lesen erforderlich ist, sollten Sie die ARIA-Rolle auf text setzen und aria-label hinzufügen, wobei der Text vom Bildschirmleser gelesen wird. Siehe WAI-ARIA-Textrolle .

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

Stimmen Sie nicht mit aria-labeledby überein, das die ID eines verwandten Elements enthalten sollte.

  1. Sie können die vorherigen beiden Fälle in einem Fall kombinieren, indem Sie zwei ARIA-Rollen verwenden und sowohl alt als auch aria-label hinzufügen:

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

Wenn mehr ARIA-Rollen definiert sind, sollte der Browser die erste unterstützte Rolle verwenden und das Element mit dieser Rolle verarbeiten.


Eine letzte wichtige Sache ist, dass Sie den Seitentyp auf HTML5 setzen müssen (der ARIA von Entwurf unterstützt).

<!DOCTYPE html>

Die Verwendung von HTML4 oder XHTML erfordert eine spezielle DTD, um die ARIA-Unterstützung zu aktivieren.

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

Falls Sie Bootstrap Framework verwenden, gibt es eine schnelle und einfache Lösung. Du solltest benutzen sr-only oder sr-only sr-only-focusable Bootstraps CSS Klassen in einem span Element, in dem Ihr screen-reader-only Text wird geschrieben.

Überprüfen Sie das folgende Beispiel, ein span -Element mit der Klasse glyphicon glyphicon-shopping-cart wird auch als Warenkorbsymbol verwendet.

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

Bildschirmlese-Ausgabe: "zwei Einkaufswagenartikel"

Sie finden das obige Arbeitsbeispiel in diesem: Geige

Wie von Oriol vorgeschlagen, falls Sie Bootstrap Framework nicht verwenden, fügen Sie einfach Folgendes in Ihre CSS-Datei ein.

.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

Nein, es gibt keine Entsprechung zu einem alt-Attribut für <div>-Elemente.

Für das, was Sie versuchen, ist eine auf ARIA basierende Lösung Overkill. Sie stoßen nicht nur auf Kompatibilitätsprobleme mit Bildschirmlesegeräten, Sie wenden auch ARIA-Attribute an, wo sie nicht benötigt werden (und gehören nicht zu einem <div>).

Verwenden Sie stattdessen eine Off-Screen-Technik (z. B. aus der Paciello-Gruppe oder diese aus WebAIM ). Mit dieser Technik verborgener Inhalt wird weiterhin von Bildschirmleseprogrammen gelesen, jedoch visuell ausgeblendet.

Nach dem Lesen Ihrer Frage denke ich, dass Sie danach streben.

Ich machte einen Stift, der diese Technik demonstriert . Das Testen in der Ganzseitenversion ist möglicherweise einfacher.

Edit: Es wurde HTML und CSS aus dem Beispiel hinzugefügt. Beachten Sie jedoch, dass sich sowohl die Spezifikationen als auch die Unterstützung für Browser/Hilfstechnologien im Laufe der Zeit ändern. Wenn Sie dies also in einem Jahr lesen, sollten Sie zur Überprüfung weiterhin die oben angegebenen Links verwenden Dieses CSS ist immer noch die beste Methode.

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;
}
2
aardrian

Gemäß dem alternativen Berechnungsalgorithmus text des W3C und der Accessible Name und Beschreibung: Berechnung und API-Mappings 1.1 sollten Sie unbedingt aria-label verwenden.

Davon abgesehen funktioniert es nicht mit Jaws, es ist eine Schande für solch teures Werkzeug.

Die verbleibende Option ist die Verwendung eines Links, der zu Ihrer Warenkorbseite führt, und zwar mit title und aria-label, um jeden zu überzeugen:

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

Sie können auch eine transparente 1-Pixel-Option verwenden:

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

Versuchen:

HTML

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

CSS

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

Dadurch wird der Text innerhalb des Bereichs angekündigt. Und das Parent-Div wird den visuellen Fokus nicht verlieren. Die Aria-hidden-Klasse blendet den Bereich aus dem sichtbaren Bildschirmbereich aus, liest sie aber als innerhalb des Divs, das den Fokus hat.

0
UIPassion

Verwenden Sie ein Bild im div, das die Beschriftung als alt-Attribut enthält. Auf diese Weise sehen diejenigen ohne Bildschirmleser nur die Nummer und ein Bild, während diejenigen mit Lesern den ganzen Satz hören werden:

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

Gesehen als: Einkaufswagen-Artikel http://icons.iconarchive.com/icons/icons8/ios7/16/Ecommerce-Shopping-Cart-Empty-icon.png 2

Gelesen als: "Warenkorb Artikel: 2"

Das alt-Attribut ist für Bilder vorhanden, da der Inhalt des Bildes nicht "vorgelesen" werden kann. Stattdessen wird der bereitgestellte Text verwendet. Aber für das div enthält es bereits Text und Bilder. Wenn Sie möchten, dass es von einem Bildschirmleser gelesen wird, müssen Sie den Text und den Alt-Text in den Inhalt des Div einschließen.

0
rvighne

Sie können eine Klasse wie Bildschirmleser-Text mit folgendem CSS erstellen:

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

Dann können Sie in Ihrem Code einfach einen <span> mit dem Screenreader-Text hinzufügen:

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

Sehen Sie hier ein Beispiel: https://jsfiddle.net/zj1zuk9y/

(Quelle: http://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/ )

0