Home-theater-designers
Projektanci stron internetowych, którzy nie znają HTML, mogą napotkać zestaw nieznanych atrybutów. Atrybuty te, poprzedzone słowem ARIA, pojawiają się w całej sieci, ale ich przeznaczenie może być tajemnicą dla nowych użytkowników.
Atrybuty ARIA służą ważnemu celowi w dostępności Twoich stron internetowych. Opisują zarówno zawartość danego elementu, jak i sposób, w jaki element odnosi się do strony lub innych elementów wokół niej.
WYKORZYSTAJ WIDEO DNIA PRZEWIŃ, ABY KONTYNUOWAĆ TREŚĆ
Dodanie tych wszystkich ważnych atrybutów do Twojej witryny pomoże zapewnić wszystkim odwiedzającym takie same wrażenia, niezależnie od używanej technologii.
Co to są atrybuty ARIA?
ARIA to skrót od Accessible Rich Internet Applications. We współczesnym HTML, zwłaszcza aplikacjach bogatych w JavaScript, nie zawsze od razu jest oczywiste na podstawie składni, jaką rolę pełnią poszczególne elementy.
Trudność w rozróżnianiu ról może stanowić problem, gdy użytkownicy przeglądają witrynę za pomocą narzędzi ułatwień dostępu, takich jak czytniki ekranu. Bez odpowiedniego semantycznego kodu HTML użytkownik końcowy może nie być w stanie poruszać się po witrynie podczas korzystania z narzędzi ułatwień dostępu.
Chociaż preferowanym sposobem rozwiązania tego problemu jest użyj odpowiednich elementów semantycznych w HTML5 , nie zawsze jest to praktyczne lub możliwe. W tym miejscu wkraczają atrybuty ARIA w elementach HTML. Atrybuty te pomagają zdefiniować rolę i atrybuty elementu w sposób, który mogą przetwarzać narzędzia ułatwień dostępu.
Dlaczego atrybuty ARIA są ważne?
Krótko mówiąc, atrybuty ARIA umożliwiają użytkownikom niepełnosprawnym korzystanie z Twojej witryny. Te role i atrybuty określają dodatkowe informacje o różnych elementach witryny, które w innym przypadku mogłyby nie być łatwo dostępne.
Istnieje wiele różnych atrybutów ARIA, które można przypisać. Powinieneś ich używać wszędzie tam, gdzie potrzebny jest dodatkowy kontekst, aby dokument miał sens w sposób niewizualny.
Rozważmy na przykład witrynę, której główna nawigacja składa się z: element zawinięty w a
<div class="nav">
<ul>
<li>Home</li>
<li>Shop</li>
<li>About</li>
</ul>
</div>
Możesz użyć atrybutów ARIA, aby ułatwić użytkownikom nawigację. Dodanie atrybutów roli i aria-label do pliku element pozwala czytnikowi ekranu i technologiom wspomagającym wiedzieć, gdzie znajduje się Twoje menu.
<div class="nav">
<ul role="navigation" aria-label="Main">
<li>Home</li>
<li>Shop</li>
<li>About</li>
</ul>
</div>
Chociaż w większości przypadków powinieneś używać odpowiednich elementów, nie zawsze jest to możliwe w ramach ograniczeń tego, co robisz. Jeśli na przykład Twoja witryna wymaga użycia paska postępu, ale potrzebujesz projektu, na który standardowy pasek nie pozwala.
W tym scenariuszu możesz utworzyć niestandardowy zestaw elementów do wyświetlania paska postępu. Jednak dla czytnika ekranu te elementy będą wyglądały jak pomieszany bałagan; nie będzie w stanie dostarczać przydatnych informacji odwiedzającym Twoją witrynę.
Ustawiając rolę opakowania na pasek postępu i dodawanie aria-valuenow , aria-valuemin , I aria-wartośćmaks atrybuty opakowania, nadal możesz wskazać postęp.
W czasach nowożytnych budowanie dostępnych stron internetowych jest ważniejsze niż kiedykolwiek. Tam są kilka bibliotek komponentów React zbudowanych z myślą o dostępności .
Dostępna witryna nie tylko może pomóc w rankingu wyszukiwania w kilku głównych wyszukiwarkach, ale gwarantuje, że nie odcinasz potencjalnej grupy użytkowników od swojej bazy użytkowników.
Dodanie odpowiednich atrybutów ARIA do witryny pomoże zapewnić, że informacje będą prezentowane wszystkim użytkownikom. Efektem końcowym będzie witryna, która z zadowoleniem przyjmuje wszystkich odbiorców i przedstawia każdemu możliwie najbardziej to samo doświadczenie.
Których atrybutów ARIA powinienem użyć?
Istnieje wiele różnych atrybutów, z których powinieneś korzystać w swojej witrynie. Ogólnie rzecz biorąc, te atrybuty dzielą się na dwie różne kategorie. Pierwszym z nich są atrybuty widżetu, które zwykle opisują niestandardowy element interaktywny.
Inną kategorią, o której musisz wiedzieć, są atrybuty relacji. Są to atrybuty, które przekazują informacje do technologii wspomagających o tym, jak dany element odnosi się do reszty witryny lub innych elementów.
Jeśli chodzi o rozważenie, które atrybuty ARIA powinieneś uwzględnić, prosta odpowiedź brzmi: jak najwięcej. Wszędzie tam, gdzie element, którego używasz, nie opisuje roli, jaką spełnia element, powinieneś użyć atrybutu roli.
Jeśli masz pole z etykietą, to pole powinno mieć aria-labeledby atrybut. Dopóki atrybuty, których używasz, mają sens, dodając je, zwiększasz dostępność witryny.
Atrybuty widżetów
Atrybuty widgetów to znacznie szersza kategoria. Zawiera większość atrybutów ARIA, które trzeba będzie dodać do standardowej witryny. We wcześniejszym przykładzie dostosowanego paska postępu atrybuty aria-valuenow, aria-valuemin i aria-valuemax są atrybutami widżetu. Opisują stan lub możliwe stany elementu, na którym się znajdują.
Istnieje wiele różnych atrybutów, których można użyć do opisania stanu elementu. Jednym z najczęstszych jest aria-label . Ten atrybut nadaje elementowi, na którym go umieszczasz, etykietę, która jest widoczna tylko dla technologii wspomagających.
google piksel 5 vs samsung s21
Inną wspólną parą atrybutów ARIA należących do tej kategorii są ukryta aria I aria-niepełnosprawny . Mogą one informować użytkownika o bieżącym stanie elementu i o tym, czy czytnik ekranu powinien go odczytać. Jest to przydatne w przypadku wielu różnych urządzeń z własnymi czytnikami ekranu.
Atrybuty relacji
W przeciwieństwie do atrybutów widgetów, atrybuty relacji dają technologiom wspomagającym wskazówki dotyczące relacji i użycia elementu z innymi otaczającymi go elementami. Najbardziej powszechnym z nich jest atrybut roli. Rola określa, jakiemu celowi służy element w witrynie.
Jeśli ustawisz rola przypisują nawigacja , zostanie natychmiast zidentyfikowany jako opakowanie nawigacji.
Niektóre atrybuty relacji określają, w jaki sposób element odnosi się do innych elementów wokół niego. The aria-labeledby na przykład atrybut pokazuje, który element działa jako etykieta dla tego elementu. Może to być przydatne w przypadku korzystania z układów, które mają sens wizualny, ale mają etykiety dla określonych kontrolek formularzy po nich w obiegu dokumentów.
Chociaż jest mniej atrybutów relacji niż atrybutów widgetów, te atrybuty często mają większe znaczenie. Często mogą opisywać przepływ i sterowanie dokumentem oraz podawać dodatkowe szczegóły dotyczące sposobu, w jaki użytkownik może poruszać się po Twojej witrynie.
Atrybuty te mają szczególne znaczenie podczas projektowania formularzy i elementów nawigacji w witrynie.
Dlaczego tak ważne jest uwzględnienie atrybutów ARIA w kodzie HTML
Atrybuty ARIA służą prostemu i niezbędnemu celowi na Twojej stronie internetowej. Służą one do zapewnienia, że witryna jest dostępna dla wszystkich użytkowników, niezależnie od korzystania z oprogramowania ułatwiającego dostęp. W przypadku użytkowników niepełnosprawnych posiadanie tych atrybutów w witrynie może sprawić, że będzie ona użyteczna.
Preferowaną metodą pracy z technologią wspomagającą jest użycie odpowiednich elementów semantycznych. Jeśli jednak nie jest to możliwe, atrybuty ARIA umożliwiają swobodną pracę bez utraty treści przez użytkowników.