WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Changing semantics via ARIA Role

for

From: Léonie Watson
Date: Sep 15, 2015 11:32AM

> From: WebAIM-Forum on Behalf Of Dennis Deacon
> Sent: 15 September 2015 16:31
> I understand that changing an element's role is generally frowned upon. An
> example would be placing role="link" on a div (just use a link). Are there
> acceptable exceptions to this (say role="button" on a link)?

It's a judgement call based on the context.

The <div> and <span> elements are semantically neutral (they don't have meaningful default roles). It's often ok to explicitly apply another role to either element, but it comes at a cost. For example, if you apply role="link" to a <div>, you have to handle keyboard focus plus keyboard and mouse interaction through scripting. Even then, you lose some expected features of a standard link (like the default browser context menu).

It's when you override the semantics of other elements you really need to be cautious. It would make no sense to do something like the following for example:

<h1 role="button">This heading</h1>

That said, there are times when it is ok to override the native semantics of elements. If you use a <ul> and some <div> elements to create the basis of a set of tabs for example. Applying the tablist, tab and tabpanel roles actually provides more meaningful semantics than the original HTML elements do.

So being aware of whether the element has a strong role of it's own, and considering whether the role(s) you apply will provide more meaningful semantics or break something important, is the basic strategy.

Léonie.

--
Senior accessibility engineer @PacielloGroup @LeonieWatson