Beyond the Envelope™@Paul_Airy
The challenges and opportunities of implementation.
Accessibility in ActionA
@Paul_Airy Beyond the Envelope™
“Hello!”
@Paul_Airy Beyond the Envelope™
@Paul_AiryEmail Designer and Developer
@Paul_Airy Beyond the Envelope™
Beyond the Envelope™ +
@Paul_Airy Beyond the Envelope™
#SubscriberFirst
@Paul_Airy Beyond the Envelope™
I ♥ HTML Typography
@Paul_Airy Beyond the Envelope™
@Paul_Airy Beyond the Envelope™
@Paul_Airy Beyond the Envelope™
I ♥ Accessibility
Beyond the Envelope™@Paul_Airy
Email Design Conference, 2015.
Years Ago2
@Paul_Airy Beyond the Envelope™
“ ”
@Paul_Airy Beyond the Envelope™
ChallengesTechnical
Cultural
@Paul_Airy Beyond the Envelope™
@Paul_Airy Beyond the Envelope™
Beyond the Envelope™@Paul_Airy
Speed dating questions.Q
@Paul_Airy Beyond the Envelope™
Value?
@Paul_Airy Beyond the Envelope™
Resource?
@Paul_Airy Beyond the Envelope™
Priority?
@Paul_Airy Beyond the Envelope™
@Paul_Airy Beyond the Envelope™
@Paul_Airy Beyond the Envelope™
#LitmusLive + 1.
31 AugustThur
Beyond the Envelope™@Paul_Airy
Essential 01:Accessibility MindsetAccessibility as an integral part of the email design and development process.
Beyond the Envelope™@Paul_Airy
“Design and develop with an accessibility mindset.
@Paul_Airy Beyond the Envelope™
MindsetAccessibility
Mobile
Beyond the Envelope™@Paul_Airy
Essential 02:Foundational Implementation
@Paul_Airy Beyond the Envelope™
FoundationalImplementation Resource
Quick Wins
PriorityGreatest Opportunity
@Paul_Airy Beyond the Envelope™
ColourImagesButtons/LinksLayoutTypography
FoundationalImplementation
@Paul_Airy Beyond the Envelope™
A
@Paul_Airy Beyond the Envelope™
TypographyEnsuring typography is accessible.
Beyond the Envelope™@Paul_Airy
Used HTML typographyAll text is ‘live text’ so it can be read by a screen reader.
Beyond the Envelope™@Paul_Airy
Used semantic tagsTo enable a screen reader to distinguish between levels of heading, paragraphs and lists.
Beyond the Envelope™@Paul_Airy
<h1> ! <h6> <p> <li>Heading, paragraph and list tags.
Beyond the Envelope™@Paul_Airy
font-weight:normal;Applied a style to lighten the weight of headings.
Beyond the Envelope™@Paul_Airy
font-weight:lighter;Applied a style to lighten the weight of headings.
Beyond the Envelope™@Paul_Airy
<p style=“margin:0;”>Applied margin:0; to semantic tags to reset margins.
‘Magic Margin’
Beyond the Envelope™@Paul_Airy
<p style=“ margin:0 0 10px 0;”>
Paragraph Space
Beyond the Envelope™@Paul_Airy
mso-line-height-rule:exactly;Maintain line-height on Microsoft Outlook.
Beyond the Envelope™@Paul_Airy
Applied line-height 1.5x font-size.
Body text size14px!16px
Beyond the Envelope™@Paul_Airy
X-height
xxA fonts x-height is literally the height of its lower case ‘x’ character.
Beyond the Envelope™@Paul_Airy
Applied line-height 1.5x font-size.
Body text size (mobile)16px+
Beyond the Envelope™@Paul_Airy
Body text alignmenttext-align:left;Centred and justified text is difficult to follow.
Beyond the Envelope™@Paul_Airy
<h1> HeadingParagraph of text.
</h1>
</td>
<td>
Heading styles
<p> </p>
Beyond the Envelope™@Paul_Airy
<h1> HeadingParagraph of text.
</h1>
</td>
<td>
Paragraph styles
<p> </p>
@Paul_Airy Beyond the Envelope™
LayoutEnsuring the layout of an email is accessible.
@Paul_Airy
Logical orderEmail coded in logical reading order. "
Beyond the Envelope™@Paul_Airy
<table role=“presentation”>Applied to redefine <table>s as presentational elements for screen readers.
*Courtesy of Mark Robbins.
*
Beyond the Envelope™@Paul_Airy
SpacingInserted enough space for text to be read easily.
@Paul_Airy Beyond the Envelope™
Buttons and LinksEnsuring interactive elements are accessible.
Beyond the Envelope™@Paul_Airy
ButtonsEnsured buttons can be selected across their total area.
Beyond the Envelope™@Paul_Airy
‘Click Here’Avoided using ‘Click Here’, or other terms that reference a button or link visually.
Beyond the Envelope™@Paul_Airy
Blue/grey linksRestyled ‘blue/grey links’, while retaining functionality.
@Paul_Airy Beyond the Envelope™
ImagesEnsuring images are accessible.
Beyond the Envelope™@Paul_Airy
alt=“” title=“”Used alt attributes on all images. Avoided title attributes.
Beyond the Envelope™@Paul_Airy
Avoided erratic gifs (or ‘jifs’)For people living with epilepsy.
@Paul_Airy Beyond the Envelope™
ColourEnsuring colour is accessible.
Beyond the Envelope™@Paul_Airy
Colour ≠ MeaningAvoided using colour to communicate meaning for people living with colour blindness.
Beyond the Envelope™@Paul_Airy
Checked colour contrast.
@Paul_Airy Beyond the Envelope™
Beyond the Envelope™@Paul_Airy
<div> </div>Using <div>s on Type E:, with MSO conditionals as a fallback for Microsoft Outlook.
Beyond the Envelope™@Paul_Airy
<nav><div> </div></nav>Wrapped sections of email within HTML5 tags to describe them semantically.
Beyond the Envelope™@Paul_Airy
Using border-bottom rather than text-decoration.
border-bottom
Beyond the Envelope™@Paul_Airy
Essential 03:Speaking and Sharing
@Paul_Airy Beyond the Envelope™
“ ”
@Paul_Airy Beyond the Envelope™
Crossing Borders.
Beyond the Envelope™@Paul_Airy
Crossing Borders:Advanced Implementation
@Paul_Airy Beyond the Envelope™
Buy-inWith Support
AdvancedImplementation
Alignment
@Paul_Airy Beyond the Envelope™
Get tuned into your organisation, and find out what matters to it.
“
Beyond the Envelope™@Paul_Airy
People focused
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™@Paul_Airy
Black on yellow
@Paul_Airy Beyond the Envelope™
Understand your subscribers and how they interact with email.
“
Beyond the Envelope™@Paul_Airy
@Paul_Airy Beyond the Envelope™
iPad 25.0% iPhone 23.8%
@Paul_Airy Beyond the Envelope™
Demonstration
@Paul_Airy Beyond the Envelope™
Any implementation of accessibility, however small, is a success.
“
@Paul_Airy Beyond the Envelope™
We shouldn’t feel the pressure of having to make emails ‘fully accessible’.
“
@Paul_Airy Beyond the Envelope™
Doing nothingis not an option.“
@Paul_Airy Beyond the Envelope™
Accessibility = Our Job
@Paul_Airy Beyond the Envelope™
Accessibility ≠ Added Extra
@Paul_Airy Beyond the Envelope™
#SubscriberFirst
Beyond the Envelope™@Paul_Airy
“Thanks”@Paul_Airy@Type_of_Email