Designing journalism products for accessibility
A few months ago, I went over my friend Betty’s apartment to drop off some spaghetti and meatballs. Betty is 89 and a news junkie. After we sat down and drank some tea, she asked me to help her find some news stories she wanted to read on her iPad.
“Sure,” I said, as we peered at her screen. “Why don’t you show me what you’re doing and I’ll see if I can help.”
Betty began to tap around on news websites. I watched her grow increasingly frustrated when she accidentally clicked on an ad or parts of the story she didn’t mean to click on. I also saw her grow increasingly worried that she wasn’t going to be able to return to her story or accidentally click on malware.
When I went home that night, I wrote a blog post about Betty and described what might be an ideal website for someone with limited eyesight or who might be unfamiliar with technology. It would have “no pop-ups, no overlaid ads, and big and easy scroll buttons,” I wrote. “It would need maybe two steps necessary to leave the page.”
A reader named Daniel reached out and said he wanted to help me make a website for Betty. In a few days, we put together News for Betty, a pretty minimal website that delivers Betty’s news.
I think about Betty — and people like Betty — a lot when navigating news websites. According to the 2010 Census, there are 5 million people in the United States between the ages of 85 and 94, and roughly 13 million people between the ages of 75 and 84. A 2014 Pew study shows that 37 percent of people older than 80 go online; that number jumps to 74 percent when surveying adults over 65.
How do we design experiences so that they’re accessible for the elderly or for people with visual or mobility impairments? Below, I list a few things news organizations can do to improve accessibility on their sites.
1. Learn what it means to be accessible. The World Wide Web Consortium (W3C), the international organization that develops open Web standards, maintains a comprehensive guide to accessibility standards on the Internet. They also have a series of notes for how to make content accessible for people with disabilities or for people who may have difficulty navigating a website. Do your forms have explicit labels? Do your images use an img tag and have alt. attributes for people with low vision? Are your headers nested properly? These are all potential accessibility issues on websites or applications.
2. Check your website to see if it’s accessible. There are many tools that exist that you can use to see if your news website meets accessibility guidelines:
-- Google's Accessibility Developer Tools is a Chrome plugin that allows you to run basic accessibility tests from the browser. There’s also WAVE, a tool that audits any website to see what accessibility issues may exist, and AChecker an accessibility auditor that looks specifically at HTML. You can find many more tools on the W3C’s Web Accessibility Initiative’s comprehensive list.
-- You can also check your website to make sure that it’s usable for people with color impairments, like color blindness. Color Safe helps you choose colors that meet WCAG contrast thresholds, while the Color Contrast Analyzer simulates different forms of color impairment so you can learn which colors may work.
-- There are also automated tests that you can run throughout the development process to ensure that your site remains accessible. a11y, pa11y, and ra11y are accessibility testing tools that can monitor accessibility across multiple sites.
3. Consider creating a text-only site. At a recent accessibility hackathon, I sat with visually impaired people who said that this text-only version of the NPR website was the best news website because their screen readers easily parsed the material.
4. Create accessibility standards for your content. The BBC issues HTML and mobile accessibility standards and guidelines for material to ensure “the BBC’s digital products are accessible to the widest possible audience.” A style or code guide for a newsroom helps ensure consistency and makes clear that accessibility is valued when designing a new product.
5. Test your products with people who may be unfamiliar with technology or who have impairments. Ask for volunteers or attend a hackathon aimed at people with impairments. Test your products and ask where people have difficulty. When I attended an accessibility hackathon, I asked people with visual impairments to tell me about difficulties they had when navigating most websites. This is now something I think about when designing new experiences.
6. Ask for help. The hashtag #a11y is used on Twitter by advocates for accessibility. You can follow the hashtag or look at open source projects, like this community-driven effort to make it easier to make websites more accessible.
7. Think about social media, too. Twitter doesn’t provide alt-text for images, so screen readers cannot parse Twitter images. Consider replying to tweets with the contents of any text-based images. Also think about the names of any images on your site. I recently saw a newspaper describe an image from a recent incident in London as STABBB.jpg. A much better description would have been man-stabbed-in-train-station.jpg. This has the additional benefit of being better for metadata acquisition. Having standards or guidelines in your newsroom can ensure these names are consistent.
Many of these tips are aimed at people who may have vision or mobility limitations; however, they’re also helpful for people with low bandwidth and those who are relatively new to technology, like Betty. If you know of other guidelines, or have particularly good examples to share, please do so in the comments.