Strona internetowa

Wytyczne dla twórców i redaktorów stron internetowych i aplikacji mobilnych

Obowiązek zapewnienia dostępności obejmuje wszystkie strony/aplikacje podmiotów publicznych, na których udostępniane są treści cyfrowe, w szczególności:

  • stronę BIP,
  • stronę informacyjną podmiotu publicznego,
  • witryny tworzone przez podmioty publiczne dla projektu np.: unijnego,
  • profile mediów społecznościowych podmiotu,
  • intranet,
  • strony poczty internetowej, itd.

Pamiętaj:

  • wymóg dotyczy zarówno stron/aplikacji zlecanych komercyjnie, jak i wykonanych pro bono, np. w ramach współpracy przy wspólnym projekcie,
  • zamawiając stronę/aplikację należy do umowy wprowadzić zapis o konieczności spełnienia zasad WCAG,
  • dobrą praktyką jest wykonanie przed odbiorem audytu dostępności strony/aplikacji.

Ogólne wytyczne dotyczące zapewnienia dostępności cyfrowej wyznacza standard WCAG.

Kto jest odpowiedzialny za dostępność strony/aplikacji?

Każdy, kto pracuje przy danej stronie/aplikacji. Od projektanta proponującego szatę graficzną czy architekturę informacji, poprzez programistów przygotowujących stronę/aplikację oraz moduły zarządzania treścią, edytorów redagujących i zamieszczających informacje, po pracowników wytwarzających jakiekolwiek treści zamieszczane w postaci plików np.: .xlsx .docx, .pdf czy ilustracje graficzne.

Wytyczne dostępne w WCAG można podzielić na takie, które pozostaną po stronie dewelopera oraz takie, które stoją po stronie redaktora treści.

Jak sprawdzić, czy strona/aplikacja jest dostępna?

  1. Stronę/aplikację można sprawdzić samodzielnie (samoocena), poprosić wykonawcę o oświadczenie woli lub zlecić zewnętrzny audyt.
  2. Niezależnie od wybranej metody nie należy ograniczać się do audytu mechanicznego. Sprawdzenie strony/aplikacji za pomocą np. aplikacji typu WAWE czy Silktide może być świetnym startem, ale nie zastąpi ręcznego audytu. Należy sprawdzić stronę/aplikację:
    1. czytnikiem ekranu (NVDA, TalkBack, VoiceOver),
    2. przejść przez nią bez użycia myszki (klawiaturą),
    3. na kilku przeglądarkach (np.: Mozilla Firefox, Chrome, Safari, Edge),
    4. na urządzeniach mobilnych o różnej wielkości matryc.
  3. W miarę możliwości należy zaproś do audytu OzN – w roli ekspertów przez doświadczenie - oni najlepiej posługują się technologiami wspomagającymi.
  4. Dokonując samooceny można skorzystać z listy kontrolnej publikowanej na stronie Ministerstwa Cyfryzacji poświęconej dostępności cyfrowej.
  5. W przypadku wątpliwości dotyczących Dostępności Cyfrowej skontaktuj się z Koordynatorem ds. Dostępności Cyfrowej w Urzędzie Miasta Łodzi.

Deklaracja dostępności – obowiązkowa i aktualna

Deklaracja to obowiązkowa podstrona serwisu internetowego/aplikacji, zawierająca informacje w jaki sposób w urzędzie/jednostce jest realizowany wymów zapewnienia dostępności. Deklaracja podzielona jest na kilka części dotyczących m.in. dostępności cyfrowej (w jakim stopniu dana strona internetowa/aplikacja jest dostępna dla osób ze szczególnymi potrzebami) czy architektonicznej.

  • Deklaracja ma z góry określoną przez ustawodawcę strukturę i zawiera specjalne znaczniki html <a11y> pozwalające robotom zaczytanie deklaracji, sprawdzenie jej poprawności i aktualności. 
  • Deklarację możesz sporządzić w oparciu o wytyczne zawarte w dokumentacji technicznej lub za pośrednictwem generatora, np.: Generatora Deklaracji Dostępności strony internetowej – Utilitia lub Generatora deklaracji - dostepnosci.info
  • Deklarację należy zamieszczać  jako element html. Jeśli potrzeba należy przenumerować nagłówki.
  • Deklaracja powinna być sporządzona co najmniej raz do roku, do 31 marca w języku strony/aplikacji. Zatem jeśli strona/aplikacja ma kilka wersji językowych tłumaczenie powinna mieć również strona z deklaracją.

Tworzenie strony/aplikacji. Na co zwrócić uwagę zlecając projekt

  • Zapoznaj się z wytycznymi WCAG
  • Przygotuj koncepcję strony/aplikacji. Jeśli do zamówienia załączasz projekt graficzny przekaż grafikowi wytyczne dotyczące m.in.: użycia kolorów, wymaganego kontrastu, czcionki, interlinii, nagłówków. Zaprojektujcie oznaczenie fokusem elementów treści. Pamiętaj o widokach mobilnych.
  • Pracując z wykonawcą upewnij się, by szablony strony/aplikacji odwzorowywały semantyczny układ projektu graficznego. Sprawdź układ nagłówków, użyte style, upewnij się, że CMS (system zarządzania treścią) jest tak zaprojektowany, by ograniczyć możliwość popełnienia błędów przez edytora i by wymuszał dobre praktyki (np. obowiązkowe pole dla opisów alternatywnych dla grafik, style nagłówkowe wybierane z listy). Testuj produkt (stronę/aplikację) w trakcie projektowania. Lepiej wyłapać i poprawić błędy na etapie projektowania niż dodawać “łatki” do odebranego produktu.
  • Zamawiając stronę/aplikację wpisz koniecznie do wymogów: zapewnienie dostępności cyfrowej potwierdzone oświadczeniem wykonawcy oraz - jeśli to możliwe - zewnętrzny audyt przed dokonaniem odbioru strony/aplikacji. Pamiętaj by audyt był audytem przeprowadzanym ręcznie, nie tylko automatycznie.

Redagowanie treści

Ogólne wskazówki

  • Niezależnie od systemu zarządzania treścią (CMS) ogólne zasady edycji tekstu zgodne są z wytycznymi przedstawionymi dla MS Word.
  • Dobrze zaprojektowana strona/aplikacja ma szablony zgodne z zasadami dostępności cyfrowej. Zamieszczając treści edytor ma do dyspozycji narzędzia formatowania. Używaj ich podobnie jak używasz narzędzi formatowania np. w Wordzie. Wypełniaj pola, które podpowiada Ci CMS - często programiści dbają o to, byś pamiętał np. o wprowadzeniu opisów alternatywnych <alt>
  •  Przy wprowadzaniu treści w szczególności zwróć uwagę na:
    • zapewnienie alternatywy tekstowej dla multimediów i grafik,
    • zachowanie wymaganego kontrastu,
    • użycie list (używaj znaczników <ol><ul><li> a nie np. myślników) i nagłówków,
    • nie wyróżniaj tekstu przez podkreślenie - podkreślenie sugeruje obecność linku.
  • Po zapisaniu zmian sprawdź jak wprowadzone treści wyświetlają się na różnych urządzeniach. Czy to, co dodałeś jest czytelne i dostępne zarówno na komputerze jak i na telefonie.

Grafika i multimedia

Jeśli umieszczasz na stronie/ w aplikacji grafiki, wykresy, banery, filmy czy pliki dźwiękowe:

  • Upewnij się, że elementy nietekstowe mają tekst alternatywny.
  • Stwórz opisy alternatywne tak, aby odpowiadały treści przedstawionej na grafice.
  • Jeśli grafika jest banerem/łączem, opisz do czego kieruje.
  • Grafiki nie przekazujące istotnych informacji użytkownikowi oznacz jako dekoracyjne - tzw. pusty alt <alt=””>.
  • Upewnij się, że tekst zamieszczony na stronie/w aplikacji nie jest grafiką. Pamiętaj - treści tekstowe, informacyjne powinny być zamieszczone jako tekst, a nie obraz z napisami.
  • Zapewnij multimediom alternatywę tekstową lub audiodeskrypcję:
    1. dla treści wyłącznie dźwiękowych lub wyłącznie wizualnych zapewnij formy alternatywne - transkrypcję / audiodeskrypcję / audiodeskrypcję tekstową,
    2. transkrypcje umieść blisko plików, tak by w prosty i intuicyjny sposób można było je znaleźć,
    3. do filmów z dźwiękiem dodaj poprawne napisy rozszerzone,
    4. jeśli udostępniasz multimedia na żywo pamiętaj o uzupełnieniu napisów w przeciągu 14 dni,
    5. zapewnij dla multimediów audiodeskrypcję w ścieżce dźwiękowej.

Formularze

Jeśli tworzysz formularz

  1. Opisz pola formularzy - tak by wiadomo było co wpisać w dane pole.
  2. Jeśli to możliwe określ pożądany typ danych, który powinien być wprowadzony w danym polu (np. dzień podając format RRRR-MM-DD).
  3. Sprawdź, czy pola formularzy mają etykiety - czy użytkownik wie co i gdzie ma wpisać?
  4. Upewnij się, że opisy pól są dostępne dla wszystkich zmysłów (zarówno tekstowo jak i głosowo za pośrednictwem czytników ekranu).
  5. Sprawdź czy za pomocą klawiatury (tab) docierasz do każdego pola w formularzu i możesz cały formularz prawidłowo wypełnić i przesłać.
  6. Sprawdź czy strona/aplikacja umożliwia weryfikację danych przed wysłaniem formularza?
  7. Sprawdź czy komunikaty o błędach powiązane są z błędnie wypełnionymi polami i czy użytkownik otrzymuje sugestie poprawy błędu.
  8. Upewnij się, że wypełniając formularz użytkownik nie natrafi na nieoczekiwaną zmianę kontekstu (np. zaznaczając jakąś opcję w polu wyboru nie pojawi się w formularzu jakieś dodatkowe, wcześniejsze pole).
  9. Jeśli wprowadzasz ograniczenia czasowe (np. czas wypełnienia formularza), to upewnij się, że użytkownik może je wyłączyć, dostosować lub wydłużyć.
  10. Sprawdź czy użyte zabezpieczenie przed spamem, automatyzacją, masową wysyłką formularza, itp. jest dostępne cyfrowo.

Linki (hiperłącza)

Linkując treści na stronie/ w aplikacji oraz zamieszczając pliki do pobrania, pamiętaj:

  1. Linki muszą być zrozumiałe i czytelne. Tekst będący hiperłączem powinien jednoznacznie określać, dokąd ono prowadzi. Oznacza to, że:
  2. Określ sposób otwierania się linku. Jeśli link otwiera się w nowym oknie, poinformuj o tym. Możesz też graficznie rozróżnić linki wewnętrzne i te prowadzące poza twój serwis.
  3. Linki umożliwiające pobranie plików muszą zawierać informacje o rozszerzeniu i rozmiarze pliku.
  4. Jeśli twój link ma postać graficzną (np. baner czy podlinkowane logo) pamiętaj o zapewnieniu tekstu alternatywnego informującego o celu linku.
  5. Jeśli umieszczasz linki graficzne/przyciski upewnij się, że jego nazwa jest zgodna z tekstem na grafice.
  6. Sprawdź działanie linku. Po zapisaniu zmian upewnij się czy link przenosi do odpowiedniej strony. Co jakiś czas sprawdź, czy linki na twojej stronie/ w aplikacji poprawnie działają (są aktualne).
  7. Jeśli zarządzasz większą liczbą podstron, na których występują link o tej samej nazwie, sprawdź, czy funkcja linków o tej samej nazwie jest spójna w całym serwisie/na stronie (czy np. link o nazwie “powrót” zachowuje się zawsze tak samo).

Kolor i kontrast

Zamieszczając informacje tekstowe czy projektując grafikę na potrzeby strony/aplikacji, pamiętaj:

  1. Kolor nie może być jedynym środkiem przekazywania informacji. Jeśli chcesz coś wyróżnić w tekście użyj równocześnie np.: koloru i pogrubienia. Podobnie, jeśli chcesz użyć koloru komunikując błąd (np. brak wypełnienia pola formularza) - dodaj opis błędu.
  2. Kontrast pomiędzy tłem a tekstem powinien wynosić przynajmniej 4,5:1 - dla tekstu normalnego i 3:1 dla tekstu dużego (min. 18 pkt lub 14 pogrubiona).
  3. Elementy nietekstowe powinny mieć kontrast minimum 3:1.
  4. W przypadku problemów z doborem kolorów można, użyć np. wyszukiwarki kontrastu.
  5. Uwaga: Tryb zwiększonego kontrastu na stronie/aplikacji nie jest obowiązkiem. Zastosowanie kontrastów w zgodzie WCAG – jest.

Tabele

  1. Upewnij się, że tabela jest tabelą. To znaczy:
    • nie służy do graficznego uporządkowania treści na stronie/aplikacji,
    • ma oznaczone nagłówki <th>,
    • ma tytuł <caption>,
    • nie ma scalonych komórek.
  2. Nie przypisuj tabeli sztywnych wymiarów w px – wpisanie wymiarów na sztywno sprawi, że tabela nie będzie responsywna.
  3. Jeśli jest inny sposób na prezentację danych, użyj go zamiast tabeli – np. przedstaw dane jako listę.

Listy (numeracja i wypunktowanie)

  1. Używaj listy do prezentacji informacji, w których coś wymieniasz.
  2. Upewnij się, że listy mają prawidłową strukturę – tzn., że tworzysz je z użyciem stosownych znaczników: <ul> <ol> <li>.
  3. Pamiętaj: na stronie internetowej/ w aplikacji listy nie zawsze ograniczają się do list tekstowych. Czasem mogą być zbiorem elementów pełniących te same funkcje: np. przycisków czy ikon serwisów społecznościowych.

Struktura strony

Jeśli tworzysz nowe strony/podstrony/aplikacje pamiętaj o obowiązkowych elementach:

  1. Tytuł strony <title> - Każdy strona musi posiadać tytuł odzwierciedlający jej zawartość merytoryczną np: strona uml.lodz.pl/edukacja <title>Edukacja: Urząd Miasta Łodzi</title> (Uwaga: wymóg nie dotyczy aplikacji.)
  2. Język strony <lang> - Język strony/aplikacji musi być oznaczony. Jeżeli w tekście znajdują się fragmenty w języku innym niż wskazany dla strony, należy je właściwie oznaczyć (Uwaga: wymóg nie dotyczy aplikacji.).
  3. Jeśli tworzysz stronę od początku, upewnij się, że poprawnie oznaczone są punkty orientacyjne (landmarki)W kontekście stron internetowych, landmarki to znaczniki (np. <header><nav><main>), które definiują kluczowe obszary strony. np.: <header> część nagłówkowa <footer> stopka strony - umieszczamy tu treści, które będą dostępne na każdej stronie serwisu. W headerze jest to najczęściej menu, logotyp, wyszukiwarka. W stopce informacje kontaktowe, link do mapy strony czy deklaracji dostępności. Do landmarków możesz ustawić tzw. skip linki, ułatwiające nawigację użytkownikom czytników ekranu i pomagając pominąć całe bloki treści.
  4. Pamiętaj o prawidłowej strukturze nagłówków. Na stronie/ w aplikacji może być tylko jeden nagłówek pierwszego stopnia H1. Niech opisuje treść twojej podstrony/newsa/aplikacji. Kolejne nagłówki używaj zgodnie z hierarchią, nie pomijając poziomów. H2 po H1, H3 po H2 i tak dalej.
  5. Każdy element treści musi mieć poprawną, unikalną nazwę, niezbędną do jednoznacznej identyfikacji elementu przez użytkownika. Może być widoczna w postaci etykiet lub niewidoczna, ale dostępna dla technologii asystujących. Sprawdź, czy elementy mają określną i dostępną dla technologii wspomagających: rolę (co robi, czego można się spodziewać po np. kliknięciu danego elementu) oraz wartość (komunikat o stanie, np. rozwinięte/zwinięte, aktywne/nieaktywne). Komunikaty o stanie są odczytywane bez konieczności fokusowania elementu (informacja dynamicznie prezentowana użytkownikowi o wyniku jego interakcji, stanie aplikacji lub procesie, np. okno otwarte/zamknięte, komunikaty o dodaniu produktu do koszyka („Koszyk: 5 przedmiotów”), błędy formularzy („Nieprawidłowy kod pocztowy”) lub postęp operacji („Trwa przetwarzanie…”). (Uwaga: wymóg nie dotyczy aplikacji.)
  6. Relacja (powiązanie) między treściami musi być zrozumiała.

Nawigacja i dostęp do treści strony/aplikacji

  1. Wprowadzona treść powinna być dostępna dla osób korzystających z różnych zmysłów, na różnych urządzeniach, przy różnej rozdzielczości. Po zapisaniu zmian upewnij się, że:
    1. zamieszczona treść wyświetla się prawidłowo w pionie i poziomie,
    2. treść strony/aplikacji można prawidłowo poznać z użyciem czytnika ekranu,
    3. powiększenie tekstu o 200% nie powoduje utraty treści lub funkcjonalności,
    4. przy powiększeniu strony/aplikacji do 400% wszystkie treści są widoczne i przewijanie strony/aplikacji jest tylko w jednym kierunku,
    5. po zwiększeniu odstępów na stronie/ w aplikacji tekst jest nadal czytelny.
    6. jeśli twoja aplikacja/strona wymaga zastosowania się do instrukcji obsługi - upewnij się, że instrukcja jest dostępna na stronie/ w aplikacji.
  2. Nawigacja w ramach jednej strony powinna być spójna i przewidywalna (Uwaga: wymóg nie dotyczy aplikacji.):
    1. menu na każdej podstronie powinno być takie samo (i w tych samych miejscach),
    2. kolejność nagłówków jest stała,
    3. powtarzalne na stronie są spójnie zidentyfikowane (tak samo wyglądają, tak samo działają, tak samo są opisane),
    4. strony w serwisie można znaleźć na więcej niż 1 sposób (menu, mapa strony, menu powtórzone w stopce itd.).
  3. Jedna treść nie powinna powodować problemów z dotarciem do innych elementów treści, w szczególności pamiętaj:
    1. wyskakujące okienka - np. ciasteczek - można zamknąć bez użycia myszy, np. przy użyciu klawiatury (okienka mogą uniemożliwić dotarcie do zasadniczej treści strony osobom korzystającym z czytników ekranu),
    2. użytkownik może najechać na dodatkową treść nie powodując zamknięcia innych treści (np. w przypadku podpowiedzi do formularza),
    3. komunikaty zawierający automatycznie wyłączający się dźwięk trwający powyżej 3 sekund, można wyłączyć/wyciszyć (komunikat dźwiękowy może powodować np.: konflikt z czytnikiem ekranu, lub rozpraszać).
  4. Instrukcje dotyczące nawigacji po stronie/aplikacji nie mogą być oparte jedynie na doznaniach wizualnych lub dźwiękowych (wyłącznie kształt, wyłącznie odniesienie do pozycji na ekranie, wyłącznie dźwięk – np. „kliknij w trójkąt”)

Nawigacja klawiaturą

Wiele osób ma problemy z właściwym posługiwaniem się myszką czy ekranami dotykowymi. Mogą one wynikać m.in. z: trwałych bądź czasowych ograniczeń ruchowych, problemów z koordynacją czy ze wzrokiem. Dotyczy to zarówno osób z trwałą niepełnosprawnością (ruchową rąk, osób słabowidzących/niewidzących) jak i seniorów lub osób z czasową niepełnosprawnością, np. ograniczoną ruchomością spowodowaną złamaniem ręki. Najpopularniejszą alternatywę stanowi nawigacja za pomocą klawiatury.

  1. Do nawigacji klawiaturą po stronie/aplikacji mogą służyć zarówno podstawowe (ogólnie przyjęte przyciski/skróty jak i skróty własne).
    1. Jeśli na stronie używasz swoich skrótów - opisz je. Jednoklawiszowe skróty musisz wykazać w Deklaracji Dostępności).  
    2. Podstawowe przyciski/skróty klawiaturowe, których działania nie trzeba opisywać w Deklaracji Dostępności to:
    • Tab - przejście do następnego elementu interaktywnego (link, przycisk, pole formularza),
    • Shift + Tab - powrót do poprzedniego elementu interaktywnego,
    • Enter - aktywacja/wybór elementu, na którym jest aktualnie fokus (np. kliknięcie linku),
    • Spacja - zaznaczenie/odznaczenie pola wyboru, aktywacja przycisku lub rozwijanie listy,
    • Klawisze strzałek góra/dół - przechodzenie między przyciskami opcji, niekiedy: nawigacja po podelementach menu rozwijanego,
    • Klawisze strzałek prawo/lewo - obsługa odtwarzaczy multimediów (przewijanie, regulacja głośności), niekiedy: nawigacja po elementach menu,
    • Escape - zamyka element pojawiający się dynamicznie (rozwinięcie menu, okno dialogowe, itd.) - fokus wraca do elementu, który wywołał taką akcję.
  1. Wszystkie treści i funkcjonalności strony/aplikacji powinny być osiągalne za pomocą (wyłącznie) klawiatury.
  2. Na stronie/w aplikacji wokół aktywnego elementu powinien być widoczny fokus (ramka).
  3. Elementy na stronie/ w aplikacji powinny przyjmować fokus w logicznej kolejności na całej stronie/w aplikacji.
  4. Strona nie może posiadać pułapki klawiaturowej, uniemożliwiającej przejście do kolejnego elementu tekście (całą stronę/aplikację da się “przejść” za pomocą klawiatury.).
  5. Elementy powtarzające się są obsługiwane za pomocą klawiatury w ten sam sposób.
  6. Uwzględnij na stronie element  umożliwiający pominięcie bloków - np. w postaci skip linków. Pozwala to szybko przejść (pominąć) powtarzające się fragmenty treści na stronie, bez konieczności przechodzenia przez każdy element za pomocą klawisza Tab.
  7. Upewnij się, że odczyt strony/aplikacji za pośrednictwem tabulatora oraz czytników ekranu jest prawidłowy oraz odpowiada kolejności postrzeganej przez użytkownika widzącego.

Elementy zmienne w czasie, wyskakujące oraz wymagające interakcji polegającej na ruchu

Pamiętaj, że projektując/zamawiając stronę/aplikację zawierającą elementy wyskakujące, zmienne w czasie lub wymagające interakcji polegającej na ruchu:

  1. Jeśli wprowadzasz na stronie/w aplikacji ograniczenia czasowe (np. czas wypełnienia formularza), to upewnij się, że użytkownik może je wyłączyć, dostosować lub wydłużyć.
  2. Użytkownik może zatrzymać sam treść, która się porusza, migocze, przesuwa lub jest automatycznie aktualizowana - np. slidery, paski informacyjne czy aktualności aktualizowane na bieżąco przez dodawanie tekstu na górze strony (nie dotyczy paska postępu).
  3. Na stronie/ w aplikacji nie mogą występować elementy, które błyskają częściej niż 3 razy na sekundę.
  4. Obsługa strony/aplikacji nie powinna wymagać użycia gestu wielopunktowego ani opartego o ścieżkę, chyba że taki gest jest absolutnie niezbędny do funkcjonowania danej aplikacji lub treści. Funkcjonalności, które normalnie wymagałyby gestów wielopunktowych lub opartych na ścieżkach, muszą mieć alternatywny sposób obsługi za pomocą prostego wskaźnika jednopunktowego, bez polegania na ścieżce.
  5. Ruch (urządzenia/użytkownika) nie może być jedynym sposobem aktywacji funkcji na stronie/w aplikacji.
  6. Jeśli na stronie zamieszczasz informacje dodatkowe (np. podpowiedzi czy wyjaśnienia) w postaci „okienek,” które stają się widoczne po otrzymaniu kursora myszy lub fokusu klawiatury sprawdź, czy:
    1. dodatkowa treść jest widoczna tak długo jak użytkownik ma na niej fokus lub kursor albo sam ją zamknie,
    2. dodatkowa treść może być zamknięta przez użytkownika bez przesuwania kursora lub zmiany fokusu.
  7. Nie może być nieoczekiwanych zmian kontekstu (np. wpisywanie danych, albo wybranie jakiejś opcji na stronie/ w aplikacji, nie może wywoływać zmian bez ostrzeżenia).
  8. Użytkownik powinien otrzymywać komunikaty o błędach.
  9. Strona/aplikacja umożliwia zaniechanie/rezygnację z podjętego działania.

Wtyczki poprawiające dostępność

Pisząc stronę/aplikację sprawdź czy kod jest poprawny, a użyte rozwiązania zgodne z zasadami dostępności. Dobrze napisana i zaprojektowana strona nie potrzebuje dodatkowych narzędzi poprawy dostępności. Te nie zawsze pomagają - czasem wręcz przeciwnie powodują np. pułapki klawiaturowe lub problem z zachodzeniem na siebie powiększanego tekstu. Podobnie: tryb zwiększonego kontrastu nie jest obowiązkowy.

Kontakt