• Chrzanowskiego 2, 81-198 Kosakowo.
  • 530 262 005
  • biuro@nautil.pl

Standard WCAG 2.0 dla serwisów internetowych

Audyty WCAG

Standard WCAG 2.0 dla serwisów internetowych

WCAG 2.0  (Web Content Accessibility Guidelines) to wytyczne, które dotyczą dostępności stron internetowych. W skrócie standard ten odpowiada za to aby treści zamieszane na stronach internetowych były dostępne zarówno dla osób zdrowych jak i osób niepełnosprawnych

Poniżej znajdują się najważniejsze wytyczne, które powinny zostać spełnione aby serwis internetowy był dostępny niemal tak samo jak dla osób niepełnosprawnych jak dla ludzi zdrowych.

WCAGG 2.0 dzieli się na 3 poziomy:

  • Poziom A – spełnia podstawowe wytyczne
  • Poziom AA – spełnia rozszerzone wytyczne
  • Poziom AAA – spełnia zaawansowane wytyczne

Wymagania dla serwisów internetowych na poziomie A

Teksty alternatywne (znacznik alt) – powinien zawierać konkretną informację o tym co znajduje się na danym elemencie strony.

  • Dla formularzy alt powinien opisywać funkcjonalność a nie opis co to jest za formularz.
    Przykład:
  • Pole formularza powinno mieć opis jakie dane i w jakim formacie należy je wprowadzić.
    Przykład:
  • Dla audio i video ma krótko opisywać o czym jest aby dać świadomość czy osoba niewidoma w ogóle chce go obejrzeć/przesłuchać.
    Przykład:
  • Nie powinno stosować opisów dla wszystkich elementów (np. obrazki narożników stron).
    Przykład:
  • Zlikwidować kody obrazkowe (chyba że posiadają opcję syntezatora mowy).
  • Przykład: przykład kodów

  • Napisy w nagraniach dźwiękowych (opis tego co dzieje się w tle a jest istotne dla treści).
  • Audiodeskrypcja – opis kilku ścieżek audio opisujących poza dialogami również to co dzieje się na ekranie.
  • Semantyka informacji i zależności – programowo określona struktura. Tabela ma służyć do przechowywania danych. Nie używać spacji i tabulatorów żeby rozróżnić dane na wiersze i kolumny).
  • Przykład:

    Kolumna 1 Kolumna 2
    Wiersz 1 Wiersz 2
  • Określenie prawidłowej kolejności (stosowanie poprawnej kolejności – nagłówek wyższego stopnia, nagłówek niższego stopnia, paragraf).
    Przykład:
  • Unikanie kolorów (unikanie zwrotów „Kliknij w czerwoną strzałkę”, nie stosować tylko jednego rodzaju powiadomień dźwiękowych i wizualnych).
  • Dźwięk automatyczny – możliwość wyłączenia, wyciszenia dźwięku dla osób niepełnosprawnych. Zastosować informację, że za chwilę nastąpi nagrania i w jaki sposób je wyłączyć.
  • Przykład:wyciszanie dźwięku

  • Minimalny kontrast – dla osób o ograniczonej widoczności, standard WCAG AA – kontrast 4.5:1,  standard WCAG AAA 7:1. Przykład: czarne napisy na żółtym tle
  • Przykład: kontrast wcag

  • Powiększenie tekstu – AA (narzędzia wbudowane w przeglądarkę, podwójne powiększenie nie powoduje rozjechania się strony). Powiększenie można uzyskać poprzez kliknięcie ctrl +
  • Tekst, a nie obraz tekstu – nie stosować zdjęć z tekstem (np. wyniki przetargu), tylko stosować tekst.
  • Przykład: tekst zamiast obrazów

Funkcjonalność

  • Dostęp za pomocą klawiatury (nie wszyscy są w stanie korzystać z myszki).
  • Odpowiednio długi czas trwania sesji (zalogowania w serwisie). Nie stosować ostrzeżeń o upływającym czasie trwania sesji 20 sekund przed jej końcem i umożliwienie jej wydłużenia
  • Zmieniająca się treść – unikać migających się tekstów, treści w postaci slideshow, a jeżeli już są to możliwość ich zatrzymania.
  • Ograniczone migotanie (przede wszystkim dla osób z padaczką; unikać błysków o nasilonym kolorze czerwonym).
  • Przeskok do treści (możliwość pominięcia reklam).
  • Tytuł strony (stosować sensowe tytuły adekwatne do treści).
  • Nawigacja fokusa (przeskakiwanie kaskadowe, czyli od góry do dołu).
  • Zrozumiałe linki – łatwa kombinacja wyboru oprogramowania (nie wybierz język, platrofrme itp. a zamiast tego, pobierz w wersji polskiej dla systemu windows).
  • Wiele dróg dotarcia (możliwość dotarcia do poszczególnych podstron i treści na wiele dróg) – stosowanie breadcrumps
  • Zrozumiałe nagłówki i etykiety.
  • Wyszukiwarka w widocznym miejscu (najlepiej w nagłówku).
  • Widoczny fokus (zawsze widoczny, oznaczony ramką, kolorem).

 

Zrozumiałość

  • Określenie języka strony (prawidłowo zadeklarowany język, określić w znaczniku meta). A / AA
  • Określenie języka części strony – elementy w innym języku określić (ważne dla readerów) A / AA
  • Zmiana kontekstu – otwarcie innego programu, wczytanie innej strony, zmiana sensu strony (zrezygnowanie z samoczynnie włączających się funkcjonalności). A
  • Konsekwentna nawigacja – elementy interfejsu powinny się znajdować tam gdzie się spodziewa użytkownik – AA
  • Konsekwencja identyfikacja – użytkownik powinien spodziewać się co zdarzy się po wykonaniu konkretnej akcji na stronie AA
  • Identyfikacja błędów – wspomaganie poprawiania błędów przez użytkownika, powiadomienie jaki konkretnie błąd został popełniony A
  • Etykiety i instrukcje – opisywanie etykietami pól formularza <label>, zawiera informacje jaką informację należy wprowadzić do konkretnego pola formularza. A
  • Sugerowanie poprawnych wartości – projektować formularze tak aby zasugerować co należy wprowadzić w miejsca gdzie popełniono błąd AA
  • Zapobieganie błędom o konsekwencjach prawnych (wyrażanie zgody na przetwarzanie danych osobowych itp.; kilkuetapowe zatwierdzanie danych) AA

 

Kompatybilność

  • Poprawność techniczna (prawidłowy kod – walidacja stron) A
  • Nazwa, rola oraz wartość (każdy element na stronie ma nazwę i rolę) A