Sprawdź, czy istnieje wybierana przez użytkownika ścieżka dźwiękowa z opisem treści wizualnej
Wcześniej nagrane multimedia powinny mieć ścieżkę dźwiękową, która opisuje informacje wizualne
Dlaczego to jest ważne
Gdy istnieje dodatkowa ścieżka dźwiękowa, użytkownicy mogą zdecydować się na zastąpienie oryginalnej ścieżki dźwiękowej wideo taką, która zawiera informacje skupiające się na akcjach, postaciach lub zmianach scen, które są ważne dla zrozumienia treści. Czasami jest to określane jako „audiodeskrypcja”, na przykład „opis w formacie audio” i nie powinno być mylone z napisami.
Na kogo to wpływa
- Osoby z niepełnosprawnością wzroku
Co zrobić
- Sprawdź, czy multimedium ma ścieżkę opisu audio;
- LUB dodaj ścieżkę opisu audio do multimedium.
O tym wymaganiu
KS 1.2.5 Audiodeskrypcja (nagranie)
Upewnij się, że dla mediów na żywo (transmisja strumieniowa wideo z dźwiękiem) zapewnione są napisy rozszerzone
Media na żywo (transmisja strumieniowa wideo z dźwiękiem) powinny mieć napisy rozszerzone
Dlaczego to jest ważne
Zapewnienie podpisów do prezentacji w czasie rzeczywistym umożliwia widzom zrozumienie treści audio, gdy nie mogą jej usłyszeć lub gdy dźwięk jest wyłączony.
Na kogo to wpływa
- Osoby głuche lub słabosłyszące
- Osoby znajdujące się w otoczeniu hałaśliwym lub wymagającym zachowania ciszy
- Osoby w sytuacji, gdy nie mogą używać audio na swoich urządzeniach
Co zrobić
- Upewnij się, że media na żywo mają zamknięte napisy (osadza dialog i ważne dźwięki jako tekst w sposób, który nie jest widoczny, chyba że użytkownik o to poprosi);
- LUB, sprawdź, czy media na żywo mają napisy otwarte (osadza dialogi i ważne dźwięki jako tekst w ścieżce wideo);
- LUB, dodaj napisy do mediów na żywo.
O tym wymaganiu
1.2.4 Napisy rozszerzone (na żywo) Techniki WCAG 2.1 - Technika ogólna G9
Zapewnienie transkrypcji plików audio
Informacje dźwiękowe powinny być również dostępne w formie tekstowej
Dlaczego to jest ważne
Zapewnienie transkrypcji sprawia, że informacje prezentowane za pomocą mowy, efektów dźwiękowych, muzyki itp. są dostępne dla każdego użytkownika.
Na kogo to wpływa
- Osoby głuche lub słabosłyszące
- Osoby znajdujące się w otoczeniu hałaśliwym lub wymagającym zachowania ciszy
- Osoby w sytuacji, gdy nie mogą używać audio na swoich urządzeniach
Co zrobić
- Upewnij się, że treść audio jest dostępna również w formie tekstowej;
- LUB zapewnij transkrypcję audio.
Na przykład, po łączu do pliku audio zawierającego przemówienie zostanie wyświetlone łącze do strony z transkrypcją:
Jeremy Flint's <a href="bc30.wav">podcast o prawach osób z niepełnosprawnościami</a>
<a href="bc30.txt">transcrypcja</a>)
O tym wymaganiu
KS 1.2.1 Tylko audio lub tylko wideo (nagranie)
Element <th>
lub <td>
nie jest skojarzony za pomocą header
lub scope
W złożonej tabeli danych wszystkie elementy <th> i <td> muszą być powiązane za pomocą atrybutów „header” lub „scope”.
Dlaczego to jest ważne
Nawigacja po komórce poprzez złożoną tabelę danych jest szczególnie trudna, gdy użytkownicy muszą szukać znaczenia każdej komórki. Użycie atrybutów id
i header
wychwytuje złożone relacje między komórkami danych a komórkami nagłówkowymi, które mogą być następnie przekazywane użytkownikom, wspierając wydajną nawigację po tabeli.
Na kogo to wpływa
- Osoby niewidome korzystające z czytników ekranu
- Osoby słabowidzące korzystające z powiększalników ekranu
Co zrobić
- Jeśli to nie jest tabela danych (brak danych relacyjnych), do rozplanowania treści użyj CSS zamiast elementu
<table>
(wysoce zalecane); - lub, określ tabelę jako układ za pomocą
role="presentation"
lubrole="none"
; - lub, gdy jest to tabela danych, użyj atrybutów
id
, aby podać identyfikatory dla komórek nagłówków (np.<th id="szkola">
); - oraz użyj atrybutu
headers
w komórkach danych, aby określić odpowiednie komórki nagłówka (np.<td headers="szkola nauczyciel poziom">
).
O tym wymaganiu
1.3.1 Informacje i relacje() WCAG 2.1 technique H43
Element {0} z rolą WAI-ARIA presentation
lub none
ma element(y) i atrybut(y) strukturalny(e) {1}
Elementy tabeli z role=presentation
lub role=none
nie powinny mieć strukturalnych elementów lub atrybutów
Dlaczego to jest ważne
Technologie wspomagające wykorzystują elementy strukturalne (<th>
, <caption>
) i atrybuty (summary
, scope
, header
), aby pomóc użytkownikom w nawigacji i zrozumieniu tabel danych. Włączenie tych funkcji do tabelu powoduje, że cel tabeli jest niejasny.
Na kogo to wpływa
- Osoby niewidome korzystające z czytników ekranu
- Osoby słabowidzące korzystające z czytników ekranu
Co zrobić
- Jeśli tabela jest tabelą danych, usuń atrybut
role
; - jeśli tabela jest używana do rozmieszczenia elementów, użyj zamiast tego układów opartych na CSS;
- LUB, jeśli musi być zastosowana tabela układu, usuń elementy,
<th>
,<caption>
oraz atrybutysummary
,scope
lubheader
z elementów<td>
.
O tym wymaganiu
1.3.1 Informacje i relacje Technika WCAG 2.1 F46 Technika WCAG 2.1 F92
Złożona tabela danych nie ma ‘summary’ lub ‘aria-describedby’, które daje przegląd tabeli
Złożone tabele danych powinny mieć summary
lub aria-describedby
, które daje przegląd tabeli
Dlaczego to jest ważne
Podsumowanie tabeli zawiera krótkie omówienie sposobu zorganizowania danych w tabeli danych i jest szczególnie przydatne, gdy tabela jest duża i zawiera wiele wierszy i kolumn lub gdy tabela ma złożoną strukturę (wiele nagłówków wierszy lub kolumn). Podsumowanie tabeli nie powinno treści podpisu tabeli.
Na kogo to wpływa
- Osoby niewidome korzystające z czytników ekranu
- Osoby słabowidzące korzystające z czytników ekranu
Co zrobić
- Dodaj atrybut
aria-labelledby
do elementu<table>
. Atrybutaria-labelledby
musi wskazywać na element, w którym znajduje się widoczny na stronie tekst, opisujący organizację danych w tabeli (podsumowujący tabelę) - lub dodaj atrybut
aria-describedby
, aby zapewnić krótki przegląd tabeli danych; - lub dodaj atrybut
aria-label
, aby zapewnić krótki przegląd tabeli danych.
Uwaga: w HTML5 atrybut summary
jest przestarzały i należy go unikać.
Na przykład, w poniższym przykładzie przedstawiono podsumowanie tabeli, korzystając z atrybutu aria-labelledby
:
<p id="tblSummary">The following table shows the number of boys and girls in each grade of an elementary school.</p>
<table border="1" aria-labelledby="tblSummary">
<tr>
<th id="klasa">Klasy</th>
<th id="nauczyciel">Nauczyciel</th>
<th id="chlopcy"># chłopców</th>
<th id="dziewczeta"># dziewcząt</th>
</tr>
<tr>
<th rowspan="2" id="1klasa">1. klasa</th>
<th headers="1klasa nauczyciel" id="mgrKowalski">mgr Kowalski</th>
<td headers="1klasa mgrKowalski chlopcy">5</td>
<td headers="1klasa mgrKowalski dziewczeta">4</td>
</tr>
...
</table>
O tym wymaganiu
IBM 1.3.1 Treść nietekstowa Techniki WCAG 2.1 - Technika HTML H73
Element <caption>
nie jest zagnieżdżony w elemencie <table>
Element <caption>
musi być umieszczony wewnątrz powiązanego elementu <table>
Dlaczego to jest ważne?
Element <caption>
jest identyfikatorem i działa jak tytuł lub nagłówek tabeli. Umożliwia czytnikom ekranu przejście bezpośrednio do napisu, aby uzyskać opis tabeli.
Kogo to dotyczy?
- Osoby niewidome korzystające z czytników ekranu
Co zrobić
- Umieść element
<caption>
wewnątrz elementu<table>
.
Na przykład:
<table id="data_table1" border="1" summary="Prosta tabela danych przedstawiająca liczbę chłopców i dziewcząt w każdej klasie szkoły podstawowej">
<caption>Dziewczęta i chłopcy w klasach szkół podstawowych</caption>
<tr> ... </tr>
<tr> ... </tr>
</table>
O tym wymaganiu
1.3.1 Informacje i relacje Techniki WCAG 2.1 - Technika H39
Element <table>
ma pusty element <caption>
Element <caption>
w elemencie <table>
musi zawierać opisowy tekst
Dlaczego to jest ważne?
Element <caption>
jest identyfikatorem i działa jak tytuł lub nagłówek tabeli. Umożliwia czytnikom ekranu przejście bezpośrednio do napisu, aby uzyskać opis tabeli.
Kogo to dotyczy?
- Osoby niewidome korzystające z czytników ekranu
Co zrobić
- Dodaj tekst opisowy do elementu
<caption>
.
Na przykład:
<table id="data_table1" border="1">
<caption>Dziewczęta i chłopcy w klasach szkół podstawowych</caption>
<tr>
<th scope="col">Klasy</th>
<th scope="col"># dziewcząt</th>
<th scope="col"># chłopców</th>
</tr>
</table>
O tym wymaganiu
1.3.1 Informacje i relacje Techniki WCAG 2.1 - Technika H39
Poinformuj użytkownika, że jego działanie spowoduje otwarcie nowego okna lub w inny sposób zmieni kontekst
Użytkownicy powinni być ostrzegani z wyprzedzeniem, jeśli ich działanie spowoduje otwarcie nowego okna lub w inny sposób zmieni kontekst
Dlaczego to jest ważne
Zmiany kontekstu mogą zmylić lub zdezorientować użytkowników, którzy nie są w stanie łatwo dostrzec zmiany. Jeśli aktywacja łącza powoduje otwarcie nowego wyskakującego okienka lub nowego okna, poinformowanie użytkownika z wyprzedzeniem pomaga osobom korzystającym z technologii wspomagających zdawać sobie sprawę ze zmiany kontekstu.
Na kogo to wpływa
- Osoby niewidome korzystające z czytników ekranu
- Osoby słabowidzące who use magnification
- Osoby z ograniczonymi możliwościami poznawczymi
Co zrobić
- Dołącz ostrzeżenie w etykiecie informujące użytkownika, że łącze otwiera się w nowym oknie;
- LUB użyj CSS, aby umieścić ostrzeżenie przed otwarciem nowego okna (zobacz przykład 2 w Technika WCAG 2.1 G201).