July 2, 2021

Accessible Web Design For People With Disabilities: Key Considerations

15% of people around the world — that’s around one billion — are diagnosed with a disability of some kind. However, less than 2% of the world’s top one million websites offer full accessibility. Not only is making your website accessible for people with disabilities the right thing to do, but it can also give you a competitive edge by attracting a wider reader and customer base. The Web Content Accessibility Guidelines (WCAG), published by the Web Accessibility Initiative of the World Wide Web Consortium, provides a variety of practical recommendations to help you improve web accessibility.

How disabilities impact internet usage

Whether it’s a visual impairment, learning difficulty, or movement disorder, different disabilities can make accessing the internet challenges. For example, cerebral palsy is the most common motor disability in childhood, with an estimated 764,000 children and adults in the United States currently diagnosed with the condition. Cerebral palsy is a group of disorders that inhibits an individual’s ability to move, as well as their coordination, balance, and posture — in turn, this can make it difficult to access the internet without special accommodations. Fortunately, cerebral palsy resources are available to provide families with a comprehensive range of support, including access to adaptive technology that can make the digital world easier to navigate. People with cerebral palsy can also experience cognitive or intellectual impairments like a short attention span, sensory difficulties making it harder to interpret what’s being seen and/or heard, and problems with hearing and/or vision.

Additionally, blindness also affects a large segment of the population. Roughly 12 million people 40 years old and over in the US have some sort of vision impairment — including 1 million people who are blind, 3 million who have a vision impairment following correction, and 8 million who have a vision impairment as the result of uncorrected refractive error. Although the majority of blind people do possess some degree of vision, it’s not usually enough to successfully view web content. As a result, the computer mouse and monitor (visual input) can’t be easily used by individuals who are blind.

WCAG: four principles to improve web accessibility

The WCAG is broken down into four broad principles — these are key elements web content must consider and adhere to in order to be deemed accessible. The first principle is “perceivable”: users with disabilities must be able to perceive the web content in some way, drawing upon one or more of their senses. The second principle is “operable”: users with disabilities must have control over essential elements — buttons, for example, must be clickable, whether it’s with the keyboard, mouse, or voice command. The third principle is “understandable”: this means your content must be understandable to users with disabilities. Finally, the fourth principle is “robust”: this principle means the web content must be devised with the help of well-adopted web standards that can be successfully used with a host of different web browsers, both now and in the future.

Accessible text tips

Making sure the text on your website is highly contrasted against your background is a pivotal action you can take to improve the accessibility of your website. Non-text contrast is a guideline that involves using high contrast for regular page text and text on buttons (and other interface components), as well as colors featured in non-text content — diagrams, charts, and infographics, for example). Additionally, text spacing is another important consideration (particularly for users with dyslexia or visual impairments) requiring the space between characters, words, lines, and paragraphs to be able to be increased to other values without compromising the content or site functionality. Without accessible text spacing, your site may end up with text overlapping and being unreadable, or buttons, links, or other elements moving around your site and being unclickable (for example, they may be hidden behind other components or outside the viewport). Ideally, you want to not put any set heights on text-containing components; when the text requires extra space, it needs freedom to grow vertically and push down content underneath it.

Don’t forget about orientation

Some users with disabilities have difficulty with movement, coordination, or grasping objects. When using a smartphone or tablet, it’s important that these users aren’t forced to hold their devices, move, or orientate them in any way as a requirement to view your website’s content. Some web users with disabilities mount their devices onto their wheelchairs and are therefore unable to rotate them — whether that’s down to their hands being occupied or limited motor skills.

The importance of reflow

The WCAG concerning reflow advises making it possible for users with disabilities to access your website with a 320 pixel-wide screen without needing to scroll horizontally. (320 pixels is the smallest width of the most used smartphones). However, horizontal scrolling is permissible when needed for larger data tables or maps, for example. Following this guideline will make your website responsive to every user landing on your website via smartphone. It’s also helpful to users with visual impairments who typically zoom in by as much as 400% on desktop browsers.

Pay attention to pointer gestures

Upon visiting a website, users typically perform complex pointer gestures, such as swiping and pinch-zooming when interacting with the content. For people with disabilities — whether they have limited motor skills or not enough fingers to perform multi-touch actions — the inclusion of accessible pointer gestures is essential. For example, your site should allow for less complex gestures like long presses, single taps, and double taps to be performed instead of pinch zooming and swiping. Simple pointer gestures can even be beneficial to users with adequate motor skills who simply don’t realize your site requires them to carry more complex gestures to get around.

Making your website accessible to people with disabilities improves inclusivity, gives you a competitive edge, and can help you avoid any unwanted legal issues in the future. By reading up on and implementing the WCAG, you can successfully make your website accessible to each and every user who visits.

About the author 

Peter Hatch


{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}