risposta-alla-domanda-sullo-sviluppo-web-bd.com

Esiste un equivalente all'attributo "alt" per gli elementi div?

Gli screen reader leggeranno qualunque stringa sia impostata sull'attributo "alt". L'uso di questo attributo è specifico per i tag immagine.

Se ho un div in questo modo:

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

C'è un modo per fare in modo che uno screen reader scelga un attributo per leggere una stringa nello stesso modo in cui viene utilizzato un tag alt?

Quindi per il div elencato di seguito, lo screen reader dirà cioè: "articoli del carrello 2"?

Ho provato ad usare aria-label ma lo screen reader non lo raccoglierà:

<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 a 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 io 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 io, jak powiedziałem wcześniej, JAWS chętniej akceptuje element formularza niż div. Zakładam, że dieci "koszyk" jest formą lub częścią formularza, un 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>. A 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 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

Esistono due modi (che possono essere combinati) per consentire allo screen reader di leggere il testo alternativo:

  1. Qualsiasi cosa con il ruolo ARIA img può (DEVE) avere attributo alt. Vedi WAI-ARIA img role .

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

Tuttavia, questo dovrebbe essere usato solo nel caso in cui l'elemento rappresenti realmente un'immagine (ad esempio il carattere unicode del cuore).

  1. Se un elemento contiene un testo reale, che necessita solo di una lettura diversa, dovresti impostare il ruolo ARIA su text e aggiungere aria-label con qualsiasi cosa tu voglia leggere dallo screen reader. Vedi Ruolo di testo WAI-ARIA .

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

Non mismatch con aria-labeledby che dovrebbe contenere l'ID di un elemento correlato.

  1. Puoi combinare i due casi precedenti in uno utilizzando due ruoli ARIA e aggiungendo sia alt che aria-label:

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

Quando vengono definiti più ruoli ARIA, il browser deve utilizzare il primo supportato ed elaborare l'elemento con quel ruolo.


Un'ultima cosa importante è che devi impostare il tipo di pagina su HTML5 (che supporta ARIA in base alla progettazione).

<!DOCTYPE html>

L'uso di HTML4 o XHTML richiede DTD speciali per abilitare il supporto ARIA.

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

Nel caso in cui si usi Bootstrap Framework esiste una soluzione semplice e veloce. Dovresti usare sr-only o sr-only sr-only-focusable CSS classes Bootstrap in un elemento span in cui verrà scritto il tuo testo screen-reader-only

Controlla il seguente esempio, un elemento span con classe glyphicon glyphicon-shopping-cart viene anche usato come icona del carrello.

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

Uscita lettore schermo: _ ​​"due elementi del carrello"

Puoi trovare l'esempio di lavoro sopra in questo: Fiddle

Come suggerito da Oriol , nel caso in cui non si usi Bootstrap Framework quindi aggiungere semplicemente quanto segue nel proprio file 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

No, non esiste un equivalente di un attributo alt per elementi <div>.

Per quello che stai cercando di fare, una soluzione basata su ARIA è eccessiva. Non solo stai incontrando problemi di compatibilità con lo screen reader, stai applicando gli attributi ARIA dove non sono necessari (e probabilmente non ti appartengono se su qualcosa come <div>).

Invece, considera l'utilizzo di una tecnica fuori schermo (come questa da The Paciello Group o questa da WebAIM ). I contenuti nascosti con questa tecnica saranno comunque letti dai lettori di schermo ma saranno visivamente nascosti.

Dalla lettura della tua domanda, penso che questo sia ciò che stai cercando.

Ho fatto una penna che dimostra questa tecnica . Potrebbe essere più facile eseguire il test nella versione a pagina intera .

Modifica: aggiunto HTML e CSS dell'esempio, ma tieni presente che sia le specifiche che il supporto della tecnologia browser/assistiva cambiano nel tempo, quindi se stai leggendo questo in un anno dovresti continuare a utilizzare i link qui sopra per verificare questo CSS è ancora la migliore pratica corrente.

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

In base all'algoritmo di calcolo alternativo del testo del W3C e del nome e della descrizione accessibili a : Computation and API Mappings 1.1 è assolutamente necessario utilizzare aria-label.

Detto questo, non funziona con Jaws, è un peccato per uno strumento così costoso.

L'opzione rimanente è quella di utilizzare un link che andrà alla tua pagina del carrello, utilizzando sia title che aria-label per soddisfare chiunque:

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

Puoi anche utilizzare un'opzione di 1 pixel trasparente:

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

Provare:

HTML

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

CSS

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

Questo annuncerà il testo all'interno dello span. E il genitore non perderà il fuoco visivo. La classe Aria-hidden nasconderà lo span dall'area dello schermo visibile ma la leggerà come all'interno del div che ha il focus.

0
UIPassion

Usa un'immagine all'interno del div che ha l'etichetta come attributo alt. In questo modo, quelli senza screen reader vedono solo il numero e un'immagine, mentre quelli con i lettori sentiranno l'intera frase:

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

Visto come: Elementi del carrello acquisti http://icons.iconarchive.com/icons/icons8/ios7/16/Ecommerce-Shopping-Cart-Empty-icon.png 2

Leggi come: "Articoli del carrello: 2"

L'attributo alt esiste per le immagini perché non c'è modo di "leggere ad alta voce" il contenuto dell'immagine, quindi viene utilizzato il testo fornito. Ma per il div, contiene già testo e immagini. Pertanto, se si desidera che venga letto da uno screen reader, è necessario includere il testo e il testo alternativo nel contenuto del div.

0
rvighne

Puoi creare una classe come screen-reader-text con il seguente css:

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

Quindi, nel tuo codice, puoi semplicemente aggiungere un <span> con il testo screen reader in questo modo:

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

Guarda un esempio qui sopra: https://jsfiddle.net/zj1zuk9y/

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

0
Ashwin Ramaswami