Seznamy (ul, ol, li)

Doba čtení: cca 3 min

Co jsou seznamy a kdy je použít?

Seznamy slouží k zobrazení více položek, které spolu nějak souvisejí. Místo toho, abychom vypisovali věci za sebou do odstavce oddělené čárkami, dáme každou položku na vlastní řádek – text je pak přehlednější a lépe se čte. Odečítač obrazovky navíc u seznamu oznámí, kolik položek obsahuje, což uživateli pomáhá zorientovat se.

HTML nabízí tři typy seznamů – nečíslovaný, číslovaný a definiční. Každý se hodí na něco jiného.

Nečíslovaný seznam – ul

Tag <ul> (unordered list) vytvoří seznam s odrážkami. Používáme ho tehdy, když nezáleží na pořadí položek – například výčet vlastností, ingredience receptu nebo navigační menu.

Každá položka seznamu se označí tagem <li> (list item):

<ul>
			  <li>Jablko</li>
			  <li>Hruška</li>
			  <li>Švestka</li>
			</ul>

Prohlížeč zobrazí každou položku s odrážkou (obvykle tečkou). Vizuální styl odrážek lze změnit přes CSS.

Číslovaný seznam – ol

Tag <ol> (ordered list) vytvoří seznam, kde záleží na pořadí. Prohlížeč jednotlivé položky automaticky očísluje. Hodí se například pro návody, kroky postupu nebo žebříčky.

<ol>
			  <li>Zapni počítač.</li>
			  <li>Otevři editor.</li>
			  <li>Napiš svůj první HTML kód.</li>
			</ol>

Číslování začíná standardně od 1. Pomocí atributu start lze začít od jiného čísla – například <ol start="5"> začne od pětky. Atribut reversed pak seznam seřadí pozpátku.

Definiční seznam – dl

Tag <dl> (description list) je speciální typ seznamu pro dvojice pojmů a jejich vysvětlení. Používá se například pro slovníky, FAQ nebo metadata.

Skládá se ze dvou tagů:

  • <dt> – definition term, pojem nebo název
  • <dd> – definition description, vysvětlení nebo hodnota
<dl>
			  <dt>HTML</dt>
			  <dd>Jazyk pro popis struktury webové stránky.</dd>
			  <dt>CSS</dt>
			  <dd>Jazyk pro vzhled a stylování webové stránky.</dd>
			</dl>

Vnořené seznamy

Seznamy lze vnořovat do sebe – uvnitř položky <li> prostě začneš nový seznam. Hodí se to například pro osnovy nebo víceúrovňové navigace.

<ul>
			  <li>Ovoce
				<ul>
				  <li>Jablko</li>
				  <li>Hruška</li>
				</ul>
			  </li>
			  <li>Zelenina
				<ul>
				  <li>Mrkev</li>
				  <li>Brokolice</li>
				</ul>
			  </li>
			</ul>

S vnořováním to nepřehánět – více než dvě úrovně jsou pro čtenáře i pro VoiceOver zbytečně matoucí.

Seznamy a přístupnost

VoiceOver oznámí typ a počet položek seznamu hned na začátku – například „seznam, 4 položky“. Uživatel tak okamžitě ví, co ho čeká, aniž by musel celý seznam projít. To je velká výhoda oproti textu vypsanému do odstavce.

Několik pravidel pro přístupné seznamy:

  • Používej <ul> a <ol> jen pro skutečné seznamy – ne jako nástroj pro vizuální odsazení textu. Na odsazení slouží CSS.
  • Dovnitř <ul> nebo <ol> patří přímo jen tagy <li> – žádné jiné tagy na přímé úrovni.
  • Navigační menu se tvoří právě pomocí <ul> a <li> – je to sémanticky správně a VoiceOver s tím umí dobře pracovat.

Tip od Zdeňka

Zdeněk radí: Správně použitý seznam je pro VoiceOver zlatý. Slyším hned počet položek, můžu mezi nimi skákat klávesou a vím přesně, kde jsem. Naopak text nacpaný do jednoho odstavce a oddělený čárkami musím číst celý od začátku do konce. Kdykoli máš výčet tří a více věcí, sáhni po seznamu – udělá radost tobě i tvým čtenářům.