How Accessibility Design Can Benefit Nonprofits
Did you catch the latest installment in our new expert interview livestream series, Leading with Every Action? We’re interviewing partner agencies and consultants, along with other experts, on a wide range of topics near and dear to leaders across our sector. Our goal with these livestreams is to offer thought leadership and spark vibrant discussion, so join us on YouTube, turn on notifications, and never miss a stream.
Our friends at Firefly Partners joined us for the second livestream in our ongoing series around equitable and inclusive leadership. Check out our livestreams on YouTube, and read on to learn how Firefly successfully applied their principles of accessible design to a project with Prism Health North Texas.
Since 1986, Prism Health North Texas (PHNTX) has been advancing the health of the North Texas communities by providing access for care and services to people living with HIV. Our custom WordPress website solution utilizes accessibility best practices, ensuring that users with disabilities can access essential information.
Intentional Form Design
At the onset of this project, we worked with the PHNTX team to identify the web forms that would capture important information from their constituents and subscribers. In the design and development stages, we thought strategically about the areas tied to the field labels, highlights, and set appropriate color contrast to support the core constructs of each form.
The email field in the simple sign-up form includes a ‘YOUR EMAIL’ label. This feature increases accessibility because there is no ambiguity about what needs to be typed into the box. Screen readers can also interpret this text for users who have vision impairments. Another feature is a highlight box that rotates among the different fields to note which one is currently active or in use. The easier it is to see which field is being typed in, the more accessible the site will be to an array of users.
Check the Contrast
As we discussed in this blog post about smart web design choices, color contrast is another important component of website accessibility. People with specific sensitivities or color blindness should be considered when choosing colors for text and backgrounds. Sticking within the brand while prioritizing contrast and white space between sections is the critical balance to strike.
During the design process, it’s also a good idea to use a color checker to make sure that your design syncs with accessibility needs on all devices. With a rainbow of colors to choose from, we designed the PHNTX site to have appropriate color contrast while sticking to the organization’s brand guidelines.
Say Yes to Alt Text
Alt-text refers to image descriptions that are added in the backend of the website. The site has been built in a way that makes it easy for the PHNTX team to update because the Alt-text field is available whenever they upload an image to their WordPress website. Alt-text is important for two reasons. First, users who have vision limitations use screen readers that dictate the content of your site. The devices are equipped with the ability to scan images and read aloud the alt text. Without it, there would be no way to translate the content of images. Second, sometimes images do not load due to slower internet speeds.
One way to counteract this is to optimize your images and upload smaller ones. Still, it’s important that image content is available to everyone, regardless of their access to high-speed internet.
Text and Images: Keep ‘Em Separated
Another accessibility practice relates to the trend of uploading images to a website where text sits over the image. The main accessibility issue here is that screen readers are unable to read this text, which means some individuals may be missing out on key pieces of content across the site.
For Prism’s homepage sliders, we created a simple process for them to upload an image and then type in the desired text into a custom field. Not only is this text readable by screen readers, but it’s also designed for mobile responsiveness with a different layout, ensuring that the text is legible on small devices.
Get Your Headings Right
You may think of the heading styles that are built into your site (i.e., H1, H2, H3, etc.) as being a cosmetic feature. While they do provide larger and bolded text options, they also give helpful structure to the content across your site and pages. As we explain in this blog post about Content Strategy, proper heading format helps accessibility because it is recognizable by screen readers.
Section headings also allow your users to scan articles and find exactly what they need. Assigning the right heading formats within the overall content give additional context and is simple for the Prism team as it requires no knowledge of HTML.
No Mouse in the House
There are a variety of reasons why a person may be unable to use a mouse to navigate a website, from physical limitations to injuries to vision impairment. A feature we added to the Prism website that enables these individuals to have full access to your site’s content is keyboard navigation. Users can hit the tab key to move between different links on the website and a blue rectangle appears to indicate which link is being activated.
A skip-to-content button appears initially when a user hits the tab key, meaning visitors don’t have to tab through the entire navigation on each page. They can quickly hit tab and then enter to go directly into the content they want.
Ultimately, design features like these can create a more user-friendly experience for even more people — meaning they can access your services, support your work, and help you do even more good.
