Inputs and outputs
Today, many of our sites are designed for two inputs: keyboard and mouse, and two outputs: monitor and speakers. If you only design for these two elements, you and your engineering team may miss the needs of other users — users that need keyboard-only entry, or voice control, or touch.
When designing, consider a variety of different input and output modes. Consider the table below as a test matrix when you look at your design. The row headers are each input methods that may be used, and the column headers are each output methods. (The rest of the table is blank, for you to fill in as needed.) Will the design you created work for at least one entry per row and column?
| Monitor | Colorblind palette on monitor | 400% zoom on monitor | Audio output or screen reader | Braille cell display | |
|---|---|---|---|---|---|
| Keyboard | |||||
| Mouse | |||||
| Microphone and voice recognition | |||||
| Touchscreen |
You don’t need to test every one of these modes, especially not when you’re early in your designs and nothing exists in code. What’s important is knowing which inputs and outputs might be problematic. For example, if you’re using a drag-and-drop interface from a Javascript library, you want to make sure that it works with a keyboard and with touch as well as with the mouse it was likely designed for.
If you only have time to concentrate on learning how one of the inputs works, choose the keyboard, because most assistive technologies are based on the keyboard.