Cover


 
PNCONNECT
DIGITAL ESSENTIALS

Accessibility

 

Welcome

 

Making the Web Work

“Accessibility” is a big buzzword in social media lately, with both Facebook and Twitter recently announcing updates to improve accessibility on their networks via alternative text for images. But accessibility (sometimes shortened to “a11y” — there are 11 letters between the “a” and “y” in “accessibility”) is more than a trend or an interface tweak for a small minority of users. When done right, accessibility makes the Web more useful and usable for everyone.

This issue’s Feature clears up four common misconceptions about accessibility, while our Guide offers tactical tips to get started with making your site more accessible. We also have a synopsis of a fascinating interview with LinkedIn accessibility pro Jennison Asuncion, himself a blind internet user, and our Case Study collects several stellar examples of accessibility upgrades. Throughout this month’s edition, we’re sharing recommendations for accessibility tools to improve your browsing experience and give you a sense of what navigating the Web is like for differently abled users.


The PNConnect team signature

 

Accessibility Apps: Screen Readers

A variety of screen readers are available for Macs, PCs and mobile devices, and many are cheap or free. Visually impaired people use screen readers to aid in Web browsing, so trying one out can be a good way to get a sense of what their online experience is like.



WebAnywhere screenshot

Feature

Four Accessibility Myths


Myth #1: Accessibility only matters for visually impaired people.

The A11y Project breaks down accessibility into four categories: visual, auditory, motor, and cognitive.

Visual accessibility is crucial to blind people — and many others as well. It’s relevant to colorblind people (as many as 8 percent of men with Northern European ancestry), the elderly, and people using devices or connections that are incapable of downloading images (a common problem in developing markets). All told, about 285 million people worldwide experience some form of visual impairment.

Auditory accessibility — the ability to use a site without sound — helps the hearing impaired, anyone with an auditory processing disorder, and of course, anyone working in a shared office who doesn’t have earbuds handy.

Motor accessibility makes it easier to navigate a site with limited means (e.g. a single keyboard key) and enables users to take advantage of assistive technology like eye trackers and specialized keyboards. This is critical for those with cerebral palsy, Parkinson’s, and similar disorders. It can even help out someone who has a broken arm or a dead mouse battery that’s forcing them to navigate the Web in unusual ways.

Cognitive accessibility makes your site easier to understand for those who have challenges mentally processing information. This includes people with Down’s syndrome, autism, or dyslexia, among others. Cognitive disabilities affect more than 6% of the population.




About 285 million people worldwide experience some form of visual impairment.

44% of U.S. computer users use some form of accessible technology.


Myth #2: Accessibility only matters to a small percentage of Web users.

Nearly everyone relies on Web accessibility at some point, whether they’re navigating a site in a non-native language, working with a broken mouse, browsing on a slow connection, dealing with deteriorating vision in old age, or any of countless other scenarios. A 2003 Forrester study found that 44% of U.S. computer users use some form of accessible technology, and 57% are likely or very likely to benefit from the use of accessible technology.


Myth #3: Accessible sites are less beautiful and interesting.

Accessible sites don’t have to be boring or ugly. In fact, many of the principles of accessibility align with the basic rules of smart design: Present a simple user experience that’s easy to understand, make site navigation straightforward and easy, and organize the elements of each page in a logical manner. Making a site accessible goes a long way towards making it responsive, too, so that it will display well on various screen sizes and devices. Plus, using simple text and clearly labeling site elements makes it easy for search engine robots to interpret, helping SEO.

Marcy Sutton’s Accessibility Wins Tumblr collects examples of sites with well-executed accessibility. The “winners” it highlights include a wide variety of sites, ranging from Starbucks to Shell to United Airlines.


Screenshot of Starbucks website
Screenshot of Shell website
Most accessibility best practices align with design best practices.



Myth #4: Accessibility is tough to implement.

Actually, since most accessibility best practices align with design best practices, you probably already have most of what you need to make sure your site is accessible to all kinds of users. Plus, there is an abundance of tools available online to help you test and improve the accessibility of your site. Scroll down to our Guide to get started.




Cryptzone screenshot

 
 

Accessibility Apps: Cryptzone

Cryptzone offers accessibility compliance as part of its larger security and other software packages. It touts its ability to bring a website up to snuff with governmental requirements for reaching a visually impaired audience.


Interview

Digital Accessibility Pro Jennison Asuncion

In a recent episode of “The Great Grommet Podcast,” PNConnect client Grommet interviewed Jennison Asuncion, a digital accessibility pro at LinkedIn (another PNConnect client). As a blind person himself, Asuncion brings both personal experience and professional expertise to the discussion. Here are just a few of the tips he shared:

  • Avoid video that plays automatically on your site. Many visually impaired users use screen readers to read out the text on a page, and the audio from a video will conflict with the screen reader, resulting in a garbled experience.
  • Avoid using images of text instead of readable text — a screen reader won’t be able to tell what the image says.
  • To get a sense of your site’s accessibility, attempt to navigate it using just your keyboard. Avoid requiring users to mouse over components of your site in order to use it properly.

  • Be conscious of the experience of someone using the “tab” key to get around your site. Have focus outlines turned on so users can see which link or element of the site is currently selected, and follow a logical tabbing order: left to right, top to bottom.
  • Design your web site with strong color contrasts to improve legibility for visually impaired and colorblind users. Several tools for analyzing color contrast automatically are available for free online.

Listen to the full interview for more detail and several recommendations for additional accessibility tools and resources.

 
 

Accessibility Apps: Ai Squared

Ai Squared approaches accessibility from the end user’s point of view, with software for individual machines that offers magnification, screen reading and more. They also offer an enterprise solution that builds this technology into websites themselves.



 
Ai Squared screenshot

Digital Guide

Getting Started with Accessibility

How can you make sure your site is accessible? Here’s a checklist to get you started:


1. Check the comprehension level of your content.

If your site has a general audience, its content should be easy to comprehend for readers with cognitive disabilities. WebpageFX and Juicy Studio both offer tools where you can input text or a URL and receive feedback on reading comprehension levels.

2. Check your site’s color contrast.

The A11y Project suggests a simple way to test color contrast: Browse your site on your computer or mobile device with the screen brightness set to its lowest setting. If anything on the page is difficult to read under these circumstances, it’s also going to be difficult to read for those with vision impairments. You can also run your site through a Colorblind Web Page Filter to see how it looks to people with colorblindness.

3. Try navigating your site using only your “tab” key.

This tip comes from an interview with LinkedIn accessibility pro Jennison Asuncion. If your site requires visitors to use a mouse, it poses challenges to those with vision or motor impairments. It should be easy to see which element of the site is selected and where pressing “Enter” will take you.


4. Add alt text to all images.

This is the text that appears when you hover your mouse over an image. It’s vital for helping visually impaired users — or anyone browsing with a slow connection — understand what an image depicts.

5. Create transcripts of audio content, like podcasts.

Not only does this improve accessibility for the hearing impaired, it’s also great for SEO, giving search engines extra text to index.

6. Provide captions for videos.

Facebook and YouTube offer built-in tools for captioning videos. Captions broaden your audience to include both the hearing impaired and anyone who can’t turn up their speakers when they see your video.

7. Dig into additional resources.

The A11y Project offers a Web Accessibility Checklist with detailed tech specs for your site. You can plug your site’s URL into the WAVE Web Accessibility Evaluation Tool to get an in-depth report on any accessibility red flags. Google’s “Accessibility Developer Tools” Chrome extension serves a similar function. W3C offers a whole suite of tutorials and resources for every aspect of accessibility. Finally, Marco’s Accessibility Blog features additional tutorials and links.

Can we lend you a hand in making your site more accessible? Reach out to your PNConnect representative or email pnconnectinfo@porternovelli.com.




Apple accessibility



Accessibility Apps:
Microsoft / Apple / Google

In addition to individual solutions, tech titans Microsoft, Apple and Google all have portals, tools and recommendations to reach differently abled audiences and bring the best of the Web to them.



Case Studies

We’ve talked a bit about how Twitter, Facebook and Google are all making the social web more accessible. And we’ve shown you some information on the demographics of accessibility tools. So now the question is, who has actually put this into practice and how?

Mitsukoshi worked with IBM to make its website more accessible for older people and those with vision issues. Using IBM’s Easy Web Browsing technology they were able to make it more usable by allowing visitors to change text size, background color and text color. The adjustments broadened the reach of seasonal gift promotions and increased sales.

Tesco website screenshot

In 2001, the U.K. grocery chain Tesco stopped short of a complete site overhaul, but it did create an accessible alternative that eliminated extraneous images, made navigation easier and more. Creating a parallel site doesn’t align with W3C’s best practices, but can be a viable option.

EDUPrize wanted to make their new website accessible to those with vision disabilities but lacked internal expertise to do so. They used an out-of-the-box software solution that scanned the site for elements like alt-text, forms, and more and flagged potential issues to be addressed.

The University of Texas at Dallas website screenshot

The University of Texas Dallas made sure its site at least met if not exceeded minimal viable standards. It makes the point in its recap of its efforts that the content and format of a page should still be readable with style sheets turned off and that relying on style to convey core messages could leave those messages inaccessible to those with vision issues.



About PNCONNECT



PNConnect is the global digital services offering from Porter Novelli. Our global team spans 60 countries and brings the combined digital resources of our social media marketing, creative production, paid promotions, and web development capabilities together for one purpose — to help our clients share their story with the world.

For more information about our team and approach, or to learn how we can help your organization with digital strategy, development and measurement, please visit the PNConnect site.


 

Thank You

 

Many thanks to our April contributors.

Mary Gaulke in Sarasota wrote this month’s Feature, Guide and Interview synopsis. Chris Thilk in Chicago provided the Case Studies and interstitial recommendations.

Matthew Keys uploaded the welcome photo to Flickr, some rights reserved.

Drop Us a Line

We’re eager to hear your thoughts on this edition and your suggestions for future issues.