2017-11-13 14 views
2

Anstatt meine verschiedenen Abschnitte zum/vom DOM hinzuzufügen/zu entfernen, verstecke ich sie nur mit aria-hidden="true" und blende sie ein, wenn bestimmte <a> Toggles angeklickt werden.Wie man den Screenreader anweist, ein getoggeltes Element zu lesen

Gründe sind Leistung und eine leichtere NoScript-Fallback. Die Reihenfolge im DOM ist nicht die Reihenfolge, in der die Fragen angezeigt werden.

Das Ergebnis ist ein binärer Fragenbaum (Ja/Nein-Fragen), in dem der Benutzer von einer Frage auf die nächste klickt.

Nun, was wäre eine gute Lösung, um Screenreader einen Abschnitt lesen zu lassen oder ihn zumindest weiter zu lesen, nachdem er ihn wieder eingeblendet hat?

Gibt es einen Weg mit live-region? Lesen Screenreader Elemente, die darin eingeblendet werden? Ich dachte, aria-current könnte angemessen sein? Oder ist es eher eine aria-expanded Anwendung?

Danke für Ihre Hilfe!

+0

Warum man sich in erster Linie zu entfernen? Wenn Sie nur die Bildschirmgröße speichern möchten, sollten Sie sie wahrscheinlich nicht vor Bildschirmlesern verbergen. – isherwood

+0

@isherwood es ist ein Ja/Nein-Fragebaum, wo eine Antwort zur nächsten Frage führt. Daher sind die meisten Fragen im DOM für Ihren Pfad im Baum nicht relevant. – Andy

+0

Das hört sich nicht nach einer guten Anwendung von Live-Regionen an, wie die anfängliche Antwort aufgrund der interaktiven Natur nahelegt. Verstecken Sie die unbenutzten Teile des Baumes visuell (z. B. mit 'Sichtbarkeit: aus' oder' Anzeige: keine')? Beschreiben Sie bitte, wie dies visuell angezeigt wird und wie der Benutzer von einer Frage zur nächsten navigiert. Zum Beispiel, verschwinden die beantworteten Fragen nach dem Weitergehen? Wenn nicht, kann ich zurückgehen und meinen früheren Weg an einem früheren Punkt im Baum ändern, und was passiert visuell, wenn ich das tue? Eine gute Antwort kann nicht gegeben werden, ohne dies zu wissen. –

Antwort

1

ARIA live regions sind ohne Frage der richtige Weg, um diese Art von Problem zu behandeln.

Wenn Sie das Attribut aria-live für ein HTML-Element verwenden, wird die Hilfstechnologie benachrichtigt, wenn Inhalt in einem dieser Bereiche geändert wird. Ihre Wahl des Attributwerts gibt an, wie schnell die Änderung angekündigt wird (sofort oder bei nächster Gelegenheit). Die gebräuchlichste Implementierung ist typischerweise aria-live="polite".

Diese Seite beschreibt einige ziemlich nützlich (und innovative) Techniken für Live-Regionen Umsetzung: https://terrillthompson.com/tests/aria/live-scores.html

+0

Aber ich habe es auf 'aria-live =" durchsetzungsfähig "', und NVDA liest nichts, wenn ein neues Element eingeblendet wird? – Andy

+0

Können Sie mir bitte ein Codeprobe zur Verfügung stellen, das ich testen kann? – Josh

+0

Es ist mir gerade eingefallen! Die Updates werden nicht angekündigt, da nichts aus der DOM-Struktur hinzugefügt/entfernt wird. Anstatt Live-Regionen zu verwenden, ist es in diesem Fall besser, den Elementen "role =" alert "hinzuzufügen, wenn Sie" aria-hidden "in false ändern. – Josh

Verwandte Themen