Form Input
Back to simple components
Form inputs must be checked to see if they indicate focus, have an associated label, and be screen reader accessibile.
WHEN I click on a form input label.
THEN My cursor is inside the input field and it is focused.
WHEN I am navigating using a keyboard.
AND I tab on a form input.
THEN I see a visual indicator.
AND The focus indicator passess WCAG rule.
WHEN I am navigating using a keyboard.
AND I tab on a form input.
AND I am using a screen reader
THEN The screen reader reads out a label for the input.
,
THEN My cursor is inside the input field and it is focused.
WHEN I am navigating using a keyboard.
AND I tab on a form input.
THEN I see a visual indicator.
AND The focus indicator passess WCAG rule.
WHEN I am navigating using a keyboard.
AND I tab on a form input.
AND I am using a screen reader
THEN The screen reader reads out a label for the input.
,
More Information
Form inputs MUST have an associated label, placeholder text is not enough. Error handling is also a must have for 90% of use cases, this is covered in the overall forms AC. In more complex cases, label text may not be enough. There are other solutions to provide screen reader feed back listed in the links below.