Introduction
People with Physical and Motor Disabilities have limited or no use of limbs or functional parts of the body such as; legs, arms, fingers and hands. These limitations are overcome with various Assistive Technologies that are either hardware or software or a combination of both.
The key principle of web accessibility for users with Physical and Motor Disabilities is: Operable: because not everyone can use a mouse, click on small links, or operate dynamic elements effectively. Some people can only use a keyboard or a single switch.
ICT Platforms
- Websites
- Mobile / Devices and Applications
- Computer Applications
- eLearning
- Kiosk / ATM
Assistive Technology (AT) Devices for people; Physical and Motor
- Many kinds of hardware, some examples include; head mouse, eye gaze, switches, keyboards and mouse
- Software; used with switches, eye gaze and other input devices
AT used for testing
- Mostly keyboard and screen reading software
Making content accessible for people who are; Physical and Motor
- Keyboard and AT users
- Ensure all interfaces used for navigation and input are keyboard usable
- Do not create keyboard trap for users who are dependent on it
- On Focus and On input, ensure website content and interfaces behave in a predictable usable way for keyboard and AT users
- All links, buttons and form controls must be in Tabindex; keyboard users must be able to use Tab key to navigate through links and form controls
- The Focus must always be visible
- The reading order (focus) must be logical, consistent and in correct order according to the visual order
- Navigation and Functionality
- Multiple ways; Providing an opportunity to navigate sites in more than one way can help people find information faster
- Provide site map
- Use breadcrumb navigation
- Main Menu; Sub-menu flyout menu must be usable to keyboard users. On focus show, Out of Focus close
Reading order must follow consistent, logical path - If iframe used, ensure it is keyboard and Tab usable. Also make sure no keyboard traps are present
- Dynamic content; Menus, Lightbox, Dialogue, Forms
- Avoid using only “mouse over” event handlers
- Provide notification or instruction on the content or element of the status / state of dynamic content; In alt or title attribute, use phrases like Collapsed / Un collapsed, closed / open
- Use Links, form controls or Images to place instructions or notifications in ALT or TITLE attributes
- Use dynamic page content without using page refresh; this could cause focus problems which result in orientation issues for Assistive Technology users
- Reading order must flow logically from the invoked content / element onto the dynamically generated content. Focus must move onto the new dynamic content
- The new revealed content should be immediately placed below the triggering element with minimal spacing (1 space at the most)
- Multiple ways; Providing an opportunity to navigate sites in more than one way can help people find information faster
- Ensure all contents are visually displayed when focus is received by keyboard and mouse users
- A mechanism is available to bypass blocks of content that are repeated on multiple web pages. Create “Skip to Content” link, when link is invoked, Focus must be on Title H1 of page content
- Timing Adjustable: For each time limit that is set by the content, the user should have the ability to; Turn Off, Adjust or Extend the time. There are exceptions on online time dependent functions such as; Online Auctions
- Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information;
- There is a clear mechanism to pause, stop or hide the content
- Auto updating information: control the frequency of the update
- There is an exception if it is part of an activity where it is essential.
- Responsive design; Ensure keyboard accessibility; Tab and Gesture usability across multiple devices; Computer, Tablet and Mobile
Also ensure visual layout is usable across screen resolution of many device types mentioned above - Document Structure, Layout and Design
- CSS disabled mode, all web pages must usable. Make sure all pages display and function properly with CSS disabled.
- Provide a good balance of graphic elements and text.
- Keep the website layout and design simple
- If possible, try to use at most; 3 column layout in all web pages
- Keep the website design and layout consistent.
- Create simple, usable, visual layout of all web content and use a consistent style of presentation between pages.
- Space: minimize space in between content to 1 or 2 space; character space
- Align: English content, left align all content to the left side of the web page. Also left align table headers and headings in page sections, etc … Right align all Arabic content
- Consistency: all important usable functions and content must be consistently placed on all web pages
- Form Fields
- To make sense of complex forms, logical reading order of form controls are very important to AT users. If required, use the TABINDEX attribute to control the reading order in complex form fields. Code: <input type=”text” TABINDEX=”1” Name=”Textbox1”>,
<input type=”text” TABINDEX=”2” Name=” Textbox2”>, - If CAPTCHA’s are used, Provide accessible alternate version of the CAPTCHA image of text. The CAPTCHA interface must also be usable by keyboard and AT devices
Example of accessible CAPTCHA; use Google re-CAPTCHA: https://www.google.com/recaptcha/intro/index.html
- To make sense of complex forms, logical reading order of form controls are very important to AT users. If required, use the TABINDEX attribute to control the reading order in complex form fields. Code: <input type=”text” TABINDEX=”1” Name=”Textbox1”>,
- Multimedia
- Ensure embedded video player interface is accessible by keyboard and At devices