Why are UX and Accessibility so important today, and what are a few things you can evaluate on your current website/app to improve your WCAG rating quickly?
As I have recently learned, UX design revolves around the customer and their feelings. It’s about giving the customer the best possible experience to make them want to come back, and this should include customers with disabilities. A great quote by Don Norman states, “When we design something that can be used by those with disabilities, we often make it better for everyone.” When we combine Usability and Accessibility, we improve many aspects of our product like optimized code, simplified layout, natural tone of voice, and browser/device compatibility. Ultimately, The better the experience yields improved SEO rankings.
Following this guidance, my team evaluated our website and came up with the following adaptations to improve our website usability. We first dove into the basics of color contrast. That means checking the level of contrast between the foreground text and background images or solid color. The majority of the text (or body copy) must have a contrast ratio of 4.5:1. This contrast allows people with challenges in vision to read the content more easily. Take note of the screen shot (it can be opened larger on click). I have passed our background image and the foreground text through a contrast tool, and it passes. Strictly because the most important text is white on brown. This color ratio satisfies the WCAG guidelines.
Another detail we focused on was the verbiage used for links. Instead of using phrases like “Read more,” “Learn more,” “Click here,”; we added in descriptors of what they are reading about to make it clear and concise, especially when the CTA’s get scanned by a screen reading tool. What occurs is that a screen reading tool allows the user to hear a list of all the links on the page. And when read one link after another, the user gets an idea of the linkable content and can jump to a specific page. If the screen reader scans a list of links that all say read more or click here, the user wouldn’t know the context of those links.
Another great consideration and a fairly easy fix is to make sure your navigation is able to be triggered by the keyboard and allow the user to tab through the navigation options. I have prepared a short video to share with you what I mean.
Diving into a more complex area was evaluating and fixing the header levels throughout our web pages. I say complex because, for some reason, we didn’t write the code with this in mind, therefore making a bigger mess to fix later. Commonly on websites, you will have code blocks or components of content running down the page. These components usually have a heading and body copy, along with a possible CTA. As a screen reader progresses through the headings, it looks for a hierarchy to indicate the importance of the content. If you have several sections on a webpage that contain the same H1 tag for a heading, the screen reader doesn’t know which is more important or where to start. The best recommendation is to start with your topmost headline as your h1 and then leverage h2 and lower as you move further down the page.
There are lots of easy ways to get started with making your website accessible to those with disabilities. But the first step is having empathy for those users and wanting to make a change for the good.
- Contrast Checker, Acart Communications, https://contrastchecker.com/
- Krishan, Kriti. “Accessibility in UX: The case for radical empathy”, UX Magazine, UX Magazine, 30 April 2020, https://uxmag.com/articles/accessibility-in-ux-the-case-for-radical-empathy
- “Accessibility For UX Designers”, Team Treehouse, Treehouse Island Inc., https://teamtreehouse.com/library/accessibility-for-ux-designers