HTML5 Roles: Enhancing Elements

In HTML5 the role attribute is used to help browsers understand the logic of your page allowing blind people to have the page read aloud. Google might also choose to interpret the role like they do the tag name.

An element can have one or more roles describing the nature of the element. 20+ ARIA roles are defined already, but you are free to define your own.

role = dialog

Programatic creation of a dialog

var dialog = HTMLElement("div",{
  "role":"dialog",
  "data-role": { 'template':'#test-dialog','content-template':'#test-content','inline':false }
});
document.body.appendChild( dialog );
DescriptorQuery(document.body).enhance();

Declare a dialog in HTML

<div role="dialog" data-role="'template':'#test-dialog','content-template':'#test-content','inline':false"></div>

The config.template is used to specify how to render the dialog. Without it whatever content is already in the element is what will be enhanced. If you add a header element in the template it will enable the user to drag and activate the dialog.

If you put role dialog on a form it will take over the form functionality. On other elements it will add functions like form.submit and form.reset.

Button elements are enhanced by default.

role = toolbar

The toolbar is like dialogs but inline.

role = button

Default actions

If no action attribute is defined on or above the button the name will refer to the default actions.

<button name="close">&times;</button>

This button when placed in a dialog will allow you to close the dialog.

role = template

This allows you to add HTML5 template compatible elements.

more ...

role = scrolled

This allows you to add custom scrollbars to an element by putting an element inside it to hold the content. By having two elements nested, you can add non-scrolling elements easily.

<section><div role="scrolled> scrolled content </div></section>

Custom Enhanced Role

The minimum for making an enhanced custom role is the following call.

Resolver("page").set("handlers.enhance.my-role-name",function(el,role,config) {
  // role will be == "my-role-name"
  // tweak the element here
});