Accessibility in email - #EoAInsights

@M_J_Robbins @GoRebelmail Mark Robbins

What is accessibility?Email accessibility is about making the emails

you send accessible to as many people as possible.

What is accessibility?Email accessibility is about making the emails

you send accessible to as many people as possible.

It’s about inclusivity.

True accessibility

True accessibility• Works in every email client, Lotus Notes,

Windows Phone, Outlook, GMX, Yandex


Windows Phone, Outlook, GMX, Yandex• Includes well written plain text version


Windows Phone, Outlook, GMX, Yandex• Includes well written plain text version• Has clear easy to understand messages


Windows Phone, Outlook, GMX, Yandex• Includes well written plain text version• Has clear easy to understand messages• Has a legible design


Windows Phone, Outlook, GMX, Yandex• Includes well written plain text version• Has clear easy to understand messages• Has a legible design• Works with assertive technology

What is assistive technology?

What is assistive technology?• Screen readers

What is assistive technology?• Screen readers• Screen magnifiers

What is assistive technology?• Screen readers• Screen magnifiers• Software to add contrast or tint

What is assistive technology?• Screen readers• Screen magnifiers• Software to add contrast or tint• Non mouse inputs


• Joysticks


• Joysticks• Blink tracking


• Joysticks• Blink tracking• Sip/puff devices


• Joysticks• Blink tracking• Sip/puff devices• Voice commands

Legible design

Colour blindnessAdd in colour contrast for people with colour blindness.

THIS TEXT VERY HARD TO READ BUT DON’T WORRY WE’LL FIX THAT IN A SECOND. ACCESSIBLE TYPOGRAPHY IS A HUGE

SUBJECT SO I’M JUST SHARING SOME BASIC TIPS TO GET YOU STARTED. I’D ADVISE YOU ALL

TO READ MORE ABOUT IT WHEN YOU HAVE TIME. I’VE GOT TO FILL UP A LITTLE SPACE HERE

AND DON’T WANT TO DISTRACT YOU TOO MUCH FROM THE TALK SO I THINK YOU

SHOULD PROBABLY STOP READING THIS NOW.

DyslexiaToo much contrast can affect screen glare which is difficult for people with dyslexia






DyslexiaCapitalisation is harder to read in paragraphs






DyslexiaLarge blocks of text are harder to read

This text very hard to read but don’t worry we’ll fix that in a second. Accessible typography is a huge

subject so I’m just sharing some basic tips to get you started. I’d advise you all to read more about it when

you have time. I’ve got to fill up a little space here and don’t want to distract you too much from the talk so I think you should probably stop reading this now.

DyslexiaCentre aligned text is harder to read in paragraphs

This text very hard to read but don’t worry we’ll fix that in a second.

Accessible typography is a huge subject so I’m just sharing some basic tips to get you started. I’d advise

you all to read more about it when you have time. I’ve got to fill up a little space here and don’t want to

distract you too much from the talk so I think you should probably stop reading this now.

DyslexiaTight line spacing and letter spacing is hard to read

This text very hard to read but don’t worry we’ll fix that in a second. Accessible typography is a huge subject so I’m just sharing some basic tips to get you started. I’d advise you all to read more about it when you have time. I’ve got to fill up a little space here and don’t want to distract you too much from the talk so I think you should probably stop reading this now.

That’s betterThis text very hard to read but don’t worry we’ll fix that in a second.

Accessible typography is a huge subject so I’m just sharing some basic tips to get you started. I’d advise you all to read more about it when you have time.

I’ve got to fill up a little space here and don’t want to distract you too much from the talk so I think you should probably stop reading this now.






Screen readers(and other tabbed input devices)

Semantic code

Using the right tool for the job.

Semantic code


Use <p> for paragraphs. <li> for lists and <table> for a tables.

Semantic code


Use <p> for paragraphs. <li> for lists and <table> for a tables.

Div’s and Span’s are semantically neutral, so screen readers ignore them.

Semantic code

Using semantic text

Using semantic text

TablesTables are not good for accessibility.

You have to tab between each cell.

<table role="presentation">

<table role="presentation">

ARIA & HTML5

ARIA & HTML5• <main> role=“main”

ARIA & HTML5• <main> role=“main”• <header> role=“banner”

ARIA & HTML5• <main> role=“main”• <header> role=“banner”• <nav> role=“navigation”

ARIA & HTML5• <main> role=“main”• <header> role=“banner”• <nav> role=“navigation”• <article> <aside> <details> <figcaption>

<figure> <footer> <mark> <section> <summary> <time>



• Loads more roles too…




✘ ✘




✘ ✘

✘

Thank you!

@M_J_Robbins @GoRebelmail

Mark Robbins

Accessibility in email - #EoAInsights

Technology