Udostępniając swoją stronę internetową osobom niepełnosprawnym, stajesz się dostępna dla wszystkich. W rzeczywistości zwiększenie dostępności strony internetowej może nawet pomóc użytkownikom znaleźć Twoją witrynę w wyszukiwarkach. Czemu? Ponieważ wyszukiwarki wykorzystują niektóre z tych samych sygnałów, co czytniki ekranu, aby znaleźć i zrozumieć zawartość witryny.
Ale dokładnie w jaki sposób tworzysz przystępną stronę internetową, nie stając się ekspertem od programowania?
Oto kilka porad i wskazówek, które mogą wykorzystać prawie każdy, kto posiada podstawową wiedzę HTML, aby poprawić dostępność swojej strony.
Narzędzia dostępu do sieci
W3C ma fantastyczną listę narzędzi dostępu do sieci, które możesz wykorzystać jako narzędzie do sprawdzania potencjalnych problemów z witryną. Mimo to nadal zalecam eksplorowanie z czytnikiem ekranu i doświadczanie go samemu.
Zrozumienie czytników ekranu
Jednym z najważniejszych sposobów poprawy dostępności witryny jest upewnienie się, że jest ona zrozumiała dla czytników ekranu. Czytniki ekranu używają syntezatora głosu do czytania tekstu na ekranie. To brzmi dość prosto; jednak czytniki ekranu lub inna technologia wspomagająca mogą nie rozumieć Twojej witryny w sposób, w jaki ją skonfigurowałeś.
Pierwszą rzeczą, którą możesz chcieć zrobić, to wypróbować czytnik ekranu i zobaczyć, jak idzie. Jeśli używasz komputera Mac, spróbuj użyć VoiceOver.
- Iść do Preferencje systemu.
- Wybierz Dostępność.
- Wybierz VoiceOver.
- Sprawdź pudełko dla Włącz VoiceOver.
Możesz go włączać i wyłączać za pomocą polecenia-F5.
Jeśli korzystasz z komputera z systemem Windows, możesz pobrać NVDA. Możesz go ustawić, aby włączyć i wyłączyć za pomocą kontrolki skrótu + alt + n.
Oba czytniki ekranu działają, pozwalając użytkownikowi nawigować za pomocą klawiatury (to ma sens - jeśli nie widzisz, używanie myszy byłoby wyzwaniem) i przez utworzenie pola ostrości do nawigacji. Fokus jest zasadniczo tam, gdzie klawiatura jest "spiczasta", ale zwykle jest wyświetlana jako podświetlona ramka wokół obiektu skupienia zamiast kursora.
Możesz zmienić zarówno wysokość głosu, jak i prędkość, z jaką odczytuje głos, jeśli domyślne ustawienia są denerwujące (i po około pięciu minutach od słuchania standardowego wolnego głosu, zwykle są). Osoby niewidome zwykle czytają strony internetowe, a ich czytniki ekranu ustawione są na wysokie prędkości.
Pomoże Ci to zamknąć oczy, ale może również pomóc je otworzyć i porównać. Niektóre rzeczy, które możesz od razu zauważyć, gdy próbujesz odsłuchać twoją stronę, jest to, że część tekstu może być nieczynna. Nagłówki i tabele mogą być pomieszane. Obrazy mogą być pomijane lub mogą powiedzieć "obraz" lub coś równie niepomocnego. Tabele są zwykle czytane jako seria elementów bez kontekstu.
Możesz, miejmy nadzieję, naprawić to.
Alt-tagi lub alternatywny atrybut
Atrybut alt-tag lub alternatywny (alt) jest używany w HTML do opisu obrazu. W HTML wygląda to tak:
Nawet jeśli stworzysz swoją witrynę za pomocą wizualnego narzędzia, które ukrywa twój kod HTML, prawie zawsze będziesz miał szansę wpisać opis obrazu. Nic nie możesz wprowadzić (alt = ""), ale naprawdę lepiej byłoby, gdyby każdy obraz był pomocny. Jeśli byłbyś niewidomy, co chciałbyś wiedzieć o tym obrazie? "Kobieta" to niewiele, ale może "Kobieta rysująca schemat projektu, w tym dostępność, użyteczność, branding i design".
Tytuł Tekst
Witryny nie zawsze wyświetlają znaczniki tytułu HTML, ale są przydatne dla czytników ekranu. Upewnij się, że każda strona Twojej witryny ma opisowy (ale nie nazbyt dokładny) tytuł, który informuje odwiedzających o stronie.
Daj swojej stronie dobrą hierarchię informacji
Podziel duże fragmenty tekstu na nagłówki i, jeśli to możliwe, użyj odpowiednio nagłówków z hierarchią H1, H2 i H3. Nie tylko ułatwia on przeglądanie stron internetowych, ale ułatwia wszystkim innym. To także świetny sygnał dla Google i innych wyszukiwarek, które pomagają im lepiej indeksować Twoją witrynę.
Podobnie powinieneś upewnić się, że twoja strona internetowa jest logicznie uporządkowana treścią i że nie masz pól niepowiązanych informacji. Jeśli korzystasz z reklam, obserwuj, że Twoje reklamy nie są nadmiernie uciążliwe i zbyt często rozbijają tekst w witrynie.
Stwórz lepsze tabele
Jeśli korzystasz z tabel HTML, możesz dodawać napisy do swoich tabel za pomocą tagu, aby ułatwić zrozumienie przez czytniki ekranu, a nie tylko pogrubienie tytułu tabeli pogrubioną czcionką. Możesz także dodać element "zakres" i wyraźnie oznaczyć nowe wiersze i kolumny w tabeli, aby czytniki ekranu nie po prostu zgrzytały szeregiem komórek tabeli bez podawania jakiegokolwiek kontekstu.
Nawigacja po klawiaturze
Zasadniczo wszystko, co umieścisz na swojej stronie, powinno być czymś, co ktoś mógłby zrobić używając klawiatury. Oznacza to, że przyciski nawigacyjne nie powinny być animowanymi przyciskami rozwijanymi, jeśli nie możesz ich użyć z czytnikiem ekranu (spróbuj i sprawdź, czy nie masz pewności - niektóre przyciski są zaprogramowane do używania klawiatury).
Napisy zamknięte
Jeśli dodasz filmy lub elementy audio do swojej witryny, powinny one zawierać napisy. HTML5 i wiele usług przesyłania strumieniowego wideo (takich jak YouTube) oferuje obsługę zamkniętych napisów. Napisy są przydatne nie tylko w przypadku ułatwień dostępu, ale także w przypadku użytkowników, którzy mogą przeglądać witrynę w miejscu, w którym nie mogą odtwarzać dźwięku, na przykład w biurze lub w hałaśliwym miejscu.
W przypadku podkastów lub innych elementów audio rozważ udostępnienie transkrypcji tekstu. Jest to przydatne nie tylko dla osób, które nie mogą słuchać dźwięku, ale dzięki tekstowi ułatwi Google i innym wyszukiwarkom indeksowanie tych treści i pomoże w rankingu Google.
ARIA
Jeśli chcesz przejść na zaawansowany poziom dostępności, specyfikacje HTML5 ARIA lub WAI-ARIA mają być nowym standardem w przyszłości. Jest to jednak skomplikowana (i rozwijająca się) instrukcja techniczna, więc możesz użyć skanera ARIA do skanowania, aby sprawdzić, czy Twoja witryna nie ma problemów, które możesz rozwiązać. Mozilla ma również bardziej przystępny przewodnik po rozpoczęciu pracy z ARIA.
