WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Is ARIA required to conform to WCAG?

for

From: L Snider
Date: Mar 26, 2023 10:51AM

I just saw a webpage that used aria labels on links, that in my view made
the accessible simple links way, way less accessible. ARIA landmarks are
used by screen reader users I know, and anything dynamic or changing, or
links that can't be given text. I see the overuse of ARIA a lot, especially
by those who didn't design in the HTML only days! Just my experience with
these ones...

On Sun, Mar 26, 2023 at 12:54 PM Karen McCall < <EMAIL REMOVED> > wrote:

> Thank you all!
>
> This is why I value participating in this list. I get great answers and
> examples for questions I ask!
>
> Cheers, Karen
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Birkir R. Gunnarsson
> Sent: Sunday, March 26, 2023 11:43 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Is ARIA required to conform to WCAG?
>
> 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://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.s
> > plintered.co.uk%2F&data%7C01%7C%7Cee5d1aa4ad4549f719b308db2e10d266%
> > 7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638154422015204508%7CUnkn
> > own%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwi
> > LCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=lLreMoOfnmNLMIjppZPw9dlkYS%2FadnR
> > KePVZG6wkVPY%3D&reserved=0 |
> > https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithu
> > b.com%2Fpatrickhlauke&data%7C01%7C%7Cee5d1aa4ad4549f719b308db2e10d2
> > 66%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638154422015204508%7CU
> > nknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1ha
> > WwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata$WotXWaKmm9j6yD0V5F5HzcelNMth
> > B%2Bnbu%2FpQtT7rs%3D&reserved=0
> > https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fflick
> > r.com%2Fphotos%2Fredux%2F&data%7C01%7C%7Cee5d1aa4ad4549f719b308db2e
> > 10d266%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638154422015204508
> > %7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6I
> > k1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=LsQJ2dZ9w73lkAgEa8IwOuJPyD
> > MbfEVN8VpkTRx5YYo%3D&reserved=0 |
> > https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.d
> > eviantart.com%2Fredux&data%7C01%7C%7Cee5d1aa4ad4549f719b308db2e10d2
> > 66%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638154422015204508%7CU
> > nknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1ha
> > WwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=XFCFvDcOv4r0LCSvzkvWrM3pCpA4Pi
> > LiWjTWyIVIAEw%3D&reserved=0
> > twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > > > https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.w
> > ebaim.org%2F&data%7C01%7C%7Cee5d1aa4ad4549f719b308db2e10d266%7C84df
> > 9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638154422015204508%7CUnknown%7C
> > TWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVC
> > I6Mn0%3D%7C3000%7C%7C%7C&sdata=gNltT3nTuiDJUi4uHQ8QBCnZlsGOJrNqjn74RR6
> > 3fuo%3D&reserved=0 List archives at
> > https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim
> > .org%2Fdiscussion%2Farchives&data%7C01%7C%7Cee5d1aa4ad4549f719b308d
> > b2e10d266%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638154422015204
> > 508%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTi
> > I6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=g%2BLInTnalxKV0eeROUmIV
> > GwrXbjLlEJBeJVGqTIKRMo%3D&reserved=0
> > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&data%7C01%7C%7Cee5d1aa4ad4549f719b308db2e10d266%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638154422015204508%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=gNltT3nTuiDJUi4uHQ8QBCnZlsGOJrNqjn74RR63fuo%3D&reserved=0
> List archives at
> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data%7C01%7C%7Cee5d1aa4ad4549f719b308db2e10d266%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638154422015204508%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=g%2BLInTnalxKV0eeROUmIVGwrXbjLlEJBeJVGqTIKRMo%3D&reserved=0
> > > > > >