What Is Web Accessibility and Why Should Nonprofits Care?

According to Techopedia, accessibility is “a measure of how usable a computer system is to all people, including those with disabilities or impairments.” In simpler terms, web accessibility means that a website, application, or digital tool is created with intention so that people of all abilities can use it as it was meant to be used. Accessibility takes into account physical, visual, auditory, neurological, speech, and cognitive disabilities with the ultimate goal of allowing people of all abilities to participate or utilize the website or tool.

To help your nonprofit understand web accessibility we are going to go over the guidelines, why it’s important for nonprofits, and how you can make your site accessible.

Did You Know? Accessibility is often referred to as “a11y” with the “11” representing the number of letters in between a and y.

What is web accessibility?

Currently, the standards for what it means to be accessible come from The Web Content Accessibility Guidelines (WCAG). These guidelines are set by the World Wide Web Consortium (W3C), which is the main group for setting international standards for the Internet.

These guidelines are centered around web content adhering to four main standards:

1. Perceivability: The user can identify content and interface elements by means of the senses (primarily via vision and/or hearing).
   Example: When uploading a video with speech, provide a text transcript so the content can be consumed with or without sound.
2. Operability: The user can successfully use controls, buttons, navigation, and other necessary interactive elements.
   Example: Ensure that forms on your website can be navigated and submitted with only keyboard controls.
3. Understandability: The user should be able to comprehend the content, and learn and remember how to use the interface.
   Example: Avoid using unexplained jargon and acronyms when writing content so it can be understood by all readers.
4. Robustness: The user should be able to choose, to a reasonable extent, the technology they use to interact with your product.
   Example: A specific web browser should not be necessary to access or operate your website.

Many believe that accessibility mainly concerns optimizing internet content for the visually impaired, but accessible web content benefits users of all different abilities and contexts. Accessibility improves the experience for people without disabilities in the following scenarios:

• Users on mobile devices (smart watches, tablets, devices with different input modes, etc.)
• Users who have “temporary disabilities” such as an injured hand
• Users who have “situational limitations” such as when they can’t listen to audio
• Users who have a slow or limited Internet connection

Why is web accessibility a priority for nonprofits?

Inclusivity is the core concept behind web accessibility since it directly impacts how many people are able to consume content through your website. If your site is not accessible, you are preventing groups of people from gaining information, using a service, or having an experience that other people can.

For instance, an individual who is hard of hearing would have a much better experience if a transcript was provided alongside audio content. Likewise, someone without full use of their hands would benefit from not needing to reach for a mouse in order to navigate a web form.

Providing an equal experience for everyone is an important facet of your web presence and that goes even further when you think about the characteristics that define the nonprofit industry. As a community of people dedicated to providing life-changing services and making progress against humanity’s greatest struggles, nonprofit organizations have a unique responsibility to make their content usable for all people. This gives all people an equal opportunity to seek help, join your cause, or simply learn about your mission.

Accessibility is also an important piece of the puzzle when it comes to gaining the support you need to create impact. A truly accessible site has the potential to improve the experience of all users and will impact if they navigate through your content to learn more, return to your site, and whether or not they’ll take an action such as making a donation.

How can I make my nonprofit’s web presence more accessible?

Ensuring your content adheres to web accessibility guidelines often begins in the ideation stages. Whether it’s selecting an accessible color palette, choosing a legible font, or configuring a layout that’s easy to navigate and comprehend, the design of your web page is the foundation of accessibility. Although starting with an accessible design is ideal, there are many ways to make accessibility improvements at any time.

For example, the Classy design team has made some great strides to improve the accessibility of Classy’s existing product by addressing some of its key design elements. Former senior product designer, Ana Medina detailed their experience and offered a ton of practical a11y tips in a post for the Classy design team blog.

One notable design enhancement we’ve already made at Classy was replacing the accent color used throughout our member profiles and management suite with a more accessible, higher contrast shade.

Previous lower contrast accent color is on the left and new higher contrast accent color is on the right.

To a user without vision loss, the before image on the left above may not seem too troublesome. However, if we apply a vision simulation filter with slight acuity loss and moderate contrast loss, you can tell how the new accent color gives our UI a boost in legibility.

Previous lower contrast accent color is on the left and new higher contrast accent color is on the right with a low contrast and vision acuity loss filter applied.

With a solid foundation of accessible design in place, the rest of the accessibility magic happens within the implementation phase when developers or content creators build a resource for consumption on the web. Implementers must keep in mind all of the different ways the resources they are building could be consumed. Are alt tags being properly applied to add text-based context to visual elements? Can every interactive element be used with only a keyboard? It can be a lot to keep track of, but luckily there are some tools at our disposal.

Accessibility Testing Tools

If you want to make your existing site more accessible but aren’t sure where to start, it can be helpful to run an audit. Tools such as WAVE can scan your website for any obvious WCAG offenses and then offer solutions.

Another way to test your implementation is by trying to use it in alternative ways, such as the following:

• Try clicking on buttons or filling out form fields using only your keyboard.
• Use a vision impairment simulator such as NoCoffee to ensure that your interface is not relying on colors alone to convey meaning and that your color contrast ratio is high enough.
• Use a screen reader like VoiceOver (comes standard on Macs) or Jaws (available for PCs), and test what the voice output of your page is as you navigate it.

Once you have a list of accessibility items to be addressed, it’s time to get to work! When it came to improving the accessibility of Classy’s fundraising and donation pages, the development team started with two focus areas: navigation and labeling.

Accessible Rich Internet Applications (ARIA) labels were implemented to aid the app whenever plain HTML wasn’t enough. These add some extra context that screen readers can use to aid in the understandability and navigability of things such as dropdown menus, forms, and modals.

For areas of the site in which tabbing through forms normally was not possible, code was added to manually reset where pressing the tab key would take the user. In the gif example above, the next portion of the sliding multi-part form should be focused after the user presses “next.” Because of the way this particular form is built, the content inside the next form section would be unreachable by pressing “tab” alone. Therefore, we listen for the user pressing “next” in the code and automatically reset the focus so the user can easily continue filling out the form fields.

For a deeper dive on how to make your implementations more accessible, check out the Accessibility Developer Guide.

What if I’m not technical?

Not super tech-savvy? No problem! The difference between an organization with an accessible web presence and one without often comes down to a healthy dose of advocacy. Being a good advocate for accessibility is the most effective way to drive progress and inspire change within your organization.

Here are a few ways you can become an advocate within your nonprofit, no expertise or technical skills required:

1. Educate your team. Establishing a foundation of accessibility knowledge will empower your team to prioritize accessibility, identify issues, and carry out solutions for them. Help connect your team to the resources they need to learn, whether it’s setting aside time to complete online courses or scheduling onsite training with an expert.
2. Encourage continuous discussion. More likely than not, the accessibility of your site will be an ongoing process. Schedule accessibility audits on a set schedule, such as once per quarter, to help keep things on track.
3. Create a process. Whenever discussing upcoming changes or additions to your site, make it a point to perform a quick accessibility check. This can save your organization lots of time on possible revisions and help get your team involved in making accessibility a top concern.
4. Make accessibility part of your culture. Your team members will be much more likely to participate in the upkeep and progression of your website’s accessibility if it’s clear to them that it is encouraged and that it is a priority. Eventually, an accessibility mindset will be made a natural part of your team’s workflow and ideation processes.

Want to learn more?

This article is just a quick overview of accessibility, but have no fear! There is a plethora of information and resources available to continue learning. We’ve listed some of our favorites below.

• Web Content Accessibility Guidelines: The primary source of truth for accessibility standards on the web.
• Udacity Accessibility Course: A solid (and free) course on web accessibility by Google.
• The A11y Project: A collection of community-sourced resources for learning about web accessibility.
• Accessibility Developer Guide: A comprehensive online guide for developing accessible websites.
• WAVE: A web accessibility evaluation tool that allows you to plug in a website’s address and see a list of WCAG violations.
• NoCoffee: A handy Chrome plugin that allows you to view content in your browser with various types of vision impairment filters.
• Contrast Checker: An easy-to-use resource for checking whether a color passes WCAG contrast guidelines.

In the same way that nonprofits strive to have a positive impact on the world, accessibility is meant to help make the web a more inclusive place. Improving your nonprofit’s web accessibility can provide a more positive, empathetic environment for your existing and future supporters, beneficiaries, and team members alike.

This is a guest post written by Jenny Bormacoff. Jenny is a software engineer at Classy and loves listening to house music, creating digital art, learning about social equity, and hanging out with her dog, Indy.