Accessibility in Action: The Challenges and Opportunities of Implementation

Beyond the Envelope™@Paul_Airy

The challenges and opportunities of implementation.

Accessibility in ActionA

@Paul_Airy Beyond the Envelope™

“Hello!”


@Paul_AiryEmail Designer and Developer


Beyond the Envelope™ +


#SubscriberFirst


I ♥ HTML Typography




I ♥ Accessibility


Email Design Conference, 2015.

Years Ago2


“ ”


ChallengesTechnical

Cultural




Speed dating questions.Q


Value?


Resource?


Priority?

My Journey.




#LitmusLive + 1.

31 AugustThur

Essentials.


Essential 01:Accessibility MindsetAccessibility as an integral part of the email design and development process.


“Design and develop with an accessibility mindset.

2013.


MindsetAccessibility

Mobile


Essential 02:Foundational Implementation


FoundationalImplementation Resource

Quick Wins

PriorityGreatest Opportunity


ColourImagesButtons/LinksLayoutTypography

FoundationalImplementation


A


TypographyEnsuring typography is accessible.


Used HTML typographyAll text is ‘live text’ so it can be read by a screen reader.


Used semantic tagsTo enable a screen reader to distinguish between levels of heading, paragraphs and lists.


<h1> ! <h6> <p> <li>Heading, paragraph and list tags.


font-weight:normal;Applied a style to lighten the weight of headings.


font-weight:lighter;Applied a style to lighten the weight of headings.


<p style=“margin:0;”>Applied margin:0; to semantic tags to reset margins.

‘Magic Margin’


<p style=“ margin:0 0 10px 0;”>

Paragraph Space


mso-line-height-rule:exactly;Maintain line-height on Microsoft Outlook.


Applied line-height 1.5x font-size.

Body text size14px!16px


X-height

xxA fonts x-height is literally the height of its lower case ‘x’ character.


Applied line-height 1.5x font-size.

Body text size (mobile)16px+


Body text alignmenttext-align:left;Centred and justified text is difficult to follow.


<h1> HeadingParagraph of text.

</h1>

</td>

<td>

Heading styles

<p> </p>


<h1> HeadingParagraph of text.

</h1>

</td>

<td>

Paragraph styles

<p> </p>


LayoutEnsuring the layout of an email is accessible.

@Paul_Airy

Logical orderEmail coded in logical reading order. "


<table role=“presentation”>Applied to redefine <table>s as presentational elements for screen readers.

*Courtesy of Mark Robbins.

*


SpacingInserted enough space for text to be read easily.


Buttons and LinksEnsuring interactive elements are accessible.


ButtonsEnsured buttons can be selected across their total area.


‘Click Here’Avoided using ‘Click Here’, or other terms that reference a button or link visually.


Blue/grey linksRestyled ‘blue/grey links’, while retaining functionality.


ImagesEnsuring images are accessible.


alt=“” title=“”Used alt attributes on all images. Avoided title attributes.


Avoided erratic gifs (or ‘jifs’)For people living with epilepsy.


ColourEnsuring colour is accessible.


Colour ≠ MeaningAvoided using colour to communicate meaning for people living with colour blindness.


Checked colour contrast.

http://webaim.org/resources/contrastchecker/



<div> </div>Using <div>s on Type E:, with MSO conditionals as a fallback for Microsoft Outlook.


<nav><div> </div></nav>Wrapped sections of email within HTML5 tags to describe them semantically.


Using border-bottom rather than text-decoration.

border-bottom


Essential 03:Speaking and Sharing


“ ”


Crossing Borders.


Crossing Borders:Advanced Implementation


Buy-inWith Support

AdvancedImplementation

Alignment


Get tuned into your organisation, and find out what matters to it.

“


People focused



Black on yellow


Understand your subscribers and how they interact with email.

“



iPad 25.0% iPhone 23.8%


Demonstration

http://beyondtheenvelope.cmail19.com/t/ViewEmail/d/ECD8E80AE5740278/13560606B5F584010F8C96E86323F7F9




























































































































Finally.


Any implementation of accessibility, however small, is a success.

“


We shouldn’t feel the pressure of having to make emails ‘fully accessible’.

“


Doing nothingis not an option.“


Accessibility = Our Job


Accessibility ≠ Added Extra


#SubscriberFirst


“Thanks”@Paul_Airy@Type_of_Email

Technology

Accessibility in Action: The Challenges and Opportunities of Implementation