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.
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:
