Jaki jest cel atrybutu „rola” w HTML?

1165

Ciągle widzę atrybuty roli w pracy niektórych osób. Ja też go używam, ale nie jestem pewien jego efektu.

Na przykład:

<header id="header" role="banner">
    Header stuff in here
</header>

Lub:

<section id="facebook" role="contentinfo">
    Facebook stuff in here
</section>

Lub:

<section id="main" role="main">
     Main content stuff in here
</section>

Czy ten atrybut roli jest konieczny?

Czy ten atrybut jest lepszy dla semantyki?

Czy to poprawia SEO?

Listę ról można znaleźć tutaj , ale widzę, że niektórzy ludzie wymyślają własne. Czy to dozwolone, czy prawidłowe użycie atrybutu roli?

Masz jakieś przemyślenia na ten temat?

jeroen
źródło

Odpowiedzi:

1005

Większość ról, które widzisz, zdefiniowano jako część ARIA 1.0, a następnie włączono do HTML5. Niektóre nowe elementy HTML5 (okno dialogowe, główne itp.) Są nawet oparte na oryginalnych rolach ARIA.

http://www.w3.org/TR/wai-aria/

Istnieją dwa podstawowe powody, aby używać ról oprócz natywnego elementu semantycznego.

Powód nr 1. Nadpisywanie roli, w której żaden element języka hosta nie jest odpowiedni lub, z różnych powodów, zastosowano mniej odpowiedni semantycznie element.

W tym przykładzie użyto łącza, mimo że uzyskana funkcjonalność jest bardziej podobna do przycisku niż łącza nawigacyjnego.

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

Czytniki ekranu usłyszą to jako przycisk (w przeciwieństwie do linku), a możesz użyć selektora atrybutów CSS, aby uniknąć class-itis i div-itis.

*[role="button"] {
  /* style these a buttons w/o relying on a .button class */
}

Powód nr 2. Tworzenie kopii zapasowej roli elementu rodzimego w celu obsługi przeglądarek, które zaimplementowały rolę ARIA, ale jeszcze nie zaimplementowały roli elementu rodzimego.

Na przykład „główna” rola jest obsługiwana w przeglądarkach od wielu lat, ale jest to stosunkowo nowy dodatek do HTML5, więc wiele przeglądarek nie obsługuje jeszcze semantycznego <main>.

<main role="main"></main>

Jest to technicznie zbędne, ale pomaga niektórym użytkownikom i nie szkodzi nikomu. Za kilka lat ta technika prawdopodobnie stanie się niepotrzebna.

Napisałeś także:

Widzę, że niektórzy ludzie tworzą własne. Czy to dozwolone, czy prawidłowe użycie atrybutu roli?

To prawidłowe użycie atrybutu, chyba że nie uwzględniono prawdziwej roli. Przeglądarki zastosują pierwszą rozpoznaną rolę na liście tokenów.

<span role="foo link note bar">...</a>

Z listy, tylko linki notesą ważne role, a więc roli łącza będzie stosowana, ponieważ jest na pierwszym miejscu. Jeśli używasz niestandardowych ról, upewnij się, że nie kolidują one z żadną zdefiniowaną rolą w ARIA lub używanym języku hosta (HTML, SVG, MathML itp.)

James Craig
źródło
19
Ten link może być również pomocny. Korzystanie z ARIA w HTML. rawgithub.com/w3c/aria-in-html/master/index.html
James Craig
6
Dlaczego umieściłeś selektor uniwersalny przed [rola = "przycisk"]?
Evgeny
5
@EugeneXa moje przypuszczenie polega na wskazaniu dowolnego elementu, [role="button"]który zaoszczędzi na zrobieniua[role="button"], span[role="button"]
ngplayground
4
„Za kilka lat ta technika prawdopodobnie stanie się niepotrzebna”. Nie podoba mi się żadna kwestia dostępności, ale ponieważ elementy takie jak komponenty kątowe i internetowe tworzą niestandardowe tagi, mogę sobie wyobrazić, że staje się to coraz bardziej konieczne.
xdhmoore
8
@xdhmoore Myślę, że miał na myśli szczególnie zbędną technikę ustawiania roli na tę samą wartość co tag, a nie roleogólne zastosowanie.
willlma
159

Jak rozumiem, role były początkowo zdefiniowane przez XHTML, ale były przestarzałe. Są one jednak teraz zdefiniowane w HTML 5, patrz tutaj: https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header

Celem atrybutu role jest zidentyfikowanie w parsowaniu oprogramowania dokładnej funkcji elementu (i jego elementów podrzędnych) jako części aplikacji internetowej. Jest to głównie kwestia ułatwień dostępu dla czytników ekranu, ale widzę też, że jest to przydatne w przypadku osadzonych przeglądarek i skrobaków ekranu. Aby być użytecznym dla nietypowego klienta HTML, atrybut musi być ustawiony na jedną z ról z specyfikacji, którą podłączyłem. Jeśli sam sobie wymyślisz, ta funkcja „przyszłości” nie będzie działać - komentarz byłby lepszy.

Praktyczne informacje tutaj: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/

S Hubble
źródło
20

Czy ten atrybut roli jest konieczny?

Odpowiedź: Tak .

  • Atrybut roli jest niezbędny do obsługi dostępnych bogatych aplikacji internetowych ( WAI-ARIA ) w celu definiowania ról w językach opartych na XML, gdy języki nie definiują własnego atrybutu roli.
  • Chociaż z tego powodu atrybut roli jest publikowany przez grupę roboczą ds. Protokołów i formatów , atrybut ma również bardziej ogólne przypadki użycia.

Zapewnia ci:

  • Dostępność
  • Adaptacja urządzenia
  • Przetwarzanie po stronie serwera
  • Kompleksowy opis danych, ... itd.
Laxmi
źródło
3
Czy możesz wyjaśnić znaczenie dostępności, dostosowania urządzenia i złożonego opisu danych. Jestem nowy w programowaniu internetowym, więc te warunki są dla mnie trochę nowe. Dzięki!
Manish Jain
11

Zdaję sobie sprawę, że to stare pytanie, ale innym możliwym do rozważenia w zależności od twoich dokładnych wymagań jest to, że sprawdzanie poprawności na https://validator.w3.org/ generuje ostrzeżenia w następujący sposób:

Ostrzeżenie: rola formularza nie jest konieczna w przypadku formularza elementu.

dotnetnutty
źródło
1
Być może downvoter chce komentować? Odpowiedziałem na pytanie PO: „Czy ten atrybut roli jest konieczny?”
dotnetnutty,
0

Atrybut roli głównie poprawia dostępność dla osób korzystających z czytników ekranu. W kilku przypadkach korzystamy z niego, takich jak dostępność, dostosowanie urządzenia, przetwarzanie po stronie serwera i złożony opis danych. Dowiedz się więcej kliknij: https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute .

WebguruInfosystems
źródło
2
Proszę ujawnić wszelkie powiązania i nie wykorzystywać witryny jako sposobu promowania witryny poprzez publikowanie. Zobacz Jak napisać dobrą odpowiedź? .
Yvette