HTML-Listen sind langweilig. Sie tun es nicht do viel, also denken wir nicht wirklich über sie nach, obwohl sie weit verbreitet sind. Und wir können immer noch die gleichen Dinge tun, die wir immer getan haben, um sie anzupassen, wie z. B. Markierungen entfernen, Reihenfolge umkehren und benutzerdefinierte Zähler erstellen.
Es gibt jedoch ein paar „neuere“ Dinge – einschließlich Gefahren – die man bei der Verwendung von Listen wissen sollte. Die Gefahren sind meist gering, aber viel häufiger als Sie vielleicht denken. Wir werden uns mit diesen und einigen neuen Dingen befassen, die wir mit Listen machen können, und sogar mit neuen Wegen, alte Lösungen anzugehen.
Zur Verdeutlichung sind dies die HTML-Elemente, über die wir sprechen:
- Geordnete Listen
- Ungeordnete Listen
- Beschreibung Listen
- Interaktive Listen
Geordnete Listen, ungeordnete Listen und interaktive Listen enthalten Listenelemente (
), die je nachdem, um welche Art von Liste es sich handelt, angezeigt werden. Eine geordnete Liste (
) zeigt Zahlen neben den Listenelementen an. Ungeordnete Listen (
) und Menüelemente (
) zeigt Aufzählungszeichen neben den Listenelementen an. Wir nennen diese „Listenmarkierungen“ und Sie können sogar gestylt werden Verwendung der ::Marker Pseudo-Element. Beschreibungslisten verwenden Beschreibungsbegriffe (
) und Beschreibungsdetails (
) Anstatt von
und haben keine Listenmarkierungen. Sie sollen verwendet werden, um Metadaten und Glossare anzuzeigen, aber ich kann nicht sagen, dass ich sie jemals in freier Wildbahn gesehen habe.
Beginnen wir mit den einfachen Dingen – wie man (zumindest meiner Meinung nach) Listenstile richtig zurücksetzt. Danach werfen wir einen Blick auf ein paar Barrierefreiheitsprobleme, bevor wir das Schwer fassbare beleuchten
-Element, was Sie vielleicht überraschen wird … ist eigentlich auch eine Art Liste!
Listenstile zurücksetzen
Browser wenden automatisch ihre eigenen User-Agent-Stile an, um die visuelle Struktur von Listen direkt nach dem Auspacken zu unterstützen. Das kann toll sein! Aber wenn wir mit einer leeren Tafel ohne Styling-Meinungen beginnen wollen, müssen wir diese Stile zuerst zurücksetzen.
Zum Beispiel können wir die Markierungen neben Listenelementen ziemlich einfach entfernen. Nichts Neues hier:
/* Zap all list markers! */
ol, ul, menu {
list-style: none;
}Aber modernes CSS hat neue Möglichkeiten, uns dabei zu helfen, auf bestimmte Listeninstanzen abzuzielen. Angenommen, wir möchten Markierungen aus allen Listen löschen, es sei denn, diese Listen erscheinen in langer Inhalt, wie ein Artikel. Wenn wir die Kräfte neuerer CSS-Pseudoklassenfunktionen kombinieren :where() machen :not(), können wir diese Instanzen isolieren und die Markierungen in diesen Fällen zulassen:
/* Where there are lists that are not articles where there are lists... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
list-style: none;
}Warum :where() statt :is()? Die Besonderheit von :where() ist immer Null, wohingegen :is() übernimmt die Spezifität des spezifischsten Elements in seiner Liste von Selektoren. Also verwenden :where() ist eine weniger zwingende Art, Dinge zu überschreiben und kann leicht selbst überschrieben werden.
UA-Stile wenden auch Padding an, um den Inhalt eines Listenelements von seiner Markierung zu trennen. Auch das ist in einigen Fällen ein ziemlich nettes Angebot direkt aus der Box, aber wenn wir die Listenmarkierungen bereits entfernen, wie wir es oben getan haben, können wir auch diese Auffüllung löschen. Dies ist ein weiterer Fall für :where():
:where(ol, ul, menu) {
padding-left: 0; /* or padding-inline-start */
}OK, das wird verhindern, dass Listenelemente ohne Markierungen im Raum zu schweben scheinen. Aber wir haben das Baby irgendwie mit dem Bade ausgeschüttet und die Polsterung in allen Fällen entfernt, einschließlich derjenigen, die wir zuvor in einem isoliert hatten
. Also, jetzt hängen diese Listen mit Markierungen irgendwie am Rand der Inhaltsbox.
Beachten Sie, dass UA-Stile ein Extra anwenden 40px zu den
Element.
Wir wollen also verhindern, dass die Listenmarkierungen außerhalb des Containers „hängen“. Das können wir mit beheben list-style-position Eigentum:
Oder nicht… vielleicht liegt es an der stilistischen Vorliebe?
Neuere Zugänglichkeitsprobleme mit Listen
Leider gibt es ein paar Bedenken hinsichtlich der Barrierefreiheit, wenn es um Listen geht – auch in diesen moderneren Zeiten. Eine Sorge ergibt sich aus der Bewerbung list-style: none; wie wir es beim Zurücksetzen von UA-Stilen getan haben.
Kurz gesagt, Safari nicht Lesen Sie geordnete und ungeordnete Listen, die mit gestaltet sind list-style: none als tatsächliche Listen, wie beim Navigieren durch Inhalte mit einem Screenreader. Mit anderen Worten, das Entfernen der Markierungen entfernt auch die semantische Bedeutung der Liste. Das Korrektur für diese Korrektur es zu gelten ein AIR list Rolle auf der Liste und a listitem Rolle für die Listenelemente Bildschirmleser werden sie also abholen:
- ...
- ...
- ...
- ...
- ...
- ...
Seltsamerweise Safari betrachtet dies als ein Feature eher kein Fehler. Grundsätzlich würden Benutzer berichten, dass Screenreader zu viele Listen ankündigen (weil Entwickler dazu neigen, sie zu überbeanspruchen), also jetzt nur die mit role="list" werden von Screenreadern angesagt, was eigentlich gar nicht so seltsam ist. Scott O'Hara hat eine detaillierter Überblick wie alles gelaufen ist.
Ein zweites Problem mit der Barrierefreiheit ist nicht unser eigenes Werk (Hurra!). Sie wissen also, wie du sollst fügen Sie ein aria-label zu
Elemente ohne Überschriften? Nun, manchmal ist es sinnvoll, dasselbe mit einer Liste zu tun, die kein Überschriftenelement enthält, das hilft, die Liste zu beschreiben.
Grocery list
Sie absolut nicht müssen beide Methoden verwenden. Die Verwendung einer Überschrift oder eines ARIA-Labels ist nur zusätzlicher Kontext, keine Voraussetzung – testen Sie Ihre Websites unbedingt mit Screenreadern und tun Sie, was die beste Benutzererfahrung für die Situation bietet.
In etwas verwandten Nachrichten schrieb Eric Bailey einen ausgezeichneten Artikel über warum und wie er denkt aria-label ein Codegeruch sein.
Warten,
ist auch eine Liste?
OK, Sie wundern sich wahrscheinlich über all das
Elemente, die ich in die Codebeispiele eingefügt habe. Es ist eigentlich super einfach; Menüs sind ungeordnete Listen, außer dass sie für interaktive Elemente gedacht sind. Sie werden sogar als ungeordnete Listen in der Barrierefreiheitsstruktur angezeigt.
In den frühen Tagen des semantischen Webs glaubte ich fälschlicherweise, dass Menüs ähnlich seien
s bevor man glaubte, dass sie für Kontextmenüs (oder „Symbolleisten“ als die spezifikation sagt), denn das sagten frühere Versionen der HTML-Spezifikation. (MDN hat eine interessante Beschreibung auf all die veralteten Sachen im Zusammenhang mit
falls es dich überhaupt interessiert.)
Heute ist dies jedoch die semantische Art, Menüs zu verwenden:
Ich persönlich denke, dass es einige gute Anwendungsfälle für gibt
. Das letzte Beispiel zeigt eine Liste von Social-Sharing-Schaltflächen, die in ein Label verpackt sind
Element, wobei der bemerkenswerte Aspekt darin besteht, dass die Bezeichnung „Artikel teilen“ eine erhebliche Menge an Kontext beisteuert, der hilft, zu beschreiben, was die Schaltflächen tun.
Sind Menüs unbedingt notwendig? Nein. Sind sie HTML-Wahrzeichen? Definitiv nicht. Aber sie sind da, wenn Sie weniger genießen
s und Sie haben das Gefühl, dass die Komponente eine gebrauchen könnte aria-label für zusätzlichen Kontext.
Noch etwas?
Ja, es gibt auch das oben genannte
(Beschreibungsliste) Element, jedoch MDN scheint diese Listen nicht zu berücksichtigen auf die gleiche Weise – es ist eine Liste von Gruppen, die Begriffe enthalten – und ich kann nicht sagen, dass ich sie wirklich in Gebrauch gesehen habe. Laut MDN sollen sie für Metadaten, Glossare und andere Arten von Schlüssel-Wert-Paaren verwendet werden. Ich würde sie einfach vermeiden, weil alle Screenreader sie anders ankündigen.
Aber lassen Sie uns die Dinge nicht mit einer negativen Note beenden. Hier ist eine Liste supercooler Dinge, die Sie mit Listen machen können:
