When I was a kid, if you wanted to call someone you either had to know their number by heart, or have it written down somewhere. Some people had little notebooks of contacts or a rolodex, and in Canada everyone had this big fat phone book, half white and half yellow. The white side had all the local residential numbers, and the Yellow Pages had all the local businesses.

As time went on, and it became normal to have cell phones, people started storing numbers in their devices. Many stopped registering landlines. Personal numbers were no longer something you looked up. Soon the big phone book that landed on our front step every year was reduced to just the Yellow Pages.

Not long after cell phones became the norm, smartphones quickly took over. With easy access to the internet, and the ability to dial the number straight from a website, even the Yellow Pages became obsolete. Mostly they went into the recycling bin. People complained about the waste of paper for books no one needed. Finally in 2019, the Yellow Pages went fully digital and the phone book became a thing of the past.

In the last decade so much of our life has moved online. In part this was expedited by the pandemic and the need for remote access to all kinds of services, but our world was already headed in this direction. Just ask the Yellow Pages.

Before you know it, some real life service providers may become obsolete and make the same jump to be exclusively digital. But when that happens, will it be usable by everyone? That’s where assistive technology comes in.

What counts as assistive technology? 

At its core, it’s anything that helps people with disabilities maintain, improve, or increase their capabilities. It might be the easiest to think of something visible and obvious like a wheelchair or a scooter, but it’s really a much broader category of equipment. Something as simple as a pencil holder that helps a child learn how to hold their pencil correctly is an assistive tool. 

Here’s a few more examples of assistive technology. What would you add to it?

• Hearing aids
• Wheelchairs
• Glasses
• Prosthetics 
• Speech synthesizers
• Crutches or slings
• Braille
• Scooters
• Braces and casts
• Power lifts
• Communication boards
• Adjusted school curriculum
• Computer software
• Elevators, escalators, and ramps

There’s also a wide variety of people using assistive technology. Some will use it for their entire lives, and some maybe just for a few minutes. They can be old, young, and anywhere in between.

Typically Permanent

• Motor control difficulties
• Cognitive difficulties
• Learning and reading disabilities
• Low literacy
• Non-native speakers
• Hearing loss
• Low or no vision
• Deaf-blind
• Color blindness

Typically Temporary

• Injuries that limit mobility like strains, sprains, and fractures
• Medications that cause side effects like tremors or cognitive impairment
• Eye injuries / eye infections
• Broken eardrum / ear infections
• Concussions
• Recovering from surgery 
• Plus any number of things that aren’t due to a disability, injury, or illness:
  • Intoxication 
  • Broken / missing computer mouse 
  • Being in a moving vehicle traveling over a rough surface
  • Only having one hand available while the other holds a toddler, a laundry basket, grocery bags, an angry cat, etc. 

With all of those in mind, take a look at this list and think about how you would typically accomplish these tasks in a brick and mortar world. Persons with disabilities have to do these  same things, and are generally able to because we live in a society where accessibility is regulated and enforced (though there is room for significant improvement).

• Register for events
• Apply for jobs
• Order food
• Financial management
• Fill out taxes
• Look up phone numbers and hours of operation
• Go to school
• Book flights & hotels

But now think about doing these things digitally, with a limited capacity to perceive or interact with the internet. What if you couldn’t read? Or speak? Or see? Or hear? Or move? How would you do those things? Could you even do those things digitally? What if there were no other options? No one should be restricted from these activities simply because of a disability. 

What kinds of assistive technologies are used online?

Incredible advancements made in bringing assistive technology into the digital world and ensuring anyone can have access to content and services online. It is actually possible to navigate and use a website using just your eyes!

Here’s some of the amazing assistive technology that’s being used today around the world:

Screen readers 

• Synthetic speech spoken aloud provides the ability to consume digital content audibly.
• Price range from free to $1,200 USD

Braille Displays 

• Converts screen content into braille characters and sends them to a display where the individual can feel the output. Some devices also allow for braille input.
• Price range $1000 to $7000 USD

Voice Recognition Software 

• Allows users to speak instructions that can be utilized to navigate and instruct a digital display such as a website or other software.
• Price range free to $500 USD, yearly subscription models are common

Eye Tracking*

• Sensors that track eye movements in real time, identifying where the user is looking, responding to head / eye movements for engagement.
• Price range $100 – $10,000+ USD

*Note: Some eye tracking software / devices are not created for accessibility and only track eye movements for data collection.

Switch Devices  

• Provides binary input via foot pedal, Sip ‘n’ Puff, joysticks, and more. Some Switch Devices can receive non-binary input for more complex instructions.
• Price range $20 – $2,000+ USD 

Sip ‘n’ Puff 

• Allows users to utilize a straw like device to provide switch input through the use of their breath and can be customized for the user.
• Price range $200 – $800 USD

You’ve seen some of these in action even if you didn’t realize it. Stephen Hawking used a switch device for much of his life to control his wheelchair and voice synthesizer via his thumb, in addition to eye tracking / blinking. He eventually had a custom switch device made when he was no longer able to use his thumb that would sense the tensing of muscles in his cheek to receive similar inputs. These advances in technology allowed one of the most brilliant minds of our time to continue his work for 55 years after he became paralyzed.

What needs to happen to make a website usable by these devices?

These devices will not work on a website unless they are built according to the WCAG 2.1 guidelines, meeting the Level AA standard as a bare minimum. This opens up a site to be understood by assistive technologies. Accessible websites will inform these devices what content is being reviewed and how to interact with it. It allows users to fill out forms, use navigation, find relevant information, download or upload files, check their email, everything you need to be able to do to operate in a digital world.

How can I improve my site so it’s accommodating to these devices?

While I advocate for all websites being Level AA compliant, it’s especially imperative if your site is in an industry such as  higher education, government, healthcare, etc. Both the USA and Canada have regulations regarding accessibility requirements so be sure to check that you are in compliance with the appropriate laws.

We can’t fix the entire internet in one push of a button, but you can start now by getting a sense of how accessible your current website is. Once you have an idea of what needs to be done, find an agency that prioritizes accessibility and can help you get your site across that line. 

Moving forward, make accessibility a part of your ongoing website goals. Because one day you too might need a little help from assistive technology.

Want more accessibility info via a webinar?

Kanopi’s Candice Dexter gave a webinar for our client the University of California San Francisco called “Making Your Websites Accessible: An Overview of the New Federal ADA Guidelines.” (30 minutes)

It’s time to take a look at screen readers and get a better understanding of who uses them, and what it’s like to use assistive technology on the web.

What’s a screen reader?

A screen reader is a piece of software that is able to review textual content from a computer and present it to a user via synthetic speech. It’s what we call “assistive technology” and essentially “reads the screen” out loud to the user. You may have heard the term used specifically in regards to the internet, likely because screen readers are an invaluable asset for the accessibility community. 

Screen readers present a website as plain text, including important semantic information such as region, headings, links, and interactive elements. Where most users might perceive a website as an interactive brochure of sorts, a screen reader’s experience is closer to an interactive audiobook.

Because of this, screen readers make the internet accessible to users who otherwise might not be able to perceive or understand content being presented visually.

Who are screen readers for?

It’s tempting to think of screen readers as used only by people who have limited vision, but that’s not the sole use case. In fact screen readers are so helpful, they’re used by many different groups of people.

• People who are blind
• People with low vision
• People who have learning and reading disabilities
• People with cognitive impairments
• People with motor disabilities
• People with low literacy
• People who are non-native speakers
• People who prefer to listen to content rather than read it

That’s a wide range of needs, and there’s a good chance that any given website’s audience overlaps with one or more of those categories.

What’s it like to use a screen reader?

This is a basic example of the JAWS screen reader going through a small chunk of website content. The experience is quite linear, just straight down the page without any additional context and demonstrates the “plain text” aspect of how a screen reader regurgitates information.

For a more extensive look at screen readers in action, here are a few videos under 5 minutes that can give you deeper insight into the experience.

UCSF Screen Reader Demo

SLCC Screen Reader Demo by individual with no vision

TPGI Accessible Page vs Inaccessible Page

How does website inaccessibility impact screen readers?

Structure & Order Matters

Screen readers understand a page in a linear pattern, apart from the design and layout, following what is known as the “DOM order” (Document Object Model). Essentially, the DOM order is the html of the page in the order that it is written. 

Why does that matter? Because while I can style a button from the footer to visually appear as though it’s in the header, someone using a screen reader will not reach that button until the application reaches the footer. This could be a confusing experience if the user could see the button, but not hear its function.  

Consider if a form’s labels were all on the left side of the page and the inputs where you enter information were all on the right side of the page, but they were coded as two columns instead of rows. A screen reader would read all of the labels first (down the first column), then all of the inputs second (down the second column). Without visually being able to line up the label to the input, a user wouldn’t know how to fill out the form.

To create an accessible experience, the DOM should follow a logical structure. It needs to make sense to someone who can’t see the page, but also to those who can see it. Remember, many users of screen readers are also viewing the page; it would be confusing to bounce around illogically ordered content. Users might lose their place on the page, or start confusing the relationships between headings, content, and links. For those with cognitive difficulties, this would be incredibly frustrating.

Landmarks & Headings Become Waypoints

If you think about a webpage like an essay, it has an introduction (the header), the body (the main content), and a conclusion (the footer). And every good essay has an outline (the headings).

A screen reader has the ability to move down a page using these kinds of landmarks as waypoints. Users could choose to move from the header to the main content, to the footer. If a page is created without essential landmarks, the screen reader can’t find those elements for the user. A site with proper semantic html will automatically inform assistive technologies of those regions, making it easier for users to navigate the page.

Aside from landmarks, screen readers can also travel via headings, allowing their users to select a sub heading that piques their interest and start reading from there. If your headings don’t follow a logical outline structure, this could misdirect and misinform users. In an essay you would never put the opening paragraph above the title, yet online this is a common faux pas done under the assumption that everyone can visually see and realize the intention.

Links Need Clarity

When you visit a webpage, typically you’ll see a large number of links. Sometimes this is limited to the main navigation, but often there are links within the content, call to action buttons, or lists of quick links for navigating to popular pages. Screen readers are capable of pulling out all of the links from a website and presenting them to a user so they can more easily find where to go.

Take a look at your webpage. Look at all of your links and compile a list of them in your head. Do they make sense without surrounding content? If not, then it’s possible your site would give a screen reader some trouble.

Let’s say you had a sub-page called “About” in the main navigation going to a page service/about. But then down in the footer area you had a page called “About” going to company/about-us. A screen reader would present each link as “About” and the user would have no idea they were two different urls, or that one was about your services and the other your company.

Likewise, generic link text can be incredibly frustrating. Buttons and links reading “click here” or “read more” or “view now” are poor descriptions and don’t offer any information about where the user will be taken when activated. Read more about what? What am I going to view? Why should I click here?

These problems and more can quickly make your website unnavigable by screen readers, but these problems can also be solved with good accessibility practices. There are ways to include more information that only a screen reader can “see” and present back to a user to provide additional context to potentially confusing links.

What other kinds of assistive technology are there?

Beyond screen readers, consider these other technologies:

Braille Displays – these refreshable displays output textual content with braille that updates as a user moves throughout the page.

Voice Control – allows users to speak instructions that can be utilized to navigate a page through the same waypoints and elements that a screen reader uses.

Eye Tracking – tracks eye movement to trigger page elements and interactions.

Sip & Puff – allows users to utilize a straw like device to provide binary input through the use of their breath.

Switch Devices – provides binary input via foot pedal or other interactive equipment that can be extended for more complex inputs.

Magnification – provides the ability to zoom in and out on content.

While screen readers are just one branch of the assistive technology tree, at their core is the idea of turning a visual website into textual content understandable by a machine. Because of that, all of this other technology typically benefits from screen reader accessibility, making your site available to many more people who otherwise might not have been able to access your products and services.

Where to get a screen reader?

It’s fairly easy to find browser extensions or apps to add screen reader capabilities to a device, but here are the top three tried, tested, and true full solutions that are preferred by the accessibility community at large.

JAWS

Operating Systems: Windows® 11, Windows 10, Windows Server® 2022, Windows Server 2019, and Windows Server 2016.

Cost: Paid

This incredibly powerful screen reader solution has a robust suite of features and abilities. It integrates with other assistive technologies extremely well; in fact it is so popular that more than 53% of screen reader users are using JAWS.

NVDA

Operating Systems: PCs running Microsoft Windows 7 SP1 and later

Cost: Free

While the main product is free (supported by donations), there is additional support and resources offered in paid package deals. One of the really nice features of this software is it can be run from a USB drive, which makes it ideal for those using community computers at a library or café.

VoiceOver

Operating Systems: Most Apple devices

Cost: Free

If you’re using an Apple device, you likely already have this installed. From watches to computers to TVs, you can use a variety of VoiceOver accessibility settings. It’s also compatible with a huge range of refreshable Braille displays.

For further reading, American Foundation for the Blind has additional information on free and paid screen reader services.

Imagine you’re just outside of a coffee shop. You can smell the warm smells of coffee and teas, and freshly baked cookies. The air outside is brisk and the promise of tasty warmth is too much to resist so you go to enter the store and… 

• someone is standing in front of the door saying “you don’t belong here”.
• you are allowed in, able to order and pay but you have to let them call you “Lamp” 
• you are allowed in, able to order and pay but only if you order in gibberish — and you must take whatever they think you ordered.
• you enter the shop but are not told how much the coffee will cost and you’re not allowed to pay for it anyway.

Seems like a pretty awful experience, right? When we reach out to our website users to ask them to engage with us it’s like saying they should come in and buy a cup of coffee. And when the experience is not inclusive… well, I think you get the idea.  

Your website is the doorway to your organization. From higher education, to non-profit, to commercial establishments, you don’t want to turn people away because a form isn’t inclusive. 

What does it mean to be inclusive?

One of the key challenges is the intimidation surrounding the term “inclusive.” Some leaders simply don’t know where to start, and may be tempted to do nothing rather than risk taking a misstep. In reality, this approach is like the coffee shop owner continuing to call someone the wrong name because they are afraid to ask that person what their name is. Instead, it’s a better approach to admit you may not get it perfect the first time, but that you are open to learning. 

While it might seem vast and impossible to account for all the variables, and there’s a risk of not doing it correctly the first time, doing nothing is not an option. We live in an increasingly diverse world, with people coming from different cultures with different naming conventions and needs, and we have to accommodate different standards to include as many people as possible. You are responsible for how you present your information. That means that the answer is to find a way to make this easier to adopt into your organizational culture.  

In this article we’re going to break down inclusivity into three easy to manage concepts:

1. Identity
2. Accessibility 
3. Usability

From here, we’ll discuss how to apply this to your website’s forms. Improve your website and your culture with greater understanding and empathy by knowing how to better respect your users so we can all enjoy a great cuppa and a cookie. 

Identity

I take my coffee seriously and no one can tell me how to take it. I don’t take it the same way as I did at 14 (yes, I regularly drank it back then) as I do now. And that’s just coffee. How can we impose, even ‘harmless’ limitations, on the important aspects of someone’s identity if we wouldn’t want our coffee order defined for us?

Every website visitor looks at your site through the lens of their identity and the experiences that have helped shape their perception of that identity. But how can we break that down? We cannot but we can focus on key areas that make it easier to be more inclusive to all.

• Gender 
• Cultural 
• Ability 

But what do those terms mean? 

Gender identity is the understanding that the societal imposition of binary gender assignments, or specific roles/limitations associated with an assignment are exclusive and unjust. The acceptance of the idea that gender is binary is that it’s “just how it has always been,” but studies of ancient histories show that to be false. It is just how it has never been.  

Cultural identity shapes who we are in relation to where we come from. Though racial background is an aspect of this, this also includes focuses such as language, religion beliefs and other aspects by which one defines their personal history.

Ableism assumes a person’s abilities: physical, mental, environmental or otherwise. Going back to our coffee shop: it would be like the stairs to the doorway that assumes all those who want to purchase coffee and a cookie have the ability to ascend those steps. Ableism is often hidden in the most innocent language. The way in which we navigate the world around us, online or off, impacts how we interpret content. 

This leads us to our second point: accessibility

Accessibility

Accessibility has gotten a lot more press over the past few years, and though most of the press has been on the legal side, it has a greater impact than that. It can be very much like being told to buy something without being told the cost or having the ability to pay. Like the whole of inclusivity, this can feel like a lot but really, it’s based upon one principal, POUR:

• Perceivable
• Operatiable
• Understandable
• Robust

It basically means that users, regardless of ability, need access to an equal online experience. Here are some examples of challenges that may impact the usability of your site:

• Cognitive: ADD, ADHD, ASD, Alzheimer’s etc.
• Mobility: Parkinsons, ALS, Muscular Dystrophy
• Visual: partial or complete blindness, color blindness, vertigo
• Audio: partial hearing loss, deafness

Let’s talk about that coffee shop more — moving onto cookies (because who doesn’t love the occasional cookie?). Each of these challenges, alone or in combination, can impact the overall usability of a website. Website content that is unable to be navigated with assistive technologies (such as  those that do not use a mouse) is as exclusive as a person standing at the doorway to your favorite store saying “you, you cannot go in there. You don’t belong. We don’t think it’s important for you to come buy a cookie.” We wouldn’t do that in real life, we cannot do this online. 

Usability

User experience has been a focus for years and it goes beyond accessibility to overall usability. Some additional ways usability can be impacted include:

• Low bandwidth
• Browser level blockers or plugins
• Other environmental factors from lighting, noise, and those that may distract the mind or limit mobility.

An overall inclusive form takes these considerations into account as well, acting like the awning over the shop’s door. 

How to make inclusive forms

In our coffee shop example, to know if the shop was inclusive we’d look at the doorways, signs and images, we’d see if there was room for us to wait in line and to pick up their drinks. We’d move through a space to make sure the shop itself was set up for us to go in and buy that cup of coffee and a cookie. We’d know, walking through there, what we are doing and why.

This is not so different online. The first step to making your forms inclusive is to really think about why you are collecting information. 

• What is the strategically chosen goal or KPI I am focused on when I am asking these questions? 
• How will the information I am collecting help me reach that goal or KPI? 
• Am I asking questions I don’t really need the answer to?

In many cases we find ourselves wanting to collect information on a form to help us get to know our users better, to build better personas and the like. We don’t have the small talk about the day as the coffee is poured to learn about our customers, so, online we try to get more info at each touchpoint. We recognize that information can be valuable when it comes to learning about your customers. The idea is that digital connections and trust have to come in another form. As an industry we’re coming to this with greater respect for the end user’s right not to share or be forced to check boxes that do not align with their identity. 

Here are some common form fields to think about when considering your approach:

• Honorifics: often the first field on a form, it can set the stage for the rest of the experience. Expand your options to include non-binary as well as professionally respectful selections such as  Dr., Mx., Rev.
• Names: how we call ourselves matter. Overall name fields need to lose many of the restrictions we place on them. That means no minimum (so that individuals with last names such as Yu are validated) or a maximum (Balasubramanian and other longer names have no reason to be abbreviated) character limit can be imposed. Some names are hyphenated or have apostrophes which can be flags as having special characters.
  Additionally, be mindful when using validation as history is full of people with names, such as Crazy Horse and Black Hawk that can teach us not to make assumptions. The easiest way to accomplish this is to allow for a single name field without character limits and minimal, if any, validation requirements.
• Pronouns: there are more than binary genders and some individuals may have more than a single set of pronouns. Start by adding them/them to the selections and allow for these options to be presented as checkboxes to allow for individualized experiences. Be mindful of how these fields are asked for as well; they are not “chosen” pronouns, they are simply a person’s pronouns. 
• Gender: do you need this information? If you are not an organization that requires a gender to perform its duties, consider adding “I’d prefer not to say” and making this an optional field. If you’re a medical institution, perhaps biological sex is a necessary field and gender may play into how a medical situation is discussed (ie: a transgendered man becomes pregnant). If you do need this information, be mindful and respectful in the words chosen and what those words mean to the end user.
• Race: many histories tell the story of newcomers imposing racial identities on peoples without respect to how they identify themselves. This still echoes in many forms as they collect this data. To break away from those impositions, allow for a wide variety of options, acknowledging differences between similar sounding options: for example “Black” may not be the same as “African American” and “Hispanic” may not be the same as “Hispanic” or “Latin(a/o), & Latinx”. And always present this information with the ability to select multiple options. 
• Relationships: ensure that when asking for an individual’s relationship to another we continue this practice of respect: use “spouse” over “husband/wife”, use “parent/guardian” over “mother/father”, “child” over “son/daughter” and “sibling” over “brother/sister”. This sends an immediate message to the user that you respect those in their lives. 
• Contact Information: if collecting email addresses or phone numbers, do not limit character counts as this may discourage those with longer names and/or phone numbers originating from a country different than yours. If you intend to call someone, please ask for timezone information.

In real life most of us are nimble and practice so many of these methods: you’d be a great coffee shop owner and we’d all love buying coffee from you. Really, this comes down to doing more online of what we do when we are face to face. 

And this isn’t theoretical. Here’s an example:

And here is a recent example where someone with a last name of only two letters can’t fill out a form:

This is no different than someone standing in front of the coffee shop denying you entrance. If you expect your users to provide you information you need to ensure barriers to entry have been removed. 

How to make accessible forms 

On the weekends I love really dark roasted coffee with (preferably raw, local) honey in it. The bitter sweet warmth fills my soul and fuels my morning. But imagine you’re behind me in that shop. I’m at the station off to the side where we’re adding in sweeteners and getting napkins and what not. You see that the honey jar is on a shelf just out of my reach. I cannot get it. Would you, presumably being taller than I, help me? Again, in real life you’re wonderful and you’re all about accessibility; it’s just bringing these practices into our digital lives. And it’s important; more than 20% of adults in the US and Canada self-identify as disabled, and worldwide that percentage is nearly the same. 

And consider this: all users are differently abled from time to time due to temporary or environmentally controlled factors, like a broken wrist, or being on a noisy train. 

Here are a few things to look out for to ensure your forms are inclusive to all users, regardless of abilities. 

• Keyboard Navigation: ensure all form fields are able to be navigated to (and away from) only using a keyboard. From assistive technologies to broken track pads — this is a must do.
• Form Labels: include descriptive and meaningful form labels to alert all users as to what is expected of them.
• Instructions: create clear and concise indications as to what you’re hoping to accomplish, how the data will be used, and what you are hoping the user to share. 
  • Example: Asking for a number.
    • Please indicate what kind of number you’re asking for: phone, zip code etc. 

Though progress bars can be nice, they are not required. It’s more about making the expectation as to what information is needed from the end user in each step clear. 

• Error Messages: non-visual users won’t perceive the visual error message.  Make sure that it’s location makes sense in their journey without having to backtrack and search for why something isn’t working.
• Time Limits: time limits can create a barrier for some users. Determine if this is even necessary, and if so, look for ways to break the form into smaller, saveable pieces to allow users as much time as they need to complete the journey.
• Contrast: many forms try to use stylish, grayed out text. A grayed out button or text is acceptable if it’s an inactive element that is not usable but if a user is to derive information about the form or interact with a field, proper color contrast is required.

Human-Centric Respect

Meeting our needs is the most human of qualities. It doesn’t matter if it’s succumbing to the desire for a cup of joe and a treat or accomplishing a task online; if we need to complete a task we must feel welcome and able to do so. Overall it’s important to keep the forms, and all aspects of your user journey, human focused. Mindful choices that show humility on the part of your organization indicate that your users are of value to you — not only you to them. We need to start with our language, user phrases of “people of” and “people who” — acknowledging that the individuals and not an imposed demographic label is what is important to you. 

Forms are asking your users to provide their personal data as they engage with your site. An inclusive approach breaks down barriers and builds trust. It’s a big world and we’re excited to make connecting with all those humans in it a little easier. Reach out if you need help with inclusive forms or overall inclusive content strategy. 

Want more related information? We’re big on inclusion and accessibility here at Kanopi. Here are a few related articles:

• Inclusive Content Strategy
• How your website’s UX impacts brand perception
• Inclusive Storytelling