Dostępność HTML
Dostępność HTML
Zawsze pisz kod HTML z myślą o dostępności!
Zapewnij użytkownikowi dobry sposób na nawigację i interakcję z Twoją witryną. Postaraj się, aby Twój kod HTML był jak najbardziej semantyczny .
Semantyczny HTML
Semantyczny HTML oznacza używanie w miarę możliwości poprawnych elementów HTML do ich właściwego celu. Elementy semantyczne to elementy mające znaczenie; jeśli potrzebujesz przycisku, użyj <button>elementu (a nie
<div>elementu).
Semantyczny
<button>Report an Error</button>
Niesemantyczne
<div>Report an Error</div>
Semantyczny HTML nadaje kontekst czytnikom ekranu, które czytają na głos zawartość strony.
Mając na uwadze przykład przycisku:
- przyciski mają domyślnie bardziej odpowiednią stylizację
- czytnik ekranu identyfikuje go jako przycisk
- z możliwością skupienia
- możliwe do kliknięcia
Przycisk jest również dostępny dla osób polegających na nawigacji wyłącznie za pomocą klawiatury; można go klikać zarówno myszą, jak i klawiszami, a także można go przełączać między nimi (za pomocą klawisza tabulatora na klawiaturze).
Przykłady elementów niesemantycznych : <div>oraz <span>- Nie mówią nic o swojej zawartości.
Przykłady elementów semantycznych : <form>, <table>, i <article>- Wyraźnie określa swoją zawartość.
Nagłówki są ważne
Nagłówki są definiowane za pomocą znaczników <h1>to :<h6>
Przykład
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Wyszukiwarki używają nagłówków do indeksowania struktury i zawartości Twoich stron internetowych.
Użytkownicy przeglądają Twoje strony według ich nagłówków. Ważne jest, aby używać nagłówków, aby pokazać strukturę dokumentu i relacje między różnymi sekcjami.
Czytniki ekranu również używają nagłówków jako narzędzia nawigacyjnego. Różne rodzaje nagłówków określają zarys strony.
<h1>nagłówki powinny być używane jako nagłówki główne, po których następują <h2>nagłówki, potem mniej ważne
<h3>i tak dalej.
Uwaga: Używaj nagłówków HTML tylko jako nagłówków. Nie używaj nagłówków, aby tekst był DUŻY lub pogrubiony .
alternatywny tekst
altAtrybut udostępnia tekst alternatywny dla obrazu, jeśli użytkownik z jakiegoś powodu nie może go wyświetlić (z powodu wolnego połączenia, błędu w atrybucie
src
lub jeśli użytkownik korzysta z czytnika ekranu).
Wartość altatrybutu powinna opisywać obraz:
Przykład
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
Jeśli przeglądarka nie może znaleźć obrazu, wyświetli wartość alt
atrybutu:
Przykład
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
Zadeklaruj język
Powinieneś zawsze dołączyć lang
atrybut wewnątrz <html>tagu, aby zadeklarować język strony WWW. Ma to pomóc wyszukiwarkom i przeglądarkom.
Poniższy przykład określa język angielski:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Użyj jasnego języka
Zawsze używaj jasnego języka, który jest łatwy do zrozumienia. Staraj się także unikać znaków, które nie mogą być wyraźnie odczytane przez czytnik ekranu. Na przykład:
- Staraj się, aby zdania były jak najkrótsze
- Unikaj kresek. Zamiast pisać 1-3, napisz od 1 do 3
- Unikaj skrótów. Zamiast pisać luty, napisz luty
- Unikaj slangowych słów
Utwórz dobry tekst linku
Tekst linku powinien jasno wyjaśniać, jakie informacje uzyska czytelnik, klikając ten link.
Przykłady dobrych i złych linków:
Dobry
Zły
Uwaga: ta strona stanowi wprowadzenie do ułatwień dostępu w sieci. Odwiedź nasz samouczek ułatwień dostępu , aby uzyskać więcej informacji.