Przejdź do treści głównej

LepszyWeb. Przewodnik po stylach

Audio

  • Zbuduj swoje media z myślą o dostępności! O wiele łatwiej jest pracować z dostępnością na początku, niż próbować włączyć ją później. Odnosi się to do wszystkich komponentów, ale szczególnie do komponentów multimedialnych.
  • Upewnij się, że twój odtwarzacz jest dostępny i zawiera kontrolki do wstrzymywania, zatrzymywania i odtwarzania mediów.
  • Nie odtwarzaj automatycznie plików multimedialnych. Może to powodować zarówno zamieszanie, jak i irytację.
  • Upewnij się, że media mają alternatywne metody dotarcia do treści. Na przykład, dodaj transkrypcje plików audio.
Nie bez powodu jest mnóstwo wytycznych WCAG dotyczących mediów na stronach internetowych... jest wiele czynników, które należy wziąć pod uwagę. Nie daj się jednak przestraszyć, jest też kilka łatwych zwycięstw. Samo uwzględnienie alternatyw dla prezentowanych mediów (np. transkrypcja filmu) to połowa sukcesu.

Zasoby

Wytyczne WCAG 2.1

1.1.1 Treść nietekstowa - Wszelkie treści nietekstowe przedstawione użytkownikowi posiadają swoją tekstową alternatywę, która pełni tę samą funkcję, z kilkoma wyjątkami. (Poziom A)

1.2.1 Tylko audio lub tylko wideo (nagranie) - Alternatywa dla audio: Zapewniona jest alternatywa tekstowa dla nagrań dźwiękowych przedstawiająca tę samą treść, co nagranie audio. (Poziom A)

1.2.2 Napisy rozszerzone - Do wszystkich nagrań audio w multimediach zsynchronizowanych (dźwięk i obraz), z wyjątkiem sytuacji, kiedy są one alternatywami dla tekstu i w taki sposób są oznaczone, zapewnione są napisy rozszerzone. (Poziom A)

1.2.3 Audiodeskrypcja lub alternatywa tekstowa dla mediów (nagranie) - Zapewniona jest alternatywa dla multimediów lub audiodeskrypcja dla nagrań wideo w multimediach zsynchronizowanych (dźwięk i obraz), z wyjątkiem sytuacji, kiedy są one alternatywami dla tekstu i w taki sposób są oznaczone. (Poziom A)

1.2.6 Język migowy (nagranie) - Zapewnione jest tłumaczenie w języku migowym wszystkich nagrań audio w multimediach zsynchronizowanych (dźwięk i obraz). (Poziom AAA)

Obrazy

  • Każdy <img>, który dodasz do swojej strony musi mieć atrybut alt. Jeśli obrazek jest informacyjny, wpisz w alt tekst z treścią równoważną obrazowi.
  • Jeśli obrazek jest dekoracyjny lub lub zbędny w stosunku do ilustrowanego tekstu, ustaw alt="", aby przekazać użytkownikom technologii wspomagającej, że obrazek nie jest potrzebny do zrozumienia strony.
  • Unikaj używania ogólnych słów, takich jak „zdjęcie”, „obrazek” lub „ikona” jako fragmentu wartości alt, ponieważ nie przekazują one użytkownikowi cennych treści. Bądź możliwie jak najbardziej opisowy.
  • Upewnij się, że każdy tekst na obrazkach z tekstem ma co najmniej 14 punktów i ma dobry kontrast z tłem.

Wytyczne WCAG 2.1

1.1.1 Treść nietekstowa - Wszelkie treści nietekstowe przedstawione użytkownikowi posiadają swoją tekstową alternatywę, która pełni tę samą funkcję, z kilkoma wyjątkami. (Poziom A)

Uwaga: Jeśli zawartość nietekstowa jest czystą dekoracją, jest używana tylko do formatowania wizualnego, lub nie jest prezentowana użytkownikom, to nie potrzebuje alternatyw tekstowych.

1.4.3 Kontrast (minimalny) - Wizualna prezentacja tekstu lub obrazu tekstu posiada współczynnik kontrastu wynoszący przynajmniej 4.5:1, poza kilkoma wyjątkami (Poziom AA)

1.4.5 Obrazy tekstu - Jeśli wykorzystywane technologie mogą przedstawiać treść wizualnie, do przekazywania informacji wykorzystuje się tekst, a nie obraz tekstu, z kilkoma wyjątkami (Poziom AA)

1.4.11 Kontrast elementów nietekstowych - Wizualna prezentacja następujących elementów ma współczynnik kontrastu co najmniej 3:1 względem sąsiednich kolorów (Poziom AA)

Mały, różowy ślimak spoczywający na szarym muszlimaku z zielonym mchem w tle

SVG

SVG są skalowalną grafiką wektorową i mogą być wykorzystywane do tworzenia ikon, obrazów, logotypów itp. Zawartość SVG jest skalowalna i skalowana bez obniżenia jakości wizualnej.

  • Najlepszym sposobem na uczynienie SVG dostępnymi dla technologii wspomagajacych, takich jak czytniki ekranu i narzędzia do rozpoznawania mowy, jest umieszczenie ich bezpośrednio w HTML za pomocą znacznika <svg>
  • Unikaj używania elementów <embed>, <object>, lub <img>, ponieważ nie są one tak wspierane przez przeglądarki jak SVG śródliniowe.
  • Dodaj <title> i <description> do znacznika SVG
  • Użyj aria-labelledby="" i odwołaj się do wartości id elementów tytułu i opisu
  • Daj swoim SVG-om pracę z atrybutem role=""
  • Aby „ukryć” elementy przed czytnikiem ekranu w SVG dodajrole="presentation"

Zasoby

Wytyczne WCAG 2.1

1.1.1 Treść nietekstowa - Wszelkie treści nietekstowe przedstawione użytkownikowi posiadają swoją tekstową alternatywę, która pełni tę samą funkcję, z kilkoma wyjątkami. (Poziom A)

Uwaga: Jeśli zawartość nietekstowa jest czystą dekoracją, jest używana tylko do formatowania wizualnego, lub nie jest prezentowana użytkownikom, to nie potrzebuje alternatyw tekstowych.

1.4.3 Kontrast (minimalny) - Wizualna prezentacja tekstu lub obrazu tekstu posiada współczynnik kontrastu wynoszący przynajmniej 4.5:1, poza kilkoma wyjątkami (Poziom AA)

1.4.5 Obrazy tekstu - Jeśli wykorzystywane technologie mogą przedstawiać treść wizualnie, do przekazywania informacji wykorzystuje się tekst, a nie obraz tekstu, z kilkoma wyjątkami (Poziom AA)

1.4.11 Kontrast elementów nietekstowych - Wizualna prezentacja następujących elementów ma współczynnik kontrastu co najmniej 3:1 względem sąsiednich kolorów (Poziom AA)

Przykład #1: SVG z rolą obrazu (role=img)e

Kciuk w górę Ręka z kciukiem skierowanym ku górze w geście aprobaty. Nazwij to kciukiem aprobaty.

Przykład #2: SVG z rolą łącza (role=link)

Niebieski prostokąt Ciemnoniebieski prostokąt z zaokrąglonymi rogami i ciemnoszarą obwódką. Google

Wideo

  • Zbuduj swoje media z myślą o dostępności! O wiele łatwiej jest pracować z dostępnością na początku, niż próbować włączyć ją później. Odnosi się to do wszystkich komponentów, ale szczególnie do komponentów multimedialnych.
  • Upewnij się, że twój odtwarzacz jest dostępny i zawiera kontrolki do wstrzymywania, zatrzymywania i odtwarzania mediów.
  • Nie odtwarzaj automatycznie plików multimedialnych. Może to powodować zarówno zamieszanie, jak i irytację.
  • Upewnij się, że Twoje media mają alternatywne metody dotarcia do treści. Na przykład, dodaj napisy do swoich filmów i/lub przygotuj transkrypcję do przeczytania przez użytkowników.
  • Upewnij się, że twoje media nie powodują napadów chorobowych! Przed dodaniem mediów do witryny internetowej należy skorzystać z fotoczułego narzędzia do analizy padaczki (Photosensitive Epilepsy Analysis Tool - PEAT), aby sprawdzić media.
Nie bez powodu jest mnóstwo wytycznych WCAG dotyczących mediów na stronach internetowych... jest wiele czynników, które należy wziąć pod uwagę. Nie daj się jednak przestraszyć, jest też kilka łatwych zwycięstw. Samo uwzględnienie alternatyw dla prezentowanych mediów (np. transkrypcja filmu) to połowa sukcesu.

Zasoby

Wytyczne WCAG 2.1

1.1.1 Treść nietekstowa - Wszelkie treści nietekstowe przedstawione użytkownikowi posiadają swoją tekstową alternatywę, która pełni tę samą funkcję, z kilkoma wyjątkami. (Poziom A)

1.2.1 Tylko audio lub tylko wideo (nagranie) - Alternatywa dla wideo: Zapewniona jest alternatywa tekstowa albo audiodeskrypcja dla nagrań zawierających tylko wideo przedstawiająca tę samą treść, co nagranie wideo. (Poziom A)

1.2.2 Napisy rozszerzone - Do wszystkich nagrań audio w multimediach zsynchronizowanych (dźwięk i obraz), z wyjątkiem sytuacji, kiedy są one alternatywami dla tekstu i w taki sposób są oznaczone, zapewnione są napisy rozszerzone. (Poziom A)

1.2.3 Audiodeskrypcja lub alternatywa tekstowa dla mediów (nagranie) - Zapewniona jest alternatywa dla multimediów lub audiodeskrypcja dla nagrań wideo w multimediach zsynchronizowanych (dźwięk i obraz), z wyjątkiem sytuacji, kiedy są one alternatywami dla tekstu i w taki sposób są oznaczone. (Poziom A)

1.2.5 Audiodeskrypcja (nagranie) - Zapewniona jest audiodeskrypcja dla wszystkich nagrań wideo w multimediach zsynchronizowanych (Poziom AA)

1.2.6 Język migowy (nagranie) - Zapewnione jest tłumaczenie w języku migowym wszystkich nagrań audio w multimediach zsynchronizowanych (dźwięk i obraz). (Poziom AAA)

1.2.8 Alternatywa dla mediów (nagranie) - Zapewniona jest alternatywa dla wszystkich — nagrań w multimediach zsynchronizowanych (dźwięk i obraz) oraz dla wszystkich nagrań tylko wideo (sam obraz). (Poziom AAA)

Accessible HTML5 Video Player GitHub

Transkrypcja

Alternatywna ścieżka dźwiękowa

Na górę