Go to overview: Standard HTML mark-up in screenreader tests

Link issues

Addressing overly long link texts

Example 1 (bad practice)

The link text, a heading followed by teaser link text inside, is replaced by aria-label="short link text"

Some heading

Very very very unnecessarily long link text that never ends because this is a teaser text which has been stuffed into a link

I can't find a way of actually reading the teaser text on the page even in NVDA reading mode, so this looks like the wrong approach.

Example 2 (bad practice)

  1. link with focus style
  2. link with focus & hover style
  3. link with focus, hover & active style

Testing links with href and script

Link with href and alert


Example 3 - link context in p vs. div

A normal sentence in a p element with a link needing context

A normal sentence in a div element with a link needing context

Detlev Fischer, (detlev [dot] fischer [ at ] testkreis [dot] de)

Last update: 16 November 2021