WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Is ARIA required to conform to WCAG?

for

From: Geethavani.Shamanna
Date: Mar 27, 2023 4:58AM

On a related note: My question is more about the terminology.
Although the words 'required' and 'normative' do not convey the same meaning, they are sometimes used interchangeably. For example, are WCAG sufficient techniques 'required', as they are not normative?

Geetha
-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Birkir R. Gunnarsson
Sent: 26 March 2023 16:43
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Is ARIA required to conform to WCAG?

CAUTION: This mail comes from outside the University. Please consider this before opening attachments, clicking links, or acting on the content.

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://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.
> splintered.co.uk%2F&data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C
> dca76ec7882541eff26208db2e10d423%7C0e2ed45596af4100bed3a8e5fd981685%7C
> 0%7C0%7C638154422030049979%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDA
> iLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata> nmlBltbkvmk5AP56adHiAHv%2BQuizlb04WWb%2Bhc%2F7nNg%3D&reserved=0 |
> https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgith
> ub.com%2Fpatrickhlauke&data%7C01%7Cgeethavani.shamanna%40open.ac.uk
> %7Cdca76ec7882541eff26208db2e10d423%7C0e2ed45596af4100bed3a8e5fd981685
> %7C0%7C0%7C638154422030049979%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAw
> MDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sda
> ta=XCO1wA7NH8J9OLTVjvy81HrFxIgBa4RpBxTpJtKv124%3D&reserved=0
> https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fflic
> kr.com%2Fphotos%2Fredux%2F&data%7C01%7Cgeethavani.shamanna%40open.a
> c.uk%7Cdca76ec7882541eff26208db2e10d423%7C0e2ed45596af4100bed3a8e5fd98
> 1685%7C0%7C0%7C638154422030049979%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4w
> LjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C
> &sdata=nHScAodrvF%2BbR%2BKiiot0IhEaJwaUwaaeHuMFeroNzI0%3D&reserved=0 |
> https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.
> deviantart.com%2Fredux&data%7C01%7Cgeethavani.shamanna%40open.ac.uk
> %7Cdca76ec7882541eff26208db2e10d423%7C0e2ed45596af4100bed3a8e5fd981685
> %7C0%7C0%7C638154422030049979%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAw
> MDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sda
> ta=TTElbcmNikdcZ%2FFRn1zVQ9EHqUcLLTuIHRfK04UfUmQ%3D&reserved=0
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.
> webaim.org%2F&data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7Cdca76e
> c7882541eff26208db2e10d423%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%
> 7C638154422030049979%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQI
> joiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=mK6EDu
> WL7difVD5j3sIvJPy0KuDi5AHEL1nT%2FkTnm1E%3D&reserved=0
> List archives at
> https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebai
> m.org%2Fdiscussion%2Farchives&data%7C01%7Cgeethavani.shamanna%40ope
> n.ac.uk%7Cdca76ec7882541eff26208db2e10d423%7C0e2ed45596af4100bed3a8e5f
> d981685%7C0%7C0%7C638154422030049979%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiM
> C4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C
> %7C&sdata=f%2BRcWzviQtigofgzpg9Bt7Ot2SvJWBvZBK%2FDArspk%2Bs%3D&reserve
> d=0 >


--
Work hard. Have fun. Make history.