name-inappropriate-multipart
Rule Severity : Serious
Description
Parts of a multipart field must have descriptive and accessible names to ensure that users, especially those relying on assistive technologies, can understand the purpose and function of each part. This rule ensures that complex fields, such as those with multiple input areas or components, are properly labeled and described.
The name-inappropriate-multipart
rule aligns with WCAG Success Criterion 2.4.6 (Headings and Labels), which requires that a page’s content is described in headings and labels. In this particular rule, labels are considered, not headings.
Examples
In the following example, a multipart field for entering a date is not properly labeled. Each part of the field (day, month, year) lacks a descriptive accessible name (e.g. using DD instead of ‘Day’, which is not descriptive enough), making it difficult for users of assistive technologies to understand the purpose of each input.
In the following corrected example, each part of the date field is given a descriptive accessible name. This ensures that users of assistive technologies can clearly understand the purpose of each input.
How to fix?
To fix violations of the name-inappropriate-multipart
rule, follow these steps:
- Identify all multipart fields on your webpage.
- Ensure that each part of the field has a descriptive and accessible name.
- Use appropriate attributes like
aria-label
oraria-labelledby
to provide accessible names for each part. - Test the fields with assistive technologies to ensure that the names are correctly conveyed.
Reference
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!