Infographics are the new black. It feels like Twitter is full of infographics being touted and flaunted. From Twitter, I also get the impression that you aren't worthy of calling yourself a technical communicator if you don't use more visuals – illustrations, photos, videos – because people prefer visuals. I won't debate what sighted people prefer. I do want to debate where this move leaves those with little or no sight. How are they supposed to benefit in this mad rush to turn everything into videos or images?
There's hope. Someone just made an accessible infographic to celebrate – appropriately enough – the 22nd anniversary of a U.S. civil rights law called the Americans with Disabilities (ADA) Act. Go review The Whole Brain Group's ADA infographic.
Kudos to them!
Don't forget WebAim. I think the first accessible infographic that I saw on the Web was the WebAIM infographic about web accessibility for designers.
The Story Behind This Story
A few months ago, Steve Faulkner tweeted about an infographic describing the accessibility challenges in email design. He wrote
Accessibility Challenges in Email Design – potentially useful, but in an image without appropriate text alternative
(I removed the link for an easier read. A link to the tweet with the complete text and infographic link is listed at the end of this posting.)
So… I decided to try making that infographic accessible at a basic level. This is my transcription.
Transcription of the Infographic: Accessibility Challenges in E-mail Design
(An image of a corner of the Gmail mail program is displayed next to the title.)
Nearly 49 million Americans have some type of disability. These disabilities can range from color blindness and full blindness to cognitive and neurological disorders. Like most people, these users utilize e-mail and the web on a daily basis, presenting some interesting challenges when it comes to designing web and e-mail content. We take a look at these obstacles and offer tips for designing with these Americans in mind.
Types of Disabilities
Visually disabled – visually disabled users range from those who are partially colorblind to those who are fully blind. Colorblind individuals find it hard to distinguish differences in some colors or design elements, such as red and green. Those with visual impairments will likely use screen readers for e-mails, making it essential to create content that is compatible with the screen reader.
Physically disabled – those with physical limitations can find e-mails with busy design schemes or multiple elements particularly troublesome. Physically disabled users are often incapable of using a mouse. Therefore, the content in their e-mail should inform them of a new event, sale, etc. without the need to click through to a secondary website.
Cognitively and neurologically disabled – for users with this type of disability, receiving e-mails that have overly complex design, inconsistent navigation, or distracting elements could potentially hinder their ability to comprehend the e-mail. Individuals with these disabilities may suffer from dyslexia, autism, strokes, etc.
The Disabled Population
Americans with disabilities occupy a far greater percentage of our nation's population than originally thought; 19.4% of non-institutionalized civilians in the U.S. live with a disability. Image: a pie chart where a segment identifies the 19.4% which is also equated with 48.9 million.
The number of those considered to be blind with no residual vision is nearly 2 million. Image: a circle with a drawing of an eye superimposed which connects to the text "2 million".
8% of males and 1% of females are colorblind. Image: two pie charts are shown. The left pie chart has a sliver marked and labeled 8% male, and the right pie chart has a very tiny sliver marked and labeled 1% female.
Designing for Disabilities
- Text-Only Option. Ensure your e-mails are sent in multipart MIME format, and offer both plain text and HTML options when your user signs up to receive your e-mails. The HTML version will load an e-mail that contains images while the plain text version will load text-only content. This will allow your user to decide which is the most comfortable format to read.
- Be Mindful of Colors. Color brings vivacity to an e-mail. However, for those with color vision deficiencies, complex color schemes in an e-mail can be confusing or painful. Consider how content and copy may appear in an e-mail to color deficient users. For example, if black copy is set against dark red, the elements will become indistinguishable to those afflicted with achromatopsia. Use colors with high contrasts to help elements stand out from one another.
- Know Your Hierarchy. Establishing a clear hierarchy is particularly important when designing for those with cognitive or neurological disabilities. Placing important information higher in the e-mail or following a predictable flow will help users focus and navigate through the e-mail more easily.
- Clickable Links. Clickable links should be large and placed in an obvious location. The size of the link will be particularly beneficial to those who cannot control a mouse with precision. Those with partial visual impairment should not have to struggle to find a clickable link among other distracting images.
- Text Size. Use larger font sizes to accommodate visually impaired users. Anything below 14 points on a browser screen requires some effort to read. When selecting the typeface that you will be using in your e-mail, choose ones that are evenly spaced and not too condensed.
- Keep It Ragged. Avoid using justified copy in your e-mail. Some users may find the harsh rivers and breaks in the paragraph too difficult to follow. Allowing the text to left align and produce a "rag" will alleviate this. Also ensure that line lengths don't become too long; 50-70 characters per line is a good guidance.
- Screen Readers. While sighted users can visually skim or skip over nonrelevant content, blind users must listen to the entire content of the e-mail, one e-mail at a time. With this in mind, ensure a healthy balance of text and images in your design, and tailor the written content in your e-mail to deliver the main message. Also consider how compatible your design is with popular screen readers such as JAWS or Window-Eyes.
- Harmful Content. Content that flashes at certain rates or in patterns can cause photosensitive seizures in some individuals. Avoid flashing content or including links to videos that may have similar content.
Image: The design of these eight tips is an illustration of an e-mail placed between the first four design tips and text the last four. There are eight callouts on the illustration; they reference the eight design tips. The first tip about text only is placed at the very top of the illustration. The second tip about color points to an image in the upper left corner of the mail. The third tip concerns the first message in the mail which is just to the right of the image mentioned. Just under this image is a call to action button, which is the fourth tip. A section of text in this image of an e-mail refers to the fifth tip about text size. In that same text section you'll find the sixth tip about justification. The seventh call out about screen readers points to the text, too. The eighth call out about harmful content points to the bottom edge of the mail.
(In the footer of the infographic) Sources: davechaffey.com, prb.org, usability.gov, aoa.org, "Designing for Cognitive Disabilities," Ruth Ellison
This concludes the transcription.
The Transcribing Process
You can argue for and against the image descriptions. The message that someone wanted to get out was in the text. The images only enhances (or potentially distracts) from that message. I felt they should stay. Sighted people have the choice of viewing the images or focusing on the text. Why can't everyone have that choice.
Also, I made the last image quite descriptive as if I was describing it to a friend. I felt it was natural to want to convey a sense of the actual design and not just say "image of an email with eight callouts". This infographic was easy to describe – it was mostly text. Something with many overlapping images may be far more complex and tricky to break down into something coherent. That makes me often think – is the complexity necessary or is it bling? – which makes alarm bells go off inside this technical communicator's head!
The tweet that led me to the infographic was two months ago. Transcribing did not take two months. In fact, it was very easy with my Dragon Dictate for Mac doing the work! I read out the infographic and it did the typing! Finding the time to do that and then make a blog post was my priority challenge. Those who made the infographic must have had the raw text for the graphic designer. Taking that text and putting it into simple text form as I have done here should have taken very little time. Maybe they didn't think of that. That is why I wanted to write this – to point out what little effort it can take to make something completely unaccessible to some people suddenly accessible to everyone. Just take the first step and the positive reception should have you eager to take your next step.
Resources
