Accessible forms: Basics and practice
Table of contents
Why are accessible forms important?
Accessible forms are a crucial aspect of web design to ensure that all users, regardless of ability, can use websites with ease. Forms are interactive elements that are often overlooked when it comes to accessibility. The WCAG 2.1 (Web Content Accessibility Guidelines) provide guidelines to ensure that forms are accessible to all.
An example of a simple but effective measure is the use of labels in forms. These labels should be clear and descriptive so that screen readers can read them out correctly. This enables blind users to understand what should be entered in a particular field (1) . The use of placeholders should also be avoided, as they cannot be recognised by screen readers.
Reach our specialists for accessible web design
We are here to help you. Together we can master your digital challenges and promote inclusion on the Internet. Let us make your projects successful with accessible web design.
How do you design accessible forms?
Semantic form labelling: Use HTML elements such as <label> and <input> to structure forms semantically correctly. This helps screen readers to interpret the fields correctly.
Best practice example:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Absenden">
</form>
Negative example:
<form>
<input type="text" placeholder="Name">
<input type="email" placeholder="E-Mail">
<input type="submit" value="Absenden">
</form>
ARIA attributes: ARIA attributes (Accessible Rich Internet Applications) are essential for dynamic form elements that cannot be mapped natively in HTML. They provide additional information for screen readers and other assistive technologies.
Best practice example:
<div role="alert" aria-live="assertive">
Error: Please fill in all required fields.
</div>
Negative example:
<div>
Error: Please fill in all required fields.
</div>
Focus indicators: Ensure that keyboard operation is possible and that a focus indicator is available to inform the user of the current focus. This is particularly important for users who cannot use a mouse.
Best practice example:
input:focus {
outline: 2px solid blue;
}
Negative example:
input:focus {
outline: none;
}
Error handling: Implement clear and helpful error messages that inform the user about problems with the form input. This can be supported by visual hints or screen readers.
Best practice example:
<form>
<label for="password">Passwort:</label>
<input type="password" id="password" name="password" aria-describedby="password-error">
<span id="password-error" style="color: red;">The password must be at least 8 characters long.</span>
<input type="submit" value="Sent">
</form>
Negative example:
<form>
<input type="password" placeholder="Passwort">
<span style="color: red;">The password must be at least 8 characters long.</span>
<input type="submit" value="Sent">
</form>
Expertise and solution competence
Our agency has extensive experience in designing accessible websites and optimising forms so that they are accessible to all users. We support you in implementing WCAG 2.1 standards and opening up your websites to a wider target group.
FAQ on accessible forms
What are the advantages of accessible forms?
Accessible forms enable all users, regardless of their abilities, to use websites. This improves the user experience and fulfils legal requirements.
How important are labels in accessible forms?
Labels are crucial as they help screen readers to read out the form fields correctly.
What role do ARIA attributes play in form labelling?
ARIA attributes provide additional information for screen readers and other assistive technologies to make dynamic form elements more accessible.
Why is keyboard operation important?
Keyboard operation enables users to operate the website without a mouse.
How can error handling be implemented in accessible forms?
Through clear visual and acoustic messages that inform the user of problems.
What are the legal requirements for accessible websites?
In the EU, public bodies are obliged to comply with the EU Accessibility Directive.
How can you test the accessibility of websites?
By combining automatic tools and manual tests with assistive technologies.
What are the advantages of using focus indicators?
Focus indicators help users to recognise the current focus on the website.
How important is the use of semantic HTML elements?
Semantic HTML elements help screen readers to understand the structure of the website.
What role does linearisability play in form labelling?
Linearisability is important to ensure that screen readers can read the content correctly.
Conclusion
The implementation of accessible forms is not only a legal requirement, but also an essential part of an inclusive and user-friendly web design. By using semantic HTML elements, ARIA attributes, clear labels and focus indicators, we can ensure that all users, regardless of their abilities, can use our websites without any problems.
This not only improves the user experience, but also opens up our digital offerings to a wider audience. By following and continuously testing these best practices, we are helping to make the internet more accessible for everyone.
Our agency is ready to help you implement these important standards and make your websites accessible. Let's work together to make the web usable for everyone.