What is the purpose of the role attribute in HTML

Question

I keep seeing role attributes in some people's work. I use it too, but I'm not sure about its effect.

For example:

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

Or:

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

Or:

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

Is this role attribute necessary?

Is this attribute better for semantics?

Does it improve SEO?

A list of roles can be found here, but I see some people make up their own. Is that allowed or a correct use of the role attribute?

Any thoughts on this?

User · Answer

I realise this is an old question  but another possible consideration depending on your exact requirements is that validating on https   validator w3 org  generates warnings as follows      Warning  The form role is unnecessary for element form

User · Answer

Most of the roles you see were defined as part of ARIA 1 0  and then later incorporated into HTML via supporting specs like HTML-AAM  Some of the new HTML5 elements  dialog  main  etc   are even based on the original ARIA roles  http   www w3 org TR wai-aria  There are a few primary reasons to use roles in addition to your native semantic element  Reason  1  Overriding the role where no host language element is appropriate or  for various reasons  a less semantically appropriate element was used  In this example  a link was used  even though the resulting functionality is more button-like than a navigation link   lt a href  quot   quot  role  quot button quot  aria-label  quot Delete item 1 quot  gt Delete lt  a gt   lt  -- Note  href  quot   quot  is just a shorthand here  not a recommended technique  Use progressive enhancement when possible  -- gt   Screen readers users will hear this as a button  as opposed to a link   and you can use a CSS attribute selector to avoid class-itis and div-itis   role  quot button quot          style these as buttons w o relying on a  button class        Update 7 years later  removed the   selector to make some commenters happy  since the old browser quirk that required universal selector on attribute selectors is unnecessary in 2020   Reason  2  Backing up a native element s role  to support browsers that implemented the ARIA role but haven t yet implemented the native element s role  For example  the  quot main quot  role has been supported in browsers for many years  but it s a relatively recent addition to HTML5  so many browsers don t yet support the semantic for  lt main gt    lt main role  quot main quot  gt     lt  main gt   This is technically redundant  but helps some users and doesn t harm any  In a few years  this technique will likely become unnecessary for main  Reason  3  Update 7 years later  2020   As at least one commenter pointed out  this is now very useful for custom elements  and some spec work is underway to define the default accessibility role of a web component  Even if once that API is standardized  there may be need to override the default role of a component  Note Reply You also wrote   I see some people make up their own  Is that allowed or a correct use of the role attribute   That s an allowed use of the attribute unless a real role is not included  Browsers will apply the first recognized role in the token list   lt span role  quot foo link note bar quot  gt     lt  a gt   Out of the list  only link and note are valid roles  and so the link role will be applied in the platform accessibility API because it comes first  If you use custom roles  make sure they don t conflict with any defined role in ARIA or the host language you re using  HTML  SVG  MathML  etc

User · Answer

Role attribute mainly improve accessibility for people using screen readers  For several cases we use it such as accessibility  device adaptation server-side processing  and complex data description  Know more click  https   www w3 org WAI PF HTML wiki RoleAttribute

User · Answer

Is this role attribute necessary    Answer  Yes     The role attribute is necessary to support Accessible Rich Internet Applications  WAI-ARIA  to define roles in XML-based languages  when the languages do not define their own role attribute   Although this is the reason the role attribute is published by the Protocols and Formats Working Group  the attribute has more general use cases as well    It provides you    Accessibility  Device adaptation  Server-side processing   Complex data description    etc

User · Answer

As I understand it  roles were initially defined by XHTML but were deprecated  However  they are now defined by HTML 5  see here  https   www w3 org WAI PF aria roles abstract roles header  The purpose of the role attribute is to identify to parsing software the exact function of an element  and its children  as part of a web application  This is mostly as an accessibility thing for screen readers  but I can also see it as being useful for embedded browsers and screen scrapers  In order to be useful to the unusual HTML client  the attribute needs to be set to one of the roles from the spec I linked  If you make up your own  this  future  functionality can t work - a comment would be better    Practicalities here  http   www accessibleculture org articles 2011 04 html5-aria-2011

[html] What is the purpose of the "role" attribute in HTML?

The answer is

Examples related to html

Examples related to optimization

Examples related to seo

Examples related to roles

Tags