Bootstrap 4 Modal mit Tabelle Smartphoneansicht sehr bescheiden
bearbeitet von Gunnar Bittersmann@@Emess
> <http://www.my.emess62.de/>
Du hast da schon vieles richtig gemacht. Ein `<button>`{:.language-html} zum Öffnen des Menüs, und auch völlig richtig innerhalb von `<nav>`{:.language-html}. Und `aria-expanded`{:.language-html} schaltet richtig um. Und der Button hat auch eine zugängliche Beschriftung – diese sollte aber nicht englisch `"Toggle navigation"`{:.bad @en} sein, sondern ins Deutsche übersetzt werden.
Dem Schließen-Button fehlt aber die zugängliche Beschriftung; `×`{:.language-html} 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
```css,bad
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`{:.language-css}](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) besonders gut vom Hintergrund abgesetzt werden.
Auch ja, Hintergrund. Dunkelgraue Schrift auf Schwarz ist ebensowenig eine gute Idee wie Weiß auf Grau. Der [Color contrast checker](https://webaim.org/resources/contrastchecker/) hilft dir dabei, den Farbkontrast genügend groß zu machen. 4.5 : 1 sollte er für Fließtext mindestens sein.
🖖 Живіть довго і процвітайте
{:@uk}
--
*When the power of love overcomes the love of power the world will know peace.*{:@en}
— Jimi Hendrix
Bootstrap 4 Modal mit Tabelle Smartphoneansicht sehr bescheiden
bearbeitet von Gunnar Bittersmann@@Emess
> <http://www.my.emess62.de/>
Du hast da schon vieles richtig gemacht. Ein `<button>`{:.language-html} zum Öffnen des Menüs, und auch völlig richtig innerhalb von `<nav>`. Und `aria-expanded`{:.language-html} schaltet richtig um. Und der Button hat auch eine zugängliche Beschriftung – diese sollte aber nicht englisch `"Toggle navigation"`{:.bad @en} sein, sondern ins Deutsche übersetzt werden.
Dem Schließen-Button fehlt aber die zugängliche Beschriftung; `×`{:.language-html} 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
```css,bad
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`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) besonders gut vom Hintergrund abgesetzt werden.
Auch ja, Hintergrund. Dunkelgraue Schrift auf Schwarz ist ebensowenig eine gute Idee wie Weiß auf Grau. Der [Color contrast checker](https://webaim.org/resources/contrastchecker/) hilft dir dabei, den Farbkontrast genügend groß zu machen. 4.5 : 1 sollte er für Fließtext mindestens sein.
🖖 Живіть довго і процвітайте
{:@uk}
--
*When the power of love overcomes the love of power the world will know peace.*{:@en}
— Jimi Hendrix