How can you improve form usability and accessibility?

由人工智能和领英社区提供技术支持

Forms are essential elements of any web page that allow users to interact with the site, provide feedback, submit data, or perform transactions. However, creating forms that are easy to use, understand, and access by different types of users can be challenging. In this article, you will learn some basic tips and best practices to improve form usability and accessibility using HTML5.

在这篇协作文章中查找专家回答

由社区从 3 条内容中精选。了解更多

1 Use semantic elements

HTML5 provides several new elements that are specifically designed for creating forms, such as <form>, <input>, <label>, <fieldset>, <legend>, <button>, and <output>. These elements not only help you structure your form code more clearly and logically, but also provide semantic meaning and context for the browser, screen readers, and other assistive technologies. For example, using <label> to associate a text description with an input field helps users know what they are expected to enter, and using <fieldset> and <legend> to group related inputs helps users navigate the form more easily.

添加您的观点

Marko A. Michinaux Mogollón

Full Stack Developer(React, Typescript, NodeJs, Python)
举报内容
There are a few notable advantages by associating a <label> with a controlled form, such as <input> or <textarea>. For instance, a form control with a label is screen reader friendly, and clicking on a label propagates the focus event towards the input aswell.

已翻译

赞

2 Validate input data

One of the most common sources of frustration and confusion for users is when they submit a form and get an error message or a blank page, without knowing what went wrong or how to fix it. To prevent this, you should validate the input data before sending it to the server, and provide clear and helpful feedback to the user. HTML5 offers several attributes and types that can help you validate input data, such as required, pattern, min, max, step, and email. These attributes and types can check for the presence, format, range, and validity of the input data, and display a default error message if the data does not meet the criteria. You can also use the <output> element to display the result of a calculation or a dynamic value based on the input data.

添加您的观点

Marko A. Michinaux Mogollón

Full Stack Developer(React, Typescript, NodeJs, Python)
(已编辑)
举报内容
These are standard built-in features in html forms. For writing custom validation schemas, I suggest libraries such as Zod. This library is really tiny and requires zero dependencies, it also works both with and without typescript.

已翻译

赞

3 Enhance user experience

Besides validating input data, you can also use HTML5 to enhance the user experience of your forms by making them more interactive, responsive, and intuitive. For example, you can use the placeholder attribute to show an example or a hint of what the user should enter in an input field, or use the autocomplete attribute to suggest possible values based on the user's previous input. You can also use the autofocus attribute to automatically focus on the first input field when the form loads, or use the multiple attribute to allow the user to select or upload more than one file at a time. Additionally, you can use the new input types, such as date, color, range, and number, to provide a more user-friendly interface for entering specific types of data.

添加您的观点

4 Ensure accessibility

Accessibility is the practice of making web content accessible to everyone, regardless of their abilities, disabilities, or preferences. Not only is it a moral and legal obligation, but it also offers benefits in terms of usability, performance, and reputation. To ensure accessibility, you should follow the Web Content Accessibility Guidelines (WCAG), which provide a set of principles and techniques for creating accessible web content. These include using descriptive and meaningful labels for input fields associated with the for and id attributes, grouping related inputs with fieldsets and legends, indicating mandatory fields with the aria-required attribute, linking an input field with a supplementary description or instruction using the aria-describedby attribute, announcing dynamic changes in the form using the aria-live attribute, and providing alternative ways to submit the form. By implementing these tips and best practices when creating forms using HTML5, you can improve usability and accessibility while making them more user-friendly, functional, and inclusive.

添加您的观点

5 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Aman Rajput

Founder @ Bytes and Brand | Digital Marketing
举报内容
It can be done with the help of form, label, input, fieldset, button and output. It is very simple as others, form has rememberable attributes that you can learn easily.

已翻译

赞

HTML5

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

How can you improve form usability and accessibility?

1

2

3

4

5

1 Use semantic elements

2 Validate input data

3 Enhance user experience

4 Ensure accessibility

5 Here’s what else to consider

HTML5

给文章评分

感谢您的反馈

更多HTML5相关文章

更多相关阅读内容