10.1 Accessibility
Dostępność (accessibility) treści internetowych jest ważnym elementem nowoczesnego web designu. Skupia się na zapewnieniu, że wszyscy użytkownicy, w tym osoby z niepełnosprawnościami, mogą łatwo korzystać ze stron internetowych.
Jednym z kluczowych narzędzi do osiągnięcia tego celu są atrybuty ARIA (Accessible Rich Internet Applications), które zwiększają dostępność treści internetowych, czyniąc je bardziej zrozumiałymi i dostępnymi dla technologii wspomagających, takich jak czytniki ekranowe.
Co to jest ARIA?
ARIA (Accessible Rich Internet Applications) to zestaw specjalnych atrybutów, które można dodać do elementów HTML w celu zwiększenia ich dostępności. Te atrybuty dostarczają dodatkowe informacje o strukturze i zachowaniu elementów, co pomaga technologiom wspomagającym lepiej interpretować i korzystać z treści internetowych.
Główne atrybuty ARIA dla poprawy czytelności tekstu:
Atrybut aria-label
Atrybut aria-label jest używany do dostarczenia tekstowej etykiety elementowi, która będzie odczytana przez czytnik ekranu.
Ten atrybut jest użyteczny, gdy element nie ma widocznej etykiety lub gdy wymagany jest bardziej szczegółowy opis.
Przykład użycia:
<button aria-label="Zamknij okno dialogowe">X</button>
Atrybut aria-labelledby
Atrybut aria-labelledby łączy element z inną etykietą na stronie, używając id etykiety. To przydatne,
gdy potrzebne jest połączenie elementu z istniejącą już etykietą, zapewniając kontekst i opis.
Przykład użycia:
<h2 id="section-title">Nagłówek sekcji</h2>
<p aria-labelledby="section-title">To jest akapit tekstu powiązany z nagłówkiem sekcji.</p>
Atrybut aria-describedby
Atrybut aria-describedby łączy element z jednym lub kilkoma elementami zawierającymi opis,
używając ich id. Ten atrybut jest przydatny do dostarczenia dodatkowych informacji lub kontekstu elementowi.
Przykład użycia:
<input type="text" aria-describedby="input-description">
<p id="input-description">Wprowadź swoje imię.</p>
10.2 Role
Atrybut role
Atrybut role określa rolę elementu, informując technologie wspomagające, jak dany element powinien być interpretowany.
Istnieje wiele ról, takich jak button, navigation, main, article i wiele innych.
Przykład użycia:
<nav role="navigation">
<ul>
<li><a href="#home">Strona główna</a></li>
<li><a href="#about">O nas</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
Atrybut aria-live
Atrybut aria-live jest używany dla dynamicznie aktualizowanej treści. Informuje czytnik ekranu, że zawartość
wewnątrz elementu się zmieniła i trzeba ją powtórzyć. Wartości to off, polite i assertive.
Przykład użycia:
<div aria-live="polite">
<p>Tutaj wyświetlane będą ważne informacje.</p>
</div>
Atrybut aria-hidden
Atrybut aria-hidden informuje technologie wspomagające, czy element powinien być dostępny dla użytkowników.
Wartość true ukrywa element przed technologiami wspomagającymi, natomiast wartość false czyni go dostępnym.
Przykład użycia:
<div aria-hidden="true">
<p>Ten tekst będzie ukryty przed czytnikami ekranowymi.</p>
</div>
Atrybut aria-expanded
Atrybut aria-expanded wskazuje, czy element jest rozwinięty czy zwinął się. Często używany w elementach
sterujących, takich jak "akordeony" i menu rozwijane.
Przykład użycia:
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>
<li><a href="#item1">Element 1</a></li>
<li><a href="#item2">Element 2</a></li>
<li><a href="#item3">Element 3</a></li>
</ul>
Atrybut aria-controls
Atrybut aria-controls wskazuje, który element jest kontrolowany przez bieżący element. Jest używany razem
z atrybutami, takimi jak aria-expanded, do tworzenia interaktywnych elementów sterujących.
Przykład użycia:
<button aria-controls="content" aria-expanded="false">Pokaż/Ukryj</button>
<div id="content" hidden>
<p>Ukryta zawartość.</p>
</div>
GO TO FULL VERSION