Bootstrap 4 Modal mit Tabelle Smartphoneansicht sehr bescheiden

[Gunnar Bittersmann]

@@Emess

http://www.my.emess62.de/

Du hast da schon vieles richtig gemacht. Ein <button> zum Öffnen des Menüs, und auch völlig richtig innerhalb von <nav>. Und aria-expanded schaltet richtig um. Und der Button hat auch eine zugängliche Beschriftung – diese sollte aber nicht englisch "Toggle navigation" sein, sondern ins Deutsche übersetzt werden.

Dem Schließen-Button fehlt aber die zugängliche Beschriftung; × ist keine.

Als Tastatur-Nutzer sollte man auch erwarten dürfen, dass sich das Menü per Escape-Taste schließen lässt. Das solltest du noch einbauen.

Und auch, dass sich das Menü entweder automatisch schließt, wenn man per Tab-Taste rausnavigiert, oder dass man per Tab-Taste gar nicht aus dem Menü rauskommt, sondern nur über den Schließen-Button oder Escape-Taste.

Die Seite wäre per Tastur navigierbar – wenn man denn sehen würde, wo man sich gerade befindet. Das verhinderst du aber mit

a:focus,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: none;
    outline-offset: none;
}

Weg damit! Aktuelle Browser machen bei Mausbedienung keine Rahmen mehr um fokussierte Elemente; den Rahmen muss man nicht per CSS wegmachen. Für Tastatur-Nutzer ist er hingegen zwingend erforderlich. Er darf nicht entfernt werden, sondern sollte im Gegenteil mit der Pseudoklasse :focus-visible besonders gut vom Hintergrund abgesetzt werden.

Ach ja, Hintergrund. Dunkelgraue Schrift auf Schwarz ist ebensowenig eine gute Idee wie Weiß auf Grau. Der Color contrast checker hilft dir dabei, den Farbkontrast genügend groß zu machen. 4.5 : 1 sollte er für Fließtext mindestens sein.

🖖 Живіть довго і процвітайте