Practically everyone knows user experience (UX) is an important consideration when creating a website or app. No one wants to use an unintuitive app with a terrible user interface (UI).
But what about the user experience of people with disabilities?
Since the early 2000s, the web accessibility movement has advocated for web design that considers the needs of people with disabilities. Some businesses have been taken to court for maintaining inaccessible websites, with plaintiffs citing provisions of the Americans with Disabilities Act.
Web accessibility is growing as a field of study, and professionals are taking notice. Web accessibility is becoming more important to businesses and developers, and some UX designers have begun incorporating accessible design into their work.
However, web accessibility and its practices are still a mystery to most people.
What are accessibility practices? How is a website built with accessibility in mind? What technologies do people with disabilities use to access the internet, and how can we build websites with those technologies in mind?
Before working on a website’s accessibility, first consider the types of impairment you’re optimizing for. Typically, accessibility considerations are intended to address the needs of those with the following:
- Visual impairments (low vision, partial or total blindness, colorblindness)
- Auditory impairments (deafness, being hard of hearing, tinnitus, hyperacusis)
- Motor or dexterity impairments (paralysis, cerebral palsy, repetitive strain injuries such as carpal tunnel syndrome)
- Cognitive impairments that affect problem-solving skills, memory and attention, developmental disabilities, or learning difficulties like dyslexia
There is a growing cultural awareness of web accessibility. However, there’s still much ambiguity around assistive technology that helps people with disabilities use the internet.
Understanding these tools is key to implementing successful accessibility strategies. How can you create effective practices if you don’t know the technology you’re building around and integrating with?
In some cases, people with disabilities don’t require any specific software or hardware to effectively access the internet. Instead, for their accessibility needs to be met, they need website owners or content creators to provide tools or other considerations.
Types of assistive technology
Assistive technology is the umbrella term for assistive, adaptive and rehabilitative devices and tools used by people with disabilities. In the context of web accessibility, assistive technology is the software and hardware used by people with disabilities to access and use the internet.
Implementing web accessibility methodology becomes easier if you consider the specific needs of people with disabilities. There aren’t blanket solutions, and different approaches should be taken to provide optimal user experience depending on the disability.
Assistive technology for people with visual impairments
People with visual impairments like low vision or blindness may require screen reader software. Screen reader software translates website displays into non-visual information via text-to-speech converters, sound cues and refreshable Braille displays. Screen magnification software is, as the name suggests, standalone programming that magnifies digital displays to provide easier viewing for people with low vision
Assistive technology for people with motor impairments
Motor or dexterity impairments involve partial or total loss of function of a body part, and can include loss of a person’s gross or fine motor control. This can include paralysis, cerebral palsy and repetitive strain injuries like carpal tunnel syndrome.
People with motor or dexterity impairments may require an alternative input device, as opposed to a traditional keyboard and mouse, to use and navigate a computer. Alternative input devices include motion or eye tracking devices, head pointers and single switch entry devices. Later, we’ll discuss the design choices website owners can make to ease the experience of people utilizing these devices.
Assistive technology for people with cognitive impairments or learning disabilities
Unlike visual or motor impairments, cognitive or learning impairments aren’t often accounted for in web accessibility techniques and guides. While most tools to assist people with cognitive or learning impairments are built on the developer’s or web designer’s side, existing tools can help the development of such custom programs.
Text readers are software programs that repeat text on a screen in a synthesized voice. For clarity, some options highlight the word being spoken. However, text readers aren’t usually capable of reading complicated text (like menus) or non-text elements (like images).
6 tips to improve web accessibility
- Properly use HTML markup
- Include succinct, descriptive image alt text
- Consider CAPTCHA options
- Make video content accessible
- Choose accessible color choices
- Ensure the website can be navigated using only a keyboard
1. Properly use HTML markup
Whether or not a web designer manually enters HTML, it’s important to place headers in an order that makes sense. Screen readers that articulate information on a web page use headers as guideposts.
If the HTML of a page is messy or headers aren’t used properly, users accessing a website with a screen reader will have difficulties navigating.
The H1 element should be used for main ideas on a page with subsequent headings (H2, H3, etc.) following a logical, topic-based pattern. This helps users understand the page and the relationship between the elements on it.
Links should also accurately describe the page that users will be taken to. Links that simply read “Click Here” or “Read More” tell users nothing about the content of the web page.
2. Include succinct, descriptive image alt text
Alt text is often forgotten when images are added to web pages. After all, most people only use alt text when searching for images in a search engine or conducting a reverse image search.
But for people using screen readers, alt text is all they have to rely on to learn about a displayed image. Users can get confused if an image’s alt text isn’t changed or isn’t necessarily representative of what the image depicts. This is especially harmful if the image is critical to understanding the webpage.
With that in mind, it’s good practice to not use images as navigation elements or as the only content on a blog. When writing alt text, make sure the description is accurate but not too wordy. This will also help with search engine optimization (SEO). Employing clean and thoughtful HTML aids both SEO and web accessibility, so you can hit two birds with one stone.
| TIP: Interested in learning more about SEO? Check out our blog on how SEO works. |
3. Consider CAPTCHA options
A completely automated public Turing test to tell computers and humans apart, often abbreviated to CAPTCHA, is an aptly — if terribly — named tool. CAPTCHAs are particularly common on login screens to verify the person signing in is in fact a human and not a spam bot.
CAPTCHAs often present users with an image of warped letters that must be typed into a text box before allowing users to move forward. As useful as they are in preventing spam, they pose a number of problems for people with accessibility needs.
CAPTCHAs can be especially confusing for those with dyslexia or some cognitive difficulties. Some CAPTCHA images don’t take into consideration people with colorblindness, who may not be able to differentiate the letters from the background. CAPTCHA images are also unreadable by screen readers, but adding the correct answer to alt text on the page could defeat the purpose of the test.
If CAPTCHAs are a must for your website, ensure they have accessible options like audio-based tests or Google’s reCAPTCHA v3, which allows users to pass a CAPTCHA test just by clicking a box.
4. Make video content accessible
While people with hearing impairment can typically use the internet with few difficulties, website owners should make considerations for the roadblocks those users do encounter. For example, if a website provides sound cues without companion visual cues, users with hearing impairment won’t be able to interact with the site.
One of the most notable hurdles for people with auditory impairment is a lack of closed captioning. Videos without closed captions can be completely inaccessible for those with a hearing deficiency. For those uploading a video to a platform like YouTube or Facebook, it can be easy to rely on the auto-generated captions, but they’re often inaccurate and don’t provide contextual captions for music or sound effects.
Audio descriptions also help users with visual impairment follow along with videos without audio and showcase people who do not have speaking roles. It’s also key to add transcripts of videos for those using screen or text readers.
5. Decide on accessible color choices
Typically, color choices for websites involve whatever is trendiest in UX. This usually means a whole lot of unoffensive, definitely original blue. But color is an important consideration in web accessibility. In particular, designers may want to consider the needs of users with color blindness.
To help me demonstrate, check out this picture of G2’s one and only Monty enjoying Chicago’s skyline.
Users with red-green colorblindness (deuteranopia) will have difficulty distinguishing reds, greens, browns and oranges. If a designer decides to put red text over a brown background, colorblind users probably won’t be able to read it.
And deuteranopia is only one type of colorblindness. While it might sound difficult to account for every type of colorblindness that exists, plenty of free tools are available for website creators to test colors on a webpage. Other tools can generate accessibility-friendly color palettes that can streamline decision-making.
6. Ensure the website can be navigated using only the keyboard
For people using alternative input devices, navigating infinitely scrolling websites with asymmetrical layouts can be a nightmare. While these design choices are trendy, they are incredibly inaccessible for those who rely on alternative input devices or use only a keyboard.
Trendy design choices include navigation bars or options that only appear when a cursor hovers over a certain button. Often, highlighting a designated dropdown button using the keyboard still isn’t enough to activate the dropdown. This means keyboard-only users have no way to access those webpage options.
Adding skip links at the beginning of a webpage can also allow keyboard-only users and users with screen readers to skip content without navigating a full web page each time.
Making your website more accessible
Adding accessibility improvements isn’t always easy, especially when balancing them with modern design practices and UX techniques for people without disabilities. However, UX and web accessibility certainly aren’t incompatible.
Designers have plenty of creative options to provide excellent experiences to users with or without impairments. As long as accessibility is a consideration from the start, implementing accessibility practices can be easy and doesn’t have to be detrimental to the overall UX design process.
Looking to make your website more accessible? Compare website accessibility software options on G2 and pick a product that can audit and monitor your website for accessibility.