Development & Testing for Diverse Abilities: Mobility

This blog series, Development & Testing for Diverse Abilities , will explore the needs of users with auditory, cognitive, visual, and mobility impairments and equip you with the knowledge and tools to create digital experiences that are more accessible and enjoyable for all. Each post will focus on a specific disability, highlighting website development best practices and suggestions for testing for compliance.

This is the third post in the series. You will find the second post here Development & Testing for Diverse Abilities: Cognitive and the fourth and final post here Development & Testing for Diverse Abilities: Visual.

Mobility

Not everyone experiences the internet the same way. People with physical limitations, such as tremors, reduced range of motion, lack of coordination, paralysis, joint disorders (like arthritis), or those relying on assistive devices, can face challenges navigating websites.

Understanding how people with physical limitations navigate the web and what type of assistive device is critical for website designers, developers, and managers to create an inclusive experience. Here are some examples of assistive technologies used by people with motor disabilities (see Diverse Abilities and Barriers, Physical)

Ergonomic or specially designed keyboard or mouse;
Head pointer, mouth stick, and other aids to help with typing;
On-screen keyboard with trackball, joysticks, or other pointing devices;
Switches operated by foot, shoulder, sip-and-puff, or other movements;
Voice recognition, eye tracking, and other approaches for hands-free interaction.

By understanding these diverse needs, we can build websites that are more accessible, easier to navigate, and more inclusive for everyone.

In this blog, we'll highlight some of the barriers experienced by people with physical disabilities and provide actionable tips to help you create and test for an inclusive online experience.

What Developers Web Can Do?

Understanding how users with motor disabilities navigate the web empowers developers to leverage various effective accessibility features.

Keyboard Accessible:
- Skip to Main Content Link - Add a skip link to allow users to skip past the global elements like the logo, search, and navigation and get right to the main content.
- Reading Order - The reading order must be logical and intuitive, in a meaningful sequence. The order of the elements in the DOM determines the default reading order.
- Focus Order - Focusable elements include any element with a tabindex value of 0 or greater. The visual tab order and the actual tab order must be identical. This allows users to encounter focusable information and elements logically and effectively.
Adjustable time limits: Some users with physical limitations require more time to complete a task. For example, filling out a registration form.
- Provide a mechanism for users to stop, adjust, or extend any time limit set by the content.
Proper structure:
- Proper Page Structure:
  - Identify and mark up regions on web pages using HTML5 and WAI-ARIA roles.
  - Label regions to allow users to distinguish and access them.
  - Add headings and nest them logically to label sections of web pages according to their relationships and importance.
  - Mark up the content on a page in a way that uses appropriate and meaningful elements.
Accessible Navigation Structure:
- Make sure menus are accessible and predictable.
- Provide descriptive, unique page titles.
- Make sure websites have a sitemap.
- Write meaningful link text.
Interactive elements size and location:
- Target Size - Users with dexterity limitations and those with difficulty with fine motor movement find it difficult to activate small targets accurately.
  - The size of the target for pointer inputs is at least 24 by 24 CSS pixels. (Please note exceptions.)
  - Use min-height and min-width to ensure sufficient target spacing.
- Drag & Drop - While drag-and-drop has relied on mice and touchscreens, it can and should be designed to work for everyone, including users with assistive technologies.
  - Make sure that your handle icon is keyboard accessible.
  - Make sure the handle icon offers a message to screen readers that indicates what actions are available.
- Touch Screen - An accessible touch screen includes proper touch target size. The target size for pointer inputs is at least 44 by 44 CSS pixels. (Note the exceptions.) This is a AAA success criterion.

What Can Website Managers Do?

As the website manager, you can create a welcoming experience for everyone, regardless of their physical abilities. This guide will show you testing strategies and best practices for ensuring your website works for all users.

Skip Link: Manual testing required.
- Load or reload the webpage.
- Press the Tab key.
- If the focused element is a skip link:
- Identify the link's target - for example, by using the browser's developer tools.
- Activate the link with the Enter key.
- Confirm that the link's target is visually located within the browser's viewport.
- Confirm that the link's target has keyboard focus, for example, using the browser's developer tools or a plugin highlighting the focused element.
Reading and Focus Order - Manual testing required. Use the tab key to navigate forward through focusable elements, and shift + tab to navigate backward. The default keyboard navigation should follow the visual flow of the page: left to right, top to bottom - header first, then main navigation, then page navigation, then the footer.
Adjustable Time - Manual testing is required. Look for a mechanism(s) that will allow the user to stop, adjust, or extend any time limit. Also, look for proper contrast and text alternatives for each.
Proper Structure - An automated test and a manual test are required. Using an automated system like DubBot, you can test your page structure for page titles, headings, list structure, regions, tables, etc. You will also want to conduct a manual test with a keyboard only to ensure correct reading and focus.
Target size - Manual testing required.
- Use the browser "Inspect" feature in desktop mode. Place your cursor over the target you want to inspect, right-click, and choose "Inspect" at the bottom of the menu.
- Look at the DubBot blog "Staying on Target" for more testing information and resources.
Drag N Drop - Manual testing required.
- Ensure your handle icon is keyboard accessible.
- Ensure the handle icon offers a message indicating what actions are available.
Touch Screen -Manual testing is required.
- Open the mobile website or app.
- Locate interactive elements.
- Ensure that each of those elements is 48 x 48 dp in size.

Well-structured websites with robust keyboard accessibility and properly sized targets create a more welcoming and enjoyable experience for all users. You can help ensure this with consistent testing throughout the product lifecycle.

WCAG Succes Criteria for Motor Disabilities

Resources

The second post in this series can be found here Development & Testing for Diverse Abilities: Cognitive and the fourth and final post here Development & Testing for Diverse Abilities: Visual.