Accessibility in Action: The Challenges and Opportunities of Implementation

Beyond the Envelope™@Paul_Airy
The challenges and opportunities of implementation.
Accessibility in Action
A

@Paul_Airy Beyond the Envelope™
“Hello!”

@Paul_Airy
Email Designer and Developer

Beyond the Envelope™
+

#SubscriberFirst

I ♥ HTML Typography

I ♥ Accessibility

Email Design Conference, 2015.
Years Ago
2

“ ”

Challenges
Technical
Cultural

Speed dating questions.
Q

Value?

Resource?

Priority?

#LitmusLive + 1.
31 August
Thur

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

“Design and develop with an
accessibility mindset.

Mindset
Accessibility
Mobile

Essential 02: 
Foundational Implementation

Foundational 
Implementation
Resource
Quick Wins
Priority
Greatest Opportunity

Colour
Images
Buttons/Links
Layout
Typography
Foundational 
Implementation

A

Typography
Ensuring typography is accessible.

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

Used semantic tags
To 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 size 
14px!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 alignment 
text-align:left;
Centred and justified text is difficult to follow.

<h1> Heading
Paragraph of text.
</h1>
</td>
<td>
Heading styles
<p> </p>

<h1> Heading
Paragraph of text.
</h1>
</td>
<td>
Paragraph styles
<p> </p>

Layout
Ensuring the layout of an email is accessible.

@Paul_Airy
Logical order
Email coded in logical reading order.
"

<table role=“presentation”>
Applied to redefine <table>s as presentational elements for screen readers.
*Courtesy of Mark Robbins.
*

Spacing
Inserted enough space for text to be read easily.

Buttons and Links
Ensuring interactive elements are accessible.

Buttons
Ensured 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 links
Restyled ‘blue/grey links’, while retaining functionality.

Images
Ensuring images are accessible.

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

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

Colour
Ensuring colour is accessible.

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

Checked colour contrast.

<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: 
Advanced Implementation

Buy-in
With Support
Advanced 
Implementation
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

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

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

Doing nothing 
is not an option.
“

Accessibility = Our Job

Accessibility ≠ Added Extra

“Thanks”
@Paul_Airy 
@Type_of_Email

Accessibility in Action: The Challenges and Opportunities of Implementation

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (12)

Similaire à Accessibility in Action: The Challenges and Opportunities of Implementation

Similaire à Accessibility in Action: The Challenges and Opportunities of Implementation (20)

Dernier

Dernier (20)

Accessibility in Action: The Challenges and Opportunities of Implementation