aria-label is well formatted

September 21, 2023 · View on GitHub

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

Staff only: Guidance on naming controls

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>