Web accessibility isn’t just for organizations trying to reach the masses. It’s essential for anyone with a website, including nonprofit organizations, to consider those with disabilities in your web design. Check your websites accessibility score with an accessibility audit.
Not ready for an audit, but want to take a step towards accessibility? To make your website truly accessible, you have to understand the people in the community you want to serve. You also need to understand their unique needs and think critically about how to use technology to meet those needs.
Web design is more than a checklist. It needs to meet people where they are to create authenticity and inclusivity. This includes disability inclusion and accessibility. CauseLabs’ “human-centered design” approach considers and addresses these concerns.
There are a variety of accessibility-related concerns that nonprofits need to consider. This post addresses some of the most common website accessibility features and concerns.
Language
Use clear and concise language for those who do not speak English as a first language. Also, consider whether multiple languages may be represented by the people you’re looking to serve. If you want to translate your website, you can’t just use Google translate or a plugin and hope it works. You need to translate correctly to speak to your audiences authentically. This authenticity requires strategy, planning, and expertise. You’ll likely need to hire a translator. Failing to take these steps can alienate the audience you’re trying to serve.
Screen Readers
A screen reader is a software application that interprets items on a screen. It then converts these descriptions to a format for visually impaired people to consume and interact with. Two-thirds of screen reader users choose speech as their screen reader output. One-third of users choose braille.
There are many things to consider when it comes to web accessibility for these audiences. It starts with labeling content and writing it in a way that’s easily understood. A lot of what improves the screen reader experience also improves your website’s SEO. You’ll see screen readers mentioned throughout this post, including when discussing images, alt text, hyperlinks, and buttons.
Colors
Not everyone sees colors or sees them in the same way.
You may not have given this much thought, but you can identify a stop sign in three ways. It displays the word “STOP.” It has an octagon shape. And it’s red. If you can’t discern colors, it’s still possible to tell it’s a stop sign.
Color alone doesn’t give users enough information to be accessible web design. Your design must speak to them in multiple ways.
When it comes to typography on your site, it’s all about contrast, not size. You can use the Stark plugin on Figma to check the contrast. Normal text should have a contrast ratio of at least 4.5:1. Also, try to keep the text in your designs no smaller than 16 px. You can use Type Scale to help define text sizes based on ratio.
White Space
Crowding on a website can cause visual overwhelm for all types of users.
Give your text and design elements some room to breathe with white space. White space is space on the page that is void of elements. It’s a blank space.
Reducing clutter is critical for those with cognitive conditions such as ADHD.
Font Size
The size of your text matters, especially to those who have dyslexia and other neurodiversity or visual impairments. Allow easy scaling of text size for readability to help increase your website’s accessibility.
Button Size
Any on-screen element that someone can click, touch, or interact with should be large enough for reliable interaction. Use color, style, text descriptions, and hover states that allow for easy clickability.
Alt Text
Alt text, or alternative text, refers to an invisible description read aloud to those with visual impairments. It’s not uncommon for people to fail to include appropriate alternative text with images or links. When an image has no alt attribute or when it’s empty or null, screen readers ignore those images.
Guidelines for writing alt text:
- Alt text should be less than 125 characters to comply with the greatest number of screen readers.
- Make alt text descriptive, explaining what the person would see in the photo. Be sure to get right to the point.
- Include keywords in alt tags where possible, but only if you can do so naturally. You don’t want to stuff keywords.
- Do not include text such as “A screenshot of…” or “A picture of…” within alt tags. This is superfluous, as search engines and screen readers already know they’re dealing with pictures, so the description is all that’s necessary.
Screen Size
It’s tempting to limit screen size considerations only in the spirit of making your website “mobile-friendly.” But it’s more than that. It’s important to consider your website’s responsiveness on screens of all sizes. After all, you don’t know if your visitors will come to your site from a cell phone or display it on a projection screen.
Photography
Allow for representation of inclusivity in photos. Be sure photos are authentically inclusive in all ways, including of those with disabilities. The best way to do this may be to use people within that community for your photos, not random models. Also, don’t forget to provide alt tag descriptions for all photos.
Video
Provide audio descriptions and closed-captioning for all of the videos you include on your website, Youtube or Vimeo. Just like in photos, allow for representation of all types. Also, don’t forget to provide video transcripts or translation if you’re able. There are tools you can purchase that will help with these features such as Happy Scribe, Rev or Moovly.
Hyperlinks
Provide enough of a description of links for those using a screen reader. This description will help them understand where the link goes, how it fits into the text, and whether they want to visit it. What might be a minor decision for some takes longer for those with disabilities, so you want to help them consider the value of leaving the page they’re on.
Menu
Make your website’s menu intuitive for all users. It should be easy to navigate. It also should guide users to disability information or options they may need.
Data
There are a variety of reasons why organizations ask their audiences for data on their websites. But you should consider if you really need the information to serve the community. Some populations, like immigrants, may be hesitant to provide information, even when they need help. They may feel at risk just for interacting with your organization. Only ask for the information your organization truly needs and nothing more.
Gather Feedback
Clearly label sections on your site that allow users to give you feedback. But don’t stop there. Ask those within the community you’re trying to serve how you’re doing. Listen to their responses and adjust your site accordingly.
Price
While it’s not a standard accessibility guideline, price is a factor when it comes to access to your content or program.
If the people you are looking to help have a lower income, they may not have a desktop computer, tablet, or even broadband services. They also may not be able to travel to use public computers. That leaves cell phones as their main source of connection.
While iPhones hold down the largest share of the smartphone market in the U.S., not everyone can afford one. Androids cost less, so it’s critical to consider your web design experience for those viewing content on these devices.
Get the bonus: Accessibility InfographicHow CauseLabs Can Help
At CauseLabs, we are ambassadors for using technology as a force for good. We believe that the projects we build should be available for anyone to use. The more inclusive a world wide web we can create, the better it will be for everyone, because everyone’s experience matters.
We leverage more than 15 years of expertise to scale your impact through strategy, design, and custom web development. Helping nonprofits serve communities in need is at the heart of what we do. This mission means ensuring your website is accessible to those in the community you’re serving. CauseLabs can help with your website’s accessibility. To get started: Order your Accessibility Audit today!
