Wat is het doel van het kenmerk ‘role’ in HTML?

Ik blijf rolattributen zien in het werk van sommige mensen. Ik gebruik het ook, maar ik weet niet zeker of het effect heeft.

Bijvoorbeeld:

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

Of:

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

Of:

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

Is dit rolkenmerk nodig?

Is dit kenmerk beter voor de semantiek?

Verbetert het de SEO?

Een lijst met rollen is hierte vinden, maar ik zie dat sommige mensen hun eigen op. Is dat toegestaan of een correct gebruik van het rolkenmerk?

Enige gedachten hierover?


Antwoord 1, autoriteit 100%

De meeste rollen die je ziet, werden gedefinieerd als onderdeel van ARIA 1.0 en later opgenomen in HTML via ondersteunende specificaties zoals HTML-AAM. Sommige van de nieuwe HTML5-elementen (dialoogvenster, hoofdmenu, enz.) zijn zelfs gebaseerd op de originele ARIA-rollen.

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

Er zijn een paar belangrijke redenen om naast je eigen semantische element rollen te gebruiken.

Reden #1.Overschrijven van de rol waar geen hosttaalelement geschikt is of, om verschillende redenen, een minder semantisch geschikt element is gebruikt.

In dit voorbeeld is een link gebruikt, hoewel de resulterende functionaliteit meer op een knop lijkt dan een navigatielink.

<a href="#" role="button" aria-label="Delete item 1">Delete</a>
<!-- Note: href="#" is just a shorthand here, not a recommended technique. Use progressive enhancement when possible. -->

Gebruikers van schermlezers horen dit als een knop (in tegenstelling tot een link), en u kunt een CSS-kenmerkselector gebruiken om class-itis en div-itis te voorkomen.

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

[Update 7 jaar later: verwijderde de * selector om sommige commentatoren blij te maken, aangezien de oude browser-grill die universele selector op attribuutselectors vereiste, overbodig is in 2020.]

Reden #2.Een back-up maken van de rol van een native element, ter ondersteuning van browsers die de ARIA-rol hebben geïmplementeerd, maar de rol van het native element nog niet hebben geïmplementeerd.

De rol “hoofd” wordt bijvoorbeeld al vele jaren ondersteund in browsers, maar het is een relatief recente toevoeging aan HTML5, dus veel browsers ondersteunen de semantiek voor <main>.

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

Dit is technisch overbodig, maar helpt sommige gebruikers en schaadt niemand. Over een paar jaar zal deze techniek waarschijnlijk overbodig worden voor main.

Reden #3.
Update 7 jaar later (2020): Zoals ten minste één commentator opmerkte, is dit nu erg handig voor aangepaste elementen, en er wordt wat specwerk verricht om de standaard toegankelijkheidsrol van een webcomponent te definiëren. Zelfs als/zodra die API is gestandaardiseerd, kan het nodig zijn om de standaardrol van een component te overschrijven.

Opmerking/antwoord

Je schreef ook:

Ik zie dat sommige mensen er zelf een verzinnen. Is dat toegestaan of een correct gebruik van het rolkenmerk?

Dat is een toegestaan gebruik van het kenmerk, tenzij er geen echte rol is opgenomen. Browsers zullen de eerste erkende rol in de tokenlijst toepassen.

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

Van de lijst zijn alleen linken notegeldige rollen, en daarom wordt de linkrol toegepast in de API voor platformtoegankelijkheid omdat deze eerst komt. Als u aangepaste rollen gebruikt, zorg er dan voor dat deze niet conflicteren met een gedefinieerde rol in ARIA of de hosttaal die u gebruikt (HTML, SVG, MathML, enz.)


Antwoord 2, autoriteit 15%

Zoals ik het begrijp, werden rollen in eerste instantie gedefinieerd door XHTML, maar deze werden afgeschaft. Ze worden nu echter gedefinieerd door HTML 5, zie hier: https://www. w3.org/WAI/PF/aria/roles#abstract_roles_header

Het doel van het role-attribuut is om de exacte functie van een element (en zijn onderliggende items) als onderdeel van een webtoepassing te identificeren voor het parseren van software. Dit is meestal een toegankelijkheidsding voor schermlezers, maar ik kan het ook zien als nuttig voor ingesloten browsers en schermschrapers. Om nuttig te zijn voor de ongebruikelijke HTML-client, moet het attribuut worden ingesteld op een van de rollen uit de specificatie die ik heb gekoppeld. Als je er zelf een verzint, kan deze ‘toekomstige’ functionaliteit niet werken – een opmerking zou beter zijn.

Praktische informatie hier: http://www.accessibleculture.org/ artikelen/2011/04/html5-aria-2011/


Antwoord 3, autoriteit 2%

Is dit rolkenmerk nodig?

Antwoord: Ja.

  • Het rolkenmerk is nodig om toegankelijke rich internet-applicaties te ondersteunen (WAI-ARIA)om rollen te definiëren in op XML gebaseerde talen, wanneer de talen hun eigen rolattribuut niet definiëren.
  • Hoewel dit de reden is waarom het rolkenmerk wordt gepubliceerd door de Werkgroep Protocollen en formaten, heeft het kenmerk ook meer algemene gebruiksscenario’s.

Het biedt u:

  • Toegankelijkheid
  • Apparaataanpassing
  • Verwerking aan serverzijde
  • Complexe gegevensbeschrijving,… enz.

Antwoord 4

Ik realiseer me dat dit een oude vraag is, maar een andere mogelijke overweging, afhankelijk van uw exacte vereisten, is dat valideren op https:// validator.w3.org/genereert waarschuwingen als volgt:

Waarschuwing: de formulierrol is niet nodig voor de elementvorm.


Antwoord 5

Rolkenmerk verbetert vooral de toegankelijkheid voor mensen die schermlezers gebruiken.
Voor verschillende gevallen gebruiken we het, zoals toegankelijkheid, apparaataanpassing, server-side verwerking en complexe gegevensbeschrijving.
Meer weten klik: https://www.w3.org/WAI/PF/ HTML/wiki/RoleAttribute.

Other episodes