Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The button/link text alone should convey the function and purpose of the link.

Use aria-labelledby

To solve this issue for screen reader users you can use the aria-labelledby attribute to associate the non-descriptive link label ("Learn more..." "More..." "See more", etc) with the text of the heading of the preceding section.

...

Best practice is to try and provide descriptive link/button labels by default. However, in situations when this is not possible this technique can be used.

Use aria-label

The aria-label attribute could also be used when applicable.

By default the aria-label attribute will completely override the button label.

Describe the purpose of the link to screen reader users by using either the aria-label or aria-describedby element.

The aria-label will replace the non-descriptive link, only for screen reader users. 

The aria-label is not visible to a sighted user.

You could programmatically make the aria-label:
a) the same as the section title  OR
b) append the section title to the button label

Keeping Speech to Input Users in Mind

From a speech to input user perspective (users who are unable to type and use speech recognition software) it would be good practice to include the initial button label in the aria-label.

If a speech to input user want's to activate a button that says "Learn more" and an aria-label has been provided, the speech recognition software is going to respond to the aria label. So if the aria-label is completely different from the default label, for example "Information about London Breed", the speech recognition software will not recognize the users command.

The speech to input user will not know what the aria-label is as it is not visible to them. However if the aria-label starts out with the default button label, "Learn more about London Breed", the speech recognition software will be able to recognize that button label.