0

Consider the following:

<label for="fav-pizza">Favourite Pizza (required)</label>
<input type="text" id="fav-pizza" required="required" />
<p>For example, Pepperoni, Meat feast, or Hawaiian</p>

I know it's best practice for the help text to be programmatically-associated with the input via the use of aria-describedby however I'm trying to find out if it's a WCAG 2.1 requirement. Would this be a failure point if it isn't programmatically-associated.

The same question goes for inline error text, for example the following is displayed after the user submitted the form and the page reloaded:

<label for="first-name">First name (required)</label>
<input type="text" id="first-name" required="required" />
<p class="error">Error: enter your first name.</p>

Is it a WCAG 2.1 (AA) failure if the error text is not programmatically-associated with the input?

I've read through the following and I'm struggling to get a clear answer: 1.3.1 Info & Relationships (Level A) 3.3.1 Error Identification (Level A) 3.3.2 Labels or Instructions (Level A) 3.3.3 Error Suggestion (Level AA)

It's worth noting that 3.3.2 Labels or Instructions (Level A) gives a sufficient technique of G131 Providing descriptive labels coupled with ARIA1 using the aria-describedby property to provide a descriptive label for user interface controls. Also Deque's accessibility checklist states that "Programmatic Association of Input Instructions: Instructions for an element MUST be programmatically-associated with the element." required under 3.3.2 - though I can't find anything to suggest that is correct.

Jimothey
  • 2,414
  • 9
  • 41
  • 66
  • I will drop you a full answer over weekend but the short answer is that this "passes" WCAG (which is why you haven't been able to answer your own question despite the massive amount of research you have done!) - but as you pointed out it is not the best way to do things and is not a great experience for screen reader users who may miss the notifications! What do you want to see in an answer? e.g. best way to do it, minimums to pass, ways to do it without `aria`, JS fallbacks etc? Is the above HTML what you have to work with or can you use a completely different pattern? – GrahamTheDev Mar 26 '21 at 18:40
  • Thanks for the response. I was really trying to get conformation this was or was not an outright failure. I'm aware of the poor SR experience it would offer. I'd be interested in your opinion of the minimum required to pass. I've found some discussion of this exact situation on wcag github issues. It sounds like while it isn't a concrete failure, many people would fail this on an audit due to them not being programmatically associated. – Jimothey Mar 27 '21 at 15:45

0 Answers0