Hva er formålet med attributtet "role" i HTML?

De fleste av rollene du ser ble definert som en del av ARIA 1.0, og senere innlemmet i HTML5. Noen av de nye HTML5-elementene (dialog, main osv.) er til og med basert på de opprinnelige ARIA-rollene.

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

Det er to hovedgrunner til å bruke roller i tillegg til det opprinnelige semantiske elementet.

Årsak nr. 1 Overstyring av rollen der det ikke finnes noe vertsspråklig element som passer, eller der det av ulike grunner ble brukt et mindre semantisk passende element.

I dette eksemplet ble det brukt en lenke, selv om den resulterende funksjonaliteten er mer knappelignende enn en navigasjonslenke.

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

Skjermlesere vil oppfatte dette som en knapp (i motsetning til en lenke), og du kan bruke en CSS-attributtvelger for å unngå class-itis og div-itis.

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

Årsak nr. 2. Sikkerhetskopiering av et opprinnelig elements rolle, for å støtte nettlesere som har implementert ARIA-rollen, men som ennå ikke har implementert det opprinnelige elementets rolle.

For eksempel har rollen "main" vært støttet i nettlesere i mange år, men det er et relativt nytt tillegg til HTML5, så mange nettlesere støtter ennå ikke semantikken for "main".

…

Dette er teknisk overflødig, men hjelper noen brukere og skader ingen. Om noen få år vil denne teknikken sannsynligvis bli unødvendig.

Du skrev også:

Jeg ser at noen lager sine egne. Er det tillatt eller en korrekt bruk av rolleattributtet?

Det er en gyldig bruk av attributtet med mindre en ekte rolle ikke er inkludert. Nettlesere vil bruke den første anerkjente rollen i tokenlisten.

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

Av listen er det bare link og note som er gyldige roller, og derfor vil lenkerollen bli brukt fordi den kommer først. Hvis du bruker egendefinerte roller, må du sørge for at de ikke kommer i konflikt med noen definert rolle i ARIA eller vertsspråket du bruker (HTML, SVG, MathML osv.).

Slik jeg forstår det, ble roller opprinnelig definert av XHTML, men ble utdatert. Nå er de imidlertid definert av HTML 5, se her: https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header.

Formålet med rolleattributtet er å identifisere den nøyaktige funksjonen til et element (og dets underordnede elementer) som en del av en webapplikasjon. Dette er for det meste en tilgjengelighetsting for skjermlesere, men jeg kan også se det som nyttig for innebygde nettlesere og skjermskrapere. For å være nyttig for den uvanlige HTML-klienten, må attributtet settes til en av rollene fra spesifikasjonen jeg lenket til. Hvis du lager din egen, kan denne fremtidige funksjonaliteten ikke fungere - en kommentar ville være bedre.

Praktiske opplysninger her: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/

Er dette rolleattributtet nødvendig?

Svar: Ja: Ja.

• Rolleattributtet er nødvendig for å støtte Accessible Rich Internet Applications (WAI-ARIA) for å definere roller i XML-baserte språk, når språkene ikke definerer sitt eget rolleattributt.
• Selv om dette er grunnen til at rolleattributtet publiseres av Protocols and Formats Working Group, har attributtet også mer generelle bruksområder.

Det gir deg:

• Tilgjengelighet
• Enhetstilpasning
• Behandling på serversiden
• Kompleks databeskrivelse, ... osv.