Links

Provide Context to help make "Read More" easier to read. And do what you can to get them in buttons. This helps on mobile phones. And do not use color alone for links.

Link Context

  • Read More and/or Learn More links alone can confuse a screen-reader user who may be navigating through a list of links.

  • Consider using CSS or ARIA-label to hide a portion of the link text, of which is accessible to screen-readers.

Example of ARIA-label used for Link Purpose, in which it repeats the heading.

Link Styling

  • In body content, do not make links distinguishable by color alone. It must have a non-color means of identification on both mouse hover and keyboard.

  • Link text must have a 3:1 contrast ratio surrounding non-link text