Styling von geordneten Listen und Screen-Reader
Beim Design-Entwurf dieser Webseite kam der Wunsch nach einem eigenen Style für geordnete Listen <ol> auf. Da die Möglichkeiten beim Styling der nativen Listenmarker mit CSS begrenzt sind, mussten diese ersetzt werden.
Es gibt verschiedene Möglichkeiten, welche zumeist gemeinsam haben list-style-type: none zu setzen und dann entweder mit Pseudo-Elementen wie ::before, ::after oder zusätzlichen HTML-Elementen die Nummerierung darzustellen. In einigen Fällen wird auch die display Property der Listenelemente (<li>) auf einen anderen Wert als list-item gesetzt.
Verhalten von HTML-Listen in Screen-Readern
Der Vorteil von HTML-Listen ist dass Screen-Reader diese erkennen und die Anzahl der Elemente und die aktuelle Position vorlesen können. Das hilft Besuchern bei der Orientierung und spart Zeit. Auch der Unterschied zwischen geordneten <ol> und ungeordneten Listen <ul> wird zum Teil berücksichtigt.
Im Accessibility-Tree eines Browsers werden die Listenmarker als Nodes vor den Inhalt gestellt. Geordnete Listen erhalten z.B. den Wert 1., ungeordnete Listen einen Bullet. Abgeleitet werden diese Nodes vom ::marker Pseudo-Element. Dieses ermöglicht auch einige Anpassungen am Styling mit CSS.
Effekt von list-style-type: none auf Screen-Reader
Browser basieren die ::marker Pseudo-Elemente auf dem Wert der list-style-type Property. Für geordnete Listen <ol> ist der Standardwert decimal, bei ungeordneten Listen <ul> ist es disc. Wird list-style-type: none gesetzt, verschwindet das ::marker Pseudo-Element und damit auch die Node im Accessibility-Tree.
Überschreiben der display-Property von Listenelementen
Für Listenelemente wird standardmäßig display: list-item gesetzt. In dem Fall fügt der Browser das ::marker Pseudo-Element hinzu. Wird list-style-type: none gesetzt, passiert das nicht mehr. Das hat zur Folge, dass Screen-Reader die Marker-Nummerierung nicht mehr vorlesen können. Dasselbe passiert wenn die display Property der Listenelemente auf einen anderen Wert als list-item gesetzt wird.
Die genaue Auswirkung davon unterscheidet sich je nach Screen-Reader. Narrator (Edge) liest die Anzahl der Elemente in einer Liste und die aktuelle Position weiterhin vor. Narrator (Edge) scheint bei Listen ohnehin nur auf die implizit gesetzte role="list" und role="listitem" der Elemente zu achten und unterscheidet nicht zwischen geordnet und ungeordnet. NVDA (Chrome) liest lediglich die Anzahl der Elemente in der Liste und macht danach keine weiteren Angaben zur Position. Auch bei geordneten Listen <ol> wird die Nummerierung nicht mehr vorgelesen.
Empfehlungen für nummerierte Listen
Um Nutzern weiterhin klare Auskunft über ihre Position in einer Liste zu geben, muss darauf geachtet werden, die ursprüngliche Listen-Semantik zu erhalten. Bestenfalls sollte dabei auf Hacks wie zusätzliche Pseudo-Elemente verzichtet werden, da dies Screen-Readern die Möglichkeit nimmt selbst zu entscheiden, wie sie die Listen vorlesen. Das passiert dann zudem teilweise doppelt.
Die Properties list-style-type: decimal oder list-style-type: disc und display: list-item müssen erhalten bleiben.
Um dennoch ein individuelles Styling zu erreichen, darf das ::marker Pseudo-Element zwar nicht entfernt, aber mit anderen Properties unsichtbar gemacht werden. Die unterstützten Properties für das ::marker Pseudo-Element sind aber begrenzt (https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#allowable_properties). Um keinen Platz einzunehmen, kann font-size: 0 verwendet werden. Zur Darstellung der Nummerierung kann dann ein zusätzliches HTML-Element mit aria-hidden="true" Attribut verwendet werden.