Duplicate accName Confusion in Forms Tutorial

[aardrian]

Issue

The Hiding label text section of the Labeling Controls forms tutorial uses duplicate accNames for two different controls that are part of the same form.

WCAG Notes

This has caused confusion about what is the visible label for the text box in the context of the following SCs:

• 1.3.1Info and Relationships for thinking the button text is the field label,
• 2.4.6 Headings and Labels for thinking the button text is the field label (yes, same as the 1.3.1),
• 2.5.3 Label in Name for believing the text box meets it thanks to the button label (as opposed to N/A),
• 3.3.2 Labels or Instructions because the text box has no visible label and devs want to extrapolate to other fields.

I am using the passive voice with "has caused confusion" because these SCs and comments came my way from non-practitioners more than once, each from assorted places (clients).

Interaction Bits

With voice control, when a user tries to select the Search button they are prompted to choose whether they meant the input or the button.

Screen reader elements lists at least disambiguate between buttons and text fields.

Suggested Change(s)

Change the accName of the text fields to "Keywords".

Code Changes

So Approach 1 (why is that part of the heading CSS generated content anyway?):

<label for="search" class="visuallyhidden">Search: </label>
<input type="text" name="search" id="search">
<button type="submit">Search</button>

Would become:

<label for="search" class="visuallyhidden">Keywords: </label>
<input type="text" name="search" id="search">
<button type="submit">Search</button>

Approach 2 would go from:

<input type="text" name="search" aria-label="Search">
<button type="submit">Search</button>

To:

<input type="text" name="search" aria-label="Keywords">
<button type="submit">Search</button>

And Approach 3 would go from:

<input type="text" name="search" aria-labelledby="searchbutton">
<button id="searchbutton" type="submit">Search</button>

To:

<span id="fakeLabel">Keywords: </span>
<input type="text" name="search" aria-labelledby="fakeLabel">
<button id="searchbutton" type="submit">Search</button>

I am pretending Approach 4 does not exist. Not very mature of me, but whatever.

Maybe Language Changes

• Adjust the guidance to qualify that as a search form it gets some allowance on missing visible text from the commonly understood pattern. Or don't use a search form.
• Identify the button label as not the same as the text box.
• Identify that the text field would not pass 2.5.3, but instead 2.5.3 does not apply.

[brianelton]

Suggested fixes in PR #596 can be updated at the same time as this

[brianelton]

Will look at section on the use of title for labeleing, as noted in #341