• Skip to main content
  • Skip to primary sidebar

Joel Koch

Just another Master of Science – Digital Innovation in Marketing site

Fox School of Business

Combining Usability and Accessibility for an Optimal UX

July 28, 2021 By Joel Koch Leave a Comment

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.

http://digitalmarketing.temple.edu/jkoch/wp-content/uploads/sites/356/2021/07/ux-eport2_Navigating-ResMed.com-using-keyboard.mp4

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.


Resources:

  • 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

Share:

  • Click to email this to a friend (Opens in new window)
  • Click to print (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on Pinterest (Opens in new window)

Filed Under: Uncategorized

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

My information

  • About
  • Certifications
  • My Interests
  • My Resume

e-Portfolio Posts

  • Can TikTok “Drive” Autonomous Technology November 7, 2021
  • Expanding mobile marketing to wearables October 11, 2021
  • The future of mobile marketing powered by AI September 19, 2021
  • Combining Usability and Accessibility for an Optimal UX July 28, 2021
  • Remotes! The worst UX designed product of the century July 28, 2021
  • Setting sights for Agile in a Waterfall structure. July 24, 2021

Copyright © 2022 · Joel Koch
Disclaimer: The information included in e-portfolios are posted and maintained by the applicable student. Temple University makes no representation as to the accuracy or currency of this information.

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.