Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Current »

Links

In some situations, designers may choose to lessen the visual appearance of links on a page by using shorter, repeated link text such as "read more", "Learn more" "See details" etc. 

These types of non-descriptive links are not helpful to screen reader users. 

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

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

Example:

<div class="mb-20">  <a href="https://sfelections.sfgov.org/ " class="btn btn-inverse" target="_blank" rel="noopener" aria-label="Read more about voting on November 8">Read more</a></div>

New Windows

From an accessibility perspective, the preference would be to always open links within the same window rather than opening them up in a new window. 

The reason for this is that some users, especially screen reader users, can get confused or disoriented with the new windows or tabs. If a new window or tab is opened a screen reader user should be notified of this ahead of time. Newer screen readers will alert the user when a link opens a new window, but this only happens after the user clicks on the link. Older screen readers don’t alert users at all. Sighted users with cognitive disabilities may also have difficulty interpreting what just happened when a new tab/window is opened. Then when they try to click on the browser Back button nothing happens, because there is no previous link to go back to in a new window or tab.

  • No labels