A HTML listák unalmasak. Ők nem do sok, ezért nem igazán gondolunk rájuk, annak ellenére, hogy milyen széles körben használják őket. És továbbra is ugyanazokat a dolgokat tudjuk elvégezni, mint a testreszabásuk érdekében, például a jelölők eltávolítását, a sorrend megfordítását és az egyéni számlálók készítését.
A listák használatakor azonban tudnia kell néhány „újabb” dolgot – beleértve a veszélyeket is. A veszélyek többnyire csekélyek, de sokkal gyakoribbak, mint gondolnád. El fogunk érni ezekhez, plusz néhány új dologhoz, amit a listákkal tehetünk, és még a régi megoldások megközelítésének új módjait is.
Az egyértelműség kedvéért, ezek a HTML elemek, amelyekről beszélünk:
- Rendezett listák
- Rendezetlen listák
- Leírás listák
- Interaktív listák
A rendezett listák, a rendezetlen listák és az interaktív listák listaelemeket tartalmaznak (
), amelyek aszerint jelennek meg, hogy milyen listával van dolgunk. Rendezett lista (
) számokat jelenít meg a listaelemek mellett. rendezetlen listák (
) és menüelemek (
) felsorolásjeleket jelenít meg a listaelemek mellett. Ezeket nevezzük „listajelzőknek” és akár stílusosak is lehetnek használatával ::jelző pszeudo-elem. A leíráslisták leírási kifejezéseket használnak (
) és a leírás részletei (
) ahelyett
és nincsenek listajelzők. Állítólag metaadatok és szószedetek megjelenítésére használják őket, de nem mondhatom, hogy valaha is láttam őket vadon.
Kezdjük az egyszerű dolgokkal – hogyan kell helyesen (legalábbis véleményem szerint) visszaállítani a listastílusokat. Ezt követően vessünk egy pillantást néhány akadálymentesítési problémára, mielőtt rávilágítunk a megfoghatatlan dolgokra.
elem, amelyet meglepődhet, ha megtudja… valójában egyfajta lista is!
Listastílusok visszaállítása
A böngészők automatikusan alkalmazzák a saját felhasználói ügynök stílusaikat, hogy azonnal segítsék a listák vizuális szerkezetét. Ez nagyszerű lehet! De ha üres lappal akarunk kezdeni a stílusvéleményektől mentesen, akkor először alaphelyzetbe kell állítanunk ezeket a stílusokat.
Például könnyen eltávolíthatjuk a listaelemek melletti jelölőket. Nincs itt semmi új:
/* Zap all list markers! */
ol, ul, menu {
list-style: none;
}A modern CSS-nek azonban új módjai vannak, amelyek segítségével konkrét listapéldányokat célozhatunk meg. Tegyük fel, hogy törölni szeretnénk a jelölőket az összes listáról, kivéve, ha ezek a listák megjelennek hosszú formátumú tartalom, például egy cikk. Ha egyesítjük az újabb CSS pszeudoosztályú függvények képességeit :where() és a :not(), elkülöníthetjük ezeket a példányokat, és engedélyezhetjük a jelölőket a következő esetekben:
/* 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;
}Miért érdemes :where() helyett :is()? A sajátossága :where() mindig nulla, míg :is() a szelektorok listájában szereplő legspecifikusabb elem sajátosságait veszi át. Szóval, használva :where() kevésbé erőteljes módja a dolgok felülbírálásának, és könnyen felülbírálható.
Az UA-stílusok kitöltést is alkalmaznak a listaelem tartalmának a jelölőtől való távolságára. Ismétlem, ez bizonyos esetekben nagyon szép lehetőség, de ha már eltávolítjuk a lista jelölőit, ahogy fent tettük, akkor azt is eltüntethetjük ezt a párnázást. Ez egy másik eset :where():
:where(ol, ul, menu) {
padding-left: 0; /* or padding-inline-start */
}OK, ez megakadályozza, hogy a jelölő nélküli listaelemek a térben lebegjenek. De valahogy kidobtuk a babát a fürdővízzel, és minden esetben eltávolítottuk a párnázást, beleértve azokat is, amelyeket korábban izoláltunk.
. Tehát ezek a jelölőkkel ellátott listák a tartalomdoboz szélén lógnak le.
Figyelje meg, hogy az UA stílusok extrát alkalmaznak 40px hoz
elem.
Tehát azt szeretnénk megakadályozni, hogy a listajelzők „lógjanak” a tárolón kívül. Ezt meg tudjuk javítani a list-style-position ingatlan:
Vagy nem… lehet, hogy ez a stilisztikai preferencián múlik?
Újabb akadálymentesítési problémák a listákkal kapcsolatban
Sajnos van néhány akadálymentesítési aggály a listákkal kapcsolatban – még a modernebb időkben is. Az egyik gond a jelentkezés eredménye list-style: none; mint az UA stílusok visszaállításakor.
Dióhéjban a Safari nem -val stílusos rendezett és rendezetlen listák olvasása list-style: none tényleges listákként, például amikor képernyőolvasóval navigál a tartalomban. Más szavakkal, a jelölők eltávolítása a lista szemantikai jelentését is eltávolítja. Az javítás ehhez a javításhoz azt alkalmazni an ARIA list szerepet a listán és a listitem szerepet a listaelemeknél így a képernyőolvasók felveszik őket:
- ...
- ...
- ...
- ...
- ...
- ...
Furcsán, A Safari ezt egy funkciónak tekinti nem pedig hiba. Alapvetően a felhasználók arról számolnának be, hogy a képernyőolvasók túl sok listát jelentettek be (mivel a fejlesztők hajlamosak túlzásba vinni őket), ezért most csak azok role="list" képernyőolvasók jelentik be, ami valójában nem is olyan furcsa. Scott O'Hara egy részletes leromlott hogyan süllyedt az egész.
A másik akadálymentesítési probléma nem saját alkotásunk (hurrá!). Szóval, tudod hogyan neked kellene hozzáadása aria-label nak nek
elemek címsorok nélkül? Nos, néha van értelme ugyanezt tenni egy olyan listával, amely nem tartalmaz a lista leírását segítő címsorelemet.
Grocery list
Te abszolút nem bármelyik módszert kell használnia. A címsor vagy az ARIA-címke használata csak hozzáadott kontextus, nem követelmény – feltétlenül tesztelje webhelyeit képernyőolvasókkal, és tegye azt, ami az adott helyzetben a legjobb felhasználói élményt nyújtja.
A némileg kapcsolódó hírekben Eric Bailey kitűnő darabot írt erről miért és hogyan gondolja aria-label hogy kódszag legyen.
Várjon,
az is lista?
Rendben, akkor valószínűleg mindenre kíváncsi
olyan elemeket, amelyeket belecsúsztam a kódpéldákba. Valójában szuper egyszerű; a menük rendezetlen listák, kivéve, hogy interaktív elemekhez készültek. Még a kisegítő lehetőségek fában is megjelennek rendezetlen listákként.
A szemantikus web korai napjaiban tévesen azt hittem, hogy a menük olyanok, mint
s mielőtt azt hitte volna, hogy ezek a helyi menük (vagy „eszköztárak”, mint pl a specifikáció szerint), mert ezt mondták a HTML specifikáció korai verziói. (Az MDN-nek van egy érdekes írása a kapcsolódó összes elavult cuccon
ha egyáltalán érdekel.)
Ma azonban ez a menük használatának szemantikai módja:
Személy szerint úgy gondolom, hogy vannak jó használati esetek
. Az utolsó példa a közösségi megosztási gombok listáját mutatja be címkével
elem, a figyelemre méltó szempont az, hogy a „Cikk megosztása” címke jelentős mértékben hozzájárul a kontextushoz, amely segít leírni a gombok működését.
Feltétlenül szükségesek a menük? Nem. Ők HTML tereptárgyak? Határozottan nem. De ott vannak, ha kevesebbet élvezel
s és úgy érzi, hogy az összetevő használhat egy aria-label további kontextushoz.
Akármi más?
Igen, ott van az előbb említett is
(leírási lista) elem azonban, Úgy tűnik, hogy az MDN nem tekinti őket listának ugyanígy — ez egy olyan csoportlista, amely kifejezéseket tartalmaz —, és nem mondhatom, hogy valóban láttam őket használatban. Az MDN szerint ezeket metaadatokhoz, szószedetekhez és más típusú kulcs-érték párokhoz kell használni. Csak azon az alapon kerülném őket, hogy minden képernyőolvasó másként hirdeti őket.
De ne zárjuk negatívan a dolgokat. Íme egy lista azokról a szuper dolgokról, amelyeket a listákkal megtehetsz:
