Gif of three different people's headshots rotating in and out of frame

Assistive Technologies and Inclusive Personas for the Web

Accessibility UX 8 min. Read

Assistive Technologies and Inclusive Personas for the Web

Take time to empathize with people in order to create an inclusive user experience for all.

Real talk: many designers and developers create unusable experiences for people with disabilities. It’s an issue that has plagued the internet for years—but has been especially hot news recently. Reasons for this could be inexperience, corner-cutting, or flat-out apathy and indifference. To these designers and developers, I challenge you: read the personas at the end of the article and tell me that you still don’t give a hoot.


Persona depicting Gail. Shows someone what a persona would look like.

Accessibility is About Empathy 

Imagine you’re in a store. You need coffee and pickles. You gaze up at the signs above the aisles, navigate straight to the items, and head to check out. You swipe your items across the scanner, pay, and get out. 

While the majority of us are walking through this grocery store with no problem, there are two people with vision impairments in the store who are utterly lost, confused, and frustrated. Think of how that number grows when we include people with cerebral palsy and autism spectrum disorder. These three groups of people have their own tools to help them, but if the grocery store is laid out in a completely illogical way, user pain and frustration are inevitable! Who do you think that responsibility falls on? The customer? No.

It’s probably obvious what question I’ll pose next—what if this grocery store is actually a website? 3 to 6 to 10 people out of 100 are going to feel powerless trying to navigate a site that hasn’t been built to acceptable accessibility standards. 


Example of what a Persona would look like. Persona depicting a guy named Marcus

Become an Advocate

I haven’t forgotten about the UX community. The UX community needs to continue pushing for web accessibility and become better advocates for accessible design. As user experience designers, we have one priority: matching a good experience to the intended users. However, good UX professionals know that intended users and all users are completely different things. That means becoming familiar with the tools used by different groups of people in order to accommodate the largest possible segment of users. Enter, assistive technologies (ATs).  

What is a screen reader? It’s an assistive technology used to identify readable elements on a web page, that then uses that information to read the text aloud. ATs help people with disabilities achieve their goals. There are many other assistive technologies out there besides screen readers. There are braille keyboards, special styluses, screen magnification software, and speech input software.

Persona depicting someone named Adam.

Planning for Accessibility

The majority of us don’t often see people using ATs to interact with the internet or other software in our everyday lives. But, it happens…every single day, people use this technology. So why would we intentionally sacrifice usability for design? Many designers and developers just flat out don’t know how to code or design for accessibility. If you’re one of those people, here are a few tips (thank me later):

  • Double-check your color-contrast ratios between the background and the text. This helps people with blurry vision.
  • Manually check the resize function to enlarge the text on your site (Cmd + “plus sign” or Ctrl + “plus sign”). People over 65 use this function all the time.
  • Make sure that content is laid out in a logical tabbing order for someone who is using a stylus instead of a mouse to navigate the site. 
  • Make sure your navigational titles are clear and consistent. 
  • Provide alternative text for images. A detailed description of the image is ALWAYS better when helping the user identify what it is when using a screen reader.
  • Double-check that form fields are labeled correctly with text outside of the field. Placeholder text inside form fields is often read differently by screen readers, and many browsers and ATs don’t support them. Not only that, but they often have lower contrast ratios and disappear when you start typing. Just avoid placeholder text altogether.

Building Personas

One good way to make sure you’re planning and designing for accessibility is to build personas for your expected users. Much like marketing or sales personas, these profiles help you keep your ideal audience in mind. Making note of their frustration points can help you assess your work to make sure you’re working toward inclusivity. Here are a few examples to help get you started:

 

Gail

User Role

HR Specialist

AT’s Used

Tablet with stylus
Scooter with joystick control
Speech-to-text apps

Background

Gail is a fun-loving millennial who works at a large corporation in Des Moines, IA as an HR specialist. She has cerebral palsy (CP) but works alongside several people who often help her get unstuck when navigating the company’s intranet.

She has a 4-year-old rescue pup named Terry (a.k.a T-Bone) and lives in a small independent living community.

Motivations & Goals

She loves working with people in her community to improve interview skills, gain professional readiness, and build good work habits.

Frustrations & Pain Points

She has movement control issues in her hands, so when websites don’t have large click targets for her stylus, she can get frustrated to the point of giving up. She gets very irritated with websites that don’t design for tablet views.

Gail can speak at a better level than most people with CP. This allows her to utilize speech to text fairly well. She still feels like this technology is in its early stages because most people aren’t dependent on it, and software companies don’t see a priority to make it better.

Very independent and hates asking peers for help to navigate her company’s own resources.

 

Marcus

User Role

Student at Dallas Autism Career College

AT’s Used

Smartphone
Text enlargement
Wearable tech

Background

Marcus falls between the middle and the high end of the autism spectrum. He says he still has his good days and bad days like everyone else.

He’s been going to this college that helps people like him get jobs.

This college has a room that is a complete replica of a Target warehouse and checkout lanes. That’s where he and his friends get experience in fulfilling orders and performing transactions. He loves using the scanner to count inventory.

He uses a task assistant on his phone and smartwatch to make sure he eats his lunch at the same time every day. He’s anxious that his entire day will collapse if he doesn’t.

Motivations & Goals

Wants to become independent from his family, but sometimes he thinks he wants that, only because he knows they want that for him.

Frustrations & Pain Points

Gets highly distracted on websites that have a lot of things going on: “My life is made easier when I see that ‘reader view available’ icon on my phone. Sometimes I wish all websites were just text.”

He’s great at video games, but has trouble learning new websites. Becomes very upset when a website that he’s been using for a long time does a redesign and they change labels of important things, and no idea where to find the information he needs.

 

Adam

User Role

Sales rep for a piston ring manufacturer

AT’s Used

VoiceOver (Mac) and NVDA (PC) screenreaders
Braille display
Voice recorder

Background

Adam has been blind since birth, but has been able to succeed in a world that he understands is pretty unaware of the blind.

He grew up in a small town, and to many, he was the first blind person they had ever met. That’s okay, because he loves to explain to them how they can be advocates.

Motivations & Goals

He loves meeting new people and networking. That’s why Facebook and LinkedIn are usually where he gets his leads.

He’s motivated by the competitive environment with his sales peers. He’s really motivated by quarterly numbers.

Frustrations & Pain Points

He can’t stand it when he lands on a potential lead’s website and the reading order of the content is broken. His screen reader jumbles paragraphs and design elements when this happens.

He also knows that people have the ability to add alternative text to photos, so he views blank alt text fields as a deplorable practice. Just as worse, he gets frustrated when people add the text but it’s nondescript! Alt text that reads “picture of boy” helps no one.

Nick’s Closing Thoughts

The internet wasn’t built overnight — and fixing accessibility issues isn’t an overnight solution. But just by trying to incorporate more of these tactics as you change your website, you can help make the web a friendlier place. Or better yet, if you plan on starting from scratch any time soon, get a hold of us. We can help you build your site to be accessible and compliant from the ground up.

Nick Throckmorton User Experience Designer

The Monitor