Popraw ten artykuł

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" lub role="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 atrybuty summary, scope lub header 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>. Atrybut aria-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).

O tym wymaganiu