Who needs an accessible website?

• accessibility
• basics

Have you ever tried using a website while blindfolded? For many people, it would be near impossible to do, even with the most accessible of websites. There are people who use the web every single day with a variety of disabilities which can impact their user experience, yet too few frontend developers concern themselves with such experiences.

In some cases, I believe this lack of concern stems from a lack of knowledge on coding for accessible experiences. In other cases, developers may not even be aware of their users with disabilities or know that those users may be struggling to use the website. The worst offenders, in my opinion, are the developers who cut accessibility from their code because it isn't seen as a sexy new feature, although I'm sure there are many users who would disagree.

In this article, I will discuss some specific users to keep in mind when designing and building an accessible website. In addition, I will demonstrate ways in which a poorly designed UI or UX can lead to difficulty when using the web.

How do we use the web?

Surfing the web has become ubiquitous in our society and many of us have been doing it since we were young. It's become an intuitive and almost second nature experience to open a browser, load a website, and consume content.

Because it's become such a mundane part of existence, I have never spent much time thinking about how I'm even interacting with the device. If someone asked what senses you use when you visit a webpage, what would you say? The most obvious one for most people would be sight, but there are other senses which may be less obvious.

Using three senses while on a website

On any given website, we will likely be using a combination of 3 different senses as we interact: vision, hearing, and touch. The way in which we use these senses depends on the website being visited, the content to consume, and the conditions under which we're visiting the site. Below, I have listed a few ways that each of these senses are used when visiting a webpage:

• Vision: Used when reading text, looking at an image, or watching a video
• Hearing: Used when a noise plays, a video has sound, or music is playing
• Touch: Used when a phone responds with a vibration

The majority of users to a website will be able to mix and match these senses for an immersive experience. There is, however, a minority of users who may not be able to use all 3 senses.

What if any of those three senses are missing?

So now the question is, what happens when one or more of those senses aren't available when using a site that was intended to be used with all 3? If proper precautions are not taken when the page is being built, the page could become unusable for a visitor.

I think most developers would agree that the more people who can use our stuff, the better it can be. To begin working toward everyone being able to use your site, it's important to know why those senses are unavailable and plan accordingly. This is where accessibility comes into play.

Disabilities which affect user experience

Although I'm sure you've guessed that there are disabilities related to vision, hearing, and touch which may hinder someone's ability to use your site, there are actually a few others to consider as well. I will be discussing 4 separate disabilities which can be affected and considerations we can take as engineers to make their experience on our products just as enjoyable as those without disabilities.

Visually impaired users

When we think of visually impaired people, we tend to think about people who are legally or completely blind. While users who fall into these categories should be considered when building a webpage, visual impairment is not limited to these two buckets.

While talking about ways to address accessibility concerns, let's go over the primary types of visual impairment to consider.

Nearsightedness and farsightedness

The first group to consider when implementing accessibility into a webpage are users with Myopia (nearsightedness) and Hyperopia (farsightedness). While many of these users will wear glasses to assist them in viewing your webpage, there are still measures which can be taken to ensure a more positive experience such as keeping font sizes at a minimum of 15-16px.

Blindness

Although we already mentioned users with blindness, it's worth discussing in greater detail who they are and how they interact with a webpage. Users with this disability typically don't have any vision at all. To make technology easier to use for those without eyesight, screen readers such as JAWS, NVDA, Windows Narrator, or Apple VoiceOver can be used to navigate and consume information.

Color blindness

Color blindness is not generally thought of as a disability, even though it can dramatically affect the way in which a user interacts with UI elements. For instance, if a website has instructions that are color based such as "Click the green button", that will be a difficult user interface to navigate.

UIs which depend on color can be difficult to navigate if a user is colorblind, as shown in these examples

In addition, there should be an adequate contrast between background and foreground colors to ensure maximum readability. If you're unsure about the contrast on your website, you can use a tool like the WebAIM contrast checker to determine if the level of contrast on your site meets accessibility standards.

Limited vision

The final group of users with visual impairments to consider are those with limited vision. This is often caused by cataracts, glaucoma, macular degeneration, and more. Fortunately, if you've taken the precautions already mentioned for visually impaired users, there shouldn't be any additional work necessary for colors and sizes.

Anyone having difficulty seeing

To help illustrate why implementing accessibility into a website is important for everyone, we can even broaden the scope of the users we're building for. Not all users have visual impairments, but anyone (visually impaired or not) could be browsing a website while in direct sunlight which can make it difficult to read. Ensuring there is sufficient contrast and the font size is large enough can even help those trying to use the web under temporarily difficult conditions.

How to make your site more accessible for visually impaired users

As discussed above, there are multiple steps which can be taken to allow the maximum number of users to interact with your website if they have visual impairments.

• Make sure the contrast between your foreground and background colors meet accessibility standards
• Don't assign value to colors alone
• Keep font sizes large enough that they are easily readable
• Ensure that screen readers are able to find and read the information

Hearing impaired users

There are also a significant number of internet surfers who are deaf or hard of hearing. While these users may be able to interact with the site visually, there are still steps we can take to ensure maximum usability on the site.

Before going over solutions to improve the user experience for those with hearing impairments, let's look at who could fall into this category.

Deaf

A user who is completely deaf will not be able to hear any audio on your website. This could include notification bells, music, or audio from various media sources.

Hard of hearing

Users who are hard of hearing have some sort of hearing loss which makes it difficult to hear or understand everything, particularly at lower volumes. While these users may be able to hear sounds on your website, they can also benefit from the steps taken to accommodate the deaf users.

Anyone in a loud environment

If you've ever been at a loud restaurant or concert and try to watch a video or listen to something, you know how difficult it can be to get all the information being presented. Anyone in this situation will also be able to use the web more easily if precautions are taken for those with an auditory impairment.

To illustrate how information can be misconstrued if a video is not properly captioned, I will direct your attention to a meme from the mid 2000s.

How to make your site more accessible for audibly impaired users

The solutions for those with hearing impairments are the same, regardless of the level or reason for impairment.

• When using a sound, also provide text for the user to read (captions for videos and audio transcriptions)
• Avoid adding music to spoken word, where possible, as this can make the spoken word more difficult to understand

Users with motor impairments

There are varying levels and reasons for motor impairments, but it's important to build in accommodations for each level of impairment.

Loss or damaged limbs

A user who is missing limbs or is limited in the use of their limbs may find it difficult to use and navigate on your website.

Loss of fine motor skills

Some users may have the use of all of their limbs, but lack the dexterity to use them for minute functions such as clicking on small buttons or links. Users who fall into this category could include those with Parkinson's disease or Rheumatism (arthritis).

Anyone on a bumpy car or train ride

Trying to accurately press a button or link can be difficult when the device being used is moving all over the place. While temporary, this also qualifies as a motor impairment and users in this circumstance will also find it easier to use your website if accommodations are made.

How to make your site more accessible for users with motor impairments

Improvements to your website for those with motor impairments will come in the form of support for different input technologies and UI element sizes.

If I were to ask you to click the buttons in the demo below, you may not have any trouble doing so since both buttons are stationary. This gets more difficult if the targets begin moving. To simulate motion in the demo, simply check the "Show motion" checkbox. Though it is a contrived example, it demonstrates how the buttons could move if the device being used is moving around quite a bit for the user.

After enabling motion, try to click the small button and then try to click the large button. I'm willing to bet that, of the two, the larger button is easier to click. This is because the target for the user to click is larger, so it doesn't require as much finesse to do.

So how do we make our websites more accessible for those with motor impairments?

• Make sure navigation and interaction is possible with a keyboard alone for those who cannot use a mouse
• Keep targets large if possible to reduce difficulty in interacting with various elements

Users with cognitive impairments

The final type of users we will discuss today are those with cognitive disabilities. This category covers a wide variety of conditions and situations, though most can be addressed with only a few precautions. Let's take a look at some potential cognitive impairments to plan for.

Autistic users

A visitor to your website with autism will likely be easily distracted and may find inconsistencies in navigation frustrating. To improve their user experience, try to keep page navigation as simple as possible.

Attention Deficit Hyperactivity Disorder (ADHD)

Users with ADHD will be distracted by movement on the site and find it hard to concentrate on long passages of text. To help with this, either eliminate motion altogether or provide an option to limit the motion and try to break up text into smaller chunks.

Users with anxiety

Some users visiting your site may have anxiety, feeling a lot of pressure to use the site in a certain way or accomplish certain tasks. If the site is unclear about usage or next steps, it could cause a user with anxiety to panic. To help these users, provide clear and concise instructions for users and don't put time limits on things where possible.

Users with dementia and Parkinson's dementia

Although users with dementia and Parkinson's dementia may not experience panic in the same way as a user with anxiety, they will likely take longer to comprehend the directions and complete tasks on the website. Fortunately, the steps you take to help users with anxiety will also help those with dementia. Simply providing adequate instructions and avoiding time limits will improve user experience dramatically. Score!

Temporary cognitive impairments

Also important to consider when building out websites are those with temporary cognitive impairments. I know what you're thinking: what are temporary cognitive impairments? I'm glad you asked. Anyone can experience temporary cognitive impairments since they are typically based on situations and circumstances.

Below are some examples of temporary cognitive impairments to account for:

• Tired
• Drunk
• Hungover
• High
• Irritated
• Angry
• Distracted
• Grieving

While there aren't any steps to take directly for these conditions, implementing code for the previous cognitive impairments should improve the user experience for these users as well.

Simple steps to take to improve accessibility

There are a few things you can do immediately to improve the accessibility of your site. Below you will find information about those improvements.

Conclusion

You never know who is going to visit your website or what challenges they may face in using your site, so implementing methods for maximum usability is imperative. The first step to improving the accessibility on your site is to understand those who may be using the tools you're building.

In this post, we've discussed several potential visitors, what challenges they may face when using your website, and some ways you can improve their experience based on those challenges. Go forth and make the web a more accessible place!

If you have any thoughts or questions, feel free to reach out to me on X (Twitter) at @iam_timsmith.

I build things using React, Node, PHP, and more. Currently, I’m a Software Engineer working on D&D Beyond at Wizards of the Coast. You can follow me on Twitter at @iam_timsmith.