This week, I want to showcase two policies covering a similar problem around email links. When placing email links, like other linked content on a web page, it's essential to consider the user's experience.
Follow these policies to ensure email address links are accessible:
Policy 1: Email Link without Mailto
Sometimes screen readers will miss a broken link depending on the link's HTML. Suppose your email link looks like this <a href="murphykp@stanford.edu">
instead of this <a href="mailto:murphykp@stanford.edu">
. The first HTML example will result in a broken link, but might not be as noticeable as a normal 404 error. Adding "mailto" to your email link will ensure your link works properly and is accessible to screen readers. This Siteimprove policy covers this issue.
Policy 2: Emails without links
Copy/pasting an email address can be difficult for users with certain disabilities, such as issues with dexterity. Instead, wrap your emails in links. If you code your email link like this <p>murphykp@stanford.edu</p>
(no link around an email address), the link is not accessible to all users. Instead, your email address should be wrapped in a link like this:
<p><a href="mailto:murphykp@stanford.edu">murphykp@stanford.edu</a></p>
View this Siteimprove policy to learn more.