Take a moment to imagine the following scenario. You open up your laptop, log in, launch your web browser... and then your screen goes blank.
“The rest of your computer works just fine,” they tell you when you take it in for troubleshooting. The processor is still humming, the keyboard can still send commands properly, the speakers are still intact. You just can’t see anything clearly on the display.
You’re not alone. Nearly 285 million people around the world can’t see screens clearly either. Not because of faulty hardware, but because they are legally blind. And 466 million people worldwide have significant hearing loss. In fact, three people out of every 20 have some form of disability.
Disability is often viewed as a problem that originates within a person’s body. When viewed through such a lens, a “cure” for disability must therefore be a medical one. Disability activists have pushed back forcefully on this medical model, asserting that
the true source of a disability is social, involving attitudes, exclusion and systemic barriers.
In their view (and ours), it is the lack of an accessible society that disables individuals, not something inherent to their identity.
This “social model of disability” holds the promise that an accessible society will enable everyone to participate fully, without being disadvantaged or excluded by physical, cognitive or perceptual differences. This is also the promise of an accessible web. Our society is an overwhelmingly digital one; if we suddenly find ourselves without access to the internet, we are profoundly disabled.
The theme of this year’s Getting Real 2020 Documentary Film Conference is “Access. Power. Possibility.” Documentary filmmakers explore nuanced stories centered in this triad of values, and use increasingly digital platforms for outreach and impact. To show a sincere commitment to the values of access, power and possibility, anyone who builds a digital campaign—whether for their film, production company or organization—needs to learn what web accessibility is, and how to design with accessibility in mind.
Audible Access to the Web
So how do you navigate the web if your screen is, effectively, useless? Unlike in the hypothetical scenario we began with, getting a faulty screen replaced with a new one won’t do any good for someone who is blind. But there’s a type of assistive technology called a “screen reader” that will replace visual navigation with a combination of keyboard commands and audible feedback. That’s right: no screen necessary.
Welcome to the world of digital accessibility. Our mission is to make it possible for people with a wide range of disabilities to use assistive technology to engage in the rich cultural content being shared every day over broadband and WiFi. Assistive technology is hardware and software that provides access to digital content in an adaptive and alternative way. There are all sorts of assistive technologies out there, including speech-recognition software (now common on mobile devices), speech-generator software, Braille displays, Communication Access Real-Time Translation, screen-magnification software, and more. For the purposes of this article, we’ll focus on screen-reading software, the most common type of digital assistive technology for the blind and visually impaired.
Screens are an inherently biased technology, designed for people who rely on their vision. Screens assume that users can see colors, discern small letters on complex backgrounds, identify thin, blinking cursors amidst a sea of text, and point the tip of a floating white arrow at a precise location in order to select a desired image, button or hyperlink. A screen reader is a piece of adaptive software that corrects for this bias. Designed for people who are blind and low vision, screen readers enable users to complete tasks on their devices without a screen, as well as without the point-and-click interactions of a computer mouse, touchpad or touch screen.
The term “screen reader” is an elegant one. At its most basic, screen-reader software converts text to speech—in effect, reading aloud the information visible on screen in order to provide audible access to text, images, buttons, links and more. If you are reading this blog on a Mac computer, tablet or mobile device, you can actually turn on a screen reader right now, by enabling VoiceOver in the Accessibility settings of your System Preferences. If you’re on a PC, you can try a comparable screen reader by installing the freeware NVDA.
The simplest way to understand how a screen reader works in practice is to watch a fluent user in action. Meet Tommy Carroll, a Chicago-based drummer, producer and composer who has been totally blind since age 2. He uses a computer screen-reader program for Microsoft Windows called JAWS. As a power user, Tommy listens to the voice feedback feature at warp speed—but in this clip, he eventually slows it back down to a conventional speaking pace for demonstration purposes.
Videographer: Andrew Morgan; Sound Recording: Nick Nummerdor; Editor: Matt Lauterbach
Tommy keeps his screen on for the benefit of his sighted friends, family and collaborators who may want to use his computer. But for his own purposes, Tommy could physically remove the display from his laptop, and be unaffected in his ability to operate his device. Sighted users need a screen and a point-and-click interface; Tommy needs working speakers or headphones in order to hear JAWS read his options aloud, and a keyboard to navigate and make selections. (If he were using a touch-screen mobile device, the role of the keyboard would be replaced with a gestural interface of directional swipes, flicks, taps, and two- and three-finger variations.)
There’s only one problem with screen-reader software, and it’s a major one: Many websites are not designed with accessibility in mind.
Barriers to Online Access
Consider a fictional persona, Maryam, an emerging filmmaker who is ready to launch the website for her first documentary, about an innovative drummer who is shaking up the street performance scene in Chicago. Maryam has no budget to hire a professional web developer, and instead opts for a do-it-yourself website builder like Squarespace, Wix or Weebly. The template she selects is visually sleek, complete with a cool homepage carousel that she plans to use for sharing news about upcoming screenings.
Maryam begins her outreach campaign, and news about the documentary eventually reaches Tommy. Intrigued, he clicks a link to her film’s webpage...and his screen reader encounters one error after another. He can’t sign up for the mailing list. He can’t tell which social media icon is which. He can’t operate the homepage carousel to find information about screenings. There are dozens of images on the site without any accompanying text. He can’t get the film’s trailer to play. The list goes on, and Tommy eventually gives up. Not worth the frustration.
Because her film’s website was not screen-reader accessible, Maryam lost a potential fan in Tommy, who may have helped spread the word and encouraged his friends to see the film, and may even have reached out to connect with Maryam directly. The flip side of the coin is that Tommy lost an opportunity to pursue a keen interest, because he encountered too many barriers in his search to learn more.
Here is the truth about digital accessibility barriers: They are most often a result of inexperience with inclusive web design, rather than any intentional desire to exclude.
Maryam wants Tommy as a viewer and a fan; reaching enthusiasts like him is the whole point. But like so many of us, she knows next to nothing about HTML, CSS, Javascript and ARIA. Easy website builders and templates exist because we don’t all have coding skills or developer instincts or a designer’s eye. We just need to get information about our film, initiative or organization online; we need a digital presence. So we find the cheapest solution with the fewest technical barriers—for us.
Simple Steps to Greater Access
Maybe you know some HTML. Maybe you don’t. You don’t have to be a web developer to take the following simple steps to improve the accessibility of your digital campaign:
Choose an accessible template or theme. When selecting a content management system (CMS) and searching for a template that fits your artistic vision, include accessibility in your selection criteria. It’s much easier to start with a design that is already built with accessibility in mind, rather than trying to retrofit your site after it’s already gone public. Drupal and Wordpress currently lead the way when it comes to out-of-the-box accessible options. Chances are, if one of their themes or templates is tagged as accessible, a screen reader will be able to navigate your site. Be wary of third-party plug-ins, widgets, or other automated tools that promise an “effortless” solution. They cannot guarantee accessibility, and should never be used as a substitute for intentional and mindful design.
Keep it simple. The flashier the website, the less likely it is that those visually enticing features are designed with accessibility in mind. Dynamic page elements like complex scroll-based animations, hover dropdowns, carousels and sliders that update, move or change regularly, can create problems for screen readers—and truthfully, they can be distracting for any user. Your digital campaign should focus on engaging content, and not get too distracted by appearances. Minimalist design not only keeps your message front and center, it is also more accessible.
Verify that your site uses well-structured headings. When sighted users navigate a website, they are able to visually scan the various sections of content and quickly choose where to turn their attention. Screen-reader users orient themselves to a website’s content differently, by using keyboard shortcuts to skip from heading to heading, listening to each heading in sequence—similar to a table of contents. Whether you are using a consumer-friendly builder like Squarespace or a more customizable CMS like Joomla, make sure to include clear and consistent headings for each significant section of content, and you will go a long way towards making your web pages screen reader-friendly. Here is a quick sample of how to structure your content for accessibility:
<h1> or Heading 1 or Extra Large Heading for page titles
<p> or Paragraph for content text
<h2> or Heading 2 or Large Heading for sub headings
<p> or Paragraph for content text
<h3> or Heading 3 or Medium Heading for section headings
<p> or Paragraph for content text
If you prefer to hide headings for visual design, you can move headings off-screen.
Describe visuals. Images hold meaning; as the saying goes, a picture is worth a thousand words. To ensure that blind and low-vision visitors have equal access to the visual content on your website, include descriptions of significant imagery, such as your film’s marketing poster, company logo, production stills, headshots, etc. Importantly, if an image includes graphical text, such as a screening date announcement JPG, that image will not be screen reader-accessible. Additional descriptive text is needed to make that information audible. There are several ways to incorporate descriptions in your digital campaign:
Include an explanatory caption underneath key images;
Add ALT text to each image (ie., clarifying text that is hidden to sighted visitors, but embedded in the code for screen-reader users);
Elaborate at length with a detailed image description to accompany more complex digital graphics;
For any video clips or promotional trailers, consider adding a link to an alternate version that includes audio description, which is a commentary track with spoken explanations of key visuals and text that appear in a piece of media.
Choose colors mindfully. There are several visual conditions that affect the ability to discern colors, most obviously color blindness. People with such conditions typically don't rely on a screen reader, but they do need clear contrasts in order to perceive content on a page. Use a contrast checker to ensure that foreground text stands out clearly from its background, especially for hyperlinked text that is crucial to navigation. Additionally, avoid using color as the only way to distinguish one option from another. Someone who is color blind may not be able to distinguish red from green, so make sure there is clarifying text whenever colors carry significant meanings.
Provide captions and transcripts for media content. All videos used in your digital campaign should include quality captions in order to provide equal access for Deaf and hard-of-hearing viewers. Whether the video is your full film or a promotional trailer, and whether it’s posted on your own website or to a social media platform like Facebook, it should be captioned. Audio-only content such as podcasts should also include a transcript of the program, which can be displayed side-by-side with the audio player either as plain text, or as a downloadable or linked file. Thanks to services like 3Play Media, transcription and captioning have become increasingly affordable—to the point where a simple line item in your budget should cover their inclusion.
Evaluate your site before publishing. Reputable companies like the Bureau of Internet Accessibility, Deque and Knowbility can conduct detailed accessibility assessments of your website, but they aren’t cheap. Depending on the complexity of your digital campaign, estimates could range from $10,000 to $25,000 or more. For filmmakers with more modest means, here are a few do-it-yourself ways to evaluate your own web page.
Familiarize yourself with official accessibility guidelines. The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the web. They issue a set of standards or “success criteria” for ensuring the accessibility of a website, called the Web Content Accessibility Guidelines (WCAG). Their website contains an incredibly helpful resource called Tips for Getting Started that tailors recommendations according to activity—for instance, whether you are writing content, designing the visual interface or developing code.
Run your site through an accessibility checker. Several DIY tools are available to help web developers quickly identify accessibility issues before making a new post or page public. One of the best is WebAIM’s Web Accessibility Evaluation Tool (WAVE), a free tool that allows anyone to enter a web url, and then immediately identify accessibility errors on that page. Issues are flagged with handy icons that, when clicked, reveal explanations of the problem and its solution. If you already have a web presence, run your homepage through WAVE right now, and see how it performs.
Recruit proficient screen-reader users for feedback. Automatic tools like WAVE are great for a first pass, but ultimately the best way to check whether your digital campaign is accessible is to have one or more screen-reader users test it manually. This year, IDA worked with Tommy Carroll and several other testers to identify necessary improvements to the accessibility of documentary.org, and provide feedback on Getting Real ‘20. There’s no official database of blind users, but one way to solicit feedback is to post to this WebAIM discussion list or other online forums. If someone responds and is willing to help, offer to contract with them to provide testing or evaluation services.
None of the above methods, save for a full audit by a company that specializes in legal web accessibility compliance, will lead to official verification that your website meets standards. But at the end of the day, your potential audience will care less about strict legal compliance, and more about simple clarity and usability. Any effort you can make, on any of the fronts we’ve outlined, will aid in the vital process of improving access to your digital content for all visitors.
Why Digital Accessibility Matters, Especially Now
One of the most frustrating pushbacks that I hear from fellow filmmakers when I advocate for digital accessibility goes something like this: “But what kind of audience share are we talking about here? Is it really worth the effort?”
In short, yes. The internet has become an absolutely integral way to participate in the world around us. And in this age of social distancing, connecting virtually has become even more crucial. An inaccessible website is a locked door to engagement, an obstacle to connection and impact, and a barrier to the pursuit of equity, inclusion and representation. As documentary filmmakers, we purport to care deeply about these things. And so, digital accessibility must become part of our awareness—and one of our common causes.
Additional Resources
- W3C web accessibility checklist
- W3C web accessibility tutorials
- 18F accessibility website or application checklist
- Making your Squarespace site more accessible
- Wordpress accessibility handbook
- Drupal accessibility documentation
- Wix accessibility guides
Matt Lauterbach is a filmmaker, editor and accessibility consultant. He is founder of All Senses Go, an initiative to advocate and educate for barrier-free media.