Jaki jest cel atrybutu "role" w HTML?

Question

Wciąż widzę atrybuty roli w pracy niektórych ludzi. Ja też go używam, ale nie jestem pewien co do jego skutku.

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 przypisują to rola konieczne?

Czy ten atrybut jest lepszy w przypadku semantyki?

Czy to poprawia SEO?

Lista ról można znaleźć here, ale widzę, że niektórzy ludzie tworzą własną. Czy to dozwolone lub poprawne użycie atrybutu roli?

Jakieś przemyślenia na ten temat?

Answer 1

Większość ról widać zostały zdefiniowane jako część ARIA 1.0, a później włączone do HTML5. Niektóre z nowych elementów HTML5 (okno dialogowe, główne itp.) Są nawet oparte na oryginalnych rolach ARIA.

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

Istnieją dwa główne powody korzystania z ról w dodatku do swojej rodzimej semantycznego elementu.

Powód 1. Zastępuje się rolę, w której żaden element języka nie jest właściwy lub z różnych powodów został użyty mniej odpowiedni semantycznie element.

W tym przykładzie użyto łącza, mimo że wynikowa funkcja jest bardziej podobna do przycisku niż łącze nawigacyjne.

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

Czytniki ekranu usłyszy to jako przycisk (w przeciwieństwie do łącza), można użyć atrybutu CSS selektor uniknąć klasy itis i div-itis.

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

Powód 2. Tworzenie kopii zapasowej roli elementu macierzystego 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 stosunkowo nowym dodatkiem do HTML5, więc wiele przeglądarek nie obsługuje jeszcze semantycznego dla <main>.

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

Jest to technicznie zbędne, ale pomaga niektórym użytkownikom i nie szkodzi żadnemu. W ciągu kilku lat technika ta prawdopodobnie stanie się niepotrzebna.

Napisałeś też:

widzę niektórzy ludzie tworzą własną rękę. Czy to dozwolone lub poprawne użycie atrybutu roli?

To prawidłowe użycie atrybutu, o ile nie uwzględniono prawdziwej roli. Przeglądarki zastosują pierwszą uznaną rolę na liście znaczników.

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

z listy, tylko link i note są ważne role, a więc rola link będzie stosowana, ponieważ jest na pierwszym miejscu. Jeśli korzystasz z niestandardowych ról, upewnij się, że nie są w konflikcie z żadnym określonym roli w ARIA lub języka gospodarza, którego używasz (HTML, SVG, MathML, etc.)

Answer 2

Jak rozumiem, role były początkowo definiowane przez XHTML, ale były przestarzałe. Jednak są teraz zdefiniowane przez HTML 5, zobacz tutaj: http://www.w3.org/TR/wai-aria/complete#roles

Celem atrybutu roli jest identyfikacja oprogramowania parsującego dokładnie funkcję elementu (i jego dzieci) w ramach aplikacji internetowej. Jest to głównie kwestia dostępności dla czytników ekranu, ale widzę też, że jest przydatna w przypadku wbudowanych przeglądarek i skrobaczek ekranowych. Aby być przydatnym dla nietypowego klienta HTML, atrybut musi być ustawiony na jedną z ról z połączonej specyfikacji. Jeśli wymyślisz własne, ta "przyszłościowa" funkcjonalność nie będzie działać - komentarz byłby lepszy.

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

Answer 3

przydatna dla Bootstrap guziki z kotwicami

<a href="#" class="btn btn-info" role="button">Link Button</a> 

stąd: Bootstrap Buttons

Answer 4

Czy przypisują to rola konieczne?

Odpowiedź: Tak.

• Atrybut rola należy wspierać dostęp dla aplikacji RIA (WAI-ARIA) zdefiniować role w językach opartych na XML, kiedy języki nie definiować własne atrybut rolę.
• Chociaż z tego powodu atrybut roli jest publikowany przez grupę roboczą Protokoły i Formaty , ma on również bardziej ogólne zastosowania.

To zapewnia:

• Dostępność
• adaptacja Device
• po stronie serwera przetwarzanie
• Complex opis danych, itp. ...