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: Birkir R. Gunnarsson
Date: Sep 17, 2024 10:48AM

Start with failing WCAG 4.1.2 - a button has to have an accessible name.
If the button has a visual icon or indicator that shows whether the sidebar
is open or closed, that's technically another fail of 4.1.2 due to not
indicating the state (in this case expanded state).

For 3.3.2 it depends how the button is labeled visually. It sounds like the
label is some sort of an icon. If that icon is visible at all times you
can't directly fail the button for that.
A combination of a visible icon and aria-label should satisfy both 4.1.2
and 3.3.2.
Whether users understand the meaning of the icon is more of a usability
discussion.


On Tue, Sep 17, 2024 at 11:29 AM Jim Byrne Accessible Web Design <
<EMAIL REMOVED> > wrote:

> 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
>
>
>
>
> 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.
>
> > > > >


--
Work hard. Have fun. Make history.