ANDI - Narzędzie testowania dostępności - Wskazówki dla programistów

Nadawanie nazw i opisywanie

Wszystkie interaktywne elementy na stronie internetowej muszą mieć wyraźnie zdefiniowany tekst, aby odróżnić dany element, w przeciwnym razie oprogramowanie czytnika ekranu nie będzie wiedziało, co mówić, a więc element ten nie będzie dostępny dla użytkowników czytnika ekranu. Ten wyróżniający je tekst nazywany jest dostępną nazwą elementu.

Oprócz wymaganej dostępnej nazwy, elementy interaktywne mogą otrzymać tekst, który dodatkowo opisuje dany element lub dostarcza więcej informacji. Ten pomocniczy tekst opisu nazywany jest dostępnym opisem elementu.

Dostępna nazwa

Autorzy stron internetowych muszą podjąć dodatkowe kroki, aby zapewnić, że dostępna nazwa każdego elementu interaktywnego jest właściwie określona. Istnieje kilka różnych elementów, które mogą być wykorzystane do zapewnienia wymaganej dostępnej nazwy.

Poniższe komponenty zapewnią dostępną nazwę:

aria-labelledby
aria-label
label (element formularza)
alt (obraz)
value (przycisk)
figcaption (rycina)
caption (tabela)
innerHTML (kontenery)

Użyj tylko jednego identyfikatora

ANDI opowiada się za metodologią polegającą na stosowaniu tylko jednej nazwy (dostępnego komponentu nazwy) na element, co zapewni spójne wyjście z czytnika ekranowego i zminimalizuje problemy z dostępnością.

Dostępny opis

Poza wymaganą dostępną nazwą, autorzy stron internetowych mogą dodać dodatkowy tekst pomocniczy, aby zapewnić szerszy opis elementów interaktywnych. Istnieje kilka komponentów, które mogą być wykorzystane do stworzenia dostępnego opisu.

Poniższe komponenty dostarczają dodatkowych informacji o danym elemencie (dostępny opis).

aria-describedby
title

Użyj tylko jednego deskryptora

Przestrzeganie metodologii ANDI polegającej na stosowaniu tylko jednego deskryptora (komponentu zapewniającego dostępny opis), w przypadku obecności identyfikatora (dostępnej nazwy), zapewni spójne wyjście z czytnika ekranu i zminimalizuje problemy z dostępnością.

Użycie deskryptora razem z identyfikatorem

Deskryptory (dostępne opisy) są przeznaczone do stosowania wraz z identyfikatorem (dostępną nazwą), a nie samodzielnie.

Grupowanie

Gdy elementy formularza mają wspólną etykietę, która grupuje je wizualnie, użytkownicy czytników ekranu odnoszą korzyści, gdy elementy są zawarte w elemencie grupującym, a element grupujący ma dostępną nazwę.

Korzystając z natywnego języka HTML, znacznik fieldset pełni funkcję kontenera, a legend nazywa grupę. Więcej informacji o Fieldset/Legend tutaj.


				<fieldset>

				  <legend>Adres rozliczeniowy</legend>

				    <label> Street: <input> </label>

				    <label> Miejscowość: <input> </label>

				    <label> Kod pocztowy: <input> </label>

				</fieldset>

Gdy korzystamy z ARIA, kontener powinien mieć role=group, a elementowi z role=group należy nadać dostępną nazwę za pomocą aria-labelledby lub aria-label.


				<div role="group" aria-labelledby="id1">

				  <strong id="id1">Adres rozliczeniowy</strong>

				    <label> Ulica: <input> </label>

				    <label> Miejscowość: <input> </label>

				    <label> Kod pocztowy: <input> </label>

				</div>

Dla użytkowników czytników ekranu korzyści z grupowania są następujące: Gdy użytkownik po raz pierwszy przeniesie fokus na element w grupie, nazwa grupy zostanie ogłoszona tylko raz. Jeśli użytkownik przejdzie do innych elementów w grupie, nazwa grupy nie jest ponownie ogłaszana. Zmniejsza to czasochłonność pracy w porównaniu z sytuacją, w której nazwa grupy byłaby ogłaszana dla każdego elementu w grupie.

Atrybut globalny aria-labelledby odwołuje się do innych elementów, aby zapewnić dostępną nazwę.

Jak stosować

Atrybut aria-labelledby ustanawia skojarzenie między elementem a tekstem, który zapewnia dostępną nazwę. Wskazuje identyfikatory innych elementów zawierających tekst nazwy. Zaletą atrybutu aria-labelledby jest to, że może on odwoływać się do wielu elementów w określonej kolejności.

Rozważmy na przykład ten przycisk radiowy oznaczony nagłówkiem <h1> i znacznikiem <label>:
<h1 id='id1'>Sławni ludzie</h1> <label id='id2'> Andy Williams <input type='radio' aria-labelledby='id1 id2'/> </label>
Dostępna nazwa przycisku radiowego to „Sławni ludzie Andy Williams”. W powyższym przykładzie jako wartość parametru aria-labelledby podano rozdzieloną spacjami listę identyfikatorów.

Korzystanie z czytnika ekranu

Czytniki ekranu odczytują tekst zawarty w elementach, do których odwołuje się aria-labelledby.

Atrybut aria-labelledby jest potężnym identyfikatorem, ponieważ może być wykorzystywany do skojarzenia kilku elementów, które zawierają tekst, który może stanowić dostępną nazwę. Czytniki ekranu dają mu pierwszeństwo przed innymi identyfikatorami.

Niewłaściwe użycie

Ten atrybut nie może przyjmować dosłownego tekstu; może zawierać tylko identyfikator lub rozdzieloną spacjami listę identyfikatorów.

[aria-label]

Atrybut globalny aria-label zapewnia dostępną nazwę.

Jak stosować

Wartość atrybutu aria-label powinna zawierać dosłowny tekst, który będzie jawnie nazwał element. Tekst nie pojawi się na ekranie.

Przykład: <button aria-label='Zamknij'>X</button>

Korzystanie z czytnika ekranu

Czytnik ekranu odczyta dosłowną wartość tekstową tego atrybutu. Czytniki ekranu dają mu pierwszeństwo przed innymi identyfikatorami.

Na przykład, wyjściem czytnika ekranu tego przycisku będzie tekst atrybutu aria-label, a nie tekst wewnątrz przycisku znacznika HTML:
<button aria-label='Puszka zupy Andrzeja Wróbla'><img src='soup_can.jpg' alt="" />zupa</button>

Ten atrybut zapewnia dodatkowe szczegóły dotyczące elementu osobie niedowidzącej. Gdy fokus przesunie się na przycisk, czytnik ekranu ogłosi „Puszka zupy Andrzeja Wróbla”. W tym przykładzie obraz i słowo „zupa” na przycisku dostarczają informacji o przycisku widzącemu użytkownikowi. Tekst w aria-label „Puszka zupy Andrzeja Wróbla” nie pojawi się na ekranie, ale zostanie odczytany przez czytnik ekranu.

Niewłaściwe użycie

Wskazane jest, aby nie używać aria-label razem z atrybutem aria-labelledby w tym samym elemencie.

[alt]

Atrybut alt jest atrybutem HTML używanym do określenia tekstu alternatywnego który ma być wyświetlany, gdy obraz, do którego jest zastosowany nie może być renderowany. Atrybut alt jest wymagany atrybutem dla znaczników <img>, <area> i <input[type=image]>. Po zastosowaniu do obrazów atrybut alt zapewnia dostępną nazwę.

Jak stosować

Atrybut alt powinien być umieszczony tylko na znacznikach <img>, <area>, i <input[type=image]>. Tekst w alt powinien zwięźle opisywać obraz. Jeśli obraz jest czysto dekoracyjny, nie wymaga objaśnienia i nie uzyskuje fokusa, wówczas należy użyć pustego łańcucha dla wartości takiej jak np. alt="".

Przykład: <img src='logo.png' alt='administracja ubezpieczeń społecznych' />

Korzystanie z czytnika ekranu

Atrybut alt jest używany przez czytniki ekranu do przekazywania treści obrazów osobie, która nie może zobaczyć obrazu z powodu niepełnosprawności. Jeśli celowo atrybutowi alt ustawiono pusty łańcuch alt="", to czytnik ekranu zignoruje obraz.

<label>

Znacznik <label>, po odpowiednim skojarzeniu, zapewnia dostępną nazwę dla elementu formularza. Dodatkowo, kliknięcie prawidłowo skojarzonej etykiety spowoduje przeniesienie fokusu na element formularza, z którym jest skojarzony.

Jak stosować

Etykiety muszą być wyraźnie skojarzone z elementami formularza, do których się odnoszą.
Istnieją dwie metody tworzenia skojarzeń:

Label/For z dopasowanym identyfikatorem - jednoznaczna asocjacjacja

Dodanie do etykiety atrybutu for, który odnosi się do id elementu formularza. Przykład:

<label for='someId'> Wprowadź tekst: </label>

		<input type='text' id='someId' />

Etykieta zagnieżdżona (Etykieta jako opakowanie) - dorozumiane skojarzenie

Użycie etykiety jako pojemnika, który zawiera element formularza. Przykład:

<label> Wprowadź tekst: 

		<input type='text' />

		</label>

Korzystanie z czytnika ekranu

Czytnik ekranu odczyta <label>, jeśli jest ona powiązana z elementem formularza element (o ile element formularza nie posiada aria-label lub aria-labelledby).

Użytkownicy o ograniczonej mobilności

Kliknięcie etykiety, która jest powiązana z elementem formularza przeniesie fokus na element formularza (jest on domyślnie obsługiwany w przeglądarce). Funkcjonalność ta pomaga użytkownikom o ograniczonej mobilności, którzy mają trudności z używaniem myszy, zwiększając klikalny obszar elementu formularza. Jest to szczególnie korzystne, gdy etykieta jest skojarzona z przyciskami radiowymi i polami wyboru, które są stosunkowo małymi „celami” kliknięć. Jeśli etykieta nie zostanie poprawnie powiązana, rozmiar klikalnego obszaru nie zostanie automatycznie zwiększony.

Niewłaściwe użycie

Poniższy przykład ilustruje niewłaściwe użycie znacznika <label>. Znacznik <label> nie tworzy asocjacji z elementem formularza.

<label> Niewłaściwe użycie: </label>

		<input type='text' />

Powyższy przykład wygeneruje defekt dostępności.

[value]

Właściwość value zapewnia dostępną nazwę dla przycisku <input>. Tekst value pojawi się również wizualnie na przycisku.

Jak stosować

Tekst atrybutu value powinna zawierać dosłowny tekst, który jednoznacznie nazwie element przycisku <input>: <input type="submit">, <input type="button">, <input type="reset">, <input type="image">.

Przykład: <input type='submit' value='Wyślij' />

Korzystanie z czytnika ekranu

W przypadku przycisków utworzonych za pomocą elementu <input> czytnik ekranu wypowiada dosłownie wartość tego atrybutu.

Wprowadzony w HTML5 znacznik <caption> zapewnia dostępną nazwę dla <table>.

Jak stosować

Znacznik <caption> musi być zawarty wewnątrz <table>, a wewnątrz nie może być więcej niż jeden <caption>. Znacznik <caption> powinien być pierwszym dzieckiem w <table>. Znacznik <caption> jest przeznaczony do stosowania w tabelach danych, nie jest potrzebny (nie powinien być stosowany) do tabel układu.

Korzystanie z czytnika ekranu

W przypadku <table> czytnik ekranu odczyta zawartość <caption>.

innerHTML

Zawartość elementu: tekst ekranowy i/lub węzły potomne.

Jak stosować

Dodawanie tekstu ekranowego do elementu jest prawdopodobnie najlepszym sposobem na dodanie dostępnej nazwy, ponieważ każdy typ użytkownika będzie w stanie odczytać dokładnie ten sam tekst. Aby elementy, które nie mogą zawierać „innerHTML”, takie jak <img> lub <input> potrzebne są dodatkowe komponenty, aby były dostępne

W przypadku podstawowych znaczników HTML, takich jak <p>, <div>, <li> całkowicie uzasadnione jest, aby polegać na tekście tych podstawowych elementów, że zapewniają dostępną nazwę. Jeśli z jakiegoś powodu ten tekst nie jest wystarczająco opisowy dla użytkowników polegających na czytnikach ekranu, zmień tekst!

Korzystanie z czytnika ekranu

Czytnik ekranu odczyta zawartość elementu.

[aria-describedby]

Globalny atrybut aria-describedby odwołuje się do innych elementów, aby zapewnić dostępny opis.

Jak stosować

Atrybut aria-describedby służy do wskazywania identyfikatorów innych elementów opisujących ten element. Ustanawia powiązanie między elementem a tekstem, który zawiera opis.

Na przykład, rozważ przycisk, który jest opisany przez jakiś tekst akapitu:
<button aria-describedby='pId'>Wyślij</button> <p id='pId'>Kliknięcie tego przycisku spowoduje wysłanie wiadomości e-mail do Andy'ego Coopera</p>
Dostępna nazwa tego elementu to przycisk „Wyślij”, a dostępny opis to „Kliknięcie tego przycisku spowoduje wysłanie wiadomości e-mail do Andy'ego Coopera”.

Ten atrybut jest bardzo podobny do aria-labelledby, który definiuje istotę elementu, podczas gdy aria-describedby zapewnia opis lub więcej informacji, których użytkownik może potrzebować w odniesieniu do danego elementu.

Korzystanie z czytnika ekranu

Czytniki ekranu odczytują aria-describedby na końcu wypowiadanej frazy. Jeżeli jednak na tym samym elemencie użyto wielu deskryptorów (takich jak title), jeden z nich może nie być wypowiedziany, a informacja może zostać utracona. Dlatego zaleca się używanie tylko jednego deskryptora dla danego elementu.

Niewłaściwe użycie

Ten atrybut nie może przyjmować dosłownego tekstu; może zawierać tylko identyfikator lub rozdzieloną spacjami listę identyfikatorów.

Wewnątrz znacznika <fieldset>, znacznik <legend> łączy grupę elementów formularza.

Korzystanie z czytnika ekranu

W przypadku elementów formularza, z wyjątkiem przycisków, czytnik ekranu najpierw przeczyta legendę, a następnie dostępną nazwę. Gdy znacznik <legend> użyty jest z elementami nie będącymi elementami formularza i z przyciskami, wyjście czytnika ekranu jest niespójne, dlatego takie kombinacje są odradzane.

Jak stosować

Stosowane znacznika <legend> wymaga ścisłego przestrzegania konkretnego scenariusza:

Wewnątrz znacznika <fieldset>
Pierwszy element potomny <fieldset>
Opisuje grupę elementów
Każdy element formularza musi posiadać skojarzony z nim znacznik <label> i musi być zawarty w <fieldset>
Tekst znacznika <legend> będzie podawany przed tekstem <label>.
Nie używaj z przyciskami (umieść przycisk na zewnątrz <fieldset>)
Nie używaj innych kompinentów dostępności, w tym title

Oto przykładowy kod prawidłowego użycia legendy:


		<fieldset>

		  <legend>Jaki jest twój ulubiony kolor?</legend>

		    <label>Czerwony: <input type="radio" name="color" value="1" /></label>

		    <label>Żółty: <input type="radio" name="color" value="2" /></label>

		    <label>Niebieski: <input type="radio" name="color" value="3" /></label>

		</fieldset>

		<button>Wyślij</button>

Gdy znacznik <legend> zostanie użyty w ten sposób, każda <label> zapewnia odróżniającą nazwę skojarzonego z nią elementu formularza, a znacznik <legend> opisuje relację między elementami zgrupowanymi wewnątrz <fieldset>.

Niewłaściwe użycie

Połączenie <legend> z dowolnymi innymi komponentami dostępności i z pominięciem zalecanego scenariusza spowoduje niespójne zachowania czytnika ekranu i problemy z dostępnością. Ponadto, znacznika <legend> nie należy używać bez powiązanych z nim znaczników <label>.

Alternatywa legendy

Jeśli grupa elementów formularza potrzebuje więcej informacji, niż mogą dostarczyć etykiety z legendą, usuń znacznik <legend> i użyj aria-labelledby lub aria-label. Inną alternatywą jest role=radiogroup lub role=group.

[title]

Globalny atrybut title można umieścić na dowolnym elemencie HTML. Wygeneruje on również „podpowiedź”, gdy użytkownik najedzie myszą na element.

Jak stosować

Wartość podana dla atrybutu title zawiera dosłowny tekst, który wyraźnie opisuje element. Długość wartości jest ograniczona do 512 znaków ogółem w Internet Explorerze (źródło). W zależności od przeglądarki podpowiedź generowana przez atrybut title może nie zostać wyświetlona bez użycia myszy. Ponadto title nie pojawia się na urządzeniach z ekranem dotykowym. Dlatego title nie powinien być jedynym sposobem przekazywania ważnych informacji.

Korzystanie z czytnika ekranu

Czytnik ekranu wypowiada dosłowną wartość tekstową tego atrybutu.

[tabindex]

Globalny atrybut tabindex określa miejsce elementu w porządku tabulacji.

Jak stosować

Wartość podana do atrybutu tabindex powinna zawierać wartość numeryczną. Liczba określa kolejność danego elementu w porządku tabulacji (gdy klawisz „Tab” jest używany do nawigacji).

Wartość parametru tabindex nie musi być unikalna. Wartość tabindex równa zero (tabindex="0") jest najczęściej stosowaną wartością, która umieszcza element w "normalnym" lub domyślnym porządku, w jakim występuje w drzewie DOM.

Wartość tabindex może być ujemna (tabindex="-1"), ale spowoduje to usunięcie elementu z porządku tabulacji, w takim przypadku, użytkownicy nie będą mogli nawigować do elementu. Technika ta jest przydatna do programowego wysyłania fokusu do elementu, gdzie normalna nawigacja klawiszem Tab nie jest zamierzona.

Korzystanie z czytnika ekranu

Czytnik ekranowy nie informuje o indeksie tabulacji.

[accesskey]

Globalny atrybut accesskey definiuje klawisz, którego naciśnięcie powoduje przeniesienie fokusa klawiatury na oznakowany nim element i uaktywnienie go. Jest to czasami nazywane „skrótem” lub „klawiszem szybkiego dostępu”.

Aby aktywować klawisz dostępu, różne przeglądarki używają różnych kombinacji klawiszy: Internet Explorer, Chrome i Safari używają klawisza „alt” i wybranej litery podanej przy atrybucie accesskey. Firefox używa kombinacji „alt + shift” i wybranej litery.

Jak stosować

Gdy dodajesz accesskey do elementu upewnij się, że element może uzyskać fokus (natywnie lub ma tabindex).

Upewnij się również, że accesskey nie koliduje z innymi klawiszami dostępu na stronie. Zgodnie z najlepszą praktyką klawisze dostępu powinny być unikalne. Klawisze dostępu na przyciskach i łączach powinny być unikalne, ponieważ w momencie naciśnięcia klawisza dostępu uaktywnia się przycisk lub łącze. Wprawdzie, niektóre przeglądarki zezwalają na używanie duplikatów klawiszy dostępu do przeskakiwania do kilku możliwych do ustawienia sekcji strony. Jednak, zgodnie z najlepszą praktyką, skakanie po sekcjach oparte na powtarzających się naciśnięciach jednego polecenia kluczowego powinno być zaimplementowane przy użyciu obsługi zdarzeń javascript keypress.

Większość przeglądarek używa skrótów klawiszowych do uruchamiania funkcji menu przeglądarki, takich jak "Plik" lub "Pomoc". Należy uważać, aby nie zastąpić tych klawiszy. Nowoczesne przeglądarki na to pozwalają, ale z punktu widzenia dostępności należy tego w miarę możliwości unikać.

Korzystanie z czytnika ekranu

Czytnik ekranu poinformuje o wartości klucza dostępu, gdy element z klawiszem dostępu otrzyma fokus.

Powiązanie komórek danych z nagłówkami

Komórki tabel danych muszą mieć dodatkowe oznakowanie wskazujące na prawidłowe powiązania między nagłówkowymi komórkami tabeli a komórkami danych tabeli. Samo zadeklarowanie komórki jako nie zawsze automatycznie oznacza poprawne skojarzenie. Powiązania komórek tabeli można programowo zidentyfikować przy użyciu jednej z dwóch metod, metody zakresu lub metody nagłówków/identyfikatorów. Wybrana metoda jest często podyktowana projektem/strukturą tabeli. Ponadto, aby zapewnić prostotę i łatwość konserwacji, należy stosować tylko jedną metodę asocjacji w danej tabeli.

Metoda zakresu

Aby użyć metody zakresu, atrybut scope należy przypisać do każdego nagłówka <th> tabeli, który tworzy nagłówek kolumny lub nagłówek wiersza. Przykład:


			<table>

			<caption>Metoda zakresu</caption>

			<tr>

			 <th scope="col">Nagłówek kolumny 1</th>

			 <th scope="col">Nagłówek kolumny 2</th>

			 <th scope="col">Nagłówek kolumny 3</th>

			</tr>

			<tr>

			 <th scope="row">Nagłówek wiersza 1</th>

			 <td>Nagłówek kolumny 2</td>

			 <td>Nagłówek kolumny 3</td>

			</tr>

			<tr>

			 <th scope="row">Nagłówek wiersza 2</th>

			 <td>komórka</td>

			 <td>komórka</td>

			</tr>

			<tr>

			 <th scope="row">wiersz 3</th>

			 <td>komórka</td>

			 <td>komórka</td>

			</tr>

			</table>

Metoda nagłówków/identyfikatorów

Aby użyć metody nagłówków/identyfikatorów, każdy nagłówek <th> tabeli powinien mieć unikalny atrybut id, a wszystkie komórki powiązane z tym nagłówkiem tabeli powinny mieć atrybut headers, którego wartość odwołuje się do id komórki nagłówka tabeli. Przykład:


			<table>

			<caption>Metoda nagłówków</caption>

			<tr>

			 <th id="col1">Nagłówek kolumny 1</th>

			 <th id="col2">Nagłówek kolumny 2</th>

			 <th id="col3">Nagłówek kolumny 3</th>

			</tr>

			<tr>

			 <th id="row1" headers="col1">Nagłówek wiersza 1</th>

			 <td headers="row1 col2">Nagłówek kolumny 2</td>

			 <td headers="row1 col3">Nagłówek kolumny 3</td>

			</tr>

			<tr>

			 <th id="row2">Nagłówek wiersza 2</th>

			 <td headers="row2 col2">komórka</td>

			 <td headers="row2 col3">komórka</td>

			</tr>

			<tr>

			 <th id="row3">Nagłówek wiersza 3</th>

			 <td headers="row3 col2">komórka</td>

			 <td headers="row3 col3">komórka</td>

			</tr>

			</table>

Jaką metodę powiązania komórek tabeli należy zastosować?

Ponieważ jednocześnie należy stosować tylko jedną metodę, wybór między metodą zakresu a metodą nagłówków/id zależy głównie od projektu/struktury tabeli.

Większość tabel może korzystać z metody zakresu, nawet w niektórych „złożonych” projektach. Jeśli do rozróżnienia nagłówków tabeli w tej samej kolumnie lub wierszu używane jest wyrównanie tekstu, rozmiar czcionki, kolor lub inne dostosowania stylu, należy użyć metody nagłówków/id.

Wielu autorów stron zgadza się, że Metoda zakresu jest łatwiejsza do utrzymania i zmniejsza prawdopodobieństwo „zepsucia” istniejącej dostępności przy przyszłych modyfikacjach tabeli. Jednak metoda nagłówków/id oferuje wyraźny sposób tworzenia powiązań w określonej kolejności dla bardzo złożonych tabel. Pamiętaj, że wszyscy użytkownicy korzystają z czytelności, gdy projektowanie tabel jest uproszczone.