aria roles and targeting with css

What are aria roles? Aria stands for Accessible Rich Internet Applications and its purpose is to make web content and applications more accessible. So how the heck does this work? This can be achieved by assigning widgets, page elements roles to give semantic content. Doing so allows certain technologies used by those with disabilities the understanding to present or relate websites in a identifiable way. How to use roles Roles are used just like any other attribute for example

<div id="main" role="main"></div>

Targeting roles with css Besides the accessibility features of using roles in your html it is also possible to style these page elements in your style sheet. You can target your css using aria roles just like you would for say titles, for example to target a section with the role of main or to target a header with a role of banner you could do the following

section[role="main"] {
        border:1px solid #ff0000;
}
header[role="banner"] {
        border:1px solid #ff0000;
}

The good news is using this attribute selector is fairly well supported in browsers and even IE7 onwards supports it. If however you need to support IE6 i’d suggest taking a look at selectivizr which can bring the ie6 up to speed on some of these features.