Tag: ARIA

What are Implicit ARIA Roles?

For a while now, I’ve been seeing mentions of implicit ARIA roles as something web designers and developers should be aware of and know how to use.

In the case of ARIA roles, the word implicit means that the browser interprets certain HTML elements semantically and treats them as if an ARIA role were assigned to them. In these situations, the web designer does not specifically need to add the role attribute to the element. The addition of the ARIA role is considered redundant in some situations.

If you do add the role information, it does no harm, but, in my opinion, it’s best practice to know when you do need to add it and when you don’t.

For elements that have been around for a while, say the a (anchor) element, the browser implicitly assigns a role="link" attribute.

For the newer HTML5 semantic structural elements, browsers already have some of the roles built in. This improves as browsers add support. A header element that is not a descendant of an article or section element is implicitly assigned role="banner". A footer element that is not a descendant of an article or section element is implicitly assigned role="contentinfo". There are a number of other cases like this as browsers add support for HTML5. They are detailed at the W3C in two tables. This table shows strong native HTML semantics with default ARIA semantics. Just under it, this table lists the default implicit ARIA semantics for many other elements, along with any restrictions that apply.

In addition to the information at the W3C, check out this article by Steve Faulkner: HTML5 Accessibility Chops: When to use an ARIA role.

Online seminar: Introduction to ARIA

On March 27 I’ll be leading an online seminar for ADA Online Learning. The topic is Introduction to ARIA.

If you’d like to join the seminar, information about the schedule, registration and more is located at the ADA Online site. It’s free and registration is easy.

The seminar will focus mainly on ARIA landmark roles and will help the people attending see how to use landmark roles in their work. It will include an explanation of how to add landmark roles to WordPress themes that don’t have them built in.

The event is sponsored by the Great Lakes ADA Center.

ARIA-WAI: A Roundup of Information on Web Teacher

There are a number of posts here at Web Teacher that provide information for front end developers about how to use ARIA-WAI in a page design to increase the accessibility of the page. Here’s a list of some articles I wrote. There are also many links to ARIA posts in my useful links category.

 

Improve Accessibility in HTML5 with WAI-ARIA Landmark Roles

html5 logo

HTML5 contains several new elements that are considered semantic in that they more accurately describe the content they contain than a generic element such as a div.

These new elements improve accessibility as standalone structure, because of the semantic underpinnings they carry with them. The elements in question are: header, footer, main, section, article, aside, and nav. Simply using them without any additional coding such as the WAI-ARIA landmark roles I’m going to describe today is an improvement.

The roles I’ll describe are banner, complementary, contentinfo, form, main, navigation, search. The names make the role pretty obvious, but some roles have fine points.

The header element

In HTML5, the header element can be used repeatedly on a page. It can be the main header for the entire page, or a header for a subsection of the page such as a section or an article or an aside.

If the header element is used at the main header for the entire page, the role banner can be assigned to it. Only one header on a page can have the role banner.

<header role="banner"> . . .</header>

Within the page there may be header elements used as article or section or aside headings. The ARIA role that can by used in that case is heading.

<article><header role="heading">Article heading</header>Article body</article>

The heading role can also be used in tables.

The footer element

In HTML5, the footer element can be used repeatedly on a page. It can be the main footer for the entire page, or a footer for a subsection of the page such as a section or an article or an aside.

The main page footer can use the role contentinfo. But footer elements for subsections of a page may not use this role. It can only be used once on a page.

<footer role="contentinfo"> footer for entire page</footer>

Depending on what kind of information is included in the footer for articles or other smaller page sections, the footer might be appropriately labeled with the complementary role.

<footer role="complementary"> informative footer for an article</footer>

 The aside element

The aside element is meant for complementary material, not crucial to the page content, but supplementary. Therefore the complementary role is perfect for it.

<aside role="complementary"> supplemental content</aside>

Main, Navigation, Form and Search

You’ve seen how simple it is to assign a role to an element, so I’ll stop giving code examples. There are just a few points about the roles main, navigation, form and search. It seems self-evident when to apply navigation, form, and search to page elements. But main is another role that can only be used once on a page to indicate the main content, which might be contained in a main, div or section element. Using the main role properly eliminates the need for those “jump to main content” links that were so prevalent for a while on the web.

ARIA Roles are not only for HTML5

The last point to keep in mind is that ARIA roles work in all flavors of HTML. They do not depend on the use of HTML5 to make your web page accessible. Even if you are not ready to switch to HTML5, you should begin using ARIA roles.

See Also: ARIA Roles 101 and How to Make HTML5 Semantic Elements more Accessible.

Useful Links: Forms, Zeldman, HTML for Babies

Create Dynamic Form Labels with ARIA is from Yahoo! Accessibility and is pretty clever.

Why not watch a keynote address from Jeffrey Zeldman? This one’s from The Web Comes of Age – DIBI.

HTML for Babies. Yes, it’s real. Mamas, don’t let your babies grow up to be web standards illiterate.