Skip to content

html-aria-label-is-well-formatted.md

Latest commit

 

History

History
49 lines (32 loc) · 1.74 KB

html-aria-label-is-well-formatted.md

File metadata and controls

49 lines (32 loc) · 1.74 KB

Linter Rule: aria-label must be well-formatted

Rule: html-aria-label-is-well-formatted

Description

Ensure that the value of the aria-label attribute is formatted like natural, visual text. The text should use sentence case (capitalize the first letter), avoid line breaks, and not look like an ID or code identifier.

Rationale

The aria-label attribute provides an accessible name for elements that will be read aloud by screen readers. The text should be formatted like natural language that users would expect to hear, not like technical identifiers. Using proper sentence case and avoiding formatting that looks like code (snake_case, kebab-case, camelCase) ensures a better user experience for assistive technology users.

Examples

✅ Good

<button aria-label="Close dialog">X</button>
<input aria-label="Search products" type="search" autocomplete="off">
<button aria-label="Page 2 of 10">2</button>

🚫 Bad

<!-- Starts with lowercase -->
<button aria-label="close dialog">X</button>

<!-- Contains line breaks -->
<button aria-label="Close
dialog">X</button>

<!-- Looks like an ID (snake_case) -->
<button aria-label="close_dialog">X</button>

<!-- Looks like an ID (kebab-case) -->
<button aria-label="close-dialog">X</button>

<!-- Looks like an ID (camelCase) -->
<button aria-label="closeDialog">X</button>

<!-- HTML entity line breaks -->
<button aria-label="Close&#10;dialog">X</button>

References