Web Design
7 Design Tips to Make Your Website More Accessible
I spend most of my weekdays checking emails and building websites with one hand at my laptop while my other hand holds a bottle to feed my three-month-old daughter. When it comes to the World Wide We...
Jay Owen,CEO & Founder
25+ years in digital marketing | StoryBrand Certified Guide | HubSpot Platinum Partner | Author of 'Building a Business That Lasts'
TL;DR
I spend most of my weekdays checking emails and building websites with one hand at my laptop while my other hand holds a bottle to feed my three-month-old daughter. When it comes to the World Wide We...
5 min read
Share:
I spend most of my weekdays checking emails and building websites with one hand at my laptop while my other hand holds a bottle to feed my three-month-old daughter. When it comes to the World Wide Web, that’s considered a disability.
Who Benefits When Your Website is Accessible?
When I’m using my laptop with only one hand, my range of motion across the keyboard is limited. That changes my experience of the product and the content I consume. When I come across a task that is particularly hard to complete or a site that's difficult to navigate using my one free hand, I perceive the website as less accessible.“Accessibility is not confined to a group of users with some different abilities, for example, visual, motor, auditory, speech, or cognitive disabilities, rather it extends to anyone who is experiencing any permanent, temporary or situational disability.” - Avinash KaurThis experience of designing “one-handed” has opened my eyes to how I build websites and who I’m building them for. So often we only consider our “typical” customer, or how to visually appeal to the “ideal” demographic. We forget that not every user will fit that mold.
Why Should Your Website Be Accessible?
According to the Annual Disability Statistics Compendium, around 50% of the population has a clinically significant refractive error, most commonly a visual impairment corrected with glasses. This means that most people using the internet are likely to experience some sort of disability that affects their experience. Some other interesting statistics on user disability include:- Around 8% of males and 0.5% of females have some form of color vision deficiency.
- Over 4% have a cognitive disability (difficulty remembering, concentrating, or making decisions).
How Design Can Make Your Website More Accessible
The WCAG is a set of website accessibility standards created by the World Wide Web Consortium in partnership with various other groups. The standards help guide web content producers in making their work more accessible to all, including users with disabilities. These standards cover many different categories with carefully defined standards for accessible websites. Below are just a few design “best practices” that touch on the topics outlined by the World Wide Web Consortium.#1 Use High Contrast
Color contrast is a simple but crucial fix toward making a website more accessible. Those with low vision or color blindness may have a hard time discerning text on a background color. If you’re restricted by a color palette or brand guidelines, a bigger bolder font can help compensate for low contrast colors. On the flip side, smaller body copy should have as much contrast as possible for maximum legibility.#2 Use as many visual cues as you can
As mentioned before, those with visual impairments may have a hard time discerning subtle color differences or small digital elements. It’s important to use all of our design resources to create clear visual cues for our site content. Use clear hover and focus states, icons, or text-decoration to highlight crucial content such as buttons, error messages, or notifications.#3 Make your forms bulletproof
That means always having instructions, labels, and easily-seen focus states. Just like we use strong visual cues on content, we should treat forms in the same way. This means clearly defined form field boxes and labels for each field, not just placeholder copy. For those using screen readers, undefined forms can be a particular headache since screen readers tend to skip over low contrast placeholder text.#4 Make sure images have alt text for screen readers
Another classic issue for people using screen readers. Those with visual impairments rely on text associated with an image, also known as alt text, to describe to them what is on a webpage. If you haven’t specified alternative text to an image, the computer will just say the file name. “Cat staring at toy” is much more descriptive than “Image-51234.jpg.”#5 Support keyboard navigation with clean code
If your user has limited mobility or uses a screen reader, they may also rely on keyboard shortcuts to navigate a page. The underlying code of a webpage controls both of these situations. Clean HTML tags and a logical order of elements ensures these users discover content in the order it was intended.#6 Repeat UI components for universal understanding
There are some things users just expect from your website. A logo in the corner, navigation at the top, headers on each page, blocks that are buttons, etc. If all of these things remain visually similar from page to page, users will quickly get accustomed to the pattern you are creating and find the site easier to use. Easier to use = more accessible.#7 Always have more than one way to find or navigate away from something
Every user is different; different backgrounds, experiences, impairments, and situations. We can’t design for every user or scenario, but we can accommodate a wide range of them by creating multiple access and exit points. You see this sometimes when an ad pops up or you go to check out for an online order.The Bottom Line
“Usability and accessibility go hand in hand, so if something is not accessible, it is also not usable for a portion of your potential users.” - Joanna NgaiThese tips are just the top of the accessibility iceberg. If you want to dive into the topic further, there's lots more to learn about website accessibility. If you’re wondering how to make your website fully accessible in accordance with the Americans with Disabilities Act, our team can help. Start here with a free audit of your website.
Ready to Grow Your Business?
Put these insights into action with our expert team. We help businesses like yours achieve measurable results.