Vraag Hoe u schermlezers die gebruikmaken van WAI-ARIA op de hoogte brengt dat een div nu zichtbaar is


Hoe meldt u schermlezers die WAI-ARIA gebruiken dat een div nu zichtbaar is?

Als we de html hebben

<div id="foo">Present main content</div>
<div id="bar" style="display: none;">Hidden content</div>

en dan wij

$('#foo').hide();
$('#bar').show();

hoe melden we schermlezers dat ze de gebruiker op de hoogte moeten stellen van de nu zichtbare div (of mogelijk automatisch focussen op de nu zichtbare div)?


18
2018-04-27 11:42


oorsprong


antwoorden:


Over het algemeen hoef je schermlezers niet te vertellen dat inhoud nu zichtbaar is. Gebruik van aria-hidden maakt in de praktijk geen verschil, dus ik zou voorstellen het niet te gebruiken. Als u wilt dat de tekstinhoud van de verborgen div wordt aangekondigd door een schermlezer die u mogelijk gebruikt role=alert of aria-live=polite (bijvoorbeeld). U zou dit gebruiken voor bijgewerkte inhoud die u wilt dat een schermlezer het hoort zonder naar de inhoudslocatie te hoeven gaan om het te ontdekken. Bijvoorbeeld een pop-upbericht dat geen focus ontvangt, maar dat tekstinformatie bevat die relevant is voor een gebruiker na een actie zoals het indrukken van een knop.

bijwerken: Ik besprak met een van de mensen die ARIA 1.0 ontwikkelde, stelde hij voor om te gebruiken HTML5 hidden in plaats van aria-hidden als een semantische indicatie dat inhoud verborgen is. gebruik het in combinatie met CSS display:none voor oudere browsers. Browsers die HTML5 ondersteunen hidden implementeren met behulp van display:none in het stijlblad van de gebruikersagent.


31
2018-04-27 13:38



Door de inhoud te taggen met role = "alert" wordt een waarschuwingsgebeurtenis geactiveerd waarop schermlezers zullen reageren wanneer deze zichtbaar worden:

<div id="content" role="alert">
...
</div>

$("#content").show();

Dit zou de gebruiker waarschuwen wanneer #content zichtbaar wordt.

aria-hidden moet worden gebruikt wanneer er iets is dat u wilt verbergen voor de schermlezer, maar laat dit zien aan waargenomen gebruikers. Wees echter voorzichtig. Zie hier voor meer: http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/


9
2017-10-04 19:02



Gebruik aria-verborgen

Geeft aan dat het element en al zijn afstammelingen niet zichtbaar of waarneembaar zijn voor een gebruiker zoals geïmplementeerd door de auteur. Zie gerelateerde aria-gehandicapten.

Als een element pas zichtbaar is na een gebruikersactie, MOET de auteur het aria-hidden-kenmerk instellen op true. Wanneer het element wordt gepresenteerd, MOET de auteur het aria-hidden-kenmerk instellen op false of het attribuut verwijderen, wat aangeeft dat het element zichtbaar is. Sommige ondersteunende technologieën hebben toegang tot WAI-ARIA-informatie rechtstreeks via de DOM en niet via platformtoegankelijkheid die door de browser wordt ondersteund. Auteurs MOET aria-hidden = "true" instellen op inhoud die niet wordt weergegeven, ongeacht het mechanisme dat wordt gebruikt om het te verbergen. Hierdoor kunnen hulptechnologieën of gebruikersagenten verborgen elementen in het document op de juiste manier overslaan.

dus je code zou kunnen worden

$('#foo').hide().attr('aria-hidden', 'true');
$('#bar').show().attr('aria-hidden', 'false');

8
2018-04-27 11:47



Ik heb een voorbeeld gemaakt dat laat zien hoe u role = "alert" kunt gebruiken om gebruikers van schermlezers te waarschuwen wanneer zij de tekenlimiet van een textarea-element naderen, als u probeert te begrijpen hoe u de meldingsrol gebruikt, kan dit helpen:

Er is meer aan de hand, maar hier is het kleine deel van de code die de waarschuwing produceert:

if (characterCount > myAlertTheshold) {
       var newAlert = document.createElement("div"); /* using the native js because it's faster */
       newAlert.setAttribute("role", "alert");
       newAlert.setAttribute("id", "alert");
       newAlert.setAttribute("class","sr-only");
       var msg = document.createTextNode('You have ' + charactersRemaining +' characters of ' + myMaxLength + ' left');
       newAlert.appendChild(msg);
       document.body.appendChild(newAlert);
     }

http://codepen.io/chris-hore/pen/emXovR


3
2018-04-08 01:14