View the library of solutions.

Welcome to an Accessible Form

To see error handling click the submit button.

Error messages will be tied to their offending input fields using aria-describedby and aria-invalid

Fake link. Voluptatem corrupti possimus sit, sequi, quo corporis ipsa, perferendis ipsum, voluptates eius maxime sint ex assumenda? At atque dolorem dolorum qui maiores.

Tracking Your Eating Habits

Honorific

First Name

Last Name

Birthday write in MM/DD/YYYY format

Another Name

What is your favorite time to eat? (example with nested label/input)

morning afternoon evening

What are your favorite foods? (examples with sequential label/input)

Favorite Fruits

apples

oranges

Favorite Vegetables

lettuce

carrots

Custom Radio And Checkboxes

To make image replacement work I have:

Used SVGs so that they will still show up in high contrast mode.
Nested the input and SVGs within their labels.
Added the SVGs as next siblings of their input fields.
Positioned the actual input fields behind their SVGs.
Made sure SVG focusable="false" and role="presentation".
Insured that focus is shown on the SVG when the input has focus.

What is your favorite place to eat? (example with image replacement)

home restaurant

What do you have for breakfast?

oatmeal

eggs

Tell Us About Yourself

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem corrupti possimus sit, sequi, quo corporis ipsa, perferendis ipsum, voluptates eius maxime sint ex assumenda? At atque dolorem dolorum qui maiores.