nicht angemeldet
modale Fenster, was beachten?
hallo
Meine Fragen sind am Fuss des Codes.
Modale Fenster haben ein Verhalten ähnlich zur javascript alert("box"), können aber mehr sein, als nur Dialog-Kontexte. Dennoch gilt folgendes:
- Der Focus muss bei Aktivierung in dieses Element führen.
- Im Fall von alert() ist ein Verlassen der Box nur über den OK-Button möglich.
- Der OK-Button ist der erste aktivierbare Button.
Ich habe nun gedacht, ich baue eine äussere Schicht eines modalen Fensters.
var modalWin = document.createElement("section");
modalWin.id="modalwin";
modalWin.role="dialog";
//..
function init (){
//..
document.getElementsByTagName("body")[0].appendChild( modalWin );
}
//..
function showModalWin(appender){
modalWin.appendChild( appender );
modalWin.setAttribute("aria-hidden","false");
window.location.hash="#modalwin";
}
function closeModalWin(target){
modalWin.firstChild.remove();
modalWin.setAttribute("aria-hidden","true");
window.location.hash="#"+target;
}
CSS
#modalwin {
position:absolute; left:0; top:0; width:100%; height:100%;
background:rgba(120,120,120,0.3);
z-index:200;
}
#modalwin:empty,
#modalwin[aria-hidden="true"]{
display:none;
}
Der Inhalt kann nun so etwas einfaches wie eine eigene alert-methode sein, oder etwas so komplexes wie ein Dateisystem-Menu.
Ich kann ja noch dynamisch ein tabindex="1" setzen/entziehen für den ersten aktivierbaren Button des Inhalts.
Aber was ich nicht kann: Ich kann einen User nicht daran hindern, den Bereich dieses Modal-Fensters zu verlassen und so in einen für ihn eventuell verwirrenden Kontext zu geraten.
Meine generelle Frage deshalb: Was kann ich da konzeptionell verbessern?
Danke für Tipps.
-
Tach!
Ich kann einen User nicht daran hindern, den Bereich dieses Modal-Fensters zu verlassen und so in einen für ihn eventuell verwirrenden Kontext zu geraten.
Was kann ich da konzeptionell verbessern?
Die übliche Vorgehensweise ist, ein Backdrop-Element in den Hintergund zu legen (meist ein viewport-füllendes div), das alle Aktionsversuche mit dem Hintergrund abfängt. Das
dialog-Element macht das von selbst und es bringt auch ein CSS-Pseudo-Element mit, über das man den Hintergrund gestalten kann.dedlfix.
-
hallo
Ich kann einen User nicht daran hindern, den Bereich dieses Modal-Fensters zu verlassen und so in einen für ihn eventuell verwirrenden Kontext zu geraten.
Was kann ich da konzeptionell verbessern?
Die übliche Vorgehensweise ist, ein Backdrop-Element in den Hintergund zu legen (meist ein viewport-füllendes div), das alle Aktionsversuche mit dem Hintergrund abfängt. Das
dialog-Element macht das von selbst und es bringt auch ein CSS-Pseudo-Element mit, über das man den Hintergrund gestalten kann.Nachdem ich https://caniuse.com/#feat=dialog konsultiere, muss ich das "üblicherweise" doch mit einem ?! versehen.
Das ist kein Argument gegen deinen wichtigen Beitrag, sondern ein Hinweis, dass ich nun 2 Fragen-Zweige habe, nachdem ich eine feature-Abfrage gemacht habe.
-
Das ist kein Argument gegen deinen wichtigen Beitrag, sondern ein Hinweis, dass ich nun 2 Fragen-Zweige habe, nachdem ich eine feature-Abfrage gemacht habe.
... oder das polyfill https://github.com/GoogleChrome/dialog-polyfill einbinde.
-
Tach!
Die übliche Vorgehensweise ist, ein Backdrop-Element in den Hintergund zu legen (meist ein viewport-füllendes div), das alle Aktionsversuche mit dem Hintergrund abfängt.
Nachdem ich https://caniuse.com/#feat=dialog konsultiere, muss ich das "üblicherweise" doch mit einem ?! versehen.
Nein, das "üblicherweise" sind die derzeit verwendeten Nachbauten modaler Dialoge mit herkömmlichen Elementen. Beispielsweise bei Bootstrap.
dedlfix.
-
hallo
Ich habe das Chrome polyfill getestet und bemerke, dass ich da bequem mit der Tab-Taste ausbrechen kann. Da verhalten sich Browser-native modale Fenster und die dortige dialog Lösung doch verschieden, woduch meine Frage auch im Fall des Polyfills besteht.
Ideal wäre so etwas wie ein 'hörbarer' (screenreader) Hinweis, dass man nun den Bereich des modalen Fensters in nicht geplanter Weise verlässt.
-
hallo
hallo
Ich habe das Chrome polyfill getestet und bemerke, dass ich da bequem mit der Tab-Taste ausbrechen kann. Da verhalten sich Browser-native modale Fenster und die dortige dialog Lösung doch verschieden, woduch meine Frage auch im Fall des Polyfills besteht.
Ideal wäre so etwas wie ein 'hörbarer' (screenreader) Hinweis, dass man nun den Bereich des modalen Fensters in nicht geplanter Weise verlässt.
Ich habe etwas gefunden: https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html Ein Dialog ist umrahmt von zwei div-Elementen, welchen jeweils tabindex=0 beigegeben wurde. Dadurch rotiert die Tab-Taste innerhalb des Dialogs, ohne aus dem Kontext auszubrechen.
Es schmeckt etwas nach Divitella, aber vielleicht lässt sich das noch etwas verbessern.
-
-
-
-