Skip to content

aria-label-is-well-formatted.md

Latest commit

 

History

History
72 lines (49 loc) · 2.08 KB

aria-label-is-well-formatted.md

File metadata and controls

72 lines (49 loc) · 2.08 KB

aria-label is well formatted

Rule Details

[aria-label] content should be formatted in the same way you would visual 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.

Be wary of [aria-label] on disallowed elements ⚠️

You may come across a scenario where [aria-label] is set on a generic div or span. This should also be flagged with the NoAriaLabelMisuse.

In this scenario, prioritize removing the aria-label!

Resources

Config

If you determine that there are valid scenarios for aria-label to start with lowercase, you may exempt it in your .erb-lint.yml config like so:

  GitHub::Accessibility::AriaLabelIsWellFormatted:
    enabled: true
    exceptions:
      - allowed for some reason
      - also allowed for some reason

Examples

Incorrect code for this rule 👎

<button aria-label="close">
<button aria-label="submit">
<button aria-label="button-1">
<button aria-label="Go to my&#10;website.">
<a href="https://github.com/shopify/erb-lint" aria-label="github.com/shopify/erb-lint"></a>

Correct code for this rule 👍

<button aria-label="Submit">
<button aria-label="Close">
<a href="https://github.com/shopify/erb-lint" aria-label="Shopify/erb-lint on GitHub"></a>