Dostępność dla osób niepełnosprawnych na stronie internetowej
Profesjonalnie wykonany serwis WWW powinien być dostępny. Ale co to oznacza? Istnieje specyfikacja określająca wymagania, które musi spełniać witryna WWW, aby można było ją określić dostępną — standard WCAG. Jest to dokument bardzo skomplikowany, jednak najważniejsze wymagania można zdefiniować dosyć prosto. Obecność podstawowych reguł WCAG powinna być standardem w każdym projekcie internetowym, zwłaszcza że ich implementacji powinien sprostać każdy programista witryn WWW.
Należy pamiętać, że aspekt dostępności strony internetowej nie dotyczy wyłącznie osób niepełnosprawnych, choć to z nimi jest najczęściej kojarzony. Dostępność jest istotna również dla każdego z nas — zapewnienie dużego poziomu kontrastu czy prawidłowe opisanie etykiet formularza może być korzystne dla każdego odwiedzającego.
Wiele osób z dostępnością strony WWW kojarzy funkcje takie jak przyciski do powiększania tekstu, alternatywne style z podniesionym kontrastem czy możliwość odczytania treści przez lektora z poziomu witryny. Jest to błędne pojmowanie dostępności. Oczywiście tego typu funkcje mogą osobom niepełnosprawnym ułatwić korzystanie z serwisu, jednak nie są one podstawowym elementem dostępności, a jedynie dodatkiem — przydatnym, ale nie najważniejszym.
Cechy dostępnej strony WWW
Kontrast treści
Zawartość strony internetowej — tekst, przyciski, pola tekstowe oraz ikony i wszelkie grafiki — powinny mieć odpowiedni kontrast w oficjalnej, głównej odmianie szaty graficznej. Standard WCAG 2 na poziomie AA określa wymagany stosunek koloru tła do koloru tekstu o wartości 4.5:1. Nie ma potrzeby zapamiętywania tych wartości — zamiast tego warto podczas kodowania motywu graficznego przygotowanego przez grafika testować go przy użyciu odpowiednich narzędzi (o których pod koniec).
Obsługa elementów interaktywnych z poziomu klawiatury
Osoby z niepełnosprawnością psychoruchową preferują korzystanie z witryn WWW oraz aplikacji desktopowych z poziomu klawiatury, tj. bez użycia kursora myszy. Dla twórcy strony WWW oznacza to, że wszelkie funkcje witryny muszą być dostępne bez użycia myszy.
Oczywiście można wprowadzić dedykowane skróty klawiaturowe dla każdej pozycji menu głównego, jednak podstawowa, najbardziej powszechna i zupełnie wystarczająca implementacja polega na przygotowaniu elementów interaktywnych (przycisków, linków, pól tekstowych) w taki sposób, by dało się je aktywować i przełączać się między nimi skrótami Tab oraz Shift+Tab.
Natywne znaczniki HTML, takie jak link <a> czy przycisk <button>, reprezentują prawidłowe zachowanie domyślnie, wystarczy jedynie używać ich poprawnie. Znacznika <a> należy używać wyłącznie do przekierowywania użytkownika pod inny adres — linki z pustym atrybutem „href” są niedozwolone. Znacznik <button> zaś należy wykorzystywać w przypadku wysyłania formularza, a także do uruchamiania niestandardowych akcji skryptów JavaScript.
Wszelkie niestandardowe elementy HTML z funkcjami interaktywnymi dodawanymi na poziomie skryptów JavaScript powinny posiadać atrybut „tabindex=”0”” oraz reagować na wciśnięcie spacji i przycisku Enter.
Widoczność stanu zogniskowania („focus”)
Elementy interaktywne w stanie zogniskowania powinny być wyraźnie zaznaczone wizualnie, zwłaszcza jeśli stan „focus” został osiągnięty z poziomu klawiatury, na przykład poprzez wciśniecie klawisza Tab. Powszechną praktyką jest wyraźne stylowanie elementów formularzy w stanie focus, znaczników <input> czy <textarea>, odmiennym kolorem lub obramowaniem.
Aby strona była dostępna, równie istotne jest intensywne wyróżnienie zogniskowanych przycisków i linków — najlepiej grubą i dobrze kontrastującą obwolutą (właściwość „outline” w stylach CSS). Problemem w takim przypadku może być zubożenie estetyki witryny z perspektywy osób używających myszki do interakcji z przyciskami i linkami. Najprostszym, choć nieidealnym rozwiązaniem, jest użycie konstrukcji selektora CSS wykluczającej stan najechania myszki — na przykład „a:focus:not(:hover)”.
Zawartość linków zrozumiała poza kontekstem
Niektóre czytniki ekranowe przeznaczone dla osób niewidomych i niedowidzących oferują funkcję odczytywania wszystkich linków na stronie. Dlatego właśnie istotne jest, aby treść wszystkich odsyłaczy w witrynie była zrozumiała poza kontekstem, nawet z ewentualnymi problemami gramatycznymi wynikającymi z zawiłych zasad języka polskiego.
Błędem jest więc na przykład umieszczenie na blogu pod każdym z wpisów linków o treści „kliknij tutaj” lub „przeczytaj więcej”. Dla osoby korzystającej z czytnika ekranowego, lista tego typu odsyłaczy jest bezużytecznym bełkotem. Bardziej adekwatnym tekstem odnośnika jest więc „przeczytaj całość wpisu <tutaj tytuł danego artykułu>”.
Jeżeli pożądanym efektem wizualnym jest wyświetlenie odwiedzającemu linków o treści „przeczytaj więcej”, dalszą część tekstu przeznaczoną tylko dla czytników ekranowych należy ukryć, umieszczając go w oddzielnym znaczniku inline, takim jak <span>. Ukrycie elementu przez typowy styl CSS „display: none” jest błędne, gdyż wpływa on również na czytniki ekranowe. Wizualne ukrycie elementu przy jednoczesnym pozostawieniu go w tekście czytnika ekranowego jest możliwe za pomocą techniki „visually hidden”, czyli odpowiedniego zestawu stylów CSS: https://a11yproject.com/posts/how-to-hide-content.
Struktura nagłówków
Istnieje kilka sposobów na określanie struktury nagłówków HTML. Według badań dla osób z niepełnosprawnościami najwygodniejsze jest umieszczenie tytułu bieżącej podstrony w nagłówku <h1>. W takim wypadku logo witryny jest po prostu zwykłym elementem. Logo witryny powinno być nagłówkiem <h1> wyłącznie na stronie głównej.
Znaczniki takie jak <section>, <article> czy <nav> definiują tzw. sekcję dokumentu, a każda z sekcji obowiązkowo powinna posiadać nagłówek (na przykład <h2> lub <h3>). W przypadku menu głównego w znaczniku <nav> może być to po prostu „<h2>Menu główne</h2>”. Jeżeli widoczność takiego nagłówka nie jest pożądana wizualnie, można wykorzystać wspomnianą wyżej technikę „visually hidden”.
Nagłówki HTML powszechnie wykorzystuje się do optymalizacji SEO. Należy jednakże pamiętać o ich pierwotnym przeznaczeniu. Warto testować ich użyteczność w czytniku ekranowym.
Etykiety pól formularzy
Pola formularzy, takie jak <input>, <textarea> i <select>, bezwzględnie powinny posiadać przypisaną etykietę. Jest ona niezbędna dla użytkowników czytników ekranowych. Etykieta pola pełni funkcję informacyjną — wyjaśnia użytkownikowi, jakie jest przeznaczenie pola. Etykietę definiuje się przy użyciu znacznika <label>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label.
Mimo że jest to popularna i atrakcyjna wizualnie metoda, nie należy zastępować etykiety <label> atrybutem „placeholder” pola formularza. Etykieta pola formularza powinna być zawsze widoczna, nawet jeśli użytkownik rozpoczął wprowadzanie tekstu do pola. Popularnym rozwiązaniem stosowanym w Material Design firmy Google jest zmniejszenie etykiety i przesunięcie jej ponad pole tekstowe w momencie wpisania tekstu.
Opisywanie elementów graficznych
Wszelkie obrazki na stronie umieszczone w formie znaczników <img> powinny posiadać tekst alternatywny, tj. atrybut „alt”. Jest on odczytywany przez czytnik ekranowy, a także wyświetlany standardowo przez przeglądarki przy problemach z łączem. W przypadku, gdy plik graficzny przedstawia ilustrację lub wykres, należy go szczegółowo opisać w tekście alternatywnym. Jeżeli obrazek zawiera jedynie tekst, należy przepisać go do atrybutu „alt”.
Jednakże, jeżeli to tylko możliwe, nie należy umieszczać treści tekstowych w formie obrazków, a oczekiwane efekty graficzne realizować za pomocą stylów CSS.
Jeżeli obrazek pełni jedynie funkcję dekoracyjną i nie reprezentuje żadnej treści, należy zdefiniować atrybut „alt” o pustej wartości lub określić dekorację wizualną za pomocą stylów CSS i właściwości „background-image”. Nie należy całkowicie rezygnować z atrybutu „alt” znacznika <img> — gdy go brakuje, czytnik ekranowy odczytuje nazwę pliku.
Ikony typu „font icon” powinny być opisywane dla czytników ekranowych, zwłaszcza jeżeli są jedynym sposobem na rozumienie przeznaczenia danego fragmentu strony (sekcji, widgetu czy elementu listy lub pola formularza). Do opisania takiej ikony można wykorzystać zwyczajny znacznik inline, taki jak <span>, umieszczony zaraz obok ikony, zaś ukryć go wizualnie można z pomocą wspomnianej techniki „visually hidden”.
Warto też znacznikom dodającym ikonę „font icon” do witryny dołączyć atrybut „aria-hidden=”true””, który informuje czytniki ekranowe, by te zignorowały element. Bez tego atrybutu niektóre czytniki mogą próbować odczytać zawartość znaku ikony i przekształcić go w bełkot.
Narzędzia
Najbardziej podstawowym narzędziem każdego webdevelopera, przydatnym również w kontekście dostępności, jest walidator W3C: https://validator.w3.org/. Zapewnienie prawidłowej struktury kodu HTML jest pierwszym krokiem w stronę dostępności serwisu.
Należy zadbać, by nagłówki HTML na stronie były użyteczne dla osób korzystających z czytnika ekranowego. W tym celu pomóc mogą wszelkie wtyczki do przeglądarek generujące outline HTML —czytelną listę z wszystkimi nagłówkami HTML w witrynie, nawet tymi ukrytymi wizualnie. Przykładowa wtyczka dla przeglądarki Mozilla Firefox: https://addons.mozilla.org/de/firefox/addon/a11y-outline/.
Niezwykle użytecznym i kompleksowym narzędziem przy pracy nad dostępnością serwisu jest aplikacja WAVE Evaluation Tool weryfikująca szereg aspektów opisanych powyżej — poprawność nagłówków, poziom kontrastu, opisy obrazków, strukturę HTML. Aplikacja dostępna jest bez potrzeby instalacji w formie serwisu https://wave.webaim.org/. Warto jednakże zainstalować rozszerzoną wersję narzędzia w formie wtyczki do przeglądarki, która potrafi wykryć więcej nieprawidłowości i pokazać więcej informacji.
Jak oceniasz ten poradnik?
Dziękujemy za Twoją opinię!Twoja opinia pozwala nam tworzyć lepsze treści
Więcej poradników o stronach internetowych
Z technologiami stosowanymi do tworzenia stron internetowych jest jak z technikami malarskimi. Po pierwsze jest ich wiele, a po drugie każdy korzysta z tych, które zna, w których najlepiej się czuje. Nie chodzi tutaj o to żeby wymienić Ci każdą możliwą technologię prezentując jej wady i zalety, czy też przekonywać Cię, że właśnie ta jest najlepsza a nie tamta. Chodzi o to abyś Ty sam, nabrał świadomości o tym jak ważne jest to zagadnienie i dlaczego warto zwrócić na to szczególną uwagę.
20.04.2015
Jakie korzyści daje i ile kosztuje strona internetowa? Cena zależy od kilku czynników, m.in. od technologii i narzędzi, zakresu wymagań, zaawansowania funkcjonalności i rodzaju działalności (koszt sklepu internetowego będzie zazwyczaj znacznie wyższy niż cena strony internetowej – wizytówki firmy). Dodatkowo na cenę strony internetowej wpływają dodatkowe usługi – zakup hostingu i domeny, pozycjonowanie strony, integracja z mediami społecznościowymi czy narzędziami marketingowymi. Jaki jest aktualny cennik stron internetowych w 2023 r.? Ile kosztuje strona internetowa w zależności od rodzaju? Jaki jest koszt utrzymania strony internetowej? Sprawdź i znajdź najlepsze oferty na stworzenie strony internetowej z prostą wyceną, którą dostaniesz w mailu.
27.10.2023Wiele osób, którym zdarzyło się założyć własny biznes, niedługo potem tworzy strony internetowe mające na celu promocję swojej działalności. Bardzo często skłania to ich do zastanowienia, co mogą jeszcze zrobić w obrębie strony WWW, aby klient szukający danej usługi w Internecie, trafił właśnie na ich firmę. Odpowiedzią na takie rozważania jest pozycjonowanie stron internetowych, kryjące się również pod skrótowcem SEO.
25.05.2016
Firmy, które świadczą usługi w różnych branżach, powinny wziąć pod uwagę działanie na Oferteo. Portal ten łączy osoby, które szukają Wykonawcy jakiejś usługi ze specjalistami, którzy ją wykonują. Jest tu zarejestrowanych ponad 530 tys. firm. Miesięcznie trafia tu prawie 200 tys. zleceń. Tym samym Oferteo jest największą w Polsce internetową platformą dla rynku usług, osiągając w nim ponad 60-procentowy udział. Dlaczego jeszcze warto działać na Oferteo? Sprawdź!
26.08.2022W Internecie znajdują się miliony stron internetowych. Codziennie powstają nowe strony, które mają za zadanie przyciągnąć do siebie nowych internautów. Jednym z głównych problemów nowo powstających stron jest to, że zamiast przyciągać odwiedzających wręcz ich odpychają.
22.08.2012Wielu przedsiębiorców, jak i osób prywatnych, chcąc złożyć zamówienie na stronę internetową, zastanawia się, dlaczego identyczny projekt, który przekazał tym samym firmom, potrafi kosztować w jednej z nich 1500 zł, a drugiej 4000 zł. Reguła "im droższe, tym lepsze" nie ma tutaj zastosowania. Natomiast jeżeli wymagamy prawidłowego funkcjonowania i pozycjonowania strony w wyszukiwarkach, to nie warto na tym oszczędzać.
02.11.2020
