Did you know that 90% of websites are inaccessible to people with disabilities who rely on assistive technology?¹
According to Techopedia, accessibility is “how software or hardware combinations are designed to make a system accessible to persons with disabilities.” In simpler terms, web accessibility means a website, application, or digital tool is created with the intention that people of all abilities have equal access to the full user experience.
To help your nonprofit fuel its web accessibility initiatives, we cover accessibility requirements, why digital accessibility is crucial for nonprofits, and how you can make your site more accessible with intentional web design.
Fun fact: Accessibility is often called “a11y,” with the “11” representing the number of letters between “a” and “y.”
What Is Web Accessibility?
Before diving into the formal definition, let’s start by looking at the impact of the Americans with Disabilities Act (ADA) and how it opened the door for web accessibility as we know it today.
In short, the ADA is a civil rights law prohibiting discrimination against people with disabilities in various aspects of public life. This law prohibits discrimination based on disability and requires employers, businesses, and state and local governments to provide reasonable accommodations to individuals with disabilities to enable them to participate fully in society. That includes ensuring their websites and other digital content are accessible to people with disabilities.
Currently, the standards for what it means to be accessible come from The Web Content Accessibility Guidelines (WCAG). The World Wide Web Consortium (W3C)—the primary group tasked with setting international standards for the Internet—sets these guidelines.
These guidelines outline four main standards for web content:
Perceivability: The user can identify content and interface elements by the senses (primarily via vision and/or hearing). Example: When uploading a video with speech, provide a text transcript for users to consume with or without sound.Operability: The user can manipulate controls, buttons, navigation, and other necessary interactive elements without accessibility barriers. Example: Ensure all forms on your website can be maneuvered and submitted with only keyboard navigation.Understandability: The user should be able to comprehend the content on your site and access the information they seek easily. Example: Avoid using unexplained jargon and acronyms when writing content to ensure all readers understand, especially in-page headings.Applicability: 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.
Often believed to solely support people with visual impairments, accessible web content benefits users of all abilities and contexts. In fact, accessibility improves the experience for people without disabilities in the following scenarios:
Users who have mobile devices, such as smartwatches, tablets, and devices with different input modesUsers who have “temporary disabilities,” such as an injured handUsers who have “situational limitations,” such as when they can’t listen to audioUsers who have a slow or limited Internet connection
Why Is Web Accessibility a Priority for Nonprofits?
Inclusivity is the core concept behind web accessibility. If your nonprofit has an inaccessible website, you prevent groups of potential supporters from gaining information, donating to your organization, and participating in initiatives that others can.
For instance, an individual who is hard of hearing would have a much better experience if you provided a transcript alongside your videos. Likewise, someone without full use of their hands would benefit from being able to navigate your donation form without having to reach for a mouse.
Providing equal access for everyone is critical to a strong web presence, which goes even further when you consider the characteristics that define the nonprofit industry. As a community dedicated to moving the needle on humanity’s greatest struggles, nonprofits have a unique responsibility to consider accessibility laws and best practices in every element of the digital experience.
Additionally, a fully accessible site has the potential to improve the experience of all users. Adhering to the highest technical standards directly impacts how users navigate your content. If the functionality and usability of your site are suitable for everyone, users are more likely to hang around to learn more and potentially donate.
8 Ways to Make Your Web Presence More Accessible
Ensuring your content adheres to web accessibility guidelines often begins in the ideation stages, but it’s never too late to elevate your site to improve the experience for all users. Whether selecting an accessible color palette, choosing a legible font, or configuring a layout to navigate and comprehend easily, accessible design is critical.
Here are eight ways to elevate your web accessibility standards:
1. Provide Sufficient Color Contrast
The appropriate color contrast is critical for ensuring that all users can access and use your website effectively, regardless of their visual abilities.
For instance, people with visual impairments or color blindness rely on sufficient color contrast to distinguish elements on a website. If the color contrast is too low, they may have difficulty reading or understanding the content. It’s also worth noting that low contrast can strain the eyes and make it hard for any user to distinguish different elements on the page, whether they have visual impairments or not.
Ideally, websites should maintain a ratio of at least 4:5:1 to ensure text and images are clear.²
2. Be Mindful of Your Font
It’s crucial to choose an easy-to-read font, even with smaller sizes. Sans serif fonts, such as Arial or Verdana, are often a good choice because both are simple and easy to read on various screens.
Appropriate font size is another critical element of accessibility. It’s best practice to select a font size large enough to be legible but not so large that it becomes difficult to read or takes up too much space on the page. A font size of at least 16 pixels is the recommendation for body text.
Lastly, do your best to avoid all caps or italics, as these can make text more difficult to read, particularly for users with dyslexia or other reading or learning disabilities.
3. Include Alternative Text With All Images
Alternative text, or alt text, improves a website’s accessibility by providing a textual description of images. Added to the HTML code of an image and read by screen readers, alt text is one of the main assistive technologies used by people with visual impairments or other disabilities.
You can also use alt text for navigational elements, such as buttons or links. Without alt text, users who can’t see these elements may be unable to navigate the website effectively.
4. Highlight Interactive Elements With Focus States
Focus states are the outlines that appear around buttons, links, or input fields on a website. These serve as visual indications of which element on the page currently has keyboard focus, often seen when a tab key is used.
When users interact with a website using a keyboard or other assistive technologies, such as a screen reader, they rely on the focus state to understand where they are on the page and which element is currently active.
The focus state is typically represented by a visual cue, such as a highlight or a color change, that surrounds or appears within the element that has focus. This can help users with visual impairments or motor disabilities to navigate the website more easily.
5. Use HTML Headings to Structure Your Page
HTML headings are crucial for several reasons, but the most critical to accessibility is providing structure to improve page readability. Additionally, screen readers and other assistive technologies rely on headings to provide context and structure to the content.
Headings include the rankings <h1> through <h6>. All pages should have one <h1> level heading to serve as the title of the page. From there, implement headings hierarchically with subsections organized into subsequent level headings.
6. Simplify Your Forms
Simple forms are generally easier to understand and navigate and less likely to result in errors. These considerations are particularly critical for people with cognitive disabilities or those unfamiliar with the language on your site.
Efficiency is another factor that contributes to accessibility. Simple forms are typically faster to complete, which can be helpful for users with limited time or completing the form on a mobile device.
7. Complement All Visual Content With Captions and Transcripts
If your homepage or fundraising pages include video, prevent accessibility problems by including closed captions, sign language interpretation, or transcripts to help all users understand the audio.
This practice benefits users without auditory difficulties as well, such as people who prefer reading over listening or temporarily cannot listen to audio, like at a quiet library.
8. Use Simple Copy
This recommendation carries across all forms of written communication, especially when displayed on your website.
Always be clear and concise to avoid confusing your readers. Long, complex sentences overwhelm users and often cause frustration. Readers may not understand what you mean to say or may misinterpret your message.
When writing copy for your site, do your best to avoid:
Long sentencesAcronyms not clearly explainedNiche, unfamiliar wordsBlocks of copy without clear breaks
If you want to make your existing site more accessible but aren’t sure where to start, consider running an audit. Tools such as WAVE can scan your website for any obvious WCAG offenses and offer solutions.
Another way to test your site’s accessibility is by engaging with it in alternative ways, such as:
Clicking on buttons or filling out form fields using only your keyboardUsing a vision impairment simulator such as NoCoffee to ensure that your interface doesn’t rely solely on colors to convey meaning and your color contrast ratio is sufficientUsing a screen reader like VoiceOver (comes standard on Macs) or JAWS (available for PCs) to test the voice output of your page
But wait, what if I’m not tech savvy?
The difference between an organization with an accessible web presence and one without often comes down to a healthy dose of advocacy. Advocating for accessibility is the most effective way to drive progress and inspire organizational change.
Here are a few ways to become an advocate within your nonprofit, with no expertise or technical skills required:
Educate your team. By establishing a foundation of accessibility knowledge, you’ll empower your team to prioritize accessibility, identify issues, and solve them. Help connect your team to the resources they need to learn, whether setting aside time to complete online courses or scheduling on-site training with an expert.Encourage continuous discussion. More likely than not, the accessibility of your site will be an ongoing process. Schedule accessibility audits on a quarterly or semi-annual basis to help keep things on track.Create a process. Whenever discussing upcoming changes or additions to your site, perform a quick accessibility check. This can save your organization time on possible revisions and help your team prioritize accessibility.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 why it’s critical. Eventually, an accessibility mindset will be a natural part of your team’s workflow and ideation processes.
Continue Strengthening Your Web Accessibility Know-How
There’s 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 strong (and free) course on web accessibility by Google.The A11y Project: A collection of community-sourced resources for 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 Chrome plug-in 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 positively impact the world, accessibility helps make the web a more inclusive place. At Classy, we understand how critical web accessibility and inclusivity are on nonprofits’ ability to raise more for social good.
Learn more about Classy’s accessibility standards and how our comprehensive fundraising suite can support your goals.
Article Sources
“A Comprehensive Web Accessibility Checklist,” Blog, Accessibility.com, last modified January 27, 2023, https://www.accessibility.com/blog/a-comprehensive-web-accessibility-checklist#:~:text=90%25%20of%20websites%20are%20inaccessible,who%20offer%20excellent%20customer%20service.“Using Accessible Images to Make Your Website More Inclusive,” ADA Compliance, Accessibility Checker, last modified February 3, 2023, https://www.accessibilitychecker.org/blog/accessible-images/.