WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Where does it say to use native HTML features rather than re-create them in ARIA and JS?

for

From: Bryan Garaventa
Date: Dec 22, 2016 11:02AM

It's also very important not to use conflicting roles on native interactive elements, and preferably, don't use ARIA roles on any native interactive elements.

E.G I've seen recently where role="button" was added to input+type="text" elements, making them totally inaccessible using VoiceOver in iOS, and role="listbox" on native HTML select elements which caused other issues to occur, and others adding roles to select element option elements with the same inaccessible results.

These are all extremely bad practices.



Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Steve Faulkner
Sent: Thursday, December 22, 2016 9:48 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Where does it say to use native HTML features rather than re-create them in ARIA and JS?

On 22 December 2016 at 17:40, Tyllick,Cliff S (HHSC/DADS) < <EMAIL REMOVED> > wrote:

> Where in the WAI-ARIA Authoring Practices does it specify that
> WAI-ARIA is to be used only when native HTML won't suffice?


Unsure whether it is stated in the authoring practices doc, but there are 2 places this is stated:

In the ARIA 1.1 spec:

When a feature in the host language with identical role semantics and
> values is available, and the author has no compelling reason to avoid
> using the host language feature, authors should use the host language
> features rather than repurpose other elements with WAI-ARIA.

https://www.w3.org/TR/wai-aria-1.1/#host_general_conflict

In Notes on using ARIA in HTML:

2.1 First rule of ARIA use
> If you *can* use a native HTML element or attribute with the semantics
> and behaviour you require *already built in*, instead of re-purposing
> an element and adding an ARIA role, state or property to make it
> accessible*, then do so*.


http://w3c.github.io/aria-in-html/#rule1


--

Regards

SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;