role

Rola ARIA mówi czytnikom ekranu, czym jest element: przyciskiem, zakładką, komunikatem, nawigacją.

Dotyczy: Wszystkie elementy HTML, choć nie każdą rolę wolno nadać każdemu elementowi

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Najczęstsze role
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<style>
  .fake-button {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 12px;
    border-radius: 6px;
    background: #3f3f46;
    cursor: pointer;
  }
</style>

<button type="button" onclick="this.textContent = 'Zapisano postęp'">Zapisz postęp (button)</button>
<br>
<div class="fake-button" role="button" tabindex="0" onclick="this.textContent = 'Zapisano postęp'">
  Zapisz postęp (div z rolą)
</div>

Podgląd

Oba elementy reagują na kliknięcie myszą. Teraz przejdź do nich klawiszem Tab i naciśnij Enter albo Spację: <button> zadziała, a <div role="button"> nie, bo rola nie dodaje obsługi klawiatury.

Definicja i zastosowanie

Atrybut role nadaje elementowi rolę ze specyfikacji WAI-ARIA. To informacja dla technologii asystujących, takich jak czytniki ekranu: mówi, czym jest element i czego można się po nim spodziewać. Przy role="button" czytnik powie „przycisk”, a treść elementu z role="alert" przeczyta, gdy tylko się pojawi, nawet jeśli użytkownik jest w innym miejscu strony.

Większość elementów HTML ma rolę wbudowaną: <button> jest przyciskiem, <nav> nawigacją, <a href> linkiem, a <ul> listą. Dlatego obowiązuje pierwsza zasada ARIA: jeśli istnieje element HTML o potrzebnym znaczeniu i zachowaniu, użyj go, zamiast dopisywać rolę do <div> czy <span>. Atrybut role jest na sytuacje, dla których HTML nie ma gotowego elementu, jak zakładki czy komunikaty ogłaszane na bieżąco.

Rola zmienia wyłącznie to, jak element widzą technologie asystujące. Nie zmienia wyglądu ani zachowania: <div role="button"> nadal nie dostaje fokusu klawiszem Tab i nie reaguje na Enter ani Spację, więc wszystko to musisz dopisać sam. Nie nadpisuj też ról bez potrzeby. Nagłówek z role="button" przestaje być nagłówkiem, więc jeśli nagłówek ma coś rozwijać, umieść w nim przycisk.

Składnia

<element role="nazwa-roli">…</element>

Najczęstsze role

button
<button>
Element wykonujący akcję. Poza elementem <button> wymaga też tabindex="0" i obsługi klawiszy Enter i Spacja.
link
<a href>
Odnośnik do innej strony lub miejsca na stronie. Poza elementem <a> wymaga fokusu i obsługi klawisza Enter.
navigation
<nav>
Punkt orientacyjny z głównymi odnośnikami. Czytniki ekranu pozwalają szybko do niego przeskoczyć.
main
<main>
Główna treść strony. Na stronie powinien być jeden taki obszar.
banner
<header>
Nagłówek całej strony. <header> ma tę rolę tylko wtedy, gdy nie leży w <article>, <section>, <main> ani podobnym elemencie.
contentinfo
<footer>
Stopka całej strony z informacjami o serwisie. Zasada jest taka sama jak przy banner.
complementary
<aside>
Treść uzupełniająca, np. panel boczny z polecanymi lekcjami.
search
<search>
Obszar wyszukiwania. Dawniej dodawany do formularza, dziś ma go element <search>.
img
<img>
Kilka elementów, które razem tworzą jeden obraz, np. grupa ikon albo emoji. Wymaga nazwy, np. w aria-label.
list, listitem
<ul>, <ol>, <li>
Lista i jej elementy. Przywracają znaczenie listy, gdy Safari przestaje je ogłaszać po usunięciu punktorów przez list-style: none.
alert
brak
Pilny komunikat, np. błąd formularza. Czytnik zwykle przerywa to, co mówi, i od razu go odczytuje. Używaj oszczędnie.
status
<output>
Komunikat o stanie, np. „Zapisano”. Czytnik odczyta go, gdy skończy bieżącą wypowiedź.
tablist, tab, tabpanel
brak
Zakładki. Wymagają obsługi strzałek oraz atrybutów aria-selected i aria-controls.
presentation, none
brak
Usuwa znaczenie elementu, np. tabeli użytej tylko do układu. Nie działa na elementach, na których może być fokus.

Rola	Odpowiednik w HTML	Opis
button	<button>	Element wykonujący akcję. Poza elementem `<button>` wymaga też `tabindex="0"` i obsługi klawiszy Enter i Spacja.
link	<a href>	Odnośnik do innej strony lub miejsca na stronie. Poza elementem `<a>` wymaga fokusu i obsługi klawisza Enter.
navigation	<nav>	Punkt orientacyjny z głównymi odnośnikami. Czytniki ekranu pozwalają szybko do niego przeskoczyć.
main	<main>	Główna treść strony. Na stronie powinien być jeden taki obszar.
banner	<header>	Nagłówek całej strony. `<header>` ma tę rolę tylko wtedy, gdy nie leży w `<article>`, `<section>`, `<main>` ani podobnym elemencie.
contentinfo	<footer>	Stopka całej strony z informacjami o serwisie. Zasada jest taka sama jak przy `banner`.
complementary	<aside>	Treść uzupełniająca, np. panel boczny z polecanymi lekcjami.
search	<search>	Obszar wyszukiwania. Dawniej dodawany do formularza, dziś ma go element `<search>`.
img	<img>	Kilka elementów, które razem tworzą jeden obraz, np. grupa ikon albo emoji. Wymaga nazwy, np. w `aria-label`.
list, listitem	<ul>, <ol>, <li>	Lista i jej elementy. Przywracają znaczenie listy, gdy Safari przestaje je ogłaszać po usunięciu punktorów przez `list-style: none`.
alert	brak	Pilny komunikat, np. błąd formularza. Czytnik zwykle przerywa to, co mówi, i od razu go odczytuje. Używaj oszczędnie.
status	<output>	Komunikat o stanie, np. „Zapisano”. Czytnik odczyta go, gdy skończy bieżącą wypowiedź.
tablist, tab, tabpanel	brak	Zakładki. Wymagają obsługi strzałek oraz atrybutów `aria-selected` i `aria-controls`.
presentation, none	brak	Usuwa znaczenie elementu, np. tabeli użytej tylko do układu. Nie działa na elementach, na których może być fokus.

Więcej przykładów

Komunikat o stanie odczytywany przez czytnik ekranu

HTML

<button type="button"
  onclick="document.getElementById('cart-status').textContent = 'Dodano kurs do koszyka'">
  Dodaj do koszyka
</button>
<p id="cart-status" role="status"></p>

Podgląd

Pusty element z role="status" jest na stronie od początku. Gdy skrypt wpisze do niego tekst, czytnik ekranu przeczyta komunikat, kiedy skończy bieżącą wypowiedź. Do pilnych błędów służy role="alert".

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Zanim dopiszesz role, sprawdź, czy nie wystarczy właściwy element HTML. Lepiej nie używać ARIA wcale, niż użyć jej źle.
Rola to obietnica. Jeśli nadajesz role="tab" albo role="menu", musisz zapewnić taką obsługę klawiatury, jakiej użytkownik czytnika ekranu spodziewa się po zakładkach czy menu.
Efekt sprawdzisz w narzędziach deweloperskich. W Chrome panel Elements ma zakładkę Accessibility, która pokazuje rolę i nazwę zaznaczonego elementu.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs