Device-Independent User Input Approaches

Web content should be interactive for users. This can encompass every form element, JavaScript feature, link, personalized widget, and other kinds of content. The main tools to interact with are a keyboard, mouse, voice, and touch.

Other tools can be used (such as a single switch or eye-tracking devices), however, each of them utilizes or mimics one of the tools mentioned earlier. Input method accessibility includes custom widget focus management, functionality, hover indicators, visual focus, the lack of JavaScript gesture movements when the mobile screen reader is switched on, etc. Accessibility for user input methods allows users to interact with web content (and send data when applicable).

Checklist:

  • Input Click
  • Mouse
  • Target Size

The size of the click target should be substantially big to facilitate simple use with a mouse (especially for users with limited dexterity or tremors) without the risk of touching a neighboring button or link.

Visual hover detection

  • An improved visual hover detector should be offered. When hovered, the icon of the mouse cursor should complement the action permitted by the element.

Keyboard input tab focus

  • Interactive controls, buttons, and links need to be keyboard-focused.

Tab order

  • The focused element navigation order (form elements, links, and the like) need to be intuitive and practical. Positive value tab-index use is discouraged.

Visual focus indicator

  • Each focused element needs to have a visual focus indicator.
  • Focused elements have improved styles for visual focus indicators.
  • Contrasts for small visual focus indicators (3px by 3px at the least) and the background should be 4.5 to 1 at the least.
  • Contrasts for large visual focus indicators (3px by 3px at the least) adjacent to the background should be 3 to 1 at the least.

Keyboard functionality

  • When using a keyboard, functionality is essential. Exceptions are made when functionality is unable to be achieved with any logical method by keyboard.

Keyboard traps

  • Keyboard focus cannot be trapped or locked on a specific page element. The user needs to have the ability to navigate back and forth between page elements using just a keyboard.

Focus management when interactions are taking place

  • Using JavaScript, the focus needs to be intentionally set or relocated onto the relevant element when the user’s action warrants a location or context change for effective touch or keyboard interaction.
  • The focus cannot become reset or moved to the top of the page. Exceptions are made when a page is loading or reloading.
  • When setting focus or while in motion, the target element needs to feature perceptible text (either programmatically-relevant text or regular text).

Keyboard Shortcuts

  • Page-specific access keys and shortcut keys cannot interfere with current keyboard shortcuts in assistive technologies, the browser, or the operating system.

Offering instructions for keyboard users

  • When personalized keyboard actions are necessary for element use, keyboard instructions need to be offered.
  • ARIA widgets that warrant more interaction than the tab key might confuse users, and as such, keyboard instructions should be on hand.

Touch Input

Touch Functionality

  • Functionality needs to be an option with regular touch methods. Exceptions are made in instances where functionality can’t be achieved with any logical method with touch device use.

Screen Reader touch functionality switched on

  • Functionality needs to be available using touch methods for screen readers. Exceptions are made when the functionality can’t be achieved using any logical approach with a touch device.

Target touch size

  • The touch/click target size should be substantially big for the sake of facilitating simple use of a finger and not inadvertently touch a neighboring button or link.

Focus trap

  • Gesture/touch focus cannot be trapped or locked on a specific page element. Users need to have the ability to navigate back and forth from all page elements using regular touch gestures or actions.

Animations and transitions

  • Transitions cannot conflict with interaction or reading. Exceptions are made for short interferences.
  • Transitions effects should be brief (so as to not stimulate annoyance, dizziness, nausea, etc.).
  • Transitions should abstain from parallax effects.

Animations

  • A method needs to be offered to hide, stop, or pause any pre-taped video-exclusive content that starts playing by default and lasts at least 5 seconds.
  • Animated pictures cannot flicker or flash more than a few times each second.

Disappearing and in-motion content

  • Content is discouraged from moving in a manner which make interactive elements troublesome to activate.