How to Create Inclusive, Accessible Content
Blog 0000 Inclusive Accessible Content 3.26.2018
BY LAURA SHIELDS
Senior Software Engineer
Businesses do not purposely try to prevent customers from learning about and buying their products, yet this is an everyday occurrence on many websites (and web and mobile apps). Websites created without accessibility in mind may be excluding up to 20 percent of users. Luckily, there are easy ways to remedy this problem and be more inclusive to everyone.
Some aspects of making a website accessible depend on designers and engineers for proper implementation. These technical team members typically focus on a site’s functional features and interactions. Technical enhancements include a range of tasks, such as choosing colors that meet a minimum contrast ratio, attaching field labels to inputs, writing semantic code, programmatically moving focus and more. But the work of the technical team is often limited to the site’s initial development and minor maintenance after launch. A site could be tested for accessibility and considered fully accessible at the time of launch, but easily lose its highly accessible status as soon as the site content is edited.
Thankfully, content creators can do a lot to make sure their site stays accessible over time.
BECOME FAMILIAR WITH ACCESSIBILITY GUIDELINES
When trying to meet accessibility specifications, it’s helpful to understand what they are. Most people measure web accessibility using the Web Content Accessibility Guidelines (WCAG) as their benchmark. WCAG 2.0 was developed by the Web Accessibility Initiative (WAI), a group of people within the global community that sets internet standards called W3C.
Due to the robust and comprehensive nature of WCAG 2.0, it was recently adopted by Section 508 of the Rehabilitation Act of 1973. Section 508 requires federal agencies and federally-funded programs to be accessible to people with disabilities. Although Section 508 only applies to federal entities, this has not prevented other entities from getting sued. People who feel discriminated against on the web can file lawsuits based on the Americans with Disabilities Act (ADA), which states that any business or non-profit that serves the public must make its website accessible to the public, just as it would its physical location.
WCAG 2.0 is an extremely long technical document, and can appear rather daunting to someone unfamiliar with web accessibility. There are a lot of great resources to make it easier to understand, such as this accessibility checklist by Vox.
USE CLEAR AND PLAIN LANGUAGE
The majority of site content is often the written content. Writing can often be made more accessible by using plain language and simple sentences. In fact, there’s a lot of research showing that plain language benefits many different audiences, from those with cognitive impairment, to people who speak English as a second language, to readers who are just in a hurry. Plainlanguage.gov includes useful guidelines and examples of how to write plain language.
Writing can also be more socially inclusive by using a conscious and inclusive tone. Conscious Style Guide provides some great tips and articles on how to achieve this.
When adding content through rich text editors, using the built-in options for headings, paragraph styles, block quotes, etc. will enforce consistency across the site.
INCLUDE USEFUL IMAGE DESCRIPTIONS
Images and other media can be made accessible by including alternative text that describes the image to users with low or no vision. Image “alt text” is usually an optional field when adding images through a site admin panel. It is often a good idea to include alt text, but not always. In fact, alt text can be frustrating if it contain duplicative information or a poor description. This Alternative Text WebAIM article includes fantastic examples of when and how to implement alternative text properly.
INCLUDE TRANSCRIPTS AND/OR SUBTITLES WITH MULTIMEDIA
There are a couple ways that multimedia content can be made accessible. The most common way is through a transcription or text translation of the audio or video content. Transcripts don’t always need to be a verbatim account of the spoken word. Do-it-yourself transcriptions can be done by simply including the transcript text with the posted media. Paying a service to transcribe content might make sense if you have a large quantity of media files or if the files are lengthy. Transcripts on the Web: Getting People to your Podcast and Videos has some great tips to get started with transcripts.
Screenshot of a TED Talk video with transcripts.
Screenshot of a TED Talk video with transcripts.
Subtitles, including closed and open captions, differ from transcripts in that the text is synchronized with the media’s timeline. Do-it-yourself subtitles might involve a learning curve, as subtitle files have very specific requirements which allow them to be synced up properly. There are a number of free tools that can make the job easier, but paid captioning services are available as well. If you are using a popular video hosting service, such as YouTube and Vimeo, there are instructions and tools available for adding subtitles/captions to your videos.
Screenshot of a YouTube video with closed captions.
Screenshot of a YouTube video with closed captions.
In an ideal world, multimedia content would include both a transcript and subtitles. If adding both is not feasible, then transcripts are typically the better choice. Transcripts can reach both sighted and non-sighted users and are often easier to produce. In terms of WCAG media requirements, transcripts are usually required and subtitles or captions are typically optional (sometimes required).
GIVE VISUAL CONTENT A VOICE
Sometimes, a video’s audio track might not convey all the information needed for someone with low vision to understand what is happening. The way to solve this exclusivity is to include audio descriptions, which are narrations that guide users through the visual experience. WebAIM has a good example of an audio description on their website (note: the audio starts playing automatically). Audio descriptions can be time-consuming to produce, as they usually require the creation of multiple separate videos and/or audio tracks. The American Council of the Blind has compiled a large list of organizations that provide audio description services. WCAG only requires audio descriptions when there is important visual content that is not conveyed through audio.
ENHANCE LINKED DOCUMENTS
Document attachments are commonly forgotten about when making sites more accessible, but the content they contain is often just as valuable as the rest of the website’s content. Creating accessible documents isn’t necessarily difficult, but it does require a bit of technical know-how in order to properly set up a document in a content authoring tool such as Microsoft Word. The University of Washington has a lot of good information about creating accessible documents, including specific instructions for programs like Microsoft Word.
Portable Document Format (PDF) documents are the most common type of document found on websites. In order for a PDF to be fully accessible, it needs to be tagged. A tagged PDF includes a visually hidden underlying structure that allows it to be easily read by machines. PDF tags are similar to HTML tags, so individuals with some technical or front-end web experience will have an easier time with them. A PDF authoring tool that provides accessibility support (includes Microsoft Word) is required to create tagged PDFs.
In some cases, it may even be better to get rid of linked documents and display the document’s contents directly on the website instead. This kind of consideration should be discussed during early planning phases of a website project. Content strategists at The Nerdery can help clients think through a transition like this.
ENHANCE SOCIAL MEDIA DESCRIPTIONS
Beyond the website itself, you can also make sure your content is accessible on social media. Some social media platforms don’t include obvious accessibility enhancements, but that doesn’t mean it isn’t possible to provide an accessible experience. Twitter allows users to add alternative text to photos, but users have to enable this option in their settings in order to take advantage of it. Instagram does not include a separate alt text option, but there are also no character limits on post captions. Captions are the perfect place to include contextual information and descriptions for media posts! Snapchat isn’t super accessible out of the box, but can be made more accessible with some extra effort. A couple years ago, USAGov wrote a guide to making Snapchat stories as accessible as possible.
YouTube and Facebook take the opposite approach and enable some accessibility features by default; they try to automatically add captions to media content. Facebook recently enhanced their existing automatic alt text feature with automatic face recognition. YouTube automatically captions videos using speech recognition technology. YouTube knows that the automatic captions aren’t always accurate or comprehensive, so they allow users to easily edit the automatic captions and/or add their own right inside the YouTube interface (or via file upload, if preferred).
IMPROVE IN INCREMENTS IF FACING LIMITATIONS
Limited resources, budgets, and deadlines can get in the way of making a site’s content accessible quickly. If it’s not feasible for a site to be fully accessible right away, there’s a good chance it can at least be more accessible. For example, instead of transcribing every video up front, include an option that allows users to request transcripts, then address those requests as they come in. People will appreciate any effort you put forth to make their lives easier.
The goal of web accessibility is the same as the goal of any good web design: to create the best possible user experience for the most people. The WCAG specifications are a great starting point to improve web accessibility, but may not meet every person’s needs. Sometimes it’s hard to figure out how to create a great inclusive experience. If you’re not sure what the best approach is, try to put yourself in other people’s shoes. Contact disabilities groups to see if they can put you in touch with people who can test out your software or website(s) and provide feedback. Search online for resources that provide insights on how people with disabilities experience the world. YouTube user Tommy Edison has created quite a few videos about his experiences as a blind person, including how to read comments on Instagram and use YouTube and Twitter on an iPhone.
The most important thing we can do is not give up and keep working toward a more inclusive web. Progress is better than perfect.
Resources to better understand media accessibility requirements:
W3C – Multimedia Accessibility FAQ
WebAIM – Captions, Transcripts, and Audio Descriptions
University of Washington – Creating Accessible Videos
Captioning instructions from popular video hosting services:
YouTube Help – Edit or remove captions
YouTube Help – Supported subtitle and closed caption files
Vimeo Help Center – Captions and subtitles
Resources for enhancing PDF accessibility:
W3C – PDF Techniques for WCAG 2.0
WebAIM – PDF Accessibility
Adobe – Create and verify PDF accessibility (Acrobat Pro)
Section 508 – Creating Accessible PDFs with Adobe Acrobat Professional
Published on 03.26.18
Blog Iio T Header 02.25Making the Most of Your IIoT Transformation
Cloud Predictions Blog 02.072019: The Year of the Function
Blog Iot Predictions2 02.052019 IoT Predictions: Four Industries Poised for Impact
READY WHEN YOU ARE
GET IN TOUCH
© 2019 THE NERDERY®, LLC.