A form is where a site's accessibility shows most: it is where a person has to act, not just read. Formulus does what is needed without any setting, and it does not let you undo it by accident.
Every field says what it expects
- A written label, linked to its input, always above it, never replaced by a placeholder.
- "(required)" written in full at the end of the label, not a lone star, and a sentence explaining it above the form.
- The help text and a file's instructions (formats, size) are linked to the field: a screen reader reads them with it.
- The right keyboard on a phone: the @ sign for an email, the number pad for a phone, and the browser's autofill for the email address and the number.
Groups
- A titled row is a group (
fieldsetandlegend): the screen reader announces "Your details" on entering it. Its description is linked to it. - Radio buttons and checkboxes are grouped under their question, given as the group's legend.
Errors
- At the top of the form, a summary: "The form contains 2 errors", then the list, each line a link leading to the field.
- Under each faulty field, the word "Error" written out, an icon, and a sentence saying what to fix: "this email address is not valid. Write it as
This email address is being protected from spambots. You need JavaScript enabled to view it. , without spaces", not "Invalid field". - Focus moves to the summary when the page comes back, and what the visitor typed is kept, attached file included.
- Never colour alone: every alert has a written heading and an icon, under Corpus as under Cassiopeia.
Success
The thank-you message replaces the form, it is politely announced to screen readers, and focus moves to it.
Targets
At least 44 pixels high for every input, list, button, and every checkbox line: the box is 24 px, and its whole label ticks it.
Links and the rest
- The link to the terms or the privacy policy is outside the box's label (clicking the label ticks the box), and opening in a new window is announced.
- The honeypot is invisible, out of the keyboard order and hidden from screen readers: it only bothers bots.
- The recommended CAPTCHA sets no visual or audio challenge: the computer does the work.
- Row titles can take a real heading level (H2 to H6), for a correct page outline.
In the administration
The building screen works with the keyboard: foldable sections that announce their state, toggles (star, eye) that say theirs, focus that moves into the Settings block when it opens and back to the cog when it closes, badges whose number is read out.
Up to date for Formulus 1.0.237.