Masz kilka etapów wdrożenia, ale kolejność jest ważna tylko w części z nich? W takim przypadku lista HTML zwykle powinna być numerowana, choć sam wygląd punktów nie zawsze podpowiada właściwy znacznik. Błędny wybór potrafi zmienić sposób, w jaki strukturę treści odczyta technologia asystująca.
Dobierz znacznik do relacji między elementami, nie do wyglądu listy
oznacza pojedynczy element listy i powinien znajdować się w odpowiednim kontenerze.- CSS zmienia wygląd, ale nie powinien zastępować semantycznego znacznika HTML.
Wybierz ul albo ol według tego, czy kolejność zmienia sens
Lista zakupów i instrukcja uruchomienia aplikacji mogą wyglądać podobnie, ale niosą inną informację. W pierwszej kolejność produktów zwykle jest obojętna, w drugiej pominięcie kroku albo zmiana kolejności może zepsuć cały proces.
Do luźnego zestawu służy . Taką różnicę opisuje też poradnik dostępności cyfrowej na gov.pl.
Prosta reguła: jeśli użytkownik może przestawić elementy bez zmiany znaczenia, wybierz
Lista numerowana przekazuje więcej niż widoczne cyfry
Cyfry można schować w CSS, a kolejność nadal pozostaje częścią informacji. To właśnie tutaj łatwo pomylić prezentację z semantyką: użytkownik widzi styl, a przeglądarka i technologie asystujące korzystają ze struktury HTML.
Element start, reversed i type. Przy liście zaczynającej się od dalszego etapu można użyć start, zamiast ręcznie wpisywać numery w treści.
- Uruchom testy integracyjne
- Wdróż zmianę na produkcję
Wynikowa numeracja zacznie się od trzeciego kroku. Uważam, że to lepsze rozwiązanie niż wpisywanie numerów do tekstu punktów, bo po zmianie kolejności nie trzeba ręcznie poprawiać każdego numeru.
Lista definicji pasuje do pary termin i objaśnienie
Gdy w dokumentacji technicznej obok nazwy pojawia się jej opis, dla terminu i dla jego opisu lub wartości.
- DOM
- Model dokumentu reprezentujący strukturę strony.
- ARIA
- Zestaw atrybutów opisujących role i stany elementów interfejsu.
Ten wariant sprawdza się w słowniczku pojęć, panelu parametrów albo opisie skrótów. Nie używaj go automatycznie do każdej listy „etykieta: wartość”: gdy elementy są po prostu punktami zestawienia,
Zagnieżdżaj listę tylko wtedy, gdy punkt ma własne podpunkty
W strukturze projektu jeden element może zawierać kilka zadań podrzędnych. Wtedy zagnieżdżenie pokazuje relację między nimi, ale dodatkowy poziom bez takiej relacji tylko utrudnia skanowanie treści.
- Panel użytkownika
- Widok profilu
- Ustawienia powiadomień
- Panel administracyjny
Lista podrzędna należy do konkretnego elementu nadrzędnego, dlatego umieść ją wewnątrz jego . Standard HTML opisuje elementy listy jako dzieci
Ukrycie punktorów w CSS może zmienić odbiór listy
Projekt może wymagać listy bez kropek, na przykład w menu lub poziomym zestawie linków. Zmiana wyglądu nie oznacza jednak, że trzeba zamienić listę na serię elementów Jest tu mniej oczywisty haczyk: dokumentacja MDN ostrzega, że w Safari listy ze stylem Dokumentacja właściwości CSS list-style na MDN opisuje to ograniczenie Safari. Gdy tworzysz niestandardową listę, zachowaj natywne znaczniki, przetestuj nawigację klawiaturą i sprawdź, czy odbiorca nadal otrzymuje informację o liczbie oraz strukturze punktów. Najczęstszy błąd zaczyna się od pytania „jakie punkty chcę zobaczyć?”, a kończy na dobraniu znacznika wyłącznie pod wygląd. Zacznij od relacji między treściami: swobodny zestaw to Jeśli po ukryciu punktorów lista nadal zachowuje swoje znaczenie, semantyczna decyzja jest dobra. Właśnie ten test pomaga uniknąć sytuacji, w której kod wygląda poprawnie, ale przestaje przekazywać strukturę osobom korzystającym z czytnika ekranu.list-style: none mogą nie być rozpoznawane jako listy w drzewie dostępności, jeśli nie znajdują się w elemencie . To nie znaczy, że taki styl zawsze jest błędem, ale przy usuwaniu punktorów sprawdź efekt w technologii asystującej, zamiast zakładać, że wizualna zmiana jest obojętna.Przed stylowaniem sprawdź, co naprawdę oznacza zestaw punktów
