HTML5 role Attribute
By Stephen Bucaro
Seeing impaired individuals may use a screen reader application to convert a webpage's
text to sound. However AJAX applications can update a webpage without the user realizing
the content has changed and needs to be re-processed by the screen reader application.
The role attribute can be used to inform the accessibility application that the
webpage content has changed, and the nature of the change. They role attribute
adds semantic value (meaning) to html elements.
The role attribute is part of the Accessible Rich Internet Applications (ARIA)
specification. Shown below is code using the role attribute.
<h1 role="heading">Site Heading</h1>
<a role="link" href="page1.htm">Page 1</a>
<a role="link" href="page2.htm">Page 2</a>
<a role="link" href="page3.htm">Page 3</a>
<div role="main">Document Content</div>
<div role="footer">Footer Information</div>
An example use of the role attribute might be using the role="navigation" value
to inform a screen reader application that the menu has changed, so the user might
want to re-examine it to identify the new selections. Some other useful values for
the role attribute are:
|alert || A message with important information has appeared or changed.|
|article || A section of webpage content has changed.|
|banner || An area that contains site related rather than page specific content has changed.|
|contentinfo || An area that contains information about the document has changed.|
|heading || A heading for a section of the page has changed.|
|img || An image has appeared or changed.|
|navigation || A group of navigation elements like a menu bar has changed.|
|menuitem || An option in a menu or menubar has changed.|
A complete list of possible values and their meaning is in the specification at
Role Attribute Definitions.
More HTML Code:
• HTML Blockquote Basics
• How to Code HTML Lists
• Create a Meta Tag Slide Show - No Java Script Required
• Can Enterprise Applications Be Made Using HTML5?
• How to Make a Table Scroll
• Setting the Number of Items Visible in a Select List
• Divide a Table Into Head (thead), Body (tbody), and Footer (tfoot) Sections
• Form Input Labels
• Make an HTML Element Editable
• Changing the Size of an Image on Your Webpage