Designing for accessibility can make your website better for everyone. In this article, we'll define motor disabilities and talk about web development strategies for improving accessibility for users with a motor disability.
For people with disabilities, the internet can be a lifeline that connects them to the world. Motor disabilities, in particular, can limit a person’s independence, especially in a society that routinely designs physical structures without regard to the concerns of people with disabilities. But on the internet, individual creators and developers can make their products more accessible to all their users, irrespective of physical ability.
What is a Motor Disability?
The term “motor disability” applies to any condition that impedes sensation, movement, or coordination. Motor disabilities can result from several possible causes, including congenital conditions, illnesses, and physical trauma, but these disabilities tend to present similar challenges for users when they navigate the web.
Diseases and Conditions
- Cerebral palsy describes a brain injury or abnormality, resulting in a loss of muscle control. The condition usually appears during pregnancy or early infancy and can cause spasms or tightness in the muscles, involuntary movements, and speech impairment.
- Muscular dystrophy (MD) is a genetic disorder that affects the genes governing muscle protein production. The progressive muscular degeneration caused by MD impacts a broad range of individuals but is most common in children.
- Multiple sclerosis (MS) occurs when the protective myelin layer around an individual’s nerve cells erodes, causing misfiring or non-communication between the brain and the skeletal muscles. The symptoms of MS vary widely and tend to change over time, including tremors, weakness, numbness, unstable walking, spasticity, slurred speech, muscle stiffness, impaired memory, and partial or complete paralysis.
- Spina bifida is a congenital condition in which a fetus’s spine fails to close fully around the spinal cord during the earliest stages of pregnancy, causing a bulge in a person’s back where the spinal membrane has protruded beyond the spine. Spina bifida can cause motor difficulties and paralysis, as well as, in some cases, language disability due to fluid in the brain.
- Amyotrophic lateral sclerosis (ALS, or Lou Gehrig’s Disease) is a degenerative disease that inhibits communication between the skeletal muscles and the brain. ALS can cause slowness in movement and speech as well as partial paralysis.
- Arthritis is most common among the elderly but can also occur in young people. Joint pain caused by advanced arthritis can lead to fatigue when manipulating a mouse or keyboard and may prompt a user to switch to alternative controls or spend less time on a computer altogether.
- Parkinson’s disease is a central nervous system disorder that can cause both muscle rigidity and muscle tremors. People with advanced cases may be unable to use a computer mouse, keyboard, or voice interface, having to rely on complex assistive technologies to navigate the web.
- Essential tremor is a nerve disorder that causes uncontrollable tremors and can interfere with the use of arms, hands, head, and larynx.
- Spinal cord injuries interrupt the communication between the brain and the skeletal muscles and can cause partial or complete paralysis in the legs and lower body (paraplegia) or the arms, legs, and torso (quadriplegia).
- Limb loss and damage may impact an individual’s ability to operate a computer when the injury has occurred to the arm or hand. Some types of traumatic limb damage, such as damage to the nerves, may affect the functionality of the limb without altering its appearance.
Building an accessible web product for users with motor disabilities requires an understanding of the tools and strategies that these individuals are likely to employ when they navigate the web. People with motor disabilities may choose from a variety of assistive technologies, most of which either work with or emulate a keyboard interface. Despite the wide variety of motor disabilities, assistive technologies are often designed with broad purposes that can apply to multiple types of disabled individuals.
Common assistive technologies include:
- Head wands and mouth sticks are devices that fit over the head or into the mouth and extend toward a control interface. Once in place, the user can manipulate the wand or stick with their neck and jaw muscles to control an adaptive computer mouse, keyboard, or other assistive technology.
- A single switch is a device - often a large button or touch-sensitive pad - that is placed near a body part to be clicked. Special software is often necessary to translate single-switch activity into computer commands.
- A sip-and-puff switch has the same functionality as a single switch but is operated by blowing and sucking air into a mouthpiece. This type of switch is helpful for users who retain muscle function in the head but may not be able to rely on muscles from the neck down.
- An oversized trackball mouse is a trackball whose larger dimensions make it easier to operate with assistive devices such as a head wand.
- An adaptive keyboard may feature word-completion technology as well as raised gaps between keys that allow users to rest their hands in place when not typing and during muscle spasms.
- People with limited or no hand control sometimes prefer eye-tracking devices, which register the user’s eye movements and use them to navigate the web.
- While it can be costly, voice recognition software offers some users the option to navigate the web via direct voice commands smoothly. But others with motor disabilities find that their throat muscles are also affected - for example, by cerebral palsy - to such an extent that typical voice recognition software cannot consistently interpret their speech.
Assistive technologies by themselves are not enough to make the web accessible to users with disabilities, and, in the next section, we cover three ways to make your website more accessible to users with motor disabilities.
Support Effective Keyboard Navigation
Despite the availability of oversized and adaptable models, people with motor disabilities often find it impossible to use a mouse. Most assistive technologies that people with motor disabilities use emulate a keyboard in some way. By making your website effectively usable with a keyboard, you open up access to the users of these assistive technologies.
Start by following WAI-ARIA guidelines to make all elements on your web pages accessible via keyboards and keyboard emulators. Specifically, make sure that the keyboard focus elements are visible on your page with CSS elements.
Reduce Actions that Require Too Many Keypresses
Most motor-assistive technologies make use of isolated and small muscle groups. For example, those using a head wand engage their neck muscles for every action they make on a webpage or a keyboard. The mouth stick users select keys on a keyboard emulator with a movement of the mouth.
With small muscle groups used for every action, fatigue can become an issue when performing a task on your site like navigating to the end of a long list requires a lot of clicks or key presses.
To help people using assistive technologies, provide practical ways to navigate your site with only a few clicks. For example, by adding a way to skip to the end of long pages and long lists with a single click with a skip-to-content button at the top of your navigation bar.
Another way to reduce the keyboard clicks needed for navigation on your website is to structure your navigation menus as a multi-level tree. Instead of scrolling through an entire list of available pages, your users can jump to the section of the navigation that they are looking for with only a few clicks.
Add a Search Field to Your Website
Some users with motor disabilities use a voice recognition system. While those systems make it easier to navigate a webpage, it’s easier to type a phrase into a text field via speech recognition than it is to click specific elements on the webpage via voice control.
Search functionality is generally already present on most websites, and everyone can use it, not just those with motor disabilities. To take full advantage of this strategy, you also need to make sure that your pages are indexed, and that the sorting of the search results is helpful.
Making your webpage usable by those with motor disabilities often boils down to designing each element so that it’s effectively usable with a keyboard. Accessibility-oriented developers should also avoid functionality that relies exclusively on mouse control as well as build in shortcuts, like skip-to-content functions and focus elements, that help alleviate fatigue in users with motor disabilities.
Most importantly, educate your creative team about the nature and challenges associated with motor disabilities, and be sure to design and build projects with accessibility in mind from the earliest development stages.
Learn More about Accessibility
We have created a comprehensive whitepaper on accessibility for developers that covers everything from laws to coding to testing.
Download the whitepaper: Accessibility for Developers
Adding Accessibility to Your Apps
One easy way to make sure that you are creating accessible web apps is to start with components from the Kendo UI libraries. Our components are all WCAG complaint and give you great functionality from grids and charts to schedulers and pickers. Get a head start on your app's UI and a head start on accessibility compliance at the same time.
Learn more about: Kendo UI