Czym jest Dostępność Internetowa?
Dostępność internetowa odnosi się do inkluzywnej praktyki zapewniania, że strony internetowe, narzędzia i technologie są projektowane i rozwijane tak, by wszystkie osoby mogły z nich korzystać. Dokładniej mówiąc, oznacza to, że ludzie mogą:
- Postrzegać, rozumieć, nawigować i wchodzić w interakcje z siecią.
- Wnosić wkład do sieci.
Dostępność internetowa obejmuje wszystkie niepełnosprawności, które wpływają na dostęp do sieci, w tym:
- Słuchowe
- Poznawcze
- Neurologiczne
- Fizyczne
- Mowy
- Wzrokowe
Zasada Postrzegalności
Wytyczna 1.1
Podstawowe zasady spełnienia tego kryterium:
- Obrazy, mapy obrazów i punkty mapy powinny mieć odpowiedni tekst alternatywny.
- Obrazy dekoracyjne lub treści już zawarte w tekście powinny mieć pusty atrybut "alt".
- Tekst alternatywny dla bardziej złożonych obrazów powinien być dostarczony jako opis lub link do osobnej strony.
- Przyciski formularzy powinny być dokładnie opisane (używając atrybutu "name").
- Pola powinny mieć tag z nazwą pola.
- Element powinien mieć odpowiedni tytuł.
Treści nietekstowe powinny mieć krótki opis tego, co reprezentują. Aby zdecydować, jaki tekst powinien zostać dodany, rozważ następujące pytania:
- Dlaczego ta treść tutaj jest?
- Jakie informacje prezentuje?
- Jaki jest cel tego rodzaju treści?
- Gdyby treść nietekstowa nie mogła być użyta, jak można by przekazać treść słowami?
Jeśli treść nietekstowa zawiera słowa istotne dla zrozumienia treści, tekst alternatywny powinien zawierać te słowa. Tekst powinien być krótki i zwięzły. Jeśli potrzebny jest bardziej szczegółowy opis, ilustracja może być linkiem do osobnej strony z opisem lub opis może być umieszczony obok ilustracji.
Dla tagów dodaj atrybut "alt" z krótkim opisem tego, co znajduje się na obrazie:
Przy użyciu SVG, dodaj alternatywny tekst opisujący, co reprezentuje SVG. Można to osiągnąć, dodając tag jako pierwsze dziecko tagu :
Dodanie jest opcjonalne i powinno być używane, jeśli pomaga w zrozumieniu treści prezentowanej przez SVG. Atrybut "role=img" jest dodawany, aby poprawić analizę dokumentu HTML przez czytniki ekranu, identyfikując element jako obraz.
Wytyczna 1.2
Dostępność dla nagrań audio i wideo:
- Zapewnij transkrypcje lub audiodeskrypcje dla wszystkich nagrań nielive.
- Przykład dodawania opisu audio:
- Wyjątkiem są filmy używane wyłącznie do dekoracji.
- Napisy w materiałach wideo powinny przekazywać informacje dźwiękowe wpływające na zrozumienie kontekstu, wykraczające poza dialogi. Dla wyższej dostępności (AAA), materiał wideo powinien zawierać nagranie tłumaczenia w języku migowym.
- Materiały na żywo powinny mieć napisy.
Wytyczna 1.3
Dokument HTML powinien być zbudowany z elementów semantycznych, a każdy element powinien być używany zgodnie z jego przeznaczeniem. Tabele powinny być używane do danych tabelarycznych, a komórki danych powinny być powiązane z ich nagłówkami. Podpisy tabeli, jeśli obecne, powinny być powiązane z tabelami danych.
Dokument powinien zachować logiczną ciągłość treści i umożliwiać logiczną i intuicyjną nawigację. Instrukcje nie powinny polegać wyłącznie na kształcie, rozmiarze lub lokalizacji wizualnej (np. "Kliknij kwadratową ikonę, aby kontynuować" lub "Instrukcje znajdują się w prawej kolumnie"). Nie powinny też polegać wyłącznie na dźwięku (np. dźwięk wskazujący koniec czasu jako jedyny wskaźnik upływu czasu).
Orientacja treści nie powinna wpływać na funkcjonalność. Pomocne techniki obejmują:
- Używanie orientacji CSS z wartościami "landscape/portrait".
- Używanie pokazywania/ukrywania do ukrywania elementów w odpowiedniej orientacji.
Pola powinny mieć odpowiednio wypełnione atrybuty "autocomplete":
Regiony dokumentu powinny mieć odpowiednie etykiety wskazujące część dokumentu, którą reprezentują, jeśli semantyka dokumentu na to nie pozwala. ARIA jest używana, gdzie ma to zastosowanie, aby wzbogacić semantykę HTML dla lepszej identyfikacji celów komponentów interfejsu.
Wytyczna 1.4
Rozróżnialność: Ułatw użytkownikom oglądanie i słuchanie treści, w tym oddzielanie pierwszego planu od tła.
- Kolor nie powinien być jedynym sposobem rozróżniania i komunikowania zmian treści. Takie komunikaty powinny być również przekazywane w formie tekstowej.
- Wybierz kolor czcionki, który zapewnia pełną widoczność na tle.
- Narzędzie: Contrast Checker
- Tekst i cała strona powinny być czytelne i nie powinny tracić funkcjonalności. W wersji 2.0 zalecano utrzymanie czytelności strony przy powiększeniu 200%. W wersji 2.1 jest to teraz 400%.
- Ogranicz liczbę obrazów prezentujących tylko treści tekstowe i przedstawiaj takie treści w formie tekstu, gdy tylko jest to możliwe.
- Komfortowe oglądanie treści zależy również od odpowiedniego rozmiaru wiersza i liczby znaków w wierszu.
- Tekst nie powinien przekraczać 80 znaków w wierszu.
- Tekst nie powinien być justowany.
- Odstęp między wierszami powinien wynosić 0,5 * rozmiar czcionki.
- Odstęp między akapitami powinien wynosić 1,5 * odstęp między wierszami.
- Tekst nie powinien wymagać poziomego przewijania nawet przy powiększeniu (maksymalnie 400% WCAG 2.1).
Wytyczna 4.1.1
Analiza dokumentu powinna być bezbłędna. Celem tej techniki jest uniknięcie niejednoznaczności na stronach internetowych, często wynikających z kodu, który nie jest zgodny z formalnymi specyfikacjami. Mechanizm każdej technologii jest używany do określenia technologii i wersji technologii, a strona internetowa jest sprawdzana względem formalnej specyfikacji tej technologii. Podstawą do spełnienia tej wytycznej jest używanie poprawnych tagów HTML i zapewnienie, że są one odpowiednio zamknięte.
Wytyczna 4.1.2
Tagi są używane w sposób ułatwiający dostęp. Obejmuje to przestrzeganie specyfikacji HTML/XHTML i odpowiednie używanie formularzy, etykiet formularzy, tytułów ramek itp. ARIA jest odpowiednio stosowana, aby zwiększyć dostępność, gdy HTML jest niewystarczający.
Wytyczna 4.1.3 (WCAG 2.1)
Jeśli wyświetlany jest prawidłowy komunikat o stanie i fokus nie jest ustawiony na tym komunikacie, komunikat powinien być ogłaszany użytkownikom czytników ekranu, zwykle za pomocą alertu ARIA lub regionu na żywo.
