Back to blog
8 easy wins to improve accessibility without breaking the bank
Redesigning a website can be a trial by fire, especially if you are the Director of Marketing/Communications at a non-profit. There is a lot to know about your organization's web presence. Whether your website answers a Massachusetts, New England or international audience, it is our job to make that experience as easy as possible to navigate, understand and retrieve information. But what exactly is web accessibility and how do you make a website more accessible without spending the entire budget? This article will cover what accessibility is and provide ways to improve it on your current site or future redesign.
What is web accessibility?
According to the World Wide Web Consortium's Web Accessibility Initiative (W3C WAI), "web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them." Here are the disabilities that WAI identify as affecting a person's access to the Web:- auditory
- cognitive
- neurological
- physical
- speech
- visual
It is important to note that web accessibility benefits people with and without disabilities. Following WSC WAI's Web Content Accessibility Guidelines 2.0 (WCAG 2.0), here are eight ways you can better your organization's website.
Descriptive Links
Similar to our article about SEO, providing descriptive, unique links allows users to find what they need efficiently. That's why labeling a link "click here" is not very useful for someone utilizing a screen reader or tabbing through links. For this reason and for the sake of consistency, try to not create differently named links that go to the same page.
Not recommended: "Click here to check out our blog."
Recommended: Check out our blog!"
Colors
Colors play an important role in web design. A good color scheme can draw the user's attention to certain parts of the site. It can evoke emotion, trust and it can make an otherwise boring website pop and ignite interest. When choosing colors, it's important to take into account that certain colors may not be distinguishable from one another to those with a color disability. According to the National Eye Institute, 1 in 12 men are color blind. That's why, it's important that the colors don't just look nice, but there is real utility in what and how colors contrast from one another. There are sites that provide free color schemes show these contrasts such as coolors.co or https://webaim.org/resources/contrastchecker/.
Alt tags
Add Alt tags that are concise and descriptive to all your media. Screen readers only read up to 125 characters of text so while keeping your tags descriptive, be mindful of this limit. The more detail you provide about the media, the more users will connect and understand your webpage. It's a good practice to think about how the descriptions would sound out loud and think about how you might visualize what you're describing.
Example Alt Tag: Modern daytime co-op office space with one laptop sitting on a long desk up against a wall of windows overlooking Boston. (122 characters)
Keyboard Accessibility
All elements of your webpage should be easily accessed with the keyboard. This may not be something you can control as a content manager but it is something that can be communicated with your developer. Note that WCAG 2.0 specifies that there should be no time limit for keystrokes before timing out.
Readability
Never add your text into an image such as an image button unless it is pure decoration. An accessible page is readable when a screen reader is able to programmatically go through the page and provide it in different mediums for the user to understand. When text is part of an image, it cannot be interpreted which is why images require "alt" tags. If you need to overlay text over an image, see if that is something your CMS can handle or ask your developer.
Additionally, PDFs should never supplement webpages. Screen readers will not be able to go through a PDF so they should be avoided.
Structure and Titles
Each web page should have good structure which means descriptive, concise titles, well written introductory sections and content that flows. Good titles can give the user a good idea of what to expect in the following content. When applicable, also add introductory content to provide further explanation for what the user can expect in the following content.
Predictable
User experience that is unpredictable can make site navigation very challenging. Any action on your website that initiates different context/content, needs to be explained to the user beforehand. For instance, a clickable link that navigates away from your website should have a pop-up or description explaining that the link is taking the user to another site. A site always needs to provide clear instruction.
No Flashing
Remove anything on your site that flashes more than three times within a second as this is a risk for people who are susceptible to seizures and other physical reactions. Exceptions to this rule include containment of the flashing contained to a very small are on the webpage but it is best to avoid flashing if possible.
