HTML und XHTML, das mit Script benutzt wird.
Die Technik bezieht sich auf:
Site-Designer wollen häufig Dialoge erstellen, die nicht die vom Browser bereitgestellten Pop-up-Fenster benutzen. Dies wird typischerweise erreicht, indem man den Dialoginhalt in einem div einschließt und den div über dem Seiteninhalt positioniert, indem man z-order und absolute Positionierung in CSS benutzt.
Damit sie barrierefrei sind, müssen die Dialoge einigen wenigen einfachen Regeln folgen.
Das Script, das den Dialog von dem onclick-Event eines Links oder einer Schaltfläche startet, auslösen.
Den Dialog-div im Document Object Model (DOM) direkt nach dem Element, das diesen ausgelöst hat, positionieren. Das auslösende Element behält den Fokus und das Einfügen des Dialoginhalts nach dem Element sorgt dafür, dass der Inhalt innerhalb des Dialogs als nächstes in der Lesereihenfolge der Screenreader und in der Tab-Reihenfolge kommt. Der Dialog kann absolut positioniert sein, um visuell irgendwo anders auf der Seite zu erscheinen. Dies kann man machen, indem man entweder den Dialog im HTML erstellt und ihn per CSS versteckt, wie im unten stehenden Beispiel, oder indem man ihn direkt hinter dem auslösenden Element per Script einfügt.
Stellen Sie sicher, dass das HTML innerhalb des Dialog-div den gleichen Barrierefreiheit-Standard erfüllt wie der andere Inhalt.
Es ist ebenfalls nett aber nicht immer notwendig, den Start-Link so zu machen, dass er zwischen geöffnetem und geschlossenem Dialog hin- und herschaltet, und den Dialog schließt, wenn der Tastaturfokus ihn verlässt.
Das HTML für dieses Beispiel beinhaltet ein auslösendes Element, in diesem Fall eine Schaltfläche, und einen div, der als Rahmen für den Dialog agiert.
Das auslösende Element ist eine Schaltfläche und das Script wird durch den onclick-Event ausgelöst. Dies sendet die entsprechenden Events an das Betriebssystem, so dass assistierende Techniken die Änderung im DOM wahrnehmen.
In diesem Beispiel verstecken die Schaltflächen Absenden (Submit) und Zurücksetzen (Reset) innerhalb des Dialogs einfach nur den div.
Code-Beispiel:
...
<button onclick="TogglePopup(event,true)"
name="pop0001">Options</button>
<div class="popover" id="pop0001">
<h3>Edit Sort Information</h3>
<form action="default.htm" onsubmit="this.parentNode.style.display='none'; return false;" onreset="this.parentNode.style.display='none'; return false;">
<fieldset>
<legend>Sort Order</legend>
<input type="radio" name="order" id="order_alpha" /><label for="order_alpha">Alphabetical</label>
<input type="radio" name="order" id="order_default" checked="true" /><label for="order_default">Default</label>
</fieldset>
<div class="buttons">
<input type="submit" value="OK" />
<input type="reset" value="Cancel" />
</div>
</form>
</div>
...Die div-, Überschriften- und Formular-Elemente werden mit CSS formatiert, damit sie wie ein Dialog aussehen.
Code-Beispiel:
...
a { color:blue; }
a.clickPopup img { border:none; width:0; }
div.popover { position:absolute; display:none; border:1px outset; background-color:beige; font-size:80%; background-color:#eeeeee; color:black; }
div.popover h3 { margin:0; padding:0.1em 0.5em; background-color:navy; color:white; }
#pop0001 { width:20em; }
#pop0001 form { margin:0; padding:0.5em; }
#pop0001 fieldset { margin-bottom:0.3em; padding-bottom:0.5em; }
#pop0001 input, #pop0001 label { vertical-align:middle; }
#pop0001 div.buttons { text-align:right; }
#pop0001 div.buttons input { width:6em; }
...Das Script schaltet zwischen der Anzeige des Popup-div hin und her, und zeigt und versteckt es damit.
Code-Beispiel:
...
function TogglePopup(evt,show)
{
HarmonizeEvent(evt);
var src = evt.target;
if ("click" == evt.type)
{
evt.returnValue = false;
}
var popID = src.getAttribute("name");
if (popID)
{
var popup = document.getElementById(popID);
if (popup)
{
if (true == show)
{
popup.style.display = "block";
}
else if (false == show)
{
popup.style.display = "none";
}
else
{
popup.style.display = "block" == popup.style.display ? "none" : "block";
}
if ("block" == popup.style.display)
{
//window.alert(document.documentElement.scrollHeight);
popup.style.top = ((document.documentElement.offsetHeight - popup.offsetHeight) / 2 ) + 'px';
popup.style.left = ((document.documentElement.offsetWidth - popup.offsetWidth) / 2) + 'px';
}
}
}
}
function SubmitForm(elem)
{
elem.parentNode.style.display='none';
return false;
}
function ResetForm(elem)
{
elem.parentNode.style.display='none';
return false;
}
...Es gibt ein funktionierendes Beispiel: An options button that opens a dialog (Eine Options-Schaltfläche, die einen Dialog öffnet).
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
W4A Paper: Accessibility for Simple to Moderate-Complexity DHTML Web Sites by Cynthia C. Shelly and George Young, Microsoft Corporation. (PDF Format)
Microsoft Developer Network Whitepaper: Writing Accessible Web Applications von Cynthia C. Shelly und George Young. (Microsoft Word Format)
Microsoft Active Accessibility 2.0 SDK. Enthält Inspect32.exe und andere MSAA-Werkzeuge.
Microsoft Internet Explorer Developer Toolbar.. Ermöglicht die Überprüfung des vom Skript generierten DOM in Microsoft Internet Explorer.
Firebug. Ermöglicht die Überprüfung des vom Skript generierten DOM in Firefox.
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 geöffnet werden können, indem man per Tab zu dem Bereich geht und die Eingabetaste drückt.
Prüfen Sie ob der Dialog, wenn er einmal geöffnet ist, in der Tab-Reihenfolge als nächstes kommt.
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.
Tests #2, #3, #4 und #5 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.