WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Jim Byrne Accessible Web Design
Date: Sep 17, 2024 9:29AM

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