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 11:02AM

aria-label is useful on links or buttons that are visually labeled by
icons (e.g. links to social media or buttons labeled with symbols,
like the search button or close button). aria-label is an easy way to
provide a screen reader / assistive technology label for those.
When a link already has sufficien text aria-label is redundant. Even
if the text is insufficient there are other ways, e.g. adding visually
hidden text, to achieve the purpose without aria. You could use
aria-label but then you have to take great care that the aria-label
value includes the visible text.
e.g.
<a href="http://www.google." aria-label="Google">Click here</a> is
invalid use of aria-label, but
<a href="http://www.google.com" aria-label="Click ehre to visit
Google">Click here</a> is acceptable.


On 3/26/23, L Snider < <EMAIL REMOVED> > wrote:
> 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
>> >> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.