01. Image Reveal/Comparison Slider
Problem: A continuous press-hold-move gesture across a distance is difficult or impossible for users with limited motor control, hand tremors, or those using a trackball, head pointer, or eye-gaze device.
This solution: Mouse/touchscreen users drag the line. Keyboard users use Left/Right arrows. Screen reader users hear image comparison description.
Image comparison. Before state: a cluttered, unorganised server rack. After state: a professionally managed rack with labelled cables.
02. Card Matching
Problem: The same issue with dragging is found in any drag and drop interactions.
This solution: Mouse/touchscreen users click/tap to select and click/tap to drop. Keyboard users tab to move, enter to select, enter to drop. Screen Reader users hear headings and buttons, use left/right and space to move select and drop.
Items
Phases
03. Image Hotspots
Problem: The default structure of hotspots on images often has details missing to allow keyboard users to navigate them and for screen readers to call out the necessary info in the right order.
This Solution: Mouse/touchscreen users tap hotspots and read description. Keyboard users tab through hotspots and read description. Screen Reader users hear hotspot number and description before moving to the next hotspots in turn.
04. Flip Cards
Problem: Flip cards also often have details missing to allow keyboard control and allow screen readers to control them and call out the right info.
This solution: Mouse/touchscreen users click/tap to flip and read answer. Keyboard users hit enter/space to flip and read answer. Screen Reader users hear question with instruction to press enter/space to toggle button to hear answer.