Working example #2 of the ARIA21 Technique does not work as described

[baldino-m]

As per the Example 2 description:

And when no data is entered in the email field, the HTML code is:

<div class="control">
  <div><label for="email">Email address: [*]</label> 
    <input type="email" name="email" id="email" class="error"
     aria-invalid="true" aria-describedBy="err_2">
  </div>
  <span class="errtext" id="err_2">Error: Input data missing</span>
</div>

And this does not reflect what happens on the working example 2 page, where the email field container, after a submission with an empty value, is coded as follows:

    <p>
        <label for="email">Email address: [*]</label>
        <input type="text" name="email" id="email" aria-describedby="err_1" class="error">
        <span class="errtext" id="err_1">Error: Input data missing</span>
    </p>

As per my understanding, this is correct, since aria-invalid is required if the field in error cannot be programmatically determined, while here the aria-describedby attribute provides all necessary programmatic information. The use of the aria-invalid attribute here would not be an accessibility issue; some might argue that it is a bit repetitive (since the accessible description makes clear that the field is in error), some might say that it reinforces the concept (and that some assistive technologies/user agent plugins/etc. might also specifically target aria-invalid="true" fields and do something with them), so it can be useful even when not strictly necessary.

Please also note that the example treats the "empty value" and "incorrect data format" scenarios differently:

• for the empty value, no aria-invalid attribute. Everything relies on the aria-describedby attribute;
• for the incorrect input, an inline error message is provided, but not implemented as an accessible description. aria-invalid is used here.

I think this was done on purpose to show why aria-invalid is necessary for the second scenario only.

I propose to edit the ARIA21 Technique page:

• updating the <code> section;
• explaining why the example handles the two scenarios differently;
• making clear that using aria-invalid in conjunction with aria-describedby is not a mistake and it can be beneficial.

If my assumptions are wrong, then the working example code is to be updated to reflect what is currently described on the technique page.