Closed NinaG closed 7 years ago
Hier noch ein paar Anregungen, zu Off-Canvas-Menüs, die hier auch zum Tragen kommen und das Contao4-Backend barrierefreier machen:
<button class="nav-toggle" type="button">Menü</button>
. Ergänzend könnte das SVG-Symbol als Grafik auf den Button gelegt werden. Fachlich noch "cooler" wäre es, wenn das SVG-Symbol als Inline-Code in den Button eingefügt wird. Dann könnte der SVG-Code noch barrierefrei mit ARIA-Attributen sowie mit Titel und Desc bzw. lesbarem Text versehen werden. Ich bastel dafür nacher mal einen Code-Entwurf, basierend auf dem C4-Menü-Icon.Beide Toggle-Button-Beispiele (ohne sichtbaren Beschriftungstext, mit wäre aber besser):
Hier mal der einfach angepasste Code für einen Menü-Button mit Inline-SVG:
<button class="nav-toggle" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 512 512" role="img" aria-labelledby="burger-title" ><title id="burger-title">Navigation öffnen</title><path d="M462 163.5H50v-65h412v65zm0 60H50v65h412v-65zm0 125H50v65h412v-65z" fill="#fff"/></svg></button>
Wenn nicht gewünscht ist, dass der Toggle-Button ein Inline-SVG enthält, könnte es natürlich auch als normales IMG im Button-Code hinterlegt werden:
<button class="nav-toggle" type="button" title="Navigation öffnen"><img src="system/themes/flexible/icons/burger.svg" alt="Menü" id="burger" height="25" width="25"></button>
Behoben in contao/core-bundle@033bfd54877eab42051afc770ad87447b6bf8812.
Vielen Dank für die schnelle Reaktion! Hast du die anderen Sachen die ich unten in diesem Ticket genannt habe, auch im Blick (Fokus, weitere ARIA-Angaben in den Navlistenpunkten)? Oder soll ich die lieber einzeln als Tickets anlegen?
Am besten machst Du gleich einen Pull-Request.
In kleinen Viewports wird die linke Spalte ausgeblendet und stattdessen erscheint im Kopfbereich das "Hamburger"-Icon. Für Tastaturnutzer und Screenreader-Nutzer ergeben sich an der Stelle mehrere Probleme: