Build a More Accessible Web Form for a Student Project
Practical label, validation, keyboard and mobile checks to make registration and contact forms easier for everyone to use.
A form may look polished and still be difficult to use with a keyboard, screen reader or small phone. This guide shows concrete checks you can apply to a contact or registration form without redesigning the entire website.
Start with an understandable label
Every form control needs a clear visible label connected with the input element. Placeholder text is useful for examples, but it should not replace a label because it disappears as soon as someone starts typing.
Use an HTML label's for attribute with the matching input id, or wrap the input inside the label. Mark required fields clearly in words, not only with a coloured asterisk.
Keep validation actionable
If a user enters an invalid email address, a helpful message says what to correct: 'Enter an email address such as student@example.com.' A generic 'Something went wrong' provides no useful next step.
Place the error near the relevant field, connect it with aria-describedby when appropriate and preserve already entered values. Avoid relying on colour alone to communicate errors.
- Test empty required fields.
- Test invalid and valid email formats.
- Submit after correcting an error.
- Check errors are announced or described to assistive technology.
Test keyboard-only navigation
Starting from the top of the page, use Tab and Shift+Tab to reach each interactive element. Confirm that the focus indicator is visible, the order follows the reading flow and submitting with a keyboard works.
Do not trap keyboard focus inside a popup. A dialog should clearly identify its purpose, have a working close control and return focus sensibly when it closes.
Check the experience at mobile width
At around 320–375 CSS pixels, labels and error text should wrap rather than overlap fields. Keep tap targets comfortable and ensure the form does not require horizontal scrolling to reach Submit.
Finally, test with zoom and increased text size. Responsive behaviour is not only about screen width; it also includes what happens when text becomes larger or the user needs more spacing.
Quick checklist
- Inputs have associated, visible labels.
- Errors identify what must be changed.
- Colour is not the only error indicator.
- The form is usable using a keyboard only.
- Focus order and indicators are predictable.
- Mobile and text-zoom layouts were checked.
Always confirm current syllabus, coursework and assessment rules with your institute or lecturer.