HTML und XHTML, Skript
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, eingefügte Elemente der Benutzerschnittstelle auf eine solche Art und Weise in dem Document Object Model (DOM) zu platzieren, dass die Tab-Reihenfolge und die Lesereihenfolge des Screenreaders durch das Standardverhalten des Benutzeragenten korrekt festgelegt werden. Diese Technik kann für jedes Element der Benutzerschnittstelle, das versteckt ist oder angezeigt wird, wie zum Beispiel Menüs und Dialoge, benutzt werden.
Die Lesereihenfolge in einem Screenreader basiert auf der Reihenfolge der HTML- oder XHTML-Elemente im Document Object Model, genau wie die Standard-Tabreihenfolge. Diese Technik fügt neuen Inhalt in das DOM unmittelbar nach dem Element, das aktiviert wurde, um das Skript auszulösen, ein. Das auslösende Element muss ein Link oder eine Schaltfläche sein und das Skript muss von seinem onclick-Event aus aufgerufen werden. Diese Elemente sind nativ fokussierbar und ihr onclick-Event ist geräte-unabhängig. Der Fokus bleibt auf dem aktivierten Element und der neue Inhalt, dahinter eingefügt, wird sowohl in der Tabreihenfolge als auch in der Lesereihenfolge der Screenreader der nächste Punkt.
Beachten Sie, dass diese Technik bei synchronen Aktualisierungen funktioniert. Bei asynchronen Aktualisierungen (manchmal AJAX genannt) wird eine zusätzliche Technik benötigt, um die assistierende Technik darüber zu informieren, dass der asynchrone Inahalt eingefügt wurde.
Dieses Beispiel erstellt ein Menü, wenn ein Link angeklickt wird, und fügt dieses nach dem Link ein. Der onclick-Event des Links wird benutzt, um das ShowHide-Skript aufzurufen und er reicht eine ID für das neue Menü als Parameter weiter.
Code-Beispiel:
<a href="#" onclick="ShowHide('foo',this)">Toggle</a>Das ShowHide-Skript erstellt einen div, der das neue Menü enthält und fügt einen Link darin ein. Die letzte Zeile ist das Herzstück des Skripts. Es findet den „parent“ des Elements, der das Skript ausgelöst hat und hängt den von ihm erstellten div als neues „child“ daran an´. Das führt dazu, dass der neue div im DOM nach dem Link kommt.´ Wenn der Benutzer auf Tab drückt, geht der Fokus zum ersten fokussierbaren Punkt in dem Menü, zu dem Link, den wir erstellt haben.
Code-Beispiel:
function ShowHide(id,src)
{
var el = document.getElementById(id);
if (!el)
{
el = document.createElement("div");
el.id = id;
var link = document.createElement("a");
link.href = "javascript:void(0)";
link.appendChild(document.createTextNode("Content"));
el.appendChild(link);
src.parentElement.appendChild(el);
}
else
{
el.style.display = ('none' == el.style.display ? 'block' : 'none');
}
}CSS wird benutzt, damit div und Link wie ein Menü aussehen.
Finden Sie alle Bereiche der Seite, die Dialoge auslösen, bei denen es sich nicht um Pop-up-Fenster handelt.
Prüfen Sie, ob die Dialoge durch das Klick-Ereignis auf eine Schaltfläche oder einen Link ausgelöst werden.
Prüfen Sie, indem Sie ein Werkzeug benutzen, dass es ihnen erlaubt, das vom Skript generierte DOM zu untersuchen ob der Dialog im DOM als nächstes kommt.
#2 und #3 sind wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.