Przejdź do treści głównej

LepszyWeb. Przewodnik po stylach

Akordeon (harmonijka)

  • Przyciski są używane jako akordeony, dzięki czemu mogą być nawigowane przez użytkowników klawiatury i dostępne dla czytników ekranowych.
  • Każdy przycisk akordeonowy i rzeczywista treść ma unikalne id i związane z nim aria-controls.
  • Każdy przycisk posiada atrybut aria-expanded, który jest przełączany pomiędzy true i false. Jeśli aria-expanded='true', powiązana z nim treść jest wyświetlana, a jeśli aria-expanded='false', to treść jest ukryta.

Wytyczne WCAG 2.1

2.4.3 Kolejność fokusu - Jeśli strona internetowa może być nawigowana sekwencyjnie, a kolejność nawigacji wpływa na zrozumienie lub funkcjonalność strony, komponenty przyjmują fokus w kolejności, dzięki której zachowany jest sens i funkcjonalność treści. (Poziom A)

2.4.5 Wiele dróg - Istnieje więcej niż jeden sposób umożliwiający zlokalizowanie strony internetowej w zestawie stron internetowych, z wyjątkiem sytuacji, kiedy dana strona jest wynikiem jakiejś procedury lub jednym z jej etapów. (Poziom AA)

2.4.7 Widoczny fokus - Każdy interfejs posiadający możliwość obsługi przy pomocy klawiatury ma tryb obsługi, w którym fokus klawiatury jest stale widoczny. (Poziom AA)

2.4.8 Lokalizacja - Zapewniona jest informacja, w którym miejscu w zestawie stron internetowych znajduje się użytkownik. (Poziom AAA)

4.1.2 Nazwa, rola, wartość - Dla wszystkich komponentów interfejsu użytkownika (w tym, ale nie tylko, elementów formularzy, łączy oraz komponentów wygenerowanych przez skrypty) nazwa oraz rola mogą być określone programowo; stan, właściwości oraz wartości, które mogą być ustawione przez użytkownika, mogą również być ustawione programowo; powiadomienie o zmianach w tych elementach dostępne jest dla programów użytkownika, w tym technologii wspomagających (Poziom A)

Ścieżka powrotu (okruszki chleba)

  • Umieść okruchy chleba w elemencie <nav>, jeśli możesz.
  • Jeśli nie używasz elementu <nav>, musisz dodać role="navigation" do znacznika. Uwaga: ta rola jest domyślna, gdy używasz elementu <nav>, więc jest to trochę zbędne, aby używać obu jednocześnie.
  • Znacznik zawiera aria-label="breadcrumbs", aby opisać rodzaj nawigacji.
  • Dodaj aria-current="page" do linku, który wskazuje na bieżącą stronę. To powie technologiom wspomagającym, że łącze posiadające fokus wskazuje na bieżącą stronę.

Zasoby

Wytyczne WCAG 2.1

2.4.8 Lokalizacja - Zapewniona jest informacja, w którym miejscu w zestawie stron internetowych znajduje się użytkownik (Poziom AAA)

Opcja #1: Lista stylizowana z elementem nav

Opcja #2: Stylizacja łączy bez elementu nav

Podstawowa nawigacja

  • Wszystkie elementy nawigacyjne powinny mieć znacznik <nav> tag.
  • Jeśli musisz użyć bardziej ogólnego elementu, takiego jak <div>, dodaj role="navigation" do każdego paska nawigacyjnego, aby wyraźnie zidentyfikować go jako punkt orientacyjny dla użytkowników technologii wspomagających.
  • Menu powinno być oznaczone zgodnie z ich indywidualną funkcją. Użyj class="visuallyhidden">, aria-label="", lub aria-labelledby="", aby łatwo dodać kontekst do różnych menu na Twojej stronie.

Wytyczne WCAG 2.1

2.4.3 Kolejność fokusu - Jeśli strona internetowa może być nawigowana sekwencyjnie, a kolejność nawigacji wpływa na zrozumienie lub funkcjonalność strony, komponenty przyjmują fokus w kolejności, dzięki której zachowany jest sens i funkcjonalność treści. (Poziom A)

2.4.5 Wiele dróg - Istnieje więcej niż jeden sposób umożliwiający zlokalizowanie strony internetowej w zestawie stron internetowych, z wyjątkiem sytuacji, kiedy dana strona jest wynikiem jakiejś procedury lub jednym z jej etapów. (Poziom AA)

2.4.7 Widoczny fokus - Każdy interfejs posiadający możliwość obsługi przy pomocy klawiatury ma tryb obsługi, w którym fokus klawiatury jest stale widoczny. (Poziom AA)

2.4.8 Lokalizacja - Zapewniona jest informacja, w którym miejscu w zestawie stron internetowych znajduje się użytkownik. (Poziom AAA)

4.1.2 Nazwa, rola, wartość - Dla wszystkich komponentów interfejsu użytkownika (w tym, ale nie tylko, elementów formularzy, łączy oraz komponentów wygenerowanych przez skrypty) nazwa oraz rola mogą być określone programowo; stan, właściwości oraz wartości, które mogą być ustawione przez użytkownika, mogą również być ustawione programowo; powiadomienie o zmianach w tych elementach dostępne jest dla programów użytkownika, w tym technologii wspomagających (Poziom A)

Option #1: Lista stylizowana z klasą visuallyhidden

Opcja #2: Lista stylizowana z ARIA label

Opcja #3: Bez stylizowanej listy z ARIA labelledby

Nawigacja rozwijana

  • Wszystkie elementy nawigacyjne powinny mieć znacznik <nav>.
  • Jeśli musisz użyć bardziej ogólnego elementu, takiego jak <div>, dodaj role="navigation" do każdego paska nawigacyjnego, aby wyraźnie zidentyfikować go jako punkt orientacyjny dla użytkowników technologii wspomagających.
  • Menu powinno być oznaczone zgodnie z ich indywidualną funkcją. Użyj class="visuallyhidden">, aria-label="", lub aria-labelledby="", aby łatwo dodać kontekst do różnych menu na Twojej stronie.

Zasoby

Wytyczne WCAG 2.1

2.4.3 Kolejność fokusu - Jeśli strona internetowa może być nawigowana sekwencyjnie, a kolejność nawigacji wpływa na zrozumienie lub funkcjonalność strony, komponenty przyjmują fokus w kolejności, dzięki której zachowany jest sens i funkcjonalność treści. (Poziom A)

2.4.5 Wiele dróg - Istnieje więcej niż jeden sposób umożliwiający zlokalizowanie strony internetowej w zestawie stron internetowych, z wyjątkiem sytuacji, kiedy dana strona jest wynikiem jakiejś procedury lub jednym z jej etapów. (Poziom AA)

2.4.7 Widoczny fokus - Każdy interfejs posiadający możliwość obsługi przy pomocy klawiatury ma tryb obsługi, w którym fokus klawiatury jest stale widoczny. (Poziom AA)

2.4.8 Lokalizacja - Zapewniona jest informacja, w którym miejscu w zestawie stron internetowych znajduje się użytkownik. (Poziom AAA)

4.1.2 Nazwa, rola, wartość - Dla wszystkich komponentów interfejsu użytkownika (w tym, ale nie tylko, elementów formularzy, łączy oraz komponentów wygenerowanych przez skrypty) nazwa oraz rola mogą być określone programowo; stan, właściwości oraz wartości, które mogą być ustawione przez użytkownika, mogą również być ustawione programowo; powiadomienie o zmianach w tych elementach dostępne jest dla programów użytkownika, w tym technologii wspomagających (Poziom A)

Nawigacja mobilna

  • Użyj elementu <button> dla swojej ikony nawigacji mobilnej.
  • Jeśli używasz ikony, która jest wyłącznie dekoracją, zgłoś alt="", ponieważ nie są potrzebne żadne dodatkowe informacje. Jeśli używasz ikony, która jest ważna dla funkcjonalności, podaj dodatkową informacjęalt="_tutaj opisowy _tekst_".
  • Jest to pomocne dla wszystkich użytkowników podczas dodawania tekstu opisowego podczas wyświetlania ikony telefonu komórkowego, aby nadać więcej kontekstu przeznaczeniu przycisku.
  • Umieść przyciski otwierania/zamykania telefonu komórkowego w elemencie <nav> i użyj ich do przełączania stanu innego opakowania z nawigacją. Zapewni to, że punkt orientacyjny nawigacji jest nadal wykrywany przez czytniki ekranu, nawet jeśli znajduje się on w stanie zamkniętym/ukrytym.

Zasoby

Wytyczne WCAG 2.1

2.4.3 Kolejność fokusu - Jeśli strona internetowa może być nawigowana sekwencyjnie, a kolejność nawigacji wpływa na zrozumienie lub funkcjonalność strony, komponenty przyjmują fokus w kolejności, dzięki której zachowany jest sens i funkcjonalność treści. (Poziom A)

2.4.5 Wiele dróg - Istnieje więcej niż jeden sposób umożliwiający zlokalizowanie strony internetowej w zestawie stron internetowych, z wyjątkiem sytuacji, kiedy dana strona jest wynikiem jakiejś procedury lub jednym z jej etapów. (Poziom AA)

2.4.7 Widoczny fokus - Każdy interfejs posiadający możliwość obsługi przy pomocy klawiatury ma tryb obsługi, w którym fokus klawiatury jest stale widoczny. (Poziom AA)

2.4.8 Lokalizacja - Zapewniona jest informacja, w którym miejscu w zestawie stron internetowych znajduje się użytkownik. (Poziom AAA)

4.1.2 Nazwa, rola, wartość - Dla wszystkich komponentów interfejsu użytkownika (w tym, ale nie tylko, elementów formularzy, łączy oraz komponentów wygenerowanych przez skrypty) nazwa oraz rola mogą być określone programowo; stan, właściwości oraz wartości, które mogą być ustawione przez użytkownika, mogą również być ustawione programowo; powiadomienie o zmianach w tych elementach dostępne jest dla programów użytkownika, w tym technologii wspomagających (Poziom A)

Paginacja

  • Umieść paginację w elemencie <nav> , jeśli możesz.
  • Jeśli musisz użyć bardziej ogólnego elementu, takiego jak <div>, dodaj role="navigation" do każdego paska nawigacyjnego, aby wyraźnie zidentyfikować go jako punkt orientacyjny dla użytkowników technologii wspomagających.
  • Znacznik zawiera aria-label="pagination" do opisania typu nawigacji.
  • Dodaj aria-current="page" do łącza, które wskazuje na bieżącą stronę. To powie AT, że zaznaczone łącze wskazuje na bieżącą stronę.
  • Dodaj aria-disabled="true" do łącza, gdy łącze jest wyłączone.

Zasoby

Wytyczne WCAG 2.1

2.4.8 Lokalizacja - Zapewniona jest informacja, w którym miejscu w zestawie stron internetowych znajduje się użytkownik (Poziom AAA)

Stan domyślny

Stan wyłączonych grup łączy Poprzednia/Następna grupa łączy

Stan wyłączonych grup łączy Poprzednia/Następna grupa łączy

Na górę