Potential Barriers for users with motor disabilities – how can we address them?

Content of this post

  1. Introduction
  2. Checklist
  3. Knowing the Potential Barriers
    1. Lack of Keyboard support, Keyboard traps
    2. Missing or inconsistent Visible Focus
    3. Inability to Bypass blocks
    4. Fixed Orientation layouts
    5. Missing or incorrect ‘Autocomplete’ for form inputs.
    6. Content ‘On hover’ or ‘On focus’
    7. Complex Pointer Gestures
    8. Small Touch Target Size
    9. Dealing with Character key shortcuts
    10. Inability to use functionalites operated by device motion

Introduction

In this post lets focus on understanding how users with motor disabilities access technology, their potential barriers and limitations to access the digital content, and what can we do to improve accessibility and their user experience.

For better understanding and to help us think from the user’s perspective, I’m creating a separate checklists based on each type of disability.

Before we get into the checklist, let’s understand how users with motor disabilities use the technology.

How do users with motor or physical disabilities use digital content?

Let us consider few examples of users with motor limitations

  • Reduced Motor control – Paralysis, Cerebral Palsy
  • Involuntary movements – Tremors, Parkinson’s disease
  • Chronic Pain and joint disorders – Arthritis, Rheumatism 
  • Accidental injury – broken arm
  • Repetitive stress injury – tenderness, stiffness, or tingling in the affected area.
  • Limitations to move after surgery

Most users with motor limitations require alternatives to either mouse or touch devices, and mostly rely on the keyboard to navigate and access content, some users may require alternatives to standard keyboards, some users use mouth/head pointing devices and some rely on speech recognition software. When we design content keeping users with physical disabilities in mind, It is very essential that the content we create is completely accessible with the keyboard alone so that it can be easily adapted by assistive technologies like adaptive keyboards, alternative mice, touch or trackpads, switch inputs, trackballs, and joysticks which help users to interact with the technology.

Checklist

The below infographics gives us a quick list of things to keep in mind when designing for users with motor or physical limitations.

Checklist - How to improve accessibility for users with motor limitations.

Click here to view the High Contrast and Text version of the checklist

Please note achieving accessibility compliance is a process of continuous improvement to provide good user experience for a diverse range of users and is not limited to this checklist.

Barriers of users with Physical or Motor disabilities.

1. Lack of Keyboard support, Keyboard traps

Users with physical or motor limitations, users who have difficulty using mouse or touch devices efficiently rely on navigating and interacting with the digital content using the keyboard or keyboard emulators. There are a lot of adaptive keyboards and supporting devices like mouth stick, sip and puff devices, headband pointing devices that require full keyboard support to allow users to access the digital content.

If the website or application lacks keyboard support, It becomes very challenging or impossible for many users who rely on the keyboard, keyboard emulators, or other supporting devices to access the technology.

Providing complete keyboard support not only helps users with motor or physical limitations but also helps users who rely on screen readers like users with visual, learning, and cognitive disabilities.

Things to Consider:

  1. Ensure all interactive UI elements and its functionality can be operated using just the keyboard alone.
  2. Ensure the reading order/ logical order is meaningful and matches the DOM order.
  3. Ensure there are no keyboard traps.

How to Test:

Just ‘Tab key’, the ‘Arrow keys’, ‘Space bar’ and the ‘Enter Key’ tells us a lot about the keyboard accessibility of an application or website.

Let’s use the following keys to check if every interactive element on the screen is reachable and all functionality that is available via mouse or touch can be operated with the keyboard alone.

  1. Tab, Shift + Tab keys – helps users to navigate through the list of interactive elements on the webpage like (menus, links, lists, buttons, form elements, controls, etc) that are in the tab-chain, they should receive focus as the user tabs through.
  2. Focus Indicator – helps the user know the current element that is in focus and the location/ landmark on the webpage.
  3. Arrow keys – helps the users navigate within the menu items, sub-menu items, radio buttons, data lists, combo-boxes, etc.
  4. Space bar, Enter Key – Helps the user select or activate an element that is in focus.

2. Missing or inconsistent Visible Focus

The visible focus is the ring that appears around the UI Element as we tab through the webpage, it is an important aspect of keyboard accessibility as it helps the users to keep a track of the current user interface element that is in focus, it also helps the users locate themselves in the webpage.

Low vision users, keyboard-only users, screen reader users with reading difficulty would find it problematic and frustrating when the focus indicator is inconsistent or not clearly visible and keyboard-only users would find it impossible to access and navigate through the page where there is no visible focus indicator.

Things to consider

  • Ensure all the UI components that are included in the tab chain receive focus and the visual focus indicator must have bold and clear solid outlines.
  • Example – *:focus {outline: 2px solid #0000FF;}
  • Make sure 1px and dotted focus indicators are not used as it does not serve the purpose.
  • Never set – *:focus {outline: 0;}
  • Ensure the focus is not lost or inconsistent as the user navigates within the web page.

3. Inability to Bypass Blocks

‘Skip’ links are very useful to bypass blocks of content that are repetitive (navigation, footer links), large blocks of content that require multiple tabs within a section of a page.

Users who rely on keyboard alone find it overwhelming and stressed out when they have to tab through each element to navigate and access the content of the web page without any shortcuts.

Things to consider

Identify the important features and landmarks on each webpage and provide ‘skip to’ links or ‘skip’ to end of a block links where necessary to help users easily reach the important sections or features/functions on the webpage and also skip large blocks of content.

Examples:

1. ‘Skip to’ links provided at the beginning of the page to help users to skip to useful sections of page like.

  • ‘Skip to’ Navigation
  • ‘Skip to’ Main Content
  • ‘Skip to’ Login
  • ‘Skip to’ Cart

2. ‘Skip to’ links can also be provided at the beginning of sections or block elements to ‘Skip to’ end of block.

4. Restricted Display Orientation

Some users with motor limitations, dexterity impairment have their devices mounted (e.g on the arm of the wheelchair) in a fixed orientation either in landscape or portrait view. Most websites and applications set or restrict the screen to a particular display orientation thinking that users will adjust it by rotating their device, this could be problematic for users who cannot frequently move or rotate their devices.

Hence, it is essential that the websites or applications do not restrict the layout, content, or its operation to a particular view or orientation (landscape or portrait mode), unless a specific display orientation is essential.

Also, previously most devices had fixed device orientation and hence the websites and applications were made to match a particular orientation. But today, most handheld devices (phones, tablets) and other devices (monitors, laptops) have the ability to dynamically adjust the display orientation based on sensor information. It is important that the content of the websites and applications also dynamically adjust the orientation based on the device orientation.

Things to consider

“Making sure the layout and content of the website or an application does not restrict its view and operation to a particular display orientation, such as portrait or landscape, unless a specific orientation is essential”.

Examples of essential device orientations

  1. Example 1: Check deposit in the banking app: Here the orientation is essential where it requires the device to be in landscape mode to accurately capture the entire image of a check for deposit.
  2. Example 2: App Scanner – Credit card, Smart card scanners: The orientation is essential here, when an online app has a credit card or any smart card scan feature, which will require to scan the cards in landscape mode to capture the entire image.
  3. Example 3: Piano app: Another example where orientation could be essential where the device has to be in landscape mode to allow room to fit in all the piano keys and for it to be functionally usable.

Resources

Few examples how screen orientation can be handled

  1. Using CSSOrientation media queries
    • The media queries adjust the layout based on the browser window’s orientation either
      • Landscape mode (that is, its width is greater than its height) or,
      • Portrait mode (its height is greater than its width).
  2. Using JavascriptScreen orientation API
    • It gets the current orientation of the screen and eventually locks it.

5. Missing or incorrect ‘Autocomplete’ for form inputs.

The autocomplete helps the browser to pre-populate the form fields with user preferred values (only user’s personal information such as name, email, address, phone number, cc details, etc.) This feature benefits everyone and makes it easier for users to fill out forms based on the user’s past input stored by the browser. 

Things to Consider

1. Making sure the autocomplete value of the form element is correctly defined and matches the purpose of the input.

Example: When an input field that requests the user’s health care card number incorrectly populates the credit card number, the user ends up submitting the form with incorrect details.

2. Ensure autocomplete is turned on only on the fields that request/collect user’s specific information such as name, email, address (users address, billing/ shipping) phone number, birthday, date of birth, etc.)

3. Ensure the autocomplete is turned off on sensitive fields like one time passwords, bank customer numbers, and banking passwords.

4. For security reasons, make sure any multi-login scenario does not save autocomplete data between different accounts (it only works if the user is on the same computer, using the same browser from the same user account.) Users can opt for syncing of data across computers, but that is not the default.

5. Making sure the form is not auto-submitted and the user should be able to see/change the data before it is submitted.

Benefits of autocomplete

The appropriate use of ‘autocomplete attribute’ benefits most users mainly the users with dexterity impairments, or other motor disabilities who have trouble typing, users with cognitive and memory disorders, users who need more time to fill out the forms find this feature very helpful.

  • Easier to fill out forms
  • Reduced Typing
  • The user need not remember information

Resources

6. Content ‘On hover’ or ‘On focus’

Content that displays on hover looks cool and useful for some users, while some groups of users may find it hard to handle the additional content that appears on hover or triggered with a keyboard focus.

Things to Consider

When content like custom tooltips, pop-ups and sub-menus appear on hover or on focus, we must ensure the following are true

The additional content displayed must be

  • Dismissable – Ensure the additional content displayed can be dismissed without moving the mouse pointer or keyboard focus.
  • Hoverable Ensure the pointer can be easily moved to the additional content and back to its trigger.
  • Persistent Making sure the additional content remains visible until
    • The user remover the pointer from the trigger or the additional content.
    • The user dismisses it.
    • The information becomes invalid.

Benefits of making additional content Dismissable, hoverable and persistent

  1. It benefits users who have difficulty to easily dismiss the additional content or any unintentionally triggered content.
  2. Helps users who use larger mouse cursors to view the obscured content on hover.
  3. Helps users with low vision who use screen magnifiers can view content without reducing their magnification.

Resources

7. Complex Pointer Gestures

The increased use of touch and handheld devices come with some cool touch features and gestures, making it interesting and fun for users to access the interface. While some groups of users with motor and dexterity impairments or users with cognitive disabilities find it challenging to access content that involves complex multipoint or path-based gestures. Interfaces like carousels, image galleries, page scrolls, touch-based gaming applications, image maps, zooming functions on maps, etc involves the use of complex gestures that everyone may not be able to use.

Complex gestures:

  1. Path-based gestures – Swiping left or right, drag and drop, gestures that involve a start, and an endpoint.
  2. Multi-point gestures – Two-finger pinch in and out to zoom, two-finger tap, three-finger swipe, that requires the use of multiple fingers at the same time.

Users who rely on specialized pointing devices, adaptive input devices such as a head wand, mouth stick, sip and puff devices or speech-controlled mouse emulators, find it challenging to perform these gestures accurately. Hence, any functionality that involves complex gestures should also have an alternative option to be operated using only a single pointer gesture or a single click. The alternative option should be usable by everyone and must be easily adapted with assistive technologies.

Things to Consider:

Where there are multi-point or path-based gestures used, ensure the functionality can also be accessed with a single pointer gesture or a single click.

Single pointer gestures:

Providing alternative controls that do not require complex gestures and perform the same function.

  • Tap or Double tap using only one finger
  • Click or Double click using a mouse or pointing devices.
  • Long press, or click and hold.

Examples

  • A map that allows pinch in and out which requires the use of two fingers for zooming should also have alternative controls ‘plus (+)’ and ‘minus (-)’ buttons to zoom in and out using a single pointer gesture or single click.
  • A slider or carousel that uses a path-based gesture to swipe to the next and previous slides should also have ‘left’ and ‘right’ navigation buttons or image thumbnail that can be clicked on to perform the same function.

8. Small Touch Target Size

Users with dexterity impairments, fine motor disabilities, hand tremors, users with larger fingers, and users with low visions may find it hard to access controls that have smaller touch target sizes. It could be problematic for users using various adaptive technologies to access content when the input mechanism has fine precision.

Things to consider

Ensure the target size for pointer inputs is atleast 44 by 44 CSS pixels including the devices with small viewports like mobile and tablets.

It is important that the touch targets of controls are alteast 44 by 44 CSS pixels in the below situations

  • When the interaction cannot be undone
  • When controls are frequently used
  • Controls positioned closer to the edge of the screen
  • If the control is part of a sequential task

Exceptions:

  1. When there is an equivalent target on the same screen that performs the same function and is atleast 44 by 44 CSS pixels.
  2. The target is inline within a sentence or block of text.
  3. The target is controlled by the user agent and not by the author.

9. Dealing with Character key shortcuts

The use of single-character shortcuts are great help for many keyboard users, but could be disastrous and inappropriate for speech input users. Many users with motor, dexterity impairments, vision, and cognitive impairments could use speech as their means of interacting with the technology.

Speech input users use a mix of dictations and speech commands with a pause in between them to interact and perform their tasks, for example, “Dictating the string”; pause; and specifying “Speech command”.

  • “This is a paragraph”; Pause; “Delete that dictation” – this deletes the dictation.

When only a single character key is used as a keyboard shortcut (i.e. The use of any uppercase/lowercase letters, numbers, or special characters), this could accidentally activate or trigger some unexpected events while the user is trying to provide input.

Some scenarios where character key shortcuts could be problematic.

  • When the speech input user is dictating the input string and if the cursor happens to be in the wrong place, the microphone picks up the characters and triggers some unexpected events. Sometime the events may not be easily recovered.
  • Keyboard-only users with dexterity challenges could accidentally hit on the character key shortcut that could trigger unexpected events.

Things to consider

If a keyboard shortcut is implemented using only letter then ensure at least one of the following is true:

  • Turn off: Provide an option to turn off the shortcut.
  • Remap: An option should be available to remap the shortcut to include one or more non-printable keyboard keys (e.g., Ctrl, Alt)
  • Active only on Focus: The keyboard shortcut for the UI is only active when that component receives focus.

10. Inability to use the functionality operated by device motion

Most handheld devices have sensors such as an accelerometer or gyroscope, these sensors could be used in the applications to gather input. Some applications may gather input using the camera options. Some users may find these features interesting and easy to use, but users with dexterity and motor limitations, users who use mounted devices or users with hand tremors and other motor limitations may find it very challenging to operate functions that operate on device motion such as (tilting, shaking) a device or gesturing in front of the device screen (waving or swaying the palm) to trigger certain events or functions. Hence, it is very essential to provide simpler alternatives that perform the same function.

Things to consider:

 Any events that are triggered by moving a device (tilting, shaking ) or by gesturing towards the device, the following must be true

  1. Provide alternatives to perform the same function via user controls such as Button, checkbox, link, etc.
  2. Provide options to allow the user to turn off the sensors.

Examples:

1. Undo Event: After entering a text input, shaking a device that allows users to undo the entry.

  • The user should be able to undo the entry using a backspace or clear button.
  • Should all the users to turn off ‘Shake to undo’, in the settings.

2. Motion-activated slider: Ability to navigate the slider back and forward by tilting the device to left or right or by gesturing towards the device waving left or right.

  • Provide an option such as a checkbox that allows the user to deactivate motion sensors.
  • Ensure the same function can be performed using navigating buttons or clicking on thumbnails.

Related Posts


About Rupa Bandaru

My name is Rupa Bandaru, Digital Accessibility Consultant by profession. I have been working in the Accessibility space for a decade now (testing and auditing) digital content. I am very passionate about Accessibility & Inclusive Design and strive towards improving and making web content that is usable by all.

Leave a Reply

Your email address will not be published.