Jaki jest cel atrybutu „rola” w HTML?

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?

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.)

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/

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.

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.

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 .