WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Is ARIA required to conform to WCAG?

for

From: Birkir R. Gunnarsson
Date: Mar 26, 2023 9:43AM

If you can use the right HTML for all the content, structure and
functionality you need on the site, then no ARIA is required.
If you cannot use the right HTML markup, you can fix it with ARIA.
E.g.
If, for some reason, you have a button but it is coded with a <div>
element (that, in itself has no button role or function) you can
either replace it by a <button> element (which has all the function ou
need) ot turn it into a button using tabindex, JavaScript and ARIA
* add role="button" to make it announce as a button by a screen reader
* add tabindex="0" to make it focusable with keyboard
* Add JavaScript functions to let users activate the button with
spacebar or the enter key
Obviously this is a lot more work than just replacing the <div>
element with a <button> element.
There are a few things that ARIA can do that HTML cannot.
* Connecting form inputs and error messages (you need aria-escribedby
or aria-errormessage, HTML does not offer a way other than stuffing he
error message inside the <label>)
* Have screen readers announce an update automatically when it happens
(usign aria-live, role="alert" or role="status"). The only HTML to
achieve this is the <output> element and it does not work for all
situations
Build tabs and menus (HTML has no way to do thise).
You used to need ARIA to build accordions but now you can do it with
HTML using the <details> and <summary> element structure.
You used to require ARIA to biuld modal dialogs but finally, after 10
yars in the HTML spec, the support for the <dialog> element is
sufficient to use it.
You used to require ARIA to build a search input with suggestions that
are displayed as you type. Now you can do it with an <input> element,
a list attribute and a <datalist> element (support in most browsers,
though not perfect).

So, again, it depends what you are building on the website. You can do
90% of what you need without ARIA, but you may need it for forms,
tabs, menus and a few other things.
You may also need it if you cannot use the HTML you need (sometimes
you are building a website from frameworks that didn't build HTML
right so you need ARIA to correct it).

As for your second qustions. Yes, when you use ARIA it always
overrides the HTML you use, that's its purpose.
<h1 role="button">This is a heading but a screen reader will announce
it as a button</h1>
or even
<h1 role="heading" aria-level="5">This is coded as an h1 heading but
announced as an h5 heading by a screen reader</h1>


On 3/26/23, Patrick H. Lauke < <EMAIL REMOVED> > wrote:
>
>
> On 26/03/2023 15:53, Karen McCall wrote:
>> Morning Everyone!
>>
>> 1. Is the use of ARIA attributes mandatory to conform to WCAG 2.x or
>> are ARIA attributes optional? I can't find a definitive answer.
>
> They're required *if* what you're building needs to expose its
> name/role/state/value, but doesn't by default. Like a button that acts
> as a toggle needs to expose when it's pressed or not pressed, so unless
> you add aria-pressed="true"/aria-pressed="false" to expose its state
> programmatically, you're failing 4.1.2 at least.
>
>> * Can I have a WCAG 2.x conforming web site without using ARIA?
>
> You can if you don't use/build any custom controls that make no
> programmatic sense without ARIA.
>
>> 2. If an ARIA attribute is used, does it affect the type of HTML tag
>> used? For example, if a you have an <H1> tag and use ARIA attributes, does
>> the tag now become a <P> Tag because of the ARIA attributes?
>
> Depends which attribute. if you're adding a role, like <h1
> role="button"> for instance, you've just told the browser to expose that
> heading as a button. If you don't force a role, no, your elements will
> remain the same, so you *can* add aria-* attributes without changing the
> nature of the element (but of course, you need to actually know what
> you're doing...can't just add aria attributes at random, they need to
> still make sense...for instance, it would be utterly illogical - and
> will likely be ignored by assistive technologies - if you did something
> like <h1 aria-pressed="true"> because a heading can't have a state of
> being pressed/not pressed.
>
> I suggest learning more about aria itself and when it makes sense to use
> it or not...
>
> P
> --
> Patrick H. Lauke
>
> https://www.splintered.co.uk/ | https://github.com/patrickhlauke
> https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >


--
Work hard. Have fun. Make history.