Create Accessible Content for Diverse Audiences & Contexts

Summary: Publishing documents or images of documents to the web reduces the number of people you can reach.

To maximize your audience, develop content that is responsive, considerate of diverse audiences, and accessible to people and algorithms alike.

The Destination Is Legion

Many people develop content in a way that assumes the final destination is the printer — an updated privacy policy written in Word, a brochure or flyer for an upcoming event laid out in InDesign. The file is then passed on for publication to websites, social media channels, and email newsletter.

The idea that content needs to be modified for different contexts can come as a surprise, especially when publishing to the web is the last step in a process with a looming deadline.

Let's look at why you should take the extra effort to optimize and even redesign content for the web.

Reason 1: Shortcuts aren't worth the risk

Does your company have a policy that addresses accessibility? I bet you can find a document that says something like: "We are committed to making our website accessible to people of all abilities …" If so, then uploading an inaccessible PDF to your website with a "click here" link breaks a promise to your audience.

If your company doesn't have a policy of ensuring content accessibility, it's best to proceed as if it does. Inaccessible websites carry legal liabilities, and ADA Title III lawsuits are on the rise. Sure, the likelihood of finding yourself in a legal battle over inaccessible content is very low, but why risk it? An inaccessible website isn't really different than an inaccessible building. We wouldn't cut corners on wheelchair accessibility, so we'll do all we can to make website content accessible.

Reason 2: You gain a more diverse audience

You want to reach as many people as you can with this content. Trapping copy within a file rather than publishing it as HTML reduces the number of people who will access that content.

We don't care about people with low vision, and everyone else will just have to squint and bear it.
— Us, any time we publish a PDF to a website

Text in an image or static file isn't responsive — It can't resize according to the viewer's screen size. That PDF with 12 point font looks minuscule on a smartphone, so even people with good eyesight will struggle to see it. Why make people pinch and zoom to read the copy?

Now consider the many people who have low vision or need glasses or contact lenses:

 

Percentage of Americans By Age Group Who Use Some Form of Vision Correction

 

This chart above comes from a 2015 report from The Vision Council: 76.2% of Americans use some form of vision correction.

Ironically, The Vision Council published their report to the web as a PDF that's next to impossible to read on a mobile device.

 
pdf-report-on-iPhone.jpeg

The Vision Council's report on an iPhone

You might be thinking: "But no one is going to read a report on their phone."

You're right — they won't if it looks like this. But if you don't think longform content can be just as good or better on a small device, you should check out annual reports from Mailchimp and Shopify. If you don't want to get fancy, simply publishing the text in HTML to a webpage would be a big improvement.

 

Nonprofits often publish PDFs to the web, but people run into it most often when visiting restaurant websites.[1]


  1. To preserve our marriage, my wife no longer allows me to order from restaurants online. If you own a restaurant, I would be happy to work with you to rid our planet of PDF menus. ↩

How can we design for readers of all abilities and a multitude of devices?

Karwai Pun at the Government Digital Service (GDS) published some basic principles:

 
low-vision-karwai-pun.jpg

Designing for users with low vision

Do:

- use good color contrast and a readable font size
- publish all information on web pages
- use a combination of colour, shapes, and text
- follow a linear, logical layout
- put buttons and notifications in context

Don't:

- use low color contrasts and small font size
- bury information in downloads
- only use color to convey meaning
- spread content all over a page
- separate actions from their context

 
 
designing-for-screen-reader-karwai-pun.jpg

Designing for users of screen readers

Do:

- describe images and provide transcripts for video
- structure content using HTML5
- build for keyboard use only
- write descriptive links and headings

Don't:

- only show information in an image or video
- rely on text size and placement for structure
- force mouse or screen use
- Write uninformative links and headings (No more "Click here" links, please!)

 

Reason 3: Do it for the algorithms

Text trapped within images and files hurts search visibility.

Imagine you publish a postcard or flier to your website promoting an upcoming event. The flier has your carefully selected image along with all the important details set within the file: when, where, who, and what to do next. 

The information about your event won't be indexed by Google, which means people searching the web for the name of your event will have a difficult time finding the page.

Rather than simply upload the file to your website, create a proper web page for the event and separate images from text.

 

Before: Event info in a JPEG file | After: Text is freed from the file

 

By separating text from the image, you'll make it accessible to Google, which means more people can find it.

Case Study: An Emergency Room PSA

A client in the healthcare industry shared a document from Blue Cross Blue Shield that they wanted to circulate to their patients. The goal was to help patients decide whether to go to the emergency room or to a local clinic based on their condition.

     
    emergency-room-pdf-on-iphone.jpeg

    The original emergency room PSA document, viewed on an iPhone

    This image gives a sense of how a user would experience the PDF on an iPhone. This would be difficult for someone with perfect vision to read. Then consider that this content is aimed at people who may be injured or caring for someone who is injured. Clarity and ease of use become even more critical under those circumstances.

     

    We wanted to improve on a good thing by:

    • ensuring people using handheld devices could process the content quickly. The last thing anyone in pain or under stress needs is the added frustration of trying to pick their way through tiny text.
    • focusing users' attention to reduce cognitive load (progressive disclosure).
    • delivering only the result that is relevant to the individual's condition to instill confidence and make it more likely the user will pursue the recommended action.
    • making it as easy as possible for those who may be in an actual emergency to get emergency care by dialing 911.
    • creating content that would be accessible to search engines to reach a broader audience.
    • producing a piece of content that remains relevant and reusable across different communication channels in the future.
     
     

    To meet the objectives, we worked together to develop an interactive tool using Typeform that suggests what users should do based on their symptoms. You can try a protoype of the form here.

    The one area where this solution failed? Typeform isn't accessible to screen readers. So, while we improved the readability and reduced cognitive load by introducing icons in addition to text, this model doesn't allow for full accessibility.

    Perfect? No.

    Better? Much.

    Recap

    Consequences of circulating content that isn't optimized for the web

    • Words in image files or PDFs can't be found by search engines. People searching the web won't be able to find your content.
    • Making a habit of publishing inaccessible content exposes your company to legal risk.
    • If someone is viewing the page on a smartphone, the text in that image can be almost impossible to read. 
    • People with low vision won't be able to access the information with a screen reader.
    • Content that is less accessible results in less engagement, reducing ROI.

    Benefits of content that is optimized for the web

    • Google will be able to "see" your content: When people search for the content, you'll appear in search results.
    • You and your boss can sleep easier at night knowing that your web content complies with legal standards.
    • People who view the content on their phones will be able to read what you have to say. (Many people will skip over your content rather than take the trouble to zoom in and out to read your Word doc.)
    • People with low vision will be able to access your content.
    • Optimized content can be reused over and over across many channels, resulting in a better ROI.

    Further Reading

    How accessible is your website? 

    A website evaluation gives you insight into how your website can improve to bring in more customers. Learn more about Super Helpful website evaluations.