HTML-listat ovat tylsiä. He eivät do paljon, joten emme todellakaan ajattele niitä, vaikka niitä käytetään laajalti. Pystymme edelleen tekemään samoja asioita, joita olemme aina tehneet mukauttaaksemme niitä, kuten poistamalla merkkejä, kääntämällä järjestyksen ja tekemällä mukautettuja laskureita.

On kuitenkin olemassa muutamia "uudempia" asioita - mukaan lukien vaarat - jotka on tiedettävä luetteloita käytettäessä. Vaarat ovat enimmäkseen pieniä, mutta paljon yleisempiä kuin uskotkaan. Pääsemme niihin, sekä joihinkin uusiin asioihin, joita voimme tehdä luetteloiden avulla, ja jopa uusia tapoja lähestyä vanhoja ratkaisuja.

Selvyyden vuoksi tässä ovat HTML-elementit, joista puhumme:

• Tilatut listat <ol>
• Järjestämättömät listat <ul>
• Kuvaus luettelot <dl>
• Interaktiiviset luettelot <menu>

Järjestetyt luettelot, järjestämättömät luettelot ja interaktiiviset luettelot sisältävät luettelokohteita (<li>), jotka näytetään sen mukaan, millaista luetteloa käsittelemme. Tilattu lista (<ol>) näyttää numerot luettelon kohteiden vieressä. Järjestämättömät listat (<ul>) ja valikon elementtejä (<menu>) näyttää luettelokohdat luettelokohteiden vieressä. Kutsumme näitä "luettelomerkitsijöiksi" ja ne voidaan jopa muotoilla käyttäen ::merkki pseudoelementti. Kuvausluettelot käyttävät kuvaustermejä (<dt>) ja kuvaustiedot (<dd>) sijaan <li> eikä niissä ole luettelomerkkejä. Niitä on tarkoitus käyttää metatietojen ja sanastojen näyttämiseen, mutta en voi sanoa, että olisin koskaan nähnyt niitä luonnossa.

Aloitetaan helpoista asioista - kuinka nollata luettelotyylit oikein (ainakin mielestäni). Sen jälkeen tarkastelemme muutamaa esteettömyysongelmaa ennen kuin valaistamme vaikeasti havaittavia <menu> elementti, jonka saatat yllättyä kuullessani… on itse asiassa myös luettelo!

Luettelotyylien nollaaminen

Selaimet ottavat automaattisesti käyttöön omia User Agent -tyylejä helpottaakseen luetteloiden visuaalista rakennetta heti valmiina. Se voi olla hienoa! Mutta jos haluamme aloittaa tyhjältä pöydältä ilman tyyliä koskevia mielipiteitä, meidän on ensin nollattava ne tyylit.

Voimme esimerkiksi poistaa luettelon kohteiden vierestä olevat merkit melko helposti. Ei tässä mitään uutta:

/* Zap all list markers! */
ol, ul, menu { list-style: none;
}

Mutta nykyaikainen CSS tarjoaa uusia tapoja auttaa meitä kohdistamaan tiettyihin luetteloinstanssiin. Oletetaan, että haluamme poistaa merkit kaikista luetteloista, paitsi jos luettelot näkyvät pitkä sisältö, kuten artikkeli. Jos yhdistämme uudempien CSS-pseudoluokan funktioiden voimat :where() ja :not(), voimme eristää kyseiset tapaukset ja sallia merkit seuraavissa tapauksissa:

/* 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;
}

Miksi käyttää :where() sijasta :is()? Spesifisyys :where() on aina nolla, kun taas :is() ottaa valitsimien luettelonsa tarkimman elementin spesifisyyden. Eli käyttämällä :where() on vähemmän voimakas tapa ohittaa asioita ja se voidaan helposti ohittaa itse.

UA-tyylit lisäävät myös täyttöä listakohteen sisällön erottamiseen sen merkistä. Jälleen kerran, se on melko mukava ominaisuus joissain tapauksissa heti käyttöönoton jälkeen, mutta jos poistamme jo luettelomerkit kuten teimme yllä, voimme yhtä hyvin pyyhkiä pois myös tämän pehmusteen. Tämä on toinen tapaus :where():

:where(ol, ul, menu) { padding-left: 0; /* or padding-inline-start */
}

OK, se estää merkkejä sisältämättömiä luettelokohteita näyttämästä kelluvan avaruudessa. Mutta me tavallaan heitimme vauvan ulos kylpyveden kanssa ja poistimme pehmusteen kaikissa tapauksissa, mukaan lukien ne, jotka eristimme aiemmin <article>. Joten nyt nuo luettelot, joissa on merkkejä, riippuvat sisältölaatikon reunasta.

Huomaa, että UA-tyyleissä on ylimääräinen 40px että <menu> elementti.

Haluamme siis estää luettelomerkkien "riipumisen" säiliön ulkopuolella. Voimme korjata sen kanssa list-style-position omaisuus:

Tai ei… ehkä se johtuu tyylillisistä mieltymyksistä?

Uudemmat esteettömyysongelmat luetteloiden kanssa

Valitettavasti luetteloihin liittyy pari esteettömyysongelmaa – jopa näinä nykyaikaisina aikoina. Yksi huolenaihe on hakemuksen tulos list-style: none; kuten teimme UA-tyylejä nollattaessa.

Lyhyesti sanottuna Safari ei lue järjestetyt ja järjestämättömät luettelot tyyliteltynä list-style: none varsinaisina luetteloina, kuten navigoitaessa sisältöä näytönlukuohjelman avulla. Toisin sanoen merkintöjen poistaminen poistaa myös luettelon semanttisen merkityksen. The korjaus tälle korjaukselle se soveltaa an ARIA list rooli luettelossa ja a listitem rooli luettelon kohteille joten näytönlukuohjelmat poimivat ne:

<ol style="list-style: none;" role="list"> <li role="listItem">...</li> <li role="listItem">...</li> <li role="listItem">...</li>
</ol> <ul style="list-style: none;" role="list"> <li role="listItem">...</li> <li role="listItem">...</li> <li role="listItem">...</li>
</ul>

kumma, Safari pitää tätä ominaisuutena bugin sijaan. Periaatteessa käyttäjät ilmoittaisivat, että näytönlukijat ilmoittivat liian monta luetteloa (koska kehittäjät käyttävät niitä yleensä liikaa), joten nyt vain ne, joilla on role="list" näytönlukijat ilmoittavat, mikä ei itse asiassa ole niin outoa. Scott O'Hara on yksityiskohtainen pilaantuminen miten kaikki meni alas.

Toinen saavutettavuusongelma ei ole meidän itsemme tekemä (hurraa!). Tiedä sitten miten sinun pitäisi lisää aria-label että <section> elementtejä ilman otsikoita? Joskus on järkevää tehdä samoin luettelon kanssa, joka ei sisällä otsikkoelementtiä, joka auttaa kuvailemaan luetteloa.

<!-- This list is somewhat described by the heading -->
<section> <h2>Grocery list</h2> <ol role="list"> <!-- ... --> </ol>
</section> <!-- This list is described by the aria-label -->
<ol role="list" aria-label="Grocery list"> <!-- ... -->
</ol>

Sinä ehdottomasti älä täytyy käyttää jompaakumpaa menetelmää. Otsikon tai ARIA-tunnisteen käyttäminen on vain lisättyä kontekstia, ei vaatimusta – muista testata verkkosivustosi näytönlukuohjelmilla ja tehdä se, mikä tarjoaa parhaan käyttökokemuksen tilanteeseen.

Hieman asiaan liittyvissä uutisissa Eric Bailey kirjoitti erinomaisen palan aiheesta miksi ja miten hän ajattelee aria-label olla koodihaju.

Odota, <menu> onko sekin lista?

Ok, niin, luultavasti ihmettelet kaikkea <menu> elementtejä, joita olen liukastunut koodiesimerkkeihin. Se on itse asiassa erittäin yksinkertainen; valikot ovat järjestämättömiä luetteloita, paitsi että ne on tarkoitettu interaktiivisille kohteille. Ne näkyvät jopa esteettömyyspuussa järjestämättöminä luetteloina.

Semanttisen verkon alkuaikoina uskoin virheellisesti, että valikot olivat sellaisia <nav>s ennen kuin uskot, että ne olivat kontekstivalikoita (tai "työkalurivejä", kuten speksi sanoo), koska niin sanottiin HTML-spesifikaation varhaisissa versioissa. (MDN:llä on mielenkiintoinen kirjoitus kaikissa aiheeseen liittyvissä vanhentuneissa asioissa <menu> jos olet yhtään kiinnostunut.)

Nykyään tämä on kuitenkin semanttinen tapa käyttää valikoita:

<menu aria-label="Share article"> <li><button>Email</button></li> <li><button>Twitter</button></li> <li><button>Facebook</button></li>
</menu>

Henkilökohtaisesti uskon, että niille on joitain hyviä käyttötapoja <menu>. Tämä viimeinen esimerkki näyttää luettelon sosiaalisen jakamisen painikkeista, jotka on kääritty etikettiin <menu> elementti, jonka huomionarvoinen piirre on, että "Jaa artikkeli" -tunniste antaa merkittävän osan kontekstista, joka auttaa kuvaamaan painikkeiden toimintaa.

Ovatko menut ehdottoman välttämättömiä? Ei. Ovatko he HTML-maamerkit? Ehdottomasti ei. Mutta ne ovat siellä, jos pidät vähemmän <div>s ja sinusta tuntuu, että komponentti voisi käyttää aria-label lisäkontekstia varten.

Mitään muuta?

Kyllä, siellä on myös edellä mainittu <dl> (kuvausluettelo) -elementti, mutta MDN ei näytä pitävän niitä luetteloina samalla tavalla - se on luettelo ryhmistä, jotka sisältävät termejä - enkä voi sanoa, että olisin todella nähnyt niitä käytössä. MDN:n mukaan niitä on tarkoitus käyttää metadatan, sanastojen ja muun tyyppisten avainarvo-parien luomiseen. Vältän niitä vain sillä perusteella, että kaikki näytönlukijat ilmoittavat ne eri tavalla.

Mutta älkäämme lopettako asioita negatiiviseen sävyyn. Tässä on luettelo upeista asioista, joita voit tehdä listoilla:

• Coinsmart. Euroopan paras Bitcoin- ja kryptopörssi.Klikkaa tästä
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. Pääsy tästä.
• Lähde: https://css-tricks.com/newer-things-to-know-about-good-ol-html-lists/