Tworzenie dostępnych zasobów: Fragmenty/kod HTML

Podczas dodawania niestandardowego kodu HTML lub fragmentów do Twojej witryny, dostępność powinna być kluczowym czynnikiem. Źle skonstruowany kod może tworzyć bariery dla użytkowników korzystających z technologii wspomagających. W tym artykule wyjaśniono, jak pisać czysty, semantyczny kod HTML, który obsługuje dostępność. Obejmuje takie elementy, jak role ARIA, prawidłowe użycie tagów i przyjazny dla klawiatury projekt, aby zapewnić, że Twój niestandardowy kod będzie działał dla wszystkich odwiedzających.

Aby upewnić się, że Twoja witryna, strona docelowa, formularz lub wiadomość spełniają wymogi dostępności, skorzystaj z listy kontrolnej dostępnej tutaj.

Pamiętaj, że nie oferujemy dalszej pomocy w zakresie HTML. Upewnij się, że czujesz się komfortowo z kodowaniem lub masz programistę, z którym możesz się skonsultować.

Wymagania

Ramki iframe

  • Atrybut title ramki iframe (na stronie nadrzędnej) musi być dokładny i opisowy.
  • Strona źródłowa ramki iframe (strona osadzona w ramce iframe) musi mieć prawidłowy i znaczący <title>.

Punkty orientacyjne

  • Czytniki ekranu umożliwiają użytkownikom nawigację za pomocą punktów orientacyjnych, więc punkty orientacyjne są skutecznym sposobem na ominięcie bloków treści, zgodnie z wymaganiami WCAG 2.4.1.
  • Punkty orientacyjne mogą być oznaczone znacznikami HTML lub równoważnymi rolami ARIA (np. <header> lub role= "banner", <nav> lub role="navigation", <main> lub role="main", <footer> lub role="contentinfo" itp.)

Język

  • Podstawowy język strony musi być dokładnie określony za pomocą standardowego kodu języka na elemencie, np:
    • <html lang="en">,
    • <html lang="fr">.
  • Inline zmiany języka MUSZĄ być identyfikowane za pomocą poprawnego atrybutu lang.

Listy

  • Listy muszą być konstruowane przy użyciu odpowiednich znaczników semantycznych, tj:
    • <ul> lub <ol> z elementami podrzędnymi <li>,
    • lub <dl> z elementami podrzędnymi <dt> i <dd>.

Tabele

  • Nagłówki tabel muszą być oznaczone <th>.
  • Tekst nagłówka tabeli danych musi dokładnie opisywać kategorię odpowiednich komórek danych.
  • Komórki danych tabeli muszą być powiązane z odpowiadającymi im komórkami nagłówka.
    • Korzystanie z zakresu(<th scope="col "> i <th scope="row">) jest wysoce zalecane, choć nie zawsze konieczne. Jeśli wszystkie komórki w pierwszym wierszu są oznaczone jako <th> bez zakresu, większość nowoczesnych czytników ekranu wywnioskuje, że zakresem jest kolumna poniżej każdej komórki nagłówka.
  • Nagłówki grup danych tabeli (jeśli istnieją) muszą być powiązane z odpowiadającymi im grupami komórek danych (np. poprzez scope="rowgroup" lub scope="colgroup").
  • Asocjacje nagłówka/danych, które nie mogą być oznaczone za pomocą <th> i scope, muszą być oznaczone atrybutami header i id.
  • Nagłówki tabel danych i asocjacje danych nie mogą być przywoływane w zagnieżdżonych, połączonych lub oddzielnych tabelach.

Wyjątki

Inline zmiany językowe

Wyjątki są dozwolone dla:

  • nazw własnych,
  • terminów technicznych,
  • słów o nieokreślonym języku,
  • oraz słów lub wyrażeń, które stały się częścią języka bezpośrednio otaczającego tekstu.

Przykłady

kod iframeTAK: Tytuł dodany do ramki iframe wyjaśnia cel treści.
znaczniki na stronie internetowejTAK: Prawidłowo oznaczone punkty orientacyjne, które umożliwiają użytkownikom nawigację za ich pośrednictwem.
przykład kodu używającego wpisu /LangTAK: Poniższy fragment kodu ilustruje kod typowy dla użycia wpisu /Lang w celu zastąpienia domyślnego języka dokumentu poprzez określenie sekwencji oznaczonej treści w strumieniu treści strony.
strona internetowa z oznaczonymi listamiTAK: Prawidłowo oznaczona lista elementów.
table in HTML codeNIE: W tym przykładzie użyto zagnieżdżonych nagłówków, ale komórki zawartości są nieprawidłowo powiązane za pomocą atrybutów id i headers. Wszystkie komórki odwołują się do nagłówka najwyższego poziomu “Egzaminy”(id="e") – nie jest to poprawne dla ostatnich trzech kolumn, które powinny odwoływać się do nagłówka “Projekty”. Przypadkowo zamieniono również odniesienia do nagłówków kolumn drugiego poziomu, chociaż w tym przykładzie nie ma to znaczenia, ponieważ zawartość (1, 2, Final) jest powtarzana.

Powiązane artykuły

Popularne materiały