Wcag: Can text buttons fail 1.1.1 and 3.3.2?

Created on 5 Dec 2019  Â·  36Comments  Â·  Source: w3c/wcag

This came up during the the ACT TF call this week. We were looking at a rule that checks if buttons have an accessible name. It was clear buttons are tested under 4.1.2, but the group seemed split about whether or not 1.1.1 and/or 3.3.2 can fail for something like this:

<button type="button" />

1.1.1 Non-text content

For 1.1.1 the argument was that buttons may be considered non-text content. They may contain text, but aren't themselves text. They can also be considered "Controls, Input". Technique H44 suggests that things such as select, textarea and text input are non-text content. On the other hand, the understanding document mentions this:

For non-text content that is a control or accepts user input, such as images used as submit buttons, image maps or complex animations, a name is provided to describe the purpose of the non-text content so that the person at least knows what the non-text content is and why it is there.

While it doesn't outright say buttons without images don't apply, that it mentions images / animation in all three example suggests that might be the intention. The ACT Task Force would like to know what the position of the AGWG. Are buttons without images still considered non-text content? And perhaps in extension to this, should form fields be considered non-text content?

3.3.2 Labels or Instructions

For the same button, would the lack of a visible label be considered a failure of 3.3.2? Since there is no definition for "requires user input". Clicking a button is (usually) required for user input to be submitted, however (usually) buttons themselves aren't used as a mechanism for the user to provide information.

Either way it would be helpful to include information about how 3.3.2 relates to buttons in the understanding document.

3.3.2 Labels or instructions Survey - Ready for Techniques Understanding WCAG 2.0

Most helpful comment

@bruce-usab

@patrickhlauke goes on to make the argument that clicking a button is not user input. I disagree with that analysis, as we were not trying to be that pedantic when writing 2.0!

then the understanding for 3.3.2 should make that clear. as currently, it only seems to hint at text inputs and such (and RAW (rule as written) can be very narrowly interpreted without any further clarification).

@awkawk

Does it matter if it is a 4.1.2 issue or an issue on both? Not really.

well, it does for consistency's sake. if one auditor notes that your page has X errors, and another notes that your page has Y errors, you want to get to the bottom of that inconsistency. in general, I would suggest failing something for any SCs it fails. while this particular example may be an edge case, it's important to clearly be able to say if an SC applies or not in that particular case.

if it were something like

<button type="submit"><img src="..."></button>

i'd fail the <img> under 1.1.1 for lacking a text alternative, which then leads the <button> to fail under 4.1.2 as it lacks any other means that would provide an accessible name.

similarly, if it were a link

<a href="..."><img src="..."></a>

i'd fail the <img> under 1.1.1, leading to the link failing 4.1.2 for lack of accessible name, and also fail under 2.4.4 and 2.4.9 because the link has no actual link text.

in the case here

<button type="submit" />

though, i'd say there is nothing - no text, no non-text - inside that button. all users will experience this as a generic empty button (sighted users will see it, and non-sighted users will have their AT announce it as a generic "button", so from that point of view the button itself is non-visually conveyed appropriately). so i wouldn't fail this under 1.1.1. I would fail it under 4.1.2 for lack of accessible name.

now the open question, as said, is whether or not those three cases would also fail 3.3.2. as currently written, 3.3.2 seems to only apply to inputs where a user needs to enter information. i'll assume that it also intends to apply to things where a user makes a selection, like <select>, or groups of radio buttons, or checkboxes - though strictly the normative SC language could potentially be read very pedantically to question whether it's an input there or not.

now, does activating a button (to trigger an in-page action, like opening a modal dialog or menu, or to submit a form) count as an "input"? and if yes, does activating a link also count as an "input"? this becomes a can of worms, as suddenly 3.3.2 may actually apply to links and cover the same/similar ground to 2.4.4/2.4.9...

All 36 comments

I will say that a label can be an icon and 3.3.2 applies to visual labels (icons, text, or even another control that acts as a label). So the situation you are talking about is a button with no visual label text or icon or other associated control - this seems like an issue for all users.

In regards to whether 1.1.1 applies to the non-text portion of things like buttons and input fields -- I asked a similar question in #929 https://github.com/w3c/wcag/issues/929

My interpretation of 1.1.1 is that for controls 4.1.2 handles the requirement for a name. We should look at H44 to make that more clear. 4.1.2 handles the "what kind of thing is this and what is it called?" questions and I don't think that 1.1.1 has anything to do. I wish 1.1.1 said "If non-text content is a control or accepts user input, refer to Success Criterion 4.1.2 for additional requirements for controls and content that accepts user input." as this would be more clear.

For 3.3.2, if you have a button with no text and no image with a text equivalent, it lacks a label and would fail. If a User agent automatically adds text to the button then that is the label.

I'll think about it more, but that's my off-the-cuff response

purely thinking about the specific case here of <button type="submit"></button> ... browsers will show this simply as a completely empty button. there is no text there (as opposed to <input type="submit"> where browsers will add a generic "Submit" text). but also, there is no image or anything else that conveys any meaning/content, so I can't see how this would fail 1.1.1 ... it's a mystifying unlabelled button for all users.

For 3.3.2, if you have a button with no text and no image with a text equivalent, it lacks a label and would fail. If a User agent automatically adds text to the button then that is the label.

but 3.3.2 specifically says "when content requires user input". a button doesn't require user input...it either gets activated or not. the user doesn't enter any input (unless we stretch the definition and say that an activation is a form of input). we could also split hairs over the "required" bit ... what if a field is optional? in short, the normative wording for 3.3.2 may be a bit unfortunate...

IF the WG agrees/feels that activating a control is also a form of input, this should probably be clarified in the understanding document at least (which currently only seems to focus on examples involving text inputs where a user actively enters/types in information). maybe something along the lines of

While the normative wording of content that "requires user input" may suggest required text input fields, it is intended to be much broader and cover any form of content that allows for user interaction.

it would be nice if the normative text could be tweaked to change "requires user input" to something more generic like "allows user input or interaction", but alas this opens the whole discussion about immutability of SC normative wording again...

I couldn't help but plonk that example into a test page.

I don't think it fails 1.1.1 as there is no "text alternative that serves an equivelent purpose", because there is no meaningful visual content presented to any user. (Unless I've misunderstood the premise?)

It would fail 3.3.2 if there are no instructions above, but the addition of instructions above it would pass the wording of the SC. As a submit button, I am assuming it is being use to submit, therefore the "content requires user input" even if that field isn't the one with the input in it.

I think it does fail 4.1.2 as there is no programatic name.

but also, there is no image or anything else that conveys any meaning/content, so I can't see how this would fail 1.1.1

addendum: unless there's something else, like a CSS background image, that is used to visually denote that button, of course

I think the confusion is in the variation between the SC and the Understanding paragraphs

SC

Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)

Understanding:

For non-text content that is a control or accepts user input, such as images used as submit buttons, image maps or complex animations, a name is provided to describe the purpose of the non-text content so that the person at least knows what the non-text content is and why it is there.

I think given the Understanding clarification, we need to assume that we wouldn't fail a missing label in 1.1.1 unless its an image based control.

I'd also go with 4.1.2, (in fact I almost never fail controls under 1.1.1, when 4.1.2 catches it more explicitly and 1.1.1 says look at 4.1.2 for additional requirements)

I don't disagree that maybe 1.1.1 could be written better. But RAW (rule as written), the first bullet reads:

If non-text content is a control or accepts user input, then it has a name that describes its purpose.

A button (text or image, makes no difference) fits that perfectly. I think we have to say that 1.1.1 applies.

And perhaps in extension to this, should form fields be considered non-text content?

Yes, for the same reason. As a reminder, the WCAG definition for non-text content is expansive:

any content that is not a sequence of characters that can be programmatically determined or where the sequence is not expressing something in human language

Is it a problem if a single element fails two (or three) SC?

I also don't think it is a problem for a button (with a good name, but not clear label or instructions) to pass 1.1.1 (and 4.1.2) but fail against 3.3.2.

For the same button, would the lack of a visible label be considered a failure of 3.3.2?

Yes, but note that the phrasing of 3.3.2 provides for wide latitude as to the placement of the label.

Since there is no definition for "requires user input".

And I would hope that we do not need to write such a definition! Buttons (and form fields) are obviously a mechanism for user input.

the first bullet reads:

But the bullets are the exceptions, I'd argue the first line of 1.1.1 isn't applicable therefore the exceptions don't matter (in this scenario). No content is shown to anyone, so there isn't an equivelent purpose to be put in an alt text.

Is it a problem if a single element fails two (or three) SC?

I think we've tried to avoid that before (and it's in the 2.1/2.2 requirements), and it does make reporting in audits harder if you repeat things or have to cross reference a lot. Not a big thing to me, but it can cause more confusion for people not as familiar with the guidelines.

The 2.1/2.2 requirement is that _new_ SC not be duplicative. Part of that, of course, is because the _old_ SC overlap more than we might like!

the first line of 1.1.1 isn't applicable

I agree iff no content is being shown to anyone, but that is not the case here. @patrickhlauke mentions that:

browsers will show this simply as a completely empty button

Same as with your test page.

@patrickhlauke goes on to make the argument that clicking a button is not user input. I disagree with that analysis, as we were not trying to be that pedantic when writing 2.0!

@kengdoj points out to me that code like <button type="submit" /> _is_ “a sequence of characters that can be programmatically determined” and therefore is _not_ “non-text content”.

I remember that caveat being there so that 1.1.1 is not requiring alt text for elements like P and H1. Is non-text content much more narrow than I think? Do we have an Understanding doc just for our defined terms? If not, do we need that? For the most part, I think we pretty well address defined terms in the context of Understanding SC. OTOH, “a sequence of characters that can be programmatically determined” being text (because it is not non-text) is making my brain hurt!

@kengdoj points out to me that code like quote

That text isn't presented to the users.

@awkawk do you regard buttons and fields as being "non-text content"?

@bruce-usab Are they text? Are they content?

Button/fields are content. They are not text. I had presumed (until about an hour ago) that they were _obviously_ non-text content. But now I am not so sure!

@bruce-usab I did a similar thing. In practice, a control that is missing an accessible name is marked as a 4.1.2 issue and not as a 1.1.1 issue when we conduct an audit, but it is hard to argue that that issue doesn't also fail 1.1.1.

Does it matter if it is a 4.1.2 issue or an issue on both? Not really. I think that it confuses engineers who are trying to fix it since now they may need to understand why it fails both instead of understanding 4.1.2 and fixing it.

For 3.3.2, I agree that the argument hinges on whether a button is "user input. In practice, I don't worry about this because I haven't seen buttons that lack any form of label, and those that do would be equally inaccessible to all users.

@bruce-usab

@patrickhlauke goes on to make the argument that clicking a button is not user input. I disagree with that analysis, as we were not trying to be that pedantic when writing 2.0!

then the understanding for 3.3.2 should make that clear. as currently, it only seems to hint at text inputs and such (and RAW (rule as written) can be very narrowly interpreted without any further clarification).

@awkawk

Does it matter if it is a 4.1.2 issue or an issue on both? Not really.

well, it does for consistency's sake. if one auditor notes that your page has X errors, and another notes that your page has Y errors, you want to get to the bottom of that inconsistency. in general, I would suggest failing something for any SCs it fails. while this particular example may be an edge case, it's important to clearly be able to say if an SC applies or not in that particular case.

if it were something like

<button type="submit"><img src="..."></button>

i'd fail the <img> under 1.1.1 for lacking a text alternative, which then leads the <button> to fail under 4.1.2 as it lacks any other means that would provide an accessible name.

similarly, if it were a link

<a href="..."><img src="..."></a>

i'd fail the <img> under 1.1.1, leading to the link failing 4.1.2 for lack of accessible name, and also fail under 2.4.4 and 2.4.9 because the link has no actual link text.

in the case here

<button type="submit" />

though, i'd say there is nothing - no text, no non-text - inside that button. all users will experience this as a generic empty button (sighted users will see it, and non-sighted users will have their AT announce it as a generic "button", so from that point of view the button itself is non-visually conveyed appropriately). so i wouldn't fail this under 1.1.1. I would fail it under 4.1.2 for lack of accessible name.

now the open question, as said, is whether or not those three cases would also fail 3.3.2. as currently written, 3.3.2 seems to only apply to inputs where a user needs to enter information. i'll assume that it also intends to apply to things where a user makes a selection, like <select>, or groups of radio buttons, or checkboxes - though strictly the normative SC language could potentially be read very pedantically to question whether it's an input there or not.

now, does activating a button (to trigger an in-page action, like opening a modal dialog or menu, or to submit a form) count as an "input"? and if yes, does activating a link also count as an "input"? this becomes a can of worms, as suddenly 3.3.2 may actually apply to links and cover the same/similar ground to 2.4.4/2.4.9...

For some context, back when WCAG 2 was being finalized 2006 to 2008 we did
not have anywhere near as many semantic interactive HTML elements (such as
video, dialog, menu, etc - that became mapped to AAPIs), nor as much
scripting, as we do today. It was much easier to distinguish between text,
non-text, static and interactive content.

We weren't as lame as this conversation might suggest...:-)

On Thu, Dec 5, 2019, 5:15 PM Patrick H. Lauke notifications@github.com
wrote:

@bruce-usab https://github.com/bruce-usab

@patrickhlauke https://github.com/patrickhlauke goes on to make the
argument that clicking a button is not user input. I disagree with that
analysis, as we were not trying to be that pedantic when writing 2.0!

then the understanding for 3.3.2 should make that clear. as currently, it
only seems to hint at text inputs and such (and RAW (rule as written) can
be very narrowly interpreted without any further clarification).

@awkawk https://github.com/awkawk

Does it matter if it is a 4.1.2 issue or an issue on both? Not really.

well, it does for consistency's sake. if one auditor notes that your page
has X errors, and another notes that your page has Y errors, you want to
get to the bottom of that inconsistency. in general, I would suggest
failing something for any SCs it fails. while this particular example may
be an edge case, it's important to clearly be able to say if an SC applies
or not in that particular case.

if it were something like

i'd fail the under 1.1.1 for lacking a text alternative, which then
leads the