by Patrick DiGiulian •
03.05.2020
Senior Project Manager
he/him/his
You may have heard a lot about website accessibility. Having an accessible website means that you have taken steps so that everyone, no matter what accommodations they need, can get content from, and interact with, your site. Hearing or vision loss and sensitivity, limited mobility, or access to different internet speeds are just a few examples of situations that often limit a person’s ability to use a website. There are basic standards that should be met in order to comply with ADA guidelines and Section 508 compliance, and these guidelines are broken down into four areas:
- Perceivable – content presented and available to everyone
- Operable – website interface does not require interaction that persons with disabilities can’t perform
- Understandable – information and operation of the user interface readily understandable to everyone
- Robust – accessible through wide variety of technologies (browsers, screen readers, etc.)
When your organization is ready to take on a website redesign project, accessibility should be front and center. Working together with your implementation partner (hopefully that’s us!), your discovery process must sync the functionality and design you want with accessibility best practices. For some organizations this might even mean making changes to your official style guide, a process we can walk you through. This approach is the foundation of every website project we take on here at Firefly Partners. Read on to learn about many—but definitely not all—website details that contribute to accessibility. Elements from the website we built for Prism Health North Texas serve as a guiding example.
Form Design
During discovery, your team will identify the web forms you need to get important information from your constituents and subscribers. In the design and development stages, those forms should be built to include field labels, highlights, and appropriate color contrast. In the example below from the Prism Health North Texas site, the field in this form has a label of ‘YOUR EMAIL.’
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 impairment.
Another feature is a highlight box that rotates among the different fields to note which one is currently in use. The easier it is to see which field is being used, the more accessible your site will be to a variety of users.
Color Contrast
As we note in this blog post about smart web design choices, color contrast is hugely important to website accessibility. People with certain sensitivities or color blindness should be considered when you are choosing colors for your text and backgrounds. Sticking within your brand while prioritizing contrast and white space between sections is the critical balance to strike.
It’s not just enough to pick some light and dark colors and hope they work. During your design process you should use a color checker to make sure that your designs sync with accessibility needs on all devices.
In the image above from the Prism Health North Texas website, the dark purple buttons have a high contrast with the white background, and with the white text inside of them. This helps the buttons be more visible than if they were a lighter color. This color is also consistent with Prism Health North Texas’ style guidelines, so their design goes hand-in-hand with accessibility.
Alternative Text (Alt Text)
Alt text refers to image descriptions that are added in the backend of your site. This is easy to do, as the alt text field is available whenever you upload an image to your WordPress website. The image below shows how this field might appear on your site’s dashboard.
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, which can mean that image content is being missed. 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 (often using a plugin that we can help you install). Still, it’s important that image content is available to everyone, regardless of their access to high-speed internet.
Transcripts and Closed Captions
For website visitors who are deaf or hearing-impaired, access to video and audio files such as podcasts can’t be overlooked. Transcripts for audio files is one solution, but they do not completely satisfy accessibility needs for videos.
This is because there are visual elements of videos that make it useful to see while simultaneously reading text. Since it is challenging to pause and switch back and forth between the video and the transcript, providing closed captions yields a greater level of accessibility.
Text on Images
Another accessibility practice relates to the trend of uploading images to your website that are designed with text over them. This does not refer to an image where text is positioned on top using code that allows for mobile responsiveness. Rather it’s specifically related to an image that already has text on it when uploaded to your site. The main accessibility issue here is that screen readers can’t read this text, which means some individuals may be missing out on key content.
Images with text over them are also a challenge for mobile responsiveness because the images simply shrink, as opposed to adjusting automatically based on screen size. For this additional reason, it’s best to avoid the practice of uploading images with text already on them. If you want a feature of an image with text over it, that’s something that can be achieved during your design and development process. In the image below, you can see how a blog post header image and title appears on the Firefly Partners website on desktop, and how it resizes appropriately for mobile, with the text below the image. Either way, the text is both legible and accessible for screen readers.
Headings and Pop-Ups
You may think of the heading styles that are built into your site (H1, H2, H3, etc.) as being simply a cosmetic feature. While they do provide larger and bolded text options, they also give helpful structure to the content on your site. 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 your articles and more easily find exactly what they need. Assigning the right heading formats to your content is simple and requires no knowledge of HTML. See an example below of a dropdown menu with all the options easily laid out.
Mouse-Free Navigation
There are a variety of reasons why a person can’t use a mouse to navigate a website, from physical limitations to injuries to vision impairment. A feature that enables these individuals to have full access to your site’s content is keyboard navigation.
Users can hit the tab key on their keyboards to move between different links on a site. In the image below, there is a blue rectangle around the Prism Health North Texas logo, indicating that it is highlighted by the tab key. As a user presses tab repeatedly, that rectangle will move to other links on the site. Hitting enter will open the selected internal page.
Another related keyboard access feature is having a skip-to-content button that appears initially when a user hits the tab key. This is important because it means users 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. See the top left corner in the image below for an example from the Prism Health North Texas site.
Why Accessibility Matters
While this is not an exhaustive list of website accessibility best practices, it’s a good place to start. The best thing about building an accessible website is that you can feel confident that anyone and everyone can reach and use your content. That’s reason enough to move forward with these approaches. The great news is that as you prioritize these measures, you will also improve your website’s ranking in search engine results. For example, your website should provide different ways to access content so users of all abilities can get what they need. This includes arriving at a page via your main navigation, via site search, or through a sitemap. Having URLs follow a logical and consistent structure also helps with SEO. This is just one example of how accessibility benefits your users and your organization’s online presence at the same time.
We’re excited that there are no longer questions about the importance of this approach. And we are proud that here at Firefly Partners we work with progressive nonprofits to build accessible websites. If you have any questions about this topic, or are ready to discuss a website redesign project, reach out to us today.
