Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

HTML5 role Attribute

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.

<body role="document">
  <div role="banner">
    <h1 role="heading">Site Heading</h1>
  </div>
  <div role="navigation">
    <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>
  <div role="main">Document Content</div>
  <div role="footer">Footer Information</div>
</body>

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:
• How to Write and Run HTML
• Using del and ins Tags to Mark Up Editing on HTML Page
• How to Use a Meta Redirect
• HTML Table Basics
• HTML Textarea Basics
• Text Input Box Basics
• HTML Blockquote Basics
• Easy Code to Add Yahoo Site Search to Your Website
• Line Breaks in HTML
• Easy Form Design

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268