Accessible Text Links #1

Creating accessible text links with border-bottom, padding-bottom and a few hacks

At Litmus Live, London, 2017, in my session, Accessibility in Action, I talked about some of the recent techniques I’d been implementing in my email, Type E:, to make it more accessible — constructing it with <div>s instead of <table>s (with fallbacks for Microsoft Outlook) — using HTML5 semantic elements to define sections of content, like the <header>, the <nav> and the <footer> — and using border-bottom instead of text-decoration on text links.

Accessibility in Action, Litmus Live, London, 2017

I started using border-bottom instead of text-decoration on text links to benefit people living with dyslexia, for whom underlining can cause text to run together, or collide.

This technique seemed to gain a great deal of interest at the conference, so I decided to write this short tutorial and codepen, to help those who’d like to implement it into their email campaigns.

Creating an accessible text link with border-bottom

Creating an accessible text link with border-bottom is a two step process:

1.
Remove text-decoration from the text link, applying a style of text-decoration:none; inside the opening <a> tag:

<a href=”” target=”_blank” style=”color:#000000; text-decoration:none;”>

2.
Wrap the text link text within a pair of <span> tags, then apply border-bottom (defining its weight in px, type and colour), and padding-bottom (defining the space between the text and the border in px), inside the opening <span> tag:

<span class=”textLink” style=”padding-bottom:2px; border-bottom:1px solid #ee0000;”>Text Link</span>

Hacks

No implementation of an email technique would be complete without its hacks, and this is no exception. Outlook doesn’t render border-bottom, so an MSO conditional needs to be added to restore text-decoration:

<! — [if mso]>

<style type=”text/css”>