A presentation at Litmus Live in in London, UK by Mark Robbins
A Deep Dive into Email Accessibility Mark Robbins REBEL @M_J_Robbins @GoRebel #LitmusLive @M_J_Robbins @GoRebel
Why care about accessibility? 1. Legal requirement 2. Accessing a larger market 3.● 15%-20% of people have reading difficulties, including dyslexia @TheLastLeg ○ ● 22% of emails are opened in Gmail 8% of caucasian males suffer from some form of color blindness ○ 8% email are opened in iPad ○ 7% of emails are opened in Outlook ● 7% of working age adults have a severe dexterity difficulty Don’t be a dick ● 3-4% of people can't see well enough to read ○ 3% of emails are opened in Outlook.com Sources: statistics from government agencies and researchers in the US, UK and Canada https://www.powermapper.com/blog/website-accessibility-disability-statistics - http://emailclientmarketshare.com/ #LitmusLive @M_J_Robbins @GoRebel
Everyone benefits from better accessibility Permanent Amputee #LitmusLive Temporary Broken arm Situational Holding a baby @M_J_Robbins @GoRebel
Quick recap #LitmusLive @M_J_Robbins @GoRebel
Quick recap - Tables ● Use role="presentation none" on all layout tables ● Use ghost tables as webmail can remove role attributes ● And stop using so many tables, try and limit yourself to about 5-10 ● Only add a table when you want to; ○ Constrain the width of a section ○ Change background ○ Add a border ○ Use multiple columns #LitmusLive @M_J_Robbins @GoRebel
Quick recap - Semantic code ● Use <h1>-<h6> elements for headings. These are landmarks that help navigate your content ● Remember a subtitle is not a heading A Deep Dive into Email Accessibility A talk by Mark Robbins ● Paragraphs should be in <p> set a margin for consistent rendering ● Lists should be <li> elements in a <ul> or <ol> Don’t set a margin on it add that to a wrapper <div> #LitmusLive @M_J_Robbins @GoRebel
Quick recap- Language ● Place a lang="" attribute on the <html lang="en"> tag ● Also add a lang="" to a wrapping element inside the <body><div lang="en"> ● And add one to any content where the language changes ● Screen readers will read in a different accent depending on the lang that is set. #LitmusLive @M_J_Robbins @GoRebel
Common mistakes and misconceptions ● Everything should be a link, including; text, images and whitespace ● It’s fine to use images of text if you have alt text ● Responsive is only for mobile ● Insensitive - alt=“Download images to view email” #LitmusLive @M_J_Robbins @GoRebel
Some cool new experimental stuff #LitmusLive @M_J_Robbins @GoRebel
Accessibility for dynamic images Your image will change, your alt text won’t ● Use generic alt text, from default image ● alt=“Offer ends at 14.20 on 21st August 2018” ● alt=“Prices available on the website” ● alt=”” aria-hidden=”true” #LitmusLive @M_J_Robbins @GoRebel
Accessibility for dynamic images Dynamic images with dynamic CSS - concept <figure style="margin:0;display:none;"> <div role="img" class="dynamic-img1" aria-labelledby="alt1"></div> <figcaption id="alt1"></figcaption> </figure> #LitmusLive figure{ display:inline !important; } .dynamic-img1{ width:300px; height:200px; background:url(https://image1.jpg); } #alt1::after{ content:'dynamic alt text'; opacity:0; display:block; max-height:0;} @M_J_Robbins @GoRebel
Accessibility for user settings Px units don’t change with user settings. The easiest way is to convert px to rem units - px ÷ 16 Outlook doesn’t support rem so we need to add a fallback <p style="font-size:16px; font-size:1rem"></p> <p style="font-size:20px; font-size:1.25rem"></p> <p style="font-size:10px; font-size:0.625rem"></p> One can also use em or % units, these are supported by Outlook but remember these are dependant on the parent font-size #LitmusLive @M_J_Robbins @GoRebel
Accessibility for user settings In iOS and Apple Mail you can detect some user preferences and change your code accordingly @media (colors-inverted){ img, video{ filter:invert(100%); } } #LitmusLive @media (prefers-reduced-motion: reduce){ #body *{ animation:none !important; } } @M_J_Robbins @GoRebel
Accessibility for interactive email Interactive CSS isn’t accessible by default. ● A <label> isn’t focusable or clickable without a mouse. ● There is no context for screen readers to announce what is happening. ● This is normally fixed with JavaScript but that doesn’t work in email. #LitmusLive @M_J_Robbins @GoRebel
Accessibility for interactive email #LitmusLive @M_J_Robbins @GoRebel
Accessibility for interactive email <label aria-live="polite"> <input type="checkbox" style="display:none"> <div class="faux-checkbox" role="button" tabindex="0" aria-label="tick box" aria-describedby="checkbox-label status"></div> <span id="checkbox-label">I like CSS</span> <div class="visually-hidden" id="status"> <span class="checked">checked</span> <span class="unchecked">unchecked</span> </div> </label> View it online: https://codepen.io/M_J_Robbins/pen/aVJBXd #LitmusLive @M_J_Robbins @GoRebel
Accessibility for interactive email #LitmusLive @M_J_Robbins @GoRebel
Testing tools ● Accessibility settings in Android, iOS, OSX and WIndows ○ Android: Settings > Accessibility ○ iOS: Settings > General > Accessibility ○ Mac: System preferences > Accessibility ○ Windows 10: Settings > Ease of Access ○ Windows 7 & 8: Control Panel > Ease of Access ● Funkify simulator - funkify.org ● WAVE - wave.webaim.org ● AXE - axe-core.org #LitmusLive @M_J_Robbins @GoRebel
Further Resources goo.gl/QQyG7f Curated by @wilbertheinen email.geeks.chat Slack group with an email-accessibility channel #LitmusLive @M_J_Robbins @GoRebel
Thank you Mark Robbins REBEL @M_J_Robbins @GoRebel #LitmusLive @M_J_Robbins @GoRebel
Accessibility matters. Whether your motivation is ethical, legal, or financial, the simple fact is that having accessible emails ensures more people can consume your content.
Learn the basics of email accessibility—including common mistakes and misconceptions—before diving into accessibility for more advanced email techniques like dynamic images and interactive emails.
Google slides version https://docs.google.com/presentation/d/1YXgdEf_N6-jdL8ZmsIAccS6_QKI2qEKV8W8oFY6p4v0/edit#slide=id.g284ebd49db_0_20
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.