accessibility in email - #eoainsights
TRANSCRIPT
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• Works in every email client, Lotus Notes,
Windows Phone, Outlook, GMX, Yandex• Includes well written plain text version
True accessibility• Works in every email client, Lotus Notes,
Windows Phone, Outlook, GMX, Yandex• Includes well written plain text version• Has clear easy to understand messages
True accessibility• Works in every email client, Lotus Notes,
Windows Phone, Outlook, GMX, Yandex• Includes well written plain text version• Has clear easy to understand messages• Has a legible design
True accessibility• Works in every email client, Lotus Notes,
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?• Screen readers• Screen magnifiers• Software to add contrast or tint• Non mouse inputs
What is assistive technology?• Screen readers• Screen magnifiers• Software to add contrast or tint• Non mouse inputs
• Joysticks
What is assistive technology?• Screen readers• Screen magnifiers• Software to add contrast or tint• Non mouse inputs
• Joysticks• Blink tracking
What is assistive technology?• Screen readers• Screen magnifiers• Software to add contrast or tint• Non mouse inputs
• Joysticks• Blink tracking• Sip/puff devices
What is assistive technology?• Screen readers• Screen magnifiers• Software to add contrast or tint• Non mouse inputs
• Joysticks• Blink tracking• Sip/puff devices• Voice commands
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
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.
DyslexiaCapitalisation 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.
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.
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.
Using the right tool for the job.
Use <p> for paragraphs. <li> for lists and <table> for a tables.
Semantic code
Using the right tool for the job.
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
ARIA & HTML5• <main> role=“main”• <header> role=“banner”• <nav> role=“navigation”• <article> <aside> <details> <figcaption>
<figure> <footer> <mark> <section> <summary> <time>
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…
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…
✘ ✘
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…
✘ ✘
✘