Disabilities Affected: Mobility, Visual
Web content must not restrict use of input modalities available on a platform, except where the restriction is essential, required to ensure security, or required to respect user settings.
Why It Matters
Some users may use multiple input methods simultaneously or switch between them (e.g., using touch for scrolling but a keyboard for typing, or voice for navigation and mouse for fine pointing). Websites or applications should not prevent users from using their preferred or necessary combination of input tools by, for example, disabling mouse input when touch is detected or vice-versa.
Fixing the Issue
Ensure your website or application responds correctly to all standard input methods supported by the platform (keyboard, mouse, touch, stylus, potentially voice). Avoid writing code that explicitly disables one input type based on the detection of another, unless absolutely essential for security or functionality (which is rare). Test functionality using different input combinations.
Good Code Example
(Conceptual) Standard event handling allows concurrent inputs:
-
// Standard event listeners typically allow multiple input types naturally.
const myButton = document.getElementById('my-button');
// Responds to mouse click, touch tap, keyboard activation (Enter/Space)
myButton.addEventListener('click', function() {
console.log('Button activated via click/tap/keyboard');
});
// Responds to keyboard focus
myButton.addEventListener('focus', function() {
console.log('Button focused (e.g., via Tab key)');
});
// Responds to mouse hover
myButton.addEventListener('mouseover', function() {
console.log('Mouse hovered over button');
});
// No code here explicitly disables mouse if touch is used, or vice-versa.
Bad Code Example
(Conceptual) JavaScript that disables mouse events if touch is detected:
-
// Bad practice: Disabling other inputs based on detection
let touchDetected = false;
window.addEventListener('touchstart', function() {
touchDetected = true;
console.log('Touch detected, potentially disabling mouse events now...');
// Example: Selectively removing mouse listeners (Don't do this!)
// myButton.removeEventListener('click', handleMouseClick);
}, { once: true }); // Only detect first touch
// function handleMouseClick() { ... }
// myButton.addEventListener('click', handleMouseClick);
// This approach prevents users from switching back to mouse after touching the screen.
