Updated on November 15, 2022
We’ve finally accepted that if a website doesn’t work on mobile, it doesn’t work….let’s keep that mindset when it comes to the accessibility of a site for people with disabilities.
The CDC says there are 61 million adults in the US with disabilities–that’s about 1 in 4 of us. When presenting your website to the world, don’t immediately leave out a huge chunk of the population who suffer from vision deficiency, differing motor skills, and countless other disabilities. A couple tweaks can ensure your site caters to an even wider audience!
Confused? Don’t be. Here’s the breakdown of what you need to know:
People with color vision deficiency, or color blindness, may be unable to distinguish between different colors and hues. By using a combination of color, shape and text in your site you can make things understandable. Using solely color to convey meaning can alienate an entire audience who can’t access the information.
Check out the online tool, Who Can Use, which analyzes your color pallet and font size to determine the percentage of people who can easily read your content.
Pro-tip: Contrasting colors on your site can make it easier for EVERYONE to read, especially in situations like looking at a mobile device in the sunlight.
ALT text is an alternative description for media on a website, such as an image, used to describe the appearance and provide context. These attributes are primarily used by people who have a visual disability and rely on a screen reader to dictate the content of a website. A screen reader converts text, buttons, images and other screen elements into speech or braille.
And, yes, having solid ALT text can also boost your search engine optimization. ALT text provides critical information that is also used in how search engines process content across your entire website. Plus, leaving out ALT text signals that your website may not be fully accessible, and therefore not as desirable of content.
Pro-Tip: Provide context for ALT text, and leave out words “image of” or “photo of.” Keep the text short and sweet, and make sure to describe the location. If you are describing something like a picture of a baseball stadium, describe which stadium within the ALT text.
Screen reader users often use heading structure to navigate content. When you use headings (<h1>, <h2>, etc.) in a correct and ordered fashion, it makes your site easy to navigate for those using screen readers.
Use your headings to organize your content structure and indicate what’s there. Avoid skipping heading levels–this can leave screen reader users wondering if there is missing content.
Friendly reminder: Body text should not be smaller than 16px, so think larger for headers!
The classic “click here” is not descriptive text, full stop. To make things more accessible for screen readers (and everyone), use link text that describes accurately where the link will go.
People can scan a page for links using a screen reader. Without descriptive text, the screen reader user might not read the link within the context of the page, just as sometimes people without screen readers jump right to the link instead of reading the text surrounding it.
Put your most unique content of the link first, because screen reader users often navigate lists of links by searching the first letter. If you’re having difficulty coming up with what to say, focus on starting with the action (other than clicking…)
For example: Instead of saying “Click here for more information about us” swap it for “Read more about our company.”
A number of disabilities lead to people having reduced motor function. Keyboard keys like “tab” or “arrow,” or alternative input devices like single-switch input or mouth sticks are effective alternatives for people who have trouble with the mouse or trackpad.
The golden rule to make your site accessible for these users? Tab order matches visual order.
Break up your long pages of content with anchor links, also known as jump lists. This allows non-mouse users to skip to relevant areas of the page without wasting their time navigating through the maze of other content. Make sure to provide a “skip to main content” option at the top for easy access.
Configure menus with sub-sections in a way that can be accessed without a mouse. Activating elements by hovering over them doesn’t allow people using alternative input devices or screen readers to access the information.
Don’t forget: Hover effects don’t work the same on mobile as they do on a desktop computer; try using a button or link instead.
There's a good chance that somewhere on your website you have a PDF available to be downloaded by your users, whether it's a free quide or quick-reference document. And, yes, you should aim to make your PDF documents accessbile as well!
Both Microsoft Word and Google Docs have specific settings built into their software to help improve accessibility, but some of these features are turned off by default. We recommend reading What to Know About Accessible PDFs From Microsoft Word and Google Docs and following their list of tips and best practices!
The bottom line of making your website accessible is to be as inclusive as possible.
A blind man sued Domino's Pizza in 2016 after he was unable to order food online using screen-reading technology, citing the American with Disabilities Act.
With such a large percentage of the population having disabilities, one of the easiest ways to make sure you reach the audience you want is to make sure everyone can access your content. UC Berkeley provides an online guide to web access. (It also provided information for this post!)