Seznami HTML so dolgočasni. Oni ne do veliko, zato o njih ne razmišljamo, kljub temu, kako pogosto se uporabljajo. In še vedno lahko počnemo iste stvari, kot smo jih vedno počeli, da jih prilagodimo, na primer odstranjevanje oznak, obračanje vrstnega reda in izdelava števcev po meri.
Pri uporabi seznamov pa je treba vedeti nekaj "novejših" stvari - vključno z nevarnostmi. Nevarnosti so večinoma manjše, a veliko pogostejše, kot si morda mislite. Prišli bomo do njih in nekaj novih stvari, ki jih lahko naredimo s seznami, in celo novih načinov za pristop k starim rešitvam.
Da pojasnimo, govorimo o teh elementih HTML:
- Urejeni seznami
- Neurejeni seznami
- Seznami opisov
- Interaktivni seznami
Urejeni seznami, neurejeni seznami in interaktivni seznami vsebujejo elemente seznama (
), ki so prikazani glede na vrsto seznama, s katerim imamo opravka. Urejen seznam (
) prikaže številke poleg elementov seznama. Neurejeni seznami (
) in elementi menija (
) prikaže oznake poleg elementov seznama. Temu pravimo »označevalci seznamov« in jih je mogoče celo oblikovati uporabi ::marker psevdoelement. Opisni seznami uporabljajo opisne izraze (
) in podrobnosti opisa (
) namesto
in nimajo označevalcev seznamov. Uporabljali naj bi se za prikazovanje metapodatkov in glosarjev, vendar ne morem reči, da sem jih kdaj videl v naravi.
Začnimo z enostavnimi stvarmi — kako pravilno (vsaj po mojem mnenju) ponastaviti sloge seznamov. Nato si bomo ogledali nekaj težav z dostopnostjo, preden bomo osvetlili nedosegljivo
element, za katerega boste morda presenečeni izvedeli ... je pravzaprav tudi vrsta seznama!
Ponastavitev slogov seznama
Brskalniki samodejno uporabijo lastne sloge uporabniških agentov, da pomagajo pri vizualni strukturi seznamov takoj po izdelavi. To je lahko super! Toda če želimo začeti s praznim listom brez mnenj o stilih, moramo te sloge najprej ponastaviti.
Na primer, zelo enostavno lahko odstranimo oznake poleg elementov seznama. Tukaj ni nič novega:
/* Zap all list markers! */
ol, ul, menu {
list-style: none;
}Toda sodobni CSS ima nove načine, ki nam pomagajo ciljati na določene primerke seznama. Recimo, da želimo počistiti oznake z vseh seznamov, razen če se ti seznami pojavljajo v dolgoročno vsebino, kot je članek. Če združimo moči novejših funkcij psevdorazreda CSS :where() in :not(), lahko izoliramo te primere in dovolimo označevalce v teh primerih:
/* 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;
}Zakaj uporabljati :where() Namesto :is()? Specifičnost :where() je vedno nič, medtem ko :is() prevzame specifičnost najbolj specifičnega elementa na svojem seznamu izbirnikov. Torej, z uporabo :where() je manj močan način preglasitve stvari in ga je mogoče zlahka preglasiti.
Slogi UA uporabljajo tudi oblazinjenje, da razmaknejo vsebino elementa seznama od njegovega označevalca. Še enkrat, to je v nekaterih primerih precej dobra možnost takoj po izdelavi, toda če že odstranjujemo označevalce seznama, kot smo naredili zgoraj, potem lahko izbrišemo tudi to oblazinjenje. To je še en primer za :where():
:where(ol, ul, menu) {
padding-left: 0; /* or padding-inline-start */
}V redu, to bo preprečilo, da bi elementi seznama brez oznak lebdeli v prostoru. Toda otroka smo nekako vrgli ven s kopalno vodo in odstranili oblazinjenje v vseh primerih, vključno s tistimi, ki smo jih predhodno izolirali v
. Torej, zdaj ti seznami z oznakami nekako visijo z roba polja z vsebino.
Upoštevajte, da slogi UA uporabljajo dodatek 40px k
element.
Želimo torej preprečiti, da bi označevalci seznama "viseli" zunaj vsebnika. To lahko popravimo z list-style-position lastnost:
Ali pa ne ... morda gre za stilistične preference?
Novejši problemi dostopnosti s seznami
Na žalost obstaja nekaj pomislekov glede dostopnosti, ko gre za sezname – tudi v teh bolj modernih časih. Ena skrb je posledica uporabe list-style: none; kot smo storili pri ponastavitvi slogov UA.
Na kratko, Safari ne branje urejenih in neurejenih seznamov, oblikovanih z list-style: none kot dejanski seznami, na primer pri krmarjenju po vsebini z bralnikom zaslona. Z drugimi besedami, odstranitev oznak odstrani tudi semantični pomen seznama. The popravek za ta popravek uporabiti an ARIA list vlogo na seznamu in a listitem vlogo elementov seznama tako da jih bodo bralci zaslona pobrali:
- ...
- ...
- ...
- ...
- ...
- ...
Nenavadno, Safari meni, da je to funkcija namesto hrošča. V bistvu bi uporabniki poročali, da bralniki zaslona objavljajo preveč seznamov (ker jih razvijalci ponavadi pretiravajo), tako da so zdaj samo tisti z role="list" oglašajo bralniki zaslona, kar pravzaprav niti ni tako čudno. Scott O'Hara ima podroben pregled o tem, kako se je vse skupaj končalo.
Drugi pomislek glede dostopnosti si nismo sami ustvarili (hura!). Torej veste kako ti bi moral dodajte aria-label do
elementi brez naslovov? No, včasih je smiselno storiti enako s seznamom, ki ne vsebuje elementa naslova, ki pomaga opisati seznam.
Grocery list
Ti absolutno ne uporabiti katero koli metodo. Uporaba naslova ali oznake ARIA je samo dodan kontekst, ne pa zahteva – ne pozabite preizkusiti svojih spletnih mest z bralniki zaslona in narediti tisto, kar nudi najboljšo uporabniško izkušnjo za dano situacijo.
V nekoliko povezanih novicah je Eric Bailey napisal odličen članek o zakaj in kako meni aria-label biti koda vonj.
Počakaj,
je tudi seznam?
V redu, torej se verjetno sprašujete o vseh
elemente, ki sem jih vstavil v primere kode. Pravzaprav je zelo preprosto; meniji so neurejeni seznami, le da so namenjeni interaktivnim elementom. Izpostavljeni so celo drevesu dostopnosti kot neurejeni seznami.
V zgodnjih dneh semantičnega spleta sem zmotno verjel, da so meniji podobni
preden smo verjeli, da so za kontekstne menije (ali »orodne vrstice« kot specifikacija pravi), ker so tako govorile zgodnje različice specifikacije HTML. (MDN ima zanimiv zapis o vseh zastarelih stvareh, povezanih z
če te sploh zanima.)
Danes pa je to semantični način uporabe menijev:
Osebno menim, da obstaja nekaj dobrih primerov uporabe
. Zadnji primer prikazuje seznam gumbov za skupno rabo v družabnih omrežjih, zavitih v oznako
element, pri čemer je pomemben vidik ta, da oznaka »Deli članek« prispeva precejšnjo količino konteksta, ki pomaga opisati, kaj gumbi počnejo.
Ali so meniji nujno potrebni? Ne, ali so Mejniki HTML? Zagotovo ne. Vendar so tam, če jih uživate manj
s in menite, da bi komponenta lahko uporabila aria-label za dodaten kontekst.
Še kaj?
Ja, obstaja tudi prej omenjeno
element (seznam opisov), vendar Zdi se, da MDN teh seznamov ne upošteva na enak način — to je seznam skupin, ki vsebujejo izraze — in ne morem reči, da sem jih zares videl v uporabi. Po mnenju MDN naj bi se uporabljali za metapodatke, glosarje in druge vrste parov ključ-vrednost. Izognil bi se jim samo zato, ker jih vsi bralniki zaslona različno oglašajo.
A ne končajmo stvari negativno. Tukaj je seznam super kul stvari, ki jih lahko počnete s seznami:
