Examples
HTML Accessible Form
Creating an Accessible Form
HTML accessible form uses <label> and ARIA for screen reader support.
Introduction to Accessible Forms
Creating accessible forms in HTML is crucial for ensuring that all users, including those using screen readers, can interact with your web applications effectively. In this guide, we will explore how to use the <label> element and ARIA attributes to enhance form accessibility.
Using <label> for Form Elements
The <label> element is used to provide labels for input elements in a form. Associating a <label> with an input element improves accessibility by allowing screen readers to announce the input's purpose. To associate a <label> with an input, use the 'for' attribute with the input's 'id'.
Implementing ARIA Attributes
ARIA (Accessible Rich Internet Applications) attributes enhance accessibility by providing additional information to assistive technologies. Common ARIA attributes used in forms include aria-label, aria-labelledby, and aria-describedby.
Use these attributes to provide explicit instructions or descriptions that are not visible on the screen:
Example of an Accessible Form
Here's a complete example of a simple accessible form using both <label> elements and ARIA attributes:
Conclusion
By using <label> elements and ARIA attributes, you can significantly improve the accessibility of your forms, making them more usable for people relying on assistive technologies. Implement these practices to ensure that your forms are inclusive and user-friendly for everyone.
Examples
- Previous
- Video Player
- Next
- Canvas Chart
