E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: Jim Byrne Accessible Web Design
Date: Tue, Sep 17 2024 9:29AM
Subject: A button with no label opens a sidebar on the web page: what criteria does it fail?
No previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Tue, Sep 17 2024 10:48AM
Subject: Re: A button with no label opens a sidebar on the web page: what criteria does it fail?
← Previous message | Next message →

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

From: Dean.Vasile
Date: Tue, Sep 17 2024 11:29AM
Subject: Re: A button with no label opens a sidebar on the web page: what criteria does it fail?
← Previous message | Next message →

* 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
617-799-1162

From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Jim Byrne Accessible Web Design
Sent: Tuesday, September 17, 2024 11:29 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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.

From: Steve Green
Date: Tue, Sep 17 2024 12:16PM
Subject: Re: A button with no label opens a sidebar on the web page: what criteria does it fail?
← Previous message | Next message →

Of all the success criteria listed in Jim's original email, this is only a violation of SC 4.1.2, due to the absence of an accessible name.

SC 3.3.2 only applies to data entry.
SC 2.4.6 does not require that labels are present. It only requires that they are accurate if they exist.
SC 2.4.4 does not apply to buttons.

Steve Green
Managing Director
Test Partners Ltd

From: Jim Byrne Accessible Web Design
Date: Wed, Sep 18 2024 3:07AM
Subject: Re: A button with no label opens a sidebar on the web page: what criteria does it fail?
← Previous message | Next message →

Thanks Steve and y’all.

Your feedback and knowledge is very much appreciated. :-)

Jim

> On 17 Sep 2024, at 19:16, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
>
> Of all the success criteria listed in Jim's original email, this is only a violation of SC 4.1.2, due to the absence of an accessible name.
>
> SC 3.3.2 only applies to data entry.
> SC 2.4.6 does not require that labels are present. It only requires that they are accurate if they exist.
> SC 2.4.4 does not apply to buttons.
>
> Steve Green
> Managing Director
> Test Partners Ltd
>
>

From: Barry
Date: Thu, Sep 19 2024 5:18AM
Subject: Re: A button with no label opens a sidebar on the web page: what criteria does it fail?
← Previous message | No next message

I'd say that the primary failure is of WCAG 4.1.2 – Name, Role, Value, and the subsequent ones are relevent but secondary to that one. As the button opens that side menu, another one you could add to the list is 3.1.3: Info and relationship.

Cheers

Barry