A common occurrence I’ve seen time and time again with current web design trends is to put anchor links within a sentence. For documents that require citations, I can understand this process, but for general text and informatics it is really quite frustrating to navigate when using a screen reader. VoiceOver, JAWS, NVDA, and others will read the first part of the sentence up to the inline link and then stop talking, making the user navigate so the screen reader can hear the link text, then navigate again to continue hearing the rest of the sentence, breaking the overall logical flow through the information.
For example, consider this text:
This is asentence with inline links.
The way a screen reader would read out this sentence when a blind user encounters it is “This is a,” then the user would navigate to the next element to have the screen reader say “Link: sentence,” then navigating again the screen reader would land on just the word “with” and require yet another navigation swipe or arrow press to land on the “Link: inline links” text. The additional problem in this example is the orphaned full stop at the very end of the sentence since screen readers will see it as its own focusable element as it lies outside of the anchor link tag.
The second issue is solved in the easiest of ways. Just add the period to the end of the last inline link to complete the sentence like so:
<a href=“”>inline links.>/a>
The first issue requires copy redesign and overall rethinking on how users will access the site and its contents. Bisecting sentences with links reduces the cognitive flow through the site and can trip up someone’s ability to retain the information being presented within the sentence if they have to manually move the cursor through it just to continue the line of thought.
I always recommend that links be added as a separate sentence after the original string and be labeled using meaningful text per WCAG 2.1 Level A criteria.
This is an informative sentence. Find more about sentence information here.
This allows a screen reader user to hear the entirety of the first sentence without it being bisected, and then the important informational link appears after the sentence as its own string, punctuation included, that allows for a more understandable flow through the experience. The link has meaningful text so a user jumping through the site using Link by Link navigation will easily understand it without the surrounding paragraph context, and there are no orphaned periods hanging outside of the anchor links for screen readers to focus on. A sentence requiring 5 separate navigational steps is now reduced to 2 navigational steps and are clearly announced in their entirety by the screen reader.
More work should be done on general user agent interaction by the individual screen readers when encountering sentences filled with inline links when it comes to documents that require them, such as paragraphs filled with footnotes, same-page navigation links, and links to external citations. Screen readers should be able to announce full strings without getting interrupted by inline links, but also provide a mechanism to navigate into the strings to tap on the inline links. The user will not have cognitive flow interrupted and can hear the full paragraph with links in the context, and also be able to navigate through the paragraph to interact with the links themselves without having to navigate word by word or lose the context of the link if understanding requires the surrounding context.
So, until this occurs with all of the browsers and screen readers, don’t use inline links if you can help it!