Zapewnianie dostępnych nazw i opisów

Kilka z poniższych technik nazewnictwa zawiera uwagi ostrzegające przed konkretnymi wzorcami kodowania, które są albo zabronione przez specyfikację ARIA, albo należą do szarej strefy, która nie jest jeszcze w pełni określona. Niektóre z tych zakazanych lub niejednoznacznych wzorców mogą wydawać się logiczne, a nawet dawać pożądane nazwy w niektórych przeglądarkach. Jednak jest mało prawdopodobne, że zapewnią one spójne wyniki we wszystkich przeglądarkach, zwłaszcza w miarę postępu prac nad poprawą spójności obliczania nazw w różnych przeglądarkach.

Oprócz brania pod uwagę ostrzeżeń zawartych w technikach nazewnictwa, trudno jest przecenić znaczenie testowania, że nazwy obliczane przez przeglądarki odpowiadają oczekiwaniom.

Gdy interfejs użytkownika zawiera widoczny tekst, którego można użyć do zapewnienia odpowiedniej dostępnej nazwy, użycie widocznego tekstu dla dostępnej nazwy upraszcza konserwację, zapobiega błędom i zmniejsza wymagania dotyczące tłumaczenia języka. Gdy nazwy są generowane z tekstu, który istnieje tylko w znacznikach i nigdy nie jest wyświetlany wizualnie, istnieje większe prawdopodobieństwo, że dostępne nazwy nie zostaną zaktualizowane, gdy projekt interfejsu użytkownika lub jego treść zostaną zmienione.

Jeśli element interaktywny, taki jak pole wejściowe lub przycisk, nie ma trwałej wizualnie etykiety tekstowej, rozważ dostosowanie projektu tak, aby zawierał taką etykietę. Oprócz tego, że służą jako solidniejsze źródło dostępnej nazwy, widoczne etykiety tekstowe zwiększają dostępność dla wielu osób z niepełnosprawnościami, które nie korzystają z technologii wspomagających prezentujących niewidoczne dostępne nazwy. W większości przypadków widoczne etykiety tekstowe sprawiają, że interfejs użytkownika jest łatwiejszy do zrozumienia dla wszystkich użytkowników.

W dokumentach HTML, gdy tylko jest to możliwe, polegaj na technikach nazewnictwa HTML, takich jak element HTML label dla elementów formularzy i element caption dla tabel. Chociaż są one mniej elastyczne, ich prostota i oparcie na widocznym tekście pomagają zapewnić solidne, dostępne doświadczenia. Kilka z technik nazewnictwa podkreśla specyficzne zalety dostępności wynikające z użycia cech HTML zamiast atrybutów ARIA.

Gdy autorzy nie określą dostępnej nazwy za pomocą elementu lub atrybutu, który jest przeznaczony do nadawania nazw, przeglądarki próbują pomóc użytkownikom technologii wspomagających, uciekając się do metod awaryjnych w celu wygenerowania nazwy. Na przykład atrybuty HTML title i placeholder są używane jako ostateczne źródła treści dla dostępnych nazw. Ponieważ celem tych atrybutów nie jest nadawanie nazw, ich treść zazwyczaj daje niskiej jakości dostępne nazwy, które są mało skuteczne.

Podobnie jak wizualnie zatłoczone ekrany i niejednoznaczne ikony zmniejszają użyteczność, zbyt długie, niewystarczająco wyraźne lub niejasne nazwy mogą sprawić, że interfejs użytkownika będzie bardzo trudny, a nawet niemożliwy do użycia przez kogoś, kto opiera się na niewizualnej formie interfejsu użytkownika. Innymi słowy, aby środowisko internetowe było dostępne, jego dostępne nazwy muszą być skuteczne. Sekcja Komponowanie efektywnych i przyjaznych dla użytkownika dostępnych nazw zawiera wskazówki dotyczące równoważenia zwięzłości i jasności.

Niektóre elementy otrzymują swoją nazwę od treści, którą zawierają. Na przykład, poniższy link nosi nazwę „Strona główna”.

<a href="/">Strona główna</a>

Gdy technologie wspomagające renderują element, którego dostępna nazwa pochodzi od jego treści, takiej jak link lub przycisk, dostępna nazwa jest jedyną treścią, jaką użytkownik może dostrzec dla tego elementu. W przeciwieństwie do innych elementów, takich jak pola tekstowe lub tabele, gdzie dostępna nazwa jest etykietą prezentowaną obok wartości lub treści elementu. Na przykład dostępna nazwa tabeli może pochodzić z elementu podpisu, a technologie wspomagające renderują zarówno podpis, jak i całą pozostałą treść tabeli.

Elementy mające jedną z poniższych ról są domyślnie nazywane łańcuchem obliczonym z treści ich potomków:

• button - przycisk
• cell - komórka
• checkbox - pole wyboru
• columnheader - nagłówek kolumny
• gridcell - komórka siatki
• heading - nagłówek
• link - łącze
• menuitem - pozycja menu (treść zawarta w elemencie potomnym menu jest wykluczona.)
• menuitemcheckbox - pole wyboru pozycji menu
• menuitemradio - - pole opcji pozycji menu
• option - opcja
• radio - pole opcji
• row - wiersz
• rowheader - nagłówek wiersza
• switch - przełącznik
• tab - karta
• tooltip - podpowiedź
• treeitem - drzewo (treść zawarta w elemencie podrzędnym group jest wykluczona).

Podczas obliczania nazwy z treści elementu, programy użytkownika przechodzą rekurencyjnie przez każdy z jego elementów potomnych, obliczają łańcuch nazwy dla każdego elementu potomnego i łączą otrzymane ciągi. W dwóch szczególnych przypadkach niektóre elementy potomne są ignorowane: potomne elementy w elemencie treeitem oraz potomkowie menu w menuitem są pomijane w obliczeniach. Na przykład, w poniższym drzewie tree nazwa pierwszego elementu drzewa to Owoce; a Jabłka, Banany i Pomarańcze zostały pominięte.

<ul role="tree">
  <li role="treeitem">Owoce
    <ul role="group">
      <li role="treeitem">Jabłka</li>
      <li role="treeitem">Banany</li>
      <li role="treeitem">Pomarańcze</li>
    </ul>
  </li>
</ul>

Właściwość aria-label umożliwia autorom nazwanie elementu za pomocą ciągu znaków, który nie jest renderowany wizualnie. Na przykład, nazwa poniższego przycisku to „Zamknij”.

<button type="button" aria-label="Zamknij">X</button>

Właściwość aria-label jest przydatna, gdy nie ma widocznej treści tekstowej, która służyłaby jako odpowiednia dostępna nazwa.

Właściwość aria-label wpływa na użytkowników technologii asystujących na jeden z dwóch różnych sposobów, w zależności od roli elementu, do którego jest zastosowana. W przypadku zastosowania do elementu o jednej z ról, która obsługuje nadawanie nazw za pomocą treści potomnych, właściwość aria-label ukrywa treść potomną przed użytkownikami technologii wspomagających i zastępuje ją wartością aria-label. Jednak w przypadku zastosowania do prawie każdego innego typu elementu, technologie wspomagające będą renderować zarówno wartość aria-label, jak i treść elementu. Na przykład nazwa następującego regionu nawigacyjnego to „Produkt”.

<nav aria-label="Produkt">
  <!-- lista linków nawigacyjnych do stron produktów -->
</nav>

Napotykając ten region nawigacji, użytkownik czytnika ekranu usłyszy nazwę i rolę elementu, np. „Punkt orientacyjny, nawigacja, produkt”, a następnie będzie mógł przeczytać linki zawarte w regionie.

Właściwość aria-labelledby pozwala autorom odwoływać się do innych elementów na stronie w celu zdefiniowania dostępnej nazwy. Na przykład poniższy przełącznik jest nazwany przez treść tekstową poprzedniego siostrzanego elementu.

<span id="night-mode-label">Tryb nocny</span>
<span role="switch" aria-checked="false" tabindex="0" aria-labelledby="night-mode-label"></span>

Zauważ, że chociaż używanie aria-labelledby jest w tej sytuacji podobne do użycia elementu HTML label z atrybutem for, jedną istotną różnicą jest to, że przeglądarki nie powodują automatycznie, że kliknięcie elementu etykietującego aktywuje element etykietowany; za to odpowiada autor. Ale element HTML label nie może być używany do etykietowania elementu span. Na szczęście element HTML input z type="checkbox" pozwala na użycie roli ARIA switch, więc jeśli to możliwe, użycie następującego podejścia tworzy bardziej niezawodne rozwiązanie.

<label for="night-mode">Tryb nocny</label>
<input type="checkbox" role="switch" id="night-mode">

Właściwość aria-labelledby jest przydatna w wielu różnych sytuacjach, ponieważ:

• Ma najwyższy priorytet, gdy przeglądarki obliczają dostępne nazwy, tj. zastępuje nazwy z treści podrzędnych i wszystkie inne atrybuty nazewnictwa, w tym aria-label.

• Może łączyć treść z wielu elementów w jeden ciąg nazwy.

• Obejmuje treść elementów niezależnie od ich widoczności, tj. zawiera w wyliczonym ciągu nazwy nawet treść elementów z atrybutem HTML hidden i właściwościami CSS display: none lub CSS visibility: hidden.

• Obejmuje treść pól danych, tj. jeśli odwołuje się do pola tekstowego, wartość pola tekstowego jest ujęta w wyliczonym ciągu nazwy.

Przykładem odniesienia do ukrytego elementu za pomocą aria-labelledby może być etykieta sterowania przełącznikiem trybu nocnego:

<span id="night-mode-label" hidden>Night mode</span>
<input type="checkbox" role="switch" aria-labelledby="night-mode-label">

W niektórych przypadkach najskuteczniejszą nazwą elementu jest jego własna treść połączona z treścią innego elementu. Ponieważ aria-labelledby ma najwyższy priorytet w obliczaniu nazwy, w takich sytuacjach można użyć aria-labelledby, aby odwołać się zarówno do samego elementu, jak i do innego elementu. W poniższym przykładzie łącze „Czytaj więcej...” jest nazwane przez sam element i nagłówek artykułu, co daje nazwę łącza „Czytaj więcej... 7 sposobów na ratowanie pszczół”.

<h2 id="bees-heading">7 sposobów na ratowanie pszczół</h2>
<p>Pszczoły znikają w szybkim tempie. Oto siedem rzeczy, które możesz zrobić, aby pomóc.</p>
<p><a id="bees-read-more" aria-labelledby="bees-read-more bees-heading">Czytaj więcej...</a></p>

Gdy wiele elementów jest przywoływanych przez aria-labelledby, treść tekstowa z każdego przywoływanego elementu jest dołączana w kolejności określonej w wartości aria-labelledby. Jeśli element jest przywoływany więcej niż jeden raz, przetwarzane jest tylko pierwsze odwołanie. Podczas łączenia treści z wielu elementów przeglądarki wycinają początkowe i końcowe białe znaki i oddzielają treść każdego elementu pojedynczą spacją.

<button id="download-button" aria-labelledby="download-button download-details">Pobierz</button>
<span id="download-details">PDF, 2.4 MB</span>

W powyższym przykładzie dostępna nazwa przycisku to „Pobierz PDF, 2,4 MB”, ze spacją między „Pobierz” i „PDF”, a nie „PobierzPDF, 2,4 MB”.

Element HTML label umożliwia autorom określenie treści, która służy jako etykieta i powiązanie jej z kontrolką formularza. Gdy element label jest skojarzony z kontrolką formularza, przeglądarki obliczają dostępną nazwę kontrolki formularza na podstawie treści label.

Na przykład tekst wyświetlany obok pola wyboru może być wizualnie skojarzony z polem wyboru, dlatego użytkownicy, którzy mogą dostrzec to skojarzenie wizualne, rozumieją go jako etykietę pola wyboru. Jeśli jednak tekst nie jest programowo powiązany z polem wyboru, użytkownicy technologii wspomagających będą mieli do czynienia z polem wyboru bez etykiety. Zawijanie pola wyboru i tekstu etykiety w elemencie label w poniższy sposób nadaje polu wyboru dostępną nazwę.

<label>
  <input type="checkbox" name="subscribe">
  Prenumeruj nasz biuletyn
</label>

Kontrolkę formularza można również powiązać z etykietą za pomocą atrybutu for elementu label. Pozwala to etykiecie i kontrolce formularza być rodzeństwem lub mieć różnych rodziców w DOM, ale wymaga dodania atrybutu id do kontrolki formularza, co może być podatne na błędy. Jeśli to możliwe, użyj powyższej techniki enkapsulacji do skojarzenia zamiast następującej techniki atrybutu for.

<input type="checkbox" name="subscribe" id="subscribe_checkbox">
<label for="subscribe_checkbox">Prenumeruj nasz biuletyn</label>

Użycie elementu label jest skuteczną techniką spełniającą zasadę 2: Preferuj widoczny tekst. Spełnia również zasadę 3: Preferuj techniki rdzenne. Rdzenne etykiety HTML oferują istotną przewagę w zakresie użyteczności i dostępności nad technikami etykietowania ARIA: przeglądarki automatycznie sprawiają, że kliknięcie etykiety jest równoważne kliknięciu kontrolki formularza. Zwiększa to obszar dotyku kontrolki formularza.

Element HTML fieldset może służyć do grupowania kontrolek formularzy, a element legend może służyć do nadania grupie nazwy. Na przykład, grupa przycisków opcji może być zgrupowana razem w fieldset, gdzie element legend etykietuje grupę przycisków radiowych.

<fieldset>
  <legend>Wybierz swoją klasę startową</legend>
  <label><input type="radio" name="starter-class" value="zielona">Zielona</label>
  <label><input type="radio" name="starter-class" value="czerwona">Czerwona</label>
  <label><input type="radio" name="starter-class" value="niebieska">Niebieska</label>
</fieldset>

Ta technika grupowania jest szczególnie przydatna do prezentacji pytań wielokrotnego wyboru. Umożliwia ona autorom powiązanie pytania z grupą odpowiedzi. Jeśli pytanie nie jest programowo powiązane z opcjami odpowiedzi, użytkownicy technologii wspomagających mogą uzyskać dostęp do odpowiedzi, nie będąc świadomym pytania.

Podobne korzyści można uzyskać z grupowania i nazywania innych typów powiązanych pól formularza za pomocą fieldset i legend.

<fieldset>
  <legend>Adres wysyłki</legend>
  <p><label>Pełna nazwa <input name="name" required></label></p>
  <p><label>Adres linia 1 <input name="address-1" required></label></p>
  <p><label>Adres linia 2 <input name="address-2"></label></p>
  ...
</fieldset>
<fieldset>
  <legend>Adres rozliczeniowy</legend>
  ...
</fieldset>

Użycie elementu legend do nazwania elementu fieldset spełnia zasadę 2: Preferuj widoczny tekst i zasadę 3: Preferuj techniki rdzenne.

Dostępna nazwa dla elementów HTML table i figure może pochodzić odpowiednio od elementu podrzędnego caption lub figcaption. Tabele i ryciny często mają podpisy, które wyjaśniają o co w nich chodzi, jak je czytać, a czasem nadają im numery używane do odwoływania się do nich w otaczającej je prozie. Podpisy mogą pomóc wszystkim użytkownikom lepiej zrozumieć treść, ale są szczególnie pomocne dla użytkowników technologii wspomagających.

W języku HTML element table oznacza tabelę danych i może być opatrzony podpisem za pomocą elementu caption. Jeśli element table nie posiada aria-label lub aria-labelledby, wtedy caption zostanie użyty jako dostępna nazwa. Na przykład, dostępna nazwa poniższej tabeli to Specjalne godziny otwarcia.

<table>
 <caption>Specjalne godziny otwarcia</caption>
 <tr><td>30 maja</td><td>Zamknięte</td></tr>
 <tr><td>6 czerwca</td><td>11:00-16:00</td></tr>
</table>

Poniższy przykład nadaje tabeli numer (Tabela 1), dzięki czemu można się do niej odwoływać.

<table>
 <caption>Tabela 1. Tradycyjne spożycie pokarmu przez Okinawian i innych Japończyków około 1950</caption>
 <thead>
  <tr>
   <th></th>
   <th>Okinawa, 1949</th>
   <th>Japonia, 1950</th>
  </tr>
 <tbody>
  <tr>
   <th>Kalorie ogółem</th>
   <td>1785</td>
   <td>2068</td>
  [...]
</table>

Uwaga: Powyższa treść tabeli pochodzi z Ograniczenie kaloryczne, tradycyjna dieta Okinawian, a zdrowe starzenie się: dieta najdłużej żyjących ludzi na świecie i jej potencjalny wpływ na zachorowalność i długość życia.

Jeśli table zostanie nazwana przy użyciu aria-label lub aria-labelledby, to element caption, jeśli istnieje, stanie się dostępnym opisem. Aby zapoznać się z przykładem, zobacz Opisywanie tabel i rysunków za pomocą podpisów.

Podobnie, elementowi HTML figure można nadać podpis za pomocą elementu figcaption. Podpis może pojawić się przed lub po ilustracji, ale częściej zdarza się, że ilustracje mają podpis po.

<figure>
 <img alt="Osoba spacerująca po pustyni." src="/Hole_JesusalDesierto.jpg">
 <figcaption>Jezus wkraczający na pustynię według wyobrażenia Williama Hole'a, 1908</figcaption>
</figure>

Podobnie jak w przypadku elementów table, jeśli figure nie jest nazwana przy użyciu aria-labellub aria-labelledby, treść elementu figcaption zostanie użyta jako dostępna nazwa. Jednak w przeciwieństwie do elementów table, jeśli element figcaption nie jest użyty jako nazwa, nie staje się on dostępnym opisem, chyba że zostanie przywołany przez aria-describedby. Niemniej jednak, technologie wspomagające będą renderować treść elementu figcaption niezależnie od tego, czy jest on użyty jako nazwa, opis, czy nie.

Użycie elementu caption do nazwania elementu table lub figcaption do nazwania elementu figure spełnia zasadę 2: Preferuj widoczny tekst i zasadę 3: Preferuj techniki rdzenne.

Gdy dostępna nazwa nie jest zapewniona przy użyciu jednej z podstawowych technik (np. atrybutów aria-label lub aria-labelledby) lub rdzennych technik oznaczania (np. elementu HTML label lub atrybutu alt w przypadku elementu HTML img), przeglądarki obliczają dostępną nazwę na podstawie innych atrybutów jako rozwiązanie awaryjne. Ponieważ atrybuty używane do obliczania nazw awaryjnych nie są przeznaczone do nadawania nazw, zazwyczaj dają one dostępne nazwy niskiej jakości, które nie są efektywne. Tak więc, zgodnie z zasadą 4: Unikaj mechanizmów awaryjnych przeglądarki, ceń techniki jawnego etykietowania opisane powyżej bardziej niż techniki awaryjne opisane w tej sekcji.

Każdy element HTML może mieć określony atrybut title. Atrybut title może być użyty jako awaryjna dostępna nazwa elementu. Atrybut title jest powszechnie prezentowany wizualnie jako podpowiedź, gdy użytkownik najedzie kursorem na element za pomocą urządzenia wskazującego, co nie jest zbytnio dostępne dla użytkowników widzących bez urządzenia wskazującego.

Na przykład element fieldset bez elementu dziecka legend, ale z atrybutem title, otrzymuje swoją dostępną nazwę z atrybutu title.

<fieldset title="Wybierz swoją klasę startową">
  <label><input type="radio" name="starter-class" value="zielona">Zielona</label>
  <label><input type="radio" name="starter-class" value="czerwona">Czerwona</label>
  <label><input type="radio" name="starter-class" value="niebieska">Niebieska</label>
</fieldset>

W przypadku elementów HTML input i textarea atrybut placeholder jest używany jako awaryjny mechanizm etykietowania, jeśli nic innego (w tym atrybut title) nie powoduje powstania etykiety. Lepiej jest użyć elementu label, ponieważ nie znika on wizualnie, gdy użytkownik ustawi fokus na kontrolce formularza.

<!-- Zalecane jest użycie <label> -->
<label>Szukaj <input type=szukaj name=q></label>

<!-- Placeholder jest używany jako rozwiązanie awaryjne -->
<input type=szukaj name=q placeholder="Szukaj">

Przykłady nierekurencyjnego obliczania dostępnych nazw

Rozważ element input, który nie ma powiązanego elementu label, a tylko atrybut name, a więc nie ma dostępnej nazwy (nie rób tego):

<input name="code">

Jeśli istnieje atrybut placeholder, to służy on jako mechanizm awaryjnego nazywania (unikaj tego):

<input name="code"
       placeholder="Kod jednorazowy">

Jeśli istnieje również atrybut title, to jest on używany jako dostępna nazwa zamiast placeholder, ale nadal jest to wyjście awaryjne (unikaj tego):

<input name="code"
       placeholder="123456"
       title="Kod jednorazowy">

Jeśli istnieje również element label (zalecane), to jest on używany jako dostępna nazwa, a atrybut title jest używany jako dostępny opis:

<label>One-time code
 <input name="code"
        placeholder="123456"
        title="Pobierz swój kod z aplikacji.">
</label>

Jeśli istnieje również atrybut aria-label (niezalecany, chyba że zwiększa to przejrzystość dla użytkowników technologii wspomagających), wówczas staje się on dostępną nazwą, zastępując element label:

<label>Code
 <input name="code"
        aria-label="Kod jednorazowy"
        placeholder="123456"
        title="Pobierz swój kod z aplikacji.">
</label>

Jeśli istnieje również atrybut aria-labelledby, który wygrywa z innymi elementami i atrybutami (atrybut aria-label należy usunąć, jeśli nie jest używany):

<p>Wpisz swój <span id="code-label">Kod jednorazowy</span> to log in.</p>
<p>
 <label>Kod
  <input name="code"
         aria-labelledby="etykieta kodu"
         aria-label="To jest ignorowane"
         placeholder="123456"
         title="Pobierz swój kod z aplikacji.">
 </label>
</p>

Przykłady rekurencyjnego obliczania dostępnych nazw

Algorytm obliczania dostępnej nazwy będzie wywoływany rekurencyjnie w razie potrzeby. Odwołanie aria-labelledby powoduje, że algorytm jest wywoływany rekursywnie, a podczas obliczania dostępnej nazwy z treści algorytm jest wywoływany rekurencyjnie dla każdego węzła potomnego.

W tym przykładzie etykieta przycisku jest obliczana cyklicznie w każdym węźle podrzędnym, co skutkuje nazwą Wyrzuć do kosza.

<button>Wyrzuć do <img src="/bin.svg" alt="kosza"></button>

Podczas podążania za odwołaniem aria-labelledby algorytm unika dwukrotnego podążania za tym samym odwołąniem, aby uniknąć nieskończonych pętli.

W tym przykładzie etykieta przycisku jest obliczana, najpierw w wyniku podążania za odwołaniem aria-labelledby do elementu nadrzędnego, a następnie obliczanie etykiety dla tego elementu z węzłów dzieci, najpierw odwiedzając ponownie element button, ale ignorując odwołanie aria-labelledby, a zamiast tego używając aria-label, a następnie odwiedzenie kolejnego dziecka (węzeł tekstowy). Otrzymana etykieta to Usuń spotkanie: Dzienny raport o stanie.

<div id="meeting-1">
  <button aria-labelledby="meeting-1" aria-label="Usuń spotkanie:">X</button>
  Dzienny raport o stanie
</div>

Właściwość aria-describedby działa podobnie do właściwości aria-labelledby. Na przykład przycisk może być opisany przez akapit rodzeństwa.

<button aria-describedby="trash-desc">Wyrzuć do kosza</button>
...
<p id="trash-desc">Rzeczy z kosza będą trwale usunięte po 30 dniach.</p>

Opisy są zredukowane do ciągów tekstowych. Na przykład, jeśli opis zawiera element HTML img, obliczany jest tekstowy odpowiednik obrazu.

<button aria-describedby="trash-desc">Wyrzuć do <img src="/bin.svg" alt="kosz"></button>
...
<p id="trash-desc">Items in <img src="/bin.svg" alt="the trash"> will be permanently removed after 30 days.</p>

Podobnie jak w przypadku aria-labelledby, możliwe jest odwołanie się do elementu za pomocą aria-describedby, nawet jeśli ten element jest ukryty. Na przykład pole tekstowe w formularzu może mieć opis, który jest domyślnie ukryty, ale może zostać ujawniony na żądanie za pomocą widżetu ujawniającego. Do opisu można się również odwołać bezpośrednio z pola tekstowego za pomocą aria-describedby. W poniższym przykładzie dostępnym opisem elementu input jest Twoja nazwa użytkownika jest nazwą, której używasz do zalogowania się do tego serwisu.

<label for="username">Nazwa użytkownika</label>
<input id="nazwa użytkownika" name="username" aria-describedby="username-desc">
<button aria-expanded="false" aria-controls="username-desc" aria-label="Pomoc dotycząca nazwy użytkownika">?</button>
<p id="username-desc" hidden>
 Twoja nazwa użytkownika jest nazwą, której używasz do zalogowania się do tego serwisu.
</p>

W HTML, jeśli table jest nazwana za pomocą aria-label lub aria-labelledby, element potomny caption staje się dostępnym opisem. Na przykład, poprzedzający nagłówek może służyć jako odpowiednia dostępna nazwa, a element caption może zawierać dłuższy opis. W takiej sytuacji właściwość aria-labelledby może być użyta w table, aby ustawić dostępną nazwę na treść nagłówka, a caption stanie się dostępnym opisem.

<h2 id="events-heading">Nadchodzące wydarzenia</h2>
<table aria-labelledby="events-heading">
 <caption>
 Kalendarz nadchodzących wydarzeń, tygodnie od 27 do 31, przy czym każdy tydzień zaczyna się od poniedziałku. W pierwszej kolumnie znajduje się numer tygodnia. 
 </caption>
 <tr><th>Tydzień</th><th>Poniedziałek</th><th>Wtorek</th><th>Środa</th><th>Czwartek</th><th>Piątek</th><th>Sobota</th><th>Niedziela</th></tr>
 <tr><td>27</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td>28</td><td></td><td></td><td></td><td></td><td></td><td></td><td><a href="/events/9856"> Urodziny księżniczki</a></td></tr>
 <tr><td>29</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td>30</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td>31</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

Element HTML figure może uzyskać swoją dostępną nazwę ze swojego elementu figcaption, ale nie zostanie użyty jako dostępny opis, nawet jeśli nie został użyty jako dostępna nazwa. Jeśli element figcaption jest odpowiedni jako dostępny opis, a dostępna nazwa jest ustawiona przy użyciu aria-labelledby lub aria-label, wówczas figcaption może być jawnie ustawiony jako dostępny opis przy użyciu atrybutu aria-describedby.

<h2 id="neutron">Neutron</h2>
<figure aria-labelledby="neutron" aria-describedby="neutron-caption">
 <img src="/neutron.svg" alt="Wewnątrz neutronu znajdują się trzy kwarki (niebieski 'u'
 czerwony 'd', zielony 'd'), które są ze sobą połączone.">
 <figcaption id="neutron-caption">
  Zawartość kwarków w neutronie. Przypisanie koloru poszczególnym kwarkom jest  dowolne, ale wszystkie trzy kolory muszą być obecne. Siły pomiędzy kwarkami są  pośredniczone przez gluony.
 </figcaption>
</figure>

Jeśli dostępny opis nie został zapewniony przy użyciu atrybutu aria-describedby lub jednego z podstawowych atrybutów lub elementów specyficznych dla języka hosta (np. elementu caption dla table), to w przypadku HTML, jeśli element ma atrybut title, jest on używany jako dostępny opis.

Widoczny opis wraz z aria-describedby jest ogólnie zalecany. Jeśli pożądany jest opis niewidoczny, wtedy atrybut title może być użyty dla każdego elementu HTML, który może mieć dostępny opis.

Zwróć uwagę, że atrybut title może być niedostępny dla niektórych użytkowników, w szczególności widzących, którzy nie korzystają z czytnika ekranu i urządzenia wskazującego, które obsługuje funkcję hover (np. mysz).

Na przykład element input z danymi wejściowymi ograniczonymi za pomocą atrybutu pattern może użyć atrybutu title do opisania, jakie są oczekiwane dane wejściowe.

<label> Numer części:
 <input pattern="[0-9][A-Z]{3}" name="part"
        title="Numer części to cyfra, po której następują trzy duże litery."/>
</label>

Atrybut title w tym przypadku może być pokazany użytkownikowi jako podpowiedź, gdy użytkownik wskazuje kontrolkę lub przenosi na nią fokus klawiatury, ale także jako część komunikatu o błędzie, gdy program użytkownika sprawdza poprawność formularza, jeśli wartość elementu input nie pasuje do pattern.

Inny przykład, link może używać atrybutu title do bardziej szczegółowego opisu linku.

<a href="http://twitter.com/W3C"
   title="Follow W3C on Twitter">
   <img src="/2008/site/images/Twitter_bird_logo_2012.svg"
        alt="Twitter" class="social-icon" height="40" />
</a>