Re: Mandatory fields

Hi Sarah,

All mandatory form fields should be:
Programmatically identifiable
Visually identifiable

Programmatically

Either of the solutions below will set the field as “required" in the accessibility tree:

<input> with required
https://russmaxdesign.github.io/accessible-forms/required01.html <https://russmaxdesign.github.io/accessible-forms/required01.html>

<input> with aria-required
https://russmaxdesign.github.io/accessible-forms/required02.html <https://russmaxdesign.github.io/accessible-forms/required02.html>

Visually

There are a range of methods that visually identify mandatory fields. As Marc Haunschild mentioned, an asterisk on its own would not comply - unless there was also some sort of key above the form. Even then, this solution presents accessibility concerns. One solution is to add text saying "(Required)" to the label, so that this information is presented visually.

<input> with required and "(Required)" added to label text
https://russmaxdesign.github.io/accessible-forms/required04.html <https://russmaxdesign.github.io/accessible-forms/required04.html>

<input> with aria-required and "(Required)" added to label text
https://russmaxdesign.github.io/accessible-forms/required08.html <https://russmaxdesign.github.io/accessible-forms/required08.html>

You COULD choose to hide the visual "(Required)" text from the accessibilty tree using aria-hidden="true", but be aware this could possibly present issues for some voice command tools in some situatiosn

<input> with required and aria-hidden="true" applied to "(Required)" text
https://russmaxdesign.github.io/accessible-forms/required05.html <https://russmaxdesign.github.io/accessible-forms/required05.html>

<input> with aria-required and aria-hidden="true" applied to "(Required)" text
https://russmaxdesign.github.io/accessible-forms/required07.html <https://russmaxdesign.github.io/accessible-forms/required07.html>

HTH
Russ




> On 13 May 2022, at 11:48 pm, Ms J <ms.jflz.woop@gmail.com> wrote:
> 
> Hello
> 
> For 3.3.2 do mandatory fields need to be identifiable as such in the label in the first instance? Or is it sufficient to use error handling to prompt users to complete the form?
> 
> If fields are marked with an asterisk and error handling is used to inform users when they have missed a required field, but the asterisk is not explained, does this fail 3.3.2?
> 
> Thanks
> 
> Sarah