Forms
Back to complex components
Forms have several layout considerations. First they must be enclosed inside '<form></form>'. Second each input grouping MUST be inside of '<fieldset></fieldset>'. Also each fieldset MUST have a legend. For input accessibility, please look at the individual components under "form".
WHEN I am navigating using a keyboard.
AND I tab on a form input.
THEN I see a visual indicator.
AND I tab again
THEN I am taken to the next logical form input.
WHEN I am navigating using a keyboard.
AND I tab on a form input.
THEN I see a visual indicator.
AND I ctrl + tab
THEN I am taken to the previous form input.
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.
WHEN I am navigating using a screen reader.
AND I enter on a form input that is required.
THEN The screen reader informs me this is a required field.
WHEN I am navigating using a screen reader.
AND I submit the form.
AND Errors occur on form validation for "reasons".
THEN I am informed of the errors and how to correct
AND My cursor is focused inside of the first error field.
AND I am informed of what error number it is (ie 1 of 3)
AND There is a visual indicator of the error and how to correct.
WHEN I am navigating using a screen reader.
AND I submit the form.
AND Errors occur on form validation for "reasons".
AND My cursor is focused inside of the first error field.
AND I hit "tab"
THEN Focus is moved to the next error and I am informed of the error number and how to correct.
AND I tab on a form input.
THEN I see a visual indicator.
AND I tab again
THEN I am taken to the next logical form input.
WHEN I am navigating using a keyboard.
AND I tab on a form input.
THEN I see a visual indicator.
AND I ctrl + tab
THEN I am taken to the previous form input.
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.
WHEN I am navigating using a screen reader.
AND I enter on a form input that is required.
THEN The screen reader informs me this is a required field.
WHEN I am navigating using a screen reader.
AND I submit the form.
AND Errors occur on form validation for "reasons".
THEN I am informed of the errors and how to correct
AND My cursor is focused inside of the first error field.
AND I am informed of what error number it is (ie 1 of 3)
AND There is a visual indicator of the error and how to correct.
WHEN I am navigating using a screen reader.
AND I submit the form.
AND Errors occur on form validation for "reasons".
AND My cursor is focused inside of the first error field.
AND I hit "tab"
THEN Focus is moved to the next error and I am informed of the error number and how to correct.
More Information
Forms MUST help the user correct any errors. This should be done via text and a visual indicator. Color alone is NOT enough. This AC covers "standard" validation. For "just in time" validation, please see the AC for just in time.