WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: A button with no label opens a sidebar on the web page: what criteria does it fail?

for

From: Dean.Vasile
Date: Sep 17, 2024 11:29AM

* Also consider, WCAG 2.4.4: Link Purpose (In Context) (Level A): Users need to understand the purpose of interactive elements (like links and buttons) from the link text or accessible name. In this case, the button’s accessible name doesn't describe its purpose, which is to slide open a sidebar.


Dino
Dean Vasile
IAAP, CPACC
<EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
617-799-1162

From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Jim Byrne Accessible Web Design
Sent: Tuesday, September 17, 2024 11:29 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] A button with no label opens a sidebar on the web page: what criteria does it fail?

Hi,

I have a web page button that is only identified as ‘button’ by my screenreader: it slides opens a sidebar when clicked.

This is clearly a fail as the a screenreader user has no clue what will happen when they click the button - but what success criteria is being failed?

Initially I thought of it as a link - but WCAG notes that links and buttons are not the same. So - I suspect it fails one or more of the following criteria:

WCAG 4.1.2 – Name, Role, Value:

"Success Criterion 4.1.2 requires a programmatically determinable name for all user interface components. Names may be visible or invisible. Occasionally, the name must be visible, in which case it is identified as a label. Refer to the definition of name and label in the glossary for more information.” https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html


WCAG 3.3.2 – Labels or Instructions:

"The intent of this Success Criterion is to have content authors present instructions or labels that identify the controls in a form so that users know what input data is expected. In the case of radio buttons, checkboxes, comboboxes, or similar controls that provide users with options, each option must have an appropriate label so that users know what they are actually selecting. “ https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html

The button is identified as a form button by my screen reader - so I suspect it fails this criteria?

WCAG 2.4.6 – Headings and Labels:
The WCAG page about this criteria does mention the word ‘button’ but it does mention ‘controls and inputs’.

"It is possible for controls and inputs to have an appropriate accessible name (e.g. using aria-label="...") and therefore pass Success Criterion 4.1.2, but to still fail this Success Criterion (if the label is not sufficiently clear or descriptive).”
https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html

Any thoughts on which of these - or some other criteria is the failure? ,
For example, a button could be an image without a text label - although in this case the button isn’t an image.

Thanks,
Jim

[cid: <EMAIL REMOVED> 5787A0]


Multi-award-winning WCAG 2.2 AA Accessibility Auditing and Accessibility Consultant

Web: https://jimbyrne.co.uk

Jim Byrne is one of the UK’s most experienced practitioners in the area of accessible digital design.

Jim provided feedback during the development of WCAG 2 (the de facto accessibility guidelines used by governments across the world). He is the author of a number of technical books, training courses and accessibility guides. Jim was a winner of the equal access category of the Global Bangemann Challenge.