diff --git a/docs/rules/accessibility/aria-label-is-well-formatted.md b/docs/rules/accessibility/aria-label-is-well-formatted.md index e8fc344..90b4a67 100644 --- a/docs/rules/accessibility/aria-label-is-well-formatted.md +++ b/docs/rules/accessibility/aria-label-is-well-formatted.md @@ -2,10 +2,18 @@ ## Rule Details -`[aria-label]` content should be formatted in the same way you would visual text. Please use sentence case. +`[aria-label]` content should be formatted in the same way you would visual text. -Do not kebab case the words like you would an HTML ID. An `aria-label` is different from `aria-labelledby`. -An `aria-label` is not an ID, and should be formatted as human-friendly text. +Keep the following practices in mind: + +- Use sentence case. +- Do not kebab case the words like you would an HTML ID. An `aria-label` is different from `aria-labelledby`. An `aria-label` represents the name of a control, and has the same purpose as a visual label would for screen reader users. Therefore, it should be formatted as human-friendly text. +- Do not use line-break characters like ` `. An accessible name should be concise to start with. +- Do not set the `aria-label` to a URL. Instead, use an appropriate human-friendly description. + +## Resources + +- [Staff only: Guidance on naming controls](https://github.com/github/accessibility-playbook/blob/main/content/link-and-button-guidance.mdx#guidance-on-naming-controls) ## Config @@ -35,6 +43,14 @@ If you determine that there are valid scenarios for `aria-label` to start with l + HTML @linter.run(processed_source) - assert_equal 4, @linter.offenses.count + assert_equal 5, @linter.offenses.count end def test_does_not_warn_when_aria_labelledby_starts_with_downcase