Gibt es eine Möglichkeit, ein zugängliches Modal zu machen?

Question

Ich arbeite an einem Projekt mit Twitter Bootstrap und spiele um die JavaScript components mit einem Bildschirmleser.

Wenn ich den modalen Dialog triggere, überspringt Jaws das modale Gehen zum nächsten Link auf der Seite.

Gibt es eine Möglichkeit, ein zugängliches Modal zu implementieren?

Eine andere Lösung, die ich denke, ist es, eine statische Seite auf die Funktionalität des modalen, und umleiten zu dieser Seite, wenn der Benutzer einen Screenreader verwenden. Kann ich irgendwie feststellen, ob der Benutzer einen Screenreader benutzt?

Answer 1

Hier ist ein zugänglicher modaler Dialog: http://hanshillen.github.com/jqtest/#goto_dialog

Sobald die modal aktiviert, Tastatur Navigation innerhalb des Dialogs gefangen wird, bis sie vom Benutzer explizit geschlossen wird.

http://irama.org/web/dhtml/lightbox/ Details wie eine barrierefreie Implementierung (es gibt kaum einen Unterschied zwischen einem Leuchtkasten und einem modalen Dialog, wichtig ist der modale Teil und die Tastaturverwaltung).
Sie können auch lesen Inoffizielle Kopie des DHTML Style Guide der dialog modal Teil und W3C/WAI-ARIA Making a Dialog Modal.

J. Wajsberg schrieb ein jQuery-Plugin in der Lage zu trap the keyboard input inside a DOM element, wenn Sie einen DIY-Ansatz benötigen.

Answer 2

Ich kenne keine Lösung, die automatisch erkannt wird, wenn der Benutzer einen Bildschirmleser verwendet. Aber es gibt die Google-Lösung, um einen Link am Anfang der Seite zu verbergen (mit links: -1000em und Position: absolut), die aktiviert werden kann, wenn Sie die Tastatur verwenden und einen "speziellen Modus" anzeigen.

<a href="#" style="left:-1000em;position:absolute">Screen reader users, click here to turn off Google Instant.</a> 

für Ihren modalen Dialog try Arie und aria-atomic = "true" Arie-live = "durchsetzungsfähig" -Attribut auf den Dialog html div zu verwenden. Es sollte den Inhalt Ihres Dialogfelds ankündigen.