The meaning of information is not provided only by the color, size, and position of the element. Structures should be structured using h* or strong etc, so that information can be transmitted properly without CSS.
Replace b and i elements with strong / em elements for emphasis purposes.
For u, s, strike, basefont, center and font elements, please use CSS instead to separate structure and representation. In the case of s or strike it may be replaced by del element.
Headings h1 to h6 should be descending in order. If h1 is a big headline, h2 is a middle headline, and h3 is a subheading, it is unnatural for h3 to appear next to h1.
An example of NG would be such things as "the picture on the right ..." "red squares on the calendar ..." "items with red letters are required". However, providing information such as "The person on the upper right in the photo ..." is not this. Also note that this success criterion does not necessarily say that calendar holidays should not be represented in red. For those who do not know the color, there is no need to disturb the easy-to-understand person who understands the color, while providing it in a way that makes it clear.
When using form, you can improve the accessibility of form by using label. In fact, in HTML 4.01, even if multiple labelable elements are included, it is not a grammar violation, but accessibility support is not very sure, so it is safer to have one-to-one correspondence for no particular reason.
Many screen readers read the title attribute value of the input element etc. as a label, but if label and title are both written, it is safer to match them. Please pay attention to the title attribute that expected tooltip display from that point of view. Also, if you are expecting tooltip display, it is often displayed only with hover, and it seems that it is often not displayed in focus. Please pay attention to this point as well.
placeholder attribute can not be used as label. Since the placeholder attribute becomes invisible when it is input, some screen-reder, can not read placeholder attribute.
WAI-ARIA attributes aria-label and aria-labelledby are becoming widespread, but at the moment it is safer to have a label (or title) for screen readers.
In the case of a table, it is desirable to make it meaningful by making it linear information. Moreover, it is even better that you can use thead, th etc correctly. It may be difficult for a technician to make the table linear information. Please think that the principle is "read from the upper left to the lower right." It is also effective to check with a screen reader.
For forms, checkbox, radio, etc. should be marked up with label and associated. By doing so, the screen reader makes it easier to understand each item, making clicks easier for users who are difficult to use pointing devices such as a mouse.
If there is a required item in the form, please do not provide information dependent only on the visual sense that it is a required item. For example, how to provide required items such as "items with red letters are required" is NG.
| Principle | Perceivable | Information and user interface components must be presentable to users in ways they can perceive. |
|---|---|---|
| Guideline | Adaptable | Create content that can be presented in different ways (for example simpler layout) without losing information or structure. |
| Criterion | Info and Relationships (1.3.1 A) |
The information, structures, and relationships presented in some way are programmatically interpretable or provided in text. |