Best practice

A descriptive link lable contributes significantly to the  findability and accessibility of our content. A descriptive link label generates a sincere expectation from the visitor and should fulfill it. A link label should be meaningful enough to stand on its own and should still be short and concise.

Many blind people who use screen readers call up a dialog box that has a list of links from the page. They use this list of links to decide where they will go. But if many of the links in that list simply say "click here" or "more" they will be unable to use this feature in their screen reader, which is a core navigation strategy.

If it's not possible to use descriptive label

Good example

In addition to the link text, this component also contains hidden text for the screenreader.

Screenreader says:

"Show more asset management homepage link"

Source code:
"...<span class="actionbutton__txtbody>Show more</span>...<span class="hidden is-visuallyHidden>"Asset Management Homepage</span>..."

Bad example

Only the link text is included in this link component.

Screenreader says:

"Show more link"

Source code:
"...<span class="actionbutton__txtbody>Show more</span>..."

How to use it

  • Use meaningful, concise phrases or keywords for link text and create a clear call-to-action
  • Link-text must be self-explanatory and express what the target is. Don't use meaningless link text like 'more‘ or ‘Download’, but 'Asset Management Homepage' or 'Download Asset Management Overview (PDF)'
  • In the button-component, use the prepared hidden text field for giving screen readers additional text for a good link (see good example)
  • Avoid using URLs as link text
    • Long URLs can be confusing and difficult to read, especially for screen readers
    • Instead, use a descriptive phrase that represents the link’s destination
  • Try to avoid long phrases or complete sentences

Crosslinks

Editor has full control
This label indicates that the editor has full control and a thorough editing is necessary.

Reference for publisher

aem view

Author view in AEM: on the Accessiblity part you can integrate hidden text

Link behind image

Links behind an image are not forbidden as such. It is essential to make sure for every visitor that it is clear where the link leads to. The goal is to ensure that the end user knows what the purpose of the link is.

Accordingly, on the one hand, the alternative text must indicate for the visually impaired where the link goes and, on the other hand, from a usability point of view, it must be ensured that the link behind the image is pointed out in context or that there is a visible link next to or below the image.

aem view

Always indicate the target clearly

For example, "Find out more" is not clear enough. It is possible to insert an additional "hidden text" to the link text that will be read by a screen reader. Find this option in the "Link" tab. But don't repeat the text that is visible in the button.

aem view

Always indicate the target clearly

Always indicate the target clearly. For example, "Quick reference guide" with an pdf-icon is not clear enough. Please also use the text "download pdf" as the icon is not mentioned in the screenreader.