Monday to Wednesday, 10am - 4pm, ET
1.855.281.5499 (toll free)

Designing for Digital Accessibility and Inclusion

WebsitesAccessible Technology

This post is part of our Design for Non-Designers series, where we explore a wide range of design tools, tutorials and tips, to help elevate your nonprofit’s story and reach.

Digital spaces are powerful connectors and drivers of innovation. But as the World Wide Web Consortium (W3C), an international community that develops open standards to ensure the long-term growth of the web, explains: “when websites, applications, technologies, or tools are badly designed, they can create barriers that exclude people from using the Web”.

‘Bad design’ is not just an inconvenience. It is a serious barrier for many people living with a disability––and, according to the World Health Organization, that’s about 15% of the world's population. This means that globally many people continue to experience significant barriers in both their access to and experience of digital platforms.

   

Designing with accessibility in mind is one way to ensure that digital devices, products, and pages meet the needs of individuals with disabilities or sensory impairments. The Interaction Design Foundation, for example, identifies a number of concerns that can influence the experience of digital pages and tools. These are:

  • Visual (e.g., color blindness)
  • Motor/mobility (e.g., wheelchair-user concerns)
  • Auditory (e.g., hearing difficulties)
  • Seizures (especially photosensitive epilepsy)
  • Learning/cognitive (e.g., dyslexia)

Other barriers may also arise for users in the form of learning styles, language abilities, geographic location, internet access, and so forth.

Combined, all these issues shed light on the important role that inclusive design plays in advancing digital accessibility and inclusion. This is a big and nuanced topic, and in today’s post we’ll offer a preliminary overview of principles and practices that any individual or organization can explore to start their own self-learning and growth journey in this area.

Accessibility is essential for developers and organizations that want to create high quality websites and web tools, and not exclude people from using their products and services.

Inclusive Design

As Hootsuite explains, designing inclusively means stepping away from a reliance on one-size-fits-all solutions centered around the needs and abilities of the ‘average’ user to delivering a satisfying user experience to as many people as possible. By accounting for diversity in all its forms (including ability, language, gender, age, and other factors), inclusive design allows a greater number of people to engage with digital resources and to benefit from what they have to offer.

At the same time, accessibility is often mistaken for usability in the world of user experience (UX) design. As the Interaction Design Foundation writes, there is certainly an overlap between the two, but also crucial differences. “Usability is concerned with whether designs are effective, efficient and satisfying to use. (...) Accessibility, on the other hand, is concerned with whether all users are able to access an equivalent user experience, however they encounter a product or service”.

To assist organizations worldwide in promoting accessibility, the W3C has created a comprehensive set of guidelines that offer detailed instruction on how to improve anything from web readability to online learning experiences. If you are new to these standards, WebAIM offers a helpful summary of W3C’s guidelines alongside a checklist and examples of success criteria to quickly identify areas for improvement. W3C’s key accessibility standards call for online content that is:

  • PERCEIVABLE: that is, web content that is made available to the senses (sight, hearing, and/or touch) by providing alternatives such as alt-text captions, subtitles, and more;
  • OPERABLE: meaning that, to ensure page functionality, interfaces provide users enough time to read and use content, and do not design content in a way that is known to cause seizures or other physical reactions;
  • UNDERSTANDABLE: the user interface is easy to use, language is clear, and information is easy to process;
  • ROBUST: content can be interpreted by a wide variety of user agents, including screen readers and other assistive technologies.

If your nonprofit has a webpage, a social media presence, and produces outreach and/or educational resources, learning about accessibility and inclusive design is a must. In the sections that follow, we outline a few hands-on ways to get started offering digital content in accessible and inclusive formats.

Creating Accessible Videos & Presentations

For a video or presentation to be accessible, one or more of these features should be provided:

  • Transcript;
  • audio description;
  • captions;
  • and delivery through an accessible media player such as Able Player, an open source player whose controls are keyboard-accessible and controllable by speech recognition users.

Transcripts and audio descriptions:

Transcripts and audio descriptions make multimedia content searchable, and may be preferred by screen reader users since many set their assistive technology to read at a rate much faster than natural human speech. A transcript also helps users who can neither hear the audio nor see the video because it integrates with tools such as refreshable Braille devices. A well-produced transcript should include descriptions of important audio and visual information not captured by dialogue alone, for example, sections where there is laughter and notes when someone is entering or leaving a room.

Captions:

Captions are text versions of speech and other audio content that allow people who have auditory impairments to follow along with greater ease. To be accessible, captions should be:

  • synchronized to appear at approximately the same time as spoken content;
  • capture dialogue and other audio information as closely as possible to what is being spoken;
  • be easily accessible to those who need it, for example, with the option of turning them on or off (captions that can be turned on by the user are known as ‘closed captions’, while those that remain as a fixture on the screen are known as ‘open captions’.)

If you’d like to learn more about captions, W3C has a dedicated page outlining accessibility standards for audio and video.

And did you know that captions are not just for videos? You can add them to Zoom meetings and presentations (this video tutorial by Zoom explains how to do so), you can present with real-time, automatic captions or subtitles in PowerPoint, and you can add them to Google Slides. The video below was recorded by Alice Wong of the Disability Visibility Project, an online community dedicated to creating, sharing, and amplifying disability media and culture, and walks you through the process of adding captions to Facebook videos as well as offering reflections on why accessibility matters.

Lastly, if you would like to try DIY captioning, Amara’s award-winning technology enables you to subtitle any video for free, and offers the option of managing teams of translators for larger subtitling projects. You could also try Clipomatic, a smart video editor that turns all you say into live captions.

Making Social Media Accessible

An often overlooked yet increasingly important aspect of inclusive design revolves around the production and dissemination of social media content. As a growing subsect of the Internet, it is crucial for individuals and organizations to consider how to improve accessibility to meet the needs of diverse audiences.

The UX Collective recently published an article on Medium that offers thoughtful and actionable recommendations that apply to multi-channel platforms such as Instagram, Facebook, Twitter, and more. Below is an excerpt from their Social Media Accessibility Checklist:

Offer Alternative Text Descriptions for Images

‘Alt-text’ aids image recognition by screen readers and allows visually impaired users to hear the description that is being provided. Some platforms like Instagram have recently introduced automatic alternative text so users can hear descriptions of photos when they explore sections of the platform like Feed, Explore and Profile. However, many platforms still do not offer automatic alt-text, so providing custom descriptions is a great way to help improve the accessibility of your posts. Here is an example of how to do so on Twitter and Instagram.

Provide Context for Animated GIFs

This media format currently has no accessibility support on most social media platforms, so writing an image description is key. If using GIFs, be sure to select one that, as the UX collective writes, “can be understood through its text content alone”. Consider Your Emoji Use The collective recommends using emojis sparingly to be mindful of users following along on screen readers. “Braille readers’ software are not ubiquitously updated to reflect emojis, so never rely on emojis to convey the entire meaning of a post or comment”. Consider this example they provide: “shrug” ¯\_(ツ)_/¯ will be read by a screen reader as: “Macron, backslash, underline, katakana, underline, slash, macron.”

Avoid Ableist Language and Keep Texts Understandable

Another important facet of promoting accessibility is being mindful of the pervasive and often implicit ableism reflected in many common expressions in our language and culture. This list of ableist terms is a helpful starting point for personal exploration and learning, so that we can collectively dismantle abelism and advance disability justice in everyday life.

If you are adding text to your social media posts, another hands-on way to promote inclusion is to use simpler words to help readers follow along. UX collecting suggests sticking with 1-2 syllable words whenever possible, and recommends sites such as PlainLanguage.gov and this list of plain English words and phrases from Wikipedia to help you select the best words for your texts.

Promote Diverse Representation

In UX Collective’s words: “represent people with all kinds of levels of ability, including temporary disabilities like injury or limitations. This applies to all kinds of content — photos, videos, written, shared. Try to highlight disability activists, writers, and artists. Don’t expect everyone with a disability to be disability activists, just give people a platform to tell their story”.

Test Your Tech

The tech industry has a lot to offer in improving and expanding accessibility in digital spaces. In the United States, the Tech Disability Project is elevating people with disabilities in the tech industry through representation and community. Domestically, the Government of Canada has launched a $22.3-million Accessible Technology Program to invest in hardware and software solutions that help Canadians with disabilities overcome barriers that come in the way of their full participation in digital spaces as well as the workforce.

On a more immediate level, nonprofit organizations and individual content creators can also do a lot to improve the accessibility of their online presence. For example, Fable is a Toronto startup that engages a diverse community of people with disabilities in user testing to meet the compliance goals of organizations. You can also test the accessibility of your digital content by using platforms like Siteimprove, which offer an ‘accessibility checker’ tool to give you immediate feedback and recommendations based on W3C’s accessibility guidelines. Or you could go straight to the source and use W3C’s testing tool and accessibility evaluation tool.

To learn more about how to make your digital presence more accessible, check out Digital A11ly’s list of open source accessibility tools. Their site also offers helpful articles on topics such as Tools to Evaluate Your Design for Color Contrast Accessibility, 42 Browser Extensions to Perform Accessibility Testing Effectively, and 17 Free Mobile Accessibility Testing Tools.

Further Reading

Improving accessibility and promoting inclusion is ongoing work. Below we offer a preliminary set of resources to help you deepen your knowledge of accessibility standards and spark curiosity about inclusive design:

  • Everything You Need to Know About Inclusive Design for Social Media (Hootsuite)
  • Designing for Accessibility is not that Hard: Seven Easy-to-Implement Guidelines to Design a More Accessible Web (Medium)
  • VIDEO: The animated guide to inclusive design (Microsoft Story Labs)
  • VIDEO: An accessible process for inclusive design (Google Developers)
  • When it Comes to Accessibility, Apple Continues to Lead in Awareness and Innovation (TechCrunch)
  • As ADA Turns 30, Tech is Just Getting Started Helping People with Disabilities (TechCrunch)
  • Fierce Disabled Women: 5 Instagram Accounts to Follow (Medium)
  • 9 Apps for Accessibility Technology (BrailleWorks)
  • Internet Accessibility: Internet Use by Persons with Disabilities (Internet Society)

Additional Resources