Dostępna strona dla każdego

Z dostępnej strony może korzystać każdy: osoby używające czytnika ekranu, słabo widzące, unikające ruchu na ekranie czy po prostu patrzące na telefon w słońcu. LinkHarbor robi wiele automatycznie; część zależy od Ciebie. Ten artykuł pokazuje, na co zwrócić uwagę.

#Co LinkHarbor robi automatycznie

• Jeśli odwiedzający włączy w systemie ustawienie ograniczania ruchu (na iPhonie „Ogranicz ruch”), filmy w tle się nie odtwarzają, a efekty przewijania i paralaksy oraz animacje po najechaniu kursorem są wyłączone
• Blok „Nagłówek” jest wyświetlany jako prawdziwy nagłówek, po którym orientują się czytniki ekranu
• Obrazy z bloków „Obraz” i „Galeria” dostają Twój tekst alternatywny jako opis
• Jeśli nie wybierzesz własnego koloru tekstu przycisków, LinkHarbor dobiera go do koloru przycisku

#Teksty alternatywne obrazów

Tekst alternatywny opisuje, co widać na obrazie. Czytniki ekranu go odczytują, a pojawia się też, gdy obraz się nie załaduje.

Blok „Obraz”

Pole „Tekst alternatywny” w edytorze bloku.

Blok „Galeria”

„Tekst alternatywny” do 200 znaków dla każdego obrazu.

• Opisuj treść, nie plik: „Cappuccino z latte art na drewnianym stole” zamiast „IMG_2041”
• Przy obrazach z tekstem ten tekst należy do tekstu alternatywnego
• Pisz krótko – zwykle wystarczy jedno zdanie

Gdzie znaleźć pola, wyjaśniają artykuły Darmowe bloki w szczegółach i Bloki treści.

#Struktura z nagłówkami

Dłuższe strony dziel blokiem „Nagłówek”, a nie dużym tekstem. Użytkownicy czytników ekranu przeskakują od nagłówka do nagłówka i szybko znajdują to, czego szukają – na przykład „Godziny otwarcia” czy „Kontakt”.

#Jasne tytuły linków

• Każdy link powinien być zrozumiały sam w sobie: „Menu jako PDF” zamiast „Kliknij tutaj”
• Unikaj identycznych tytułów dla różnych celów
• Emoji na początku tytułu są odczytywane; używaj ich oszczędnie

Więcej o linkach w artykule Dodawanie, porządkowanie i stylizowanie linków.

#Kontrast i czytelność

• Zadbaj o wystarczający kontrast między tekstem a tłem, zwłaszcza przy jasnych kolorach pastelowych
• Jeśli tekst leży na obrazie lub filmie w tle, użyj w motywie suwaka „Przezroczystość nakładki”, aby pozostał czytelny
• Żadnego ważnego tekstu tylko na obrazie – odwiedzający z czytnikiem ekranu go nie odczytają
• Wybierz łatwą do czytania czcionkę i niezbyt mały rozmiar tekstu w blokach tekstowych

Kolory, tło i czcionkę ustawiasz w motywie, zobacz Wygląd.

#Ostrożnie z własnym CSS

Własnym CSS możesz zmienić prawie wszystko – także rzeczy ważne dla dostępności. Nie ukrywaj obramowań fokusu, nie zmniejszaj za bardzo tekstu, a po zmianach przetestuj stronę także klawiaturą. Zobacz Własny CSS.

#Przetestuj samodzielnie

1. Włącz czytnik ekranu w telefonie (VoiceOver na iPhonie, TalkBack na Androidzie) i posłuchaj swojej strony
2. Zwiększ rozmiar tekstu w ustawieniach systemu i sprawdź, czy wszystko pozostaje czytelne
3. Obejrzyj stronę w jasnym świetle i w trybie ciemnym