Accessible Emails - Tarleton State University

Report
Accessible Emails
USING DIFFERENT COMMUNICATIONS CHANNELS TO MARKET STRATEGICALLY
Creating a Discrimination-Free Educational
Environment
Section 504 of the Rehabilitation Act of 1973 and Title II of the
ADA protect individuals from discrimination based on a
disability under any educational program or activity that
receives funding or in any state government activity.
These laws, as well as Section 508, apply to The Texas A&M University System
because our programs and activities receive federal funding.
Source: The Texas A&M University System course Creating a Discrimination-Free Workplace in TrainTraq.
Creating a Discrimination-Free Educational
Environment
The Texas Commission on Human Rights Act (1983) prohibits
discrimination because of race, color, religion, sex, national
origin, age, genetic information, and disability.
This law, as well as (TAC) §206 and (TAC) §213, apply to The Texas A&M University
System because our programs and activities receive state funding.
Source: The Texas A&M University System course Creating a Discrimination-Free Workplace in TrainTraq.
Communication has changed through the
years due to innovation
Drawings on walls, stone and
other materials
Mail / Postal service
Telegraph
Telephone
Radio
Television
Beginning of recorded history
550 BC
1790s
1890
1920
1946
Graphics, hieroglyphics, text
Graphics, text
Text
Audio
Audio
Audio, graphics, video
Travel to location, local group
Delivery to person
Delivery to person
Device to person
Device, local to global
Device, local to global
Extremely slow
Very slow
Slow
Fast
Fast (if you have signal)
Fast (if you have signal)
Email
Bulletin Board Systems
Listserv
World Wide Web
Blogs
Social Media
(i.e., Friendster)
1966
1978
1986
1990
1999
2002
Text first, later graphics as
well as attachments
Text and textual (ANSI)
graphics first, later graphics
Text first, later graphics as
well as attachments
Audio, graphics, text,
video
Audio, graphics,
text, video
Audio, graphics, text,
video
Device to person or group,
local to global
Device to person or group,
local to global
Device to group, local to
global
Device to group,
global
Device to group,
global
Device to group, global
Originally slow, but now very
fast (also depending on
signal)
Originally slow, but now very
fast (also depending on
signal)
Originally slow, but now
very fast (also depending
on signal)
Fast (depending on
signal)
Fast (depending on
signal)
Fast (depending on
signal)
*Not a comprehensive listing of communications channels
Marketing strategically to convey a
message


Each channel has its strengths and weaknesses.

They should not be used the same way with the same content.

They cannot convey the same message or have the same purpose.

Not all channels can fit all the content about an announcement or event.
For print media (drawings and text on a material), content has to be
rearranged depending on the dimensions of the media.

Images must be resized, moved, removed, or readjusted for the space.

Text must be resized, moved, removed, or rewritten for the space.
Print Media comes in many sizes or
channels
Billboard
Poster
Flyer
Letter
Postcard
Extremely Large
Somewhat Large
Medium
Small
Extremely Small
Typically larger width
Typically larger height
Typically larger height
Typically larger height
Typically larger width
Drive Past
Walk Past
Walk Past or Delivered
(and Hold in Hand)
Delivered, Hold in Hand
Delivered, Hold in Hand
You must come near it
You must come near it
You must come near it
or receive a delivery
You can receive a
delivery
You can receive a
delivery
Regional
Local to regional
Local
Personal, Intimate
Personal
Large announcements
or events
Events
Announcements or
events
Important information
or personalized events
Announcements or
events
Smallest amount of text,
large font, must be
memorable
Medium amount of
text, large and medium
font
Medium amount of
text, medium and small
font
Largest amount of text,
typically small font
Small amount of text,
medium and small font
*Not a comprehensive listing of print media
Print Media or “the Flyer”

Print media is used at a physical location. For
example, people must walk up to a flyer or hold it in
their hands to view it.

Print media is static; it does not change based on
interactions and has no animated parts (unless
through mechanical operations).

Print media has a permanent layout; it does not
change dimensions, but there is great flexibility in
design.

Design is only limited by the company printing it and
the materials available to print on (i.e., number of
colors, dullness to shininess, thickness of fonts).
Electronic Media comes in many channels,
too
Digital Signage
Web
Email
USED TO BE: Large to extremely large
NOW: Comes in many sizes
USED TO BE: Somewhat large for
desktop computers
NOW: Comes in many sizes
USED TO BE: Somewhat large for desktop
computers
NOW: Comes in many sizes
Drive Past, Walk Past
Sitting, Walking
Sitting, Walking
You must come near it
It comes to your device
It comes to your device
Local
Global
Personal, Intimate
Announcements or events
Announcements or events
Announcements or events, sometimes
personal
Smallest amount of text, large font
Medium amount of text, large and
medium font
Medium amount of text, medium and small
font
Depending on location and device, can
have interaction (selectable content that
does something).
Always has interactive functionality.
Always has interactive functionality.
*Not a comprehensive listing of electronic media
Electronic Media or “the Email”

Electronic media is viewable on
multiple:

Devices

Operating Systems

Browsers

Email Clients

Screen Sizes
However…
Content does not appear the same!
Color

Devices/clients may show the same colors
differently.

Colorblind users may not be able to see all
colors legibly.

Visually impaired users may have their own
color set that must overwrite your choices,
so they can see the information.

Devices/clients may not respect color
choices because they are limited to a
certain number or only one.
Content does not appear the same!
Size
Join us to celebrate
Alissa Elizabeth
Mitran

Devices/clients display content at different
sizes, which can require scrolling or zooming in
to view the content.

Horizontal scrolling is frustrating for users with
motor function disabilities. Text on images do
not wrap on any screen.

Images of text do not improve legibility by
zooming in for the visually impaired because
the text is a part of the image, not separate
from the image as highlightable (the ability to
copy and paste).
Content does not appear the same!
Join us to celebrate
Alissa Elizabeth Mitran
as she performs her
senior recital in voice
on May 5th, at 2pm.
Light fair to follow. At
521 Milford Road,
Teaton, TX
RSVP 541-290-4561
Interaction

It is impossible to highlight text off an image
and paste it into a calendar event. You must
type it all out which is a burden for many
users with or without impairments or
disabilities.

If there is information to link to on an image,
the image has to be broken into pieces to
add specific links, and those images will
wrap differently on each device/client.
Content does not appear the same!
[cid:[email protected]]
Images, in general

The blind cannot view images, in general, unless
there is alternative text provided.

Some devices/clients will not load images at all.
This includes clients that do not trust the source of
the email or don’t display them by default.

Some devices/clients will not load images in areas
with low internet signals. If images take too long to
download because they are too large, users will
not see them because they give up and move on
to the next email (sometimes deleting yours).
Universal Design: Creating an accessible
email
 For
all users and all abilities (e.g., blind,
colorblind, deaf, paralyzed)
 For
all devices (e.g., desktop, mobile phone,
tablet)
 For
all email clients (e.g., Outlook, Gmail,
Hotmail)
Why is it important to design for universal
usage?
30%
Top 10 Email Clients Used from
1.1 Billion Email Opens During February 2015
26%
25%
18%
20%
12%
15%
10%
9%
8%
7%
5%
5%
4%
2%
1%
0%
Apple iPhone
Gmail
Apple iPad
Outlook
Apple Mail
Google
Android
Outlook.com Yahoo! Mail Windows Live
Mail
AOL Mail
Source: emailclientmarketshare.com
Why is it important to design for universal
usage?
50%
45%
45%
Top 10 Email Clients Used from
1.1 Billion Email Opens During February 2015
40%
28%
35%
30%
19%
25%
20%
15%
10%
5%
0%
Mobile
Desktop
Web-Based
Source: emailclientmarketshare.com
How to improve your engagement with
accessible email
Give yourself enough time: Plan ahead!

All messages should support a strategy that utilizes each channel
appropriately

If you are collaborating and have little graphical experience, encourage the
designer of your marketing materials to provide you with different content to
support the different channels you want to use

If you have graphical experience (and the software to edit it), ask for the
original document (not a scanned or flat image), so you can organize the
content depending on each message you want to convey or focus on
How to improve your engagement with
accessible email
The essentials
1.
Subject Line (the front line, before any email is actually read)
2.
Links (with appropriate and engaging verbiage, calls-to-action)
3.
Text (can be styled and highlightable with the ability to be copied/pasted
into another app)
4.
Graphics (used in moderation and always with alternative text)
5.
Attached Documents (when necessary and appropriate)
How to improve your engagement with
accessible email
Senior Voice Recital
Create an engaging subject line
Most users will not be able to see the content of your email when
they see it in their inbox, so you need to find a way to make them
select your email for further viewing. Avoid generic subjects and
consider the following from their point of view:
Join us to celebrate
Alissa Elizabeth Mitran
as she performs her
senior recital in voice
May 5th, at 2pm
Light fair to follow.
521 Milford Road,
Teaton, TX
RSVP 541-290-4561
Add to your calendar!
 Why
should I care about this?
 What
 How
makes this stand out or unique?
does it benefit me?
 Who/what
is this about?
How to improve your engagement with
accessible email
Senior Voice Recital
Avoid using clickbait
Clickbait is content that sensationalizes to attract more users to
select content they may not normally access, and more times than
not, it falsely advertises what the users will actually experience.

Join us to celebrate
Alissa Elizabeth Mitran
as she performs her
senior recital in voice
May 5th, at 2pm

It ruins trust with your audience

discourages viewership

increases the chance of your emails being deleted immediately
Examples:
Light fair to follow.
521 Milford Road,
Teaton, TX
RSVP 541-290-4561
Add to your calendar!

This politician has had it and restores my faith in humanity

The situation looked bleak, but it’s not what you think

This student wasn’t going to graduate, but then this happened
How to improve your engagement with
accessible email
Senior Voice Recital
Make it easy to add to a calendar
You got them to select the email, but if they like the event, can they add it
to their calendar?

Join us to celebrate
Alissa Elizabeth Mitran
as she performs her
senior recital in voice
May 5th, at 2pm
Light fair to follow.
521 Milford Road,
Teaton, TX
RSVP 541-290-4561
Add to your calendar!

Make event info textual.

Copy and paste is easier than typing it out.

Mobile devices will assist when there appears to be an event and
provide links to automatically include some of the content into your
calendar.
Link text or graphics to the event on the Online Calendar.

All the content can be added to someone’s Outlook or mobile
device calendar with only a few selections – no typing whatsoever.
Why use our Online Calendar System?

Extended event details in event description

Social media marketing

Reminders and event update notifications

Quick add to my calendar option to desktop and mobile calendars

Potential to add image of poster/flyer

Links to registration applications*

Links to further information*: agendas, maps, parking waivers,
brochures…

Potential Tarleton homepage coverage*

Potential calendar highlight coverage*

Embed a calendar feed specific to your area on your website*
* Contact Web Services for assistance and approval of content.
How to improve your engagement with
accessible email
Senior Voice Recital
Make it easy to add to a calendar
You got them to select the email, but if they like the event, can they add it
to their calendar?

Join us to celebrate
Alissa Elizabeth Mitran
as she performs her
senior recital in voice
May 5th, at 2pm
Light fair to follow.
521 Milford Road,
Teaton, TX
RSVP 541-290-4561
Add to your calendar!

Make event info textual.

Copy and paste is easier than typing it out.

Mobile devices will assist when there appears to be an event and
provide links to automatically include some of the content into your
calendar.
Link text or graphics to the event on the Online Calendar.

All the content can be added to someone’s Outlook or mobile
device calendar with only a few selections – no typing whatsoever.
How to improve your engagement with
accessible email
Senior Voice Recital
Make link text meaningful
Why select that link? Give your audience a reason that doesn’t require
reading the text around it to get the context of your link.

Join us to celebrate
Alissa Elizabeth Mitran
as she performs her
senior recital in voice
May 5th, at 2pm


Are they signing up for something?

Is it a form? Is it an event listing? A document? About what?
Remove ambiguity

Light fair to follow.
521 Milford Road,
Teaton, TX
RSVP 541-290-4561
Add to your calendar!
Use a call-to-action

Don’t use “more info,” “here,” or other generic words and phrases
Remove “actions to select” the link

Not every device allows you to “click,” “tap,” “double tap,” “wink,”
“blow,” “hit,” or “swipe” to select. Let the user choose.
How to improve your engagement with
accessible email
Senior Voice Recital
Make sure links are easy to select
They are interested in your content! Let them have at it, but don’t make
them work too hard to get at it or they will give up entirely.
Join us to celebrate
Alissa Elizabeth Mitran
as she performs her
senior recital in voice
May 5th, at 2pm

Make links/buttons large enough to select without
accidentally selecting a different link/button (Fat
Finger Friendly or F3)

Do not make someone retype a link, causing an
undue burden for your audience

If you mention that you have social media, provide
the specific links to your social media content – do
not make your audience hunt it down
Light fair to follow.
521 Milford Road,
Teaton, TX
RSVP 541-290-4561
Add to your calendar!
Never use QR codes in electronic media,
only print media
A QR code is like a bar code, but you can scan it with a device that
has:

a camera

an app to interpret the QR code

internet access available in the location where it is being scanned

time to scan the QR code completely for the app to interpret
It is essentially a link which can go to a form, a web address, an app,
a phone number, an email address or anything else that is linkable.
However, you cannot scan a QR code inside an email: Email is
typically viewed on a screen that is opposite of where the camera is
located to scan it.

In an email, use a link instead of a QR code
How to improve your engagement with
accessible email
Senior Voice Recital
Textual information can be pretty, too
Text is not required to be black in Times New Roman on a white background in 12pt. That’s
just one option.

Join us to celebrate
Alissa Elizabeth Mitran
as she performs her
senior recital in voice
May 5th, at 2pm

Light fair to follow.
521 Milford Road,
Teaton, TX
RSVP 541-290-4561
Add to your calendar!

Change font families (typefaces).

Use an email friendly font. These common fonts are available on almost all devices/clients.

Avoid frilly, script looking fonts as they are hard to read.
Change font sizes.

Don’t go less than 12pt.

Use in different sizes in moderation; focus on the important pieces.
Change colors.

Make sure there is a good color contrast.

Avoid red/black, low contrast colors (e.g., purple/black), complementary colors (e.g.,
red/green).
Why are frilly, script looking fonts (as well as
other fonts) inaccessible?
Your eyes constantly scan the text in front of you to determine patterns from symbols to form
meaningful relationships, whether you have a low vision disability, a reading disorder, or no
impairment at all:


Problems recognizing character patterns due to font family (typeface) choice

Is it an l or an I or a 1? Is it l or I or 1? Is it l or I or 1?

L: Is it a T or an L? L or L: Is it an I or an L? L: Is it a Y or an L?
Problems recognizing separate characters due to proximity and font family choice


li could look like an uppercase or lowercase U because the letters are close enough together
Problems recognizing words putting all the characters together

With character location, spacing, and font choice all put together, you can have some confusing, if not
embarrassing, results.
Sources: webaim.org, uxmovement.com, and www.yousuckatmarketing.com
Email Friendly Fonts (PC)

Arial

Lucida Sans Unicode

Arial Black

Palatino Linotype

Book Antiqua

Tahoma

Comic Sans MS

Times New Roman

Trebuchet MS

Verdana

Symbol

Courier New

Impact

Georgia

Wingdings

Lucida Console

Webdings
Email Friendly Fonts (Mac)

Arial, Helvetica

New York

Arial Black, Gadget

Palatino, Book Antiqua

Comic Sans MS

Times

Courier New

Trebuchet MS

Geneva

Verdana

Impact, Charcoal

Symbol

Lucida Grande

Webdings

Monaco

Zapf Dingbats
How to improve your engagement with
accessible email
Senior Voice Recital
Yes, you can add images; just use
them in moderation
Keep in mind not all devices/clients (as well as users) will be able to see them, so you need to
provide alternative text which will “appear” where the images would have been.

Join us to celebrate
Alissa Elizabeth Mitran
as she performs her
senior recital in voice
May 5th, at 2pm
Light fair to follow.
521 Milford Road,
Teaton, TX
RSVP 541-290-4561
Add to your calendar!

Keep it simple and to the point.

Don’t write a novel. You are limited to about 100 characters of alternative text.

Don’t repeat that it is an “image”, “logo”, or “picture of” anything.
Keep it within the context of the message.

Not every detail is required if it does not amplify the information already given in
text.

Make sure mood and atmosphere that a visual user sees/feels is also conveyed in
the alternative text (i.e., happy about what, proud due to what circumstance).
How to improve your engagement with
accessible email
Senior Voice Recital
Some images should not be used
If the user is missing any information because it is contained in the image, it may be better to avoid
using an image with alternative text at all and use text instead.

Join us to celebrate
Alissa Elizabeth Mitran
as she performs her
senior recital in voice
May 5th, at 2pm
Light fair to follow.
521 Milford Road,
Teaton, TX
RSVP 541-290-4561
Add to your calendar!

Take advantage of lists.

If you have a lot of information that can be organized in lists, use ordered (numbered) or
unordered (bulleted) list functionality of your email client.

Avoid using punctuation (i.e., *, -, +) to denote a list item as these are interpreted
incorrectly by screen readers.
Take advantage of tables.

If your have a really huge schedule of events that is better in a table, use the table
functionality of your email client.

Copy and paste from Office documents into the email client, and add or remove
color/styles, adjust columns/rows, and remove unwanted items/table cells where
necessary.
How to improve your engagement with
accessible email
Senior Voice Recital
Some images should not be used

Join us to celebrate
Alissa Elizabeth Mitran
as she performs her
senior recital in voice
May 5th, at 2pm

Light fair to follow.
521 Milford Road,
Teaton, TX
RSVP 541-290-4561
Add to your calendar!

Don’t repeat image text content already in the text of the email
message.

Your audience may think you are insulting their intelligence by repeating yourself as
though they “didn’t get it the first time.”

Repetition looks unprofessional. Universal design is relaying a message once by providing
all the necessary components to look seamless.
If it has more than 200 characters worth of text, don’t include the full image.

Crop the image to show main theme or idea.

Remove extra text on the image that will be (and should be) textual in the message.
When images are used: always, always, always provide
alternative text!
How to improve your engagement with
accessible email
Senior Voice Recital
Add attachments to your email only when appropriate

Join us to celebrate
Alissa Elizabeth Mitran
as she performs her
senior recital in voice
May 5th, at 2pm

Do add an attachment if

they need to fill out a form

they need to print something out

they are being asked to promote it (physically post it) to others in their area
Do not add an attachment if

the file is incredibly large (10 MB is our limit, but it should not be abused –
ideally, don’t go over 1 MB)
Light fair to follow.

the information can be found or linked to on the Tarleton website
521 Milford Road,
Teaton, TX
RSVP 541-290-4561
Add to your calendar!

it does not provide further information than the main email content

it is not in a compatible file type (e.g., Adobe Acrobat is crossbrowser/device compatible)
Good example of an accessible email

Engaging subject line

Text is highlightable (can be copied/pasted into a
calendar)

Uses various colors and font sizes in moderation

Provides links

Note: Do not use the web address as the text for the
link as each letter is read by the screen reader (they
don’t always know where they are going based on
the address)

Engaging small image

Image has appropriate alternative text

“Spring Job Fair”

Mentions the sponsors
Good example of an accessible email

Engaging subject line

Text is highlightable (can be copied/pasted into
a calendar)

Uses various colors, fonts and font sizes in
moderation

Note: Be careful about formatting. The unordered
(bulleted) list here is slightly off depending on
screen size due to over-aligning for a particular
screen size.

Engaging small image

Image has appropriate alternative text

“Job search”
Good example of an accessible email

Text is highlightable (can be copied/pasted into
a calendar)

Uses various colors, fonts and font sizes in
moderation

Provides links

Note: If you have multiple events linked to a
calendar (repeated text for links), find a way to
differentiate them (i.e., “Mark Summer Camp Job
Fair in your calendar!”)

Engaging small image

Image has appropriate alternative text

“This week's events & opportunities”
Contact Web Services for the official
Tarleton email templates
One column email template
Two column email template
More information about accessibility of
electronic & information resources

www.tarleton.edu/accessibility
*Email follows the same accessibility standards as websites.
Electronic & information resources
accessibility coordinator
EIR (Electronic & Information Resources)
Accessibility Coordinator
Karole Schroeder
254-968-1819
[email protected]
Electronic & information resources
accessibility coordinator duties
All need to be reviewed for accessibility compliance:
Website, Email, TexanSync, Mobile Apps

Web Applications and Software:

Software Applications: Microsoft Office and Outlook, Adobe Creative Suite

Operating Systems: Windows, Mac, Android

Telecommunications: Phones

Videos/Multimedia: YouTube,

Self Contained: Copy/Fax Machines, Laboratory Equipment

Desktop/Portable/Mobile Computers: iPad, Microsoft Surface
Vimeo
*Not a comprehensive listing of electronic & information resources

similar documents