In web accessibility, which text is part of the visible label?

In terms of conformance with the Web Content Accessibility Guidelines, the placement and design of visible labels is flexible. The main requirement is that the visible label should be clearly visually associated with the field, and there are many potential ways to accomplish this.

When the visible label is complex, consider which parts of the label are closest to the field visually, and also which parts are necessary to understand the label’s purpose. Ideally the text that best describes the field’s purpose should also be closest to that field. If that’s not the case, consider adjusting the label’s wording or design.

It’s critical to programmatically relate the visible label and other associated text to the field it describes. The label text that briefly describes the field’s purpose should be included in its accessible name, while text that provides instructions or context should be associated as an accessible description (such as using aria-describedby).

Finally, when implementing a creative or complex approach to interactive content, it’s a great idea to conduct testing with real users. This will help you understand what’s being clearly communicated, and what’s being missed.

For real user feedback, learn more about accessibility testing from Accessible Web.