User interface components and navigation

must be operable

Easy to operate

User interface components and navigation must be operable: The interface cannot require interaction that a user cannot perform.

Under this principle you will find guidelines relating but not limited to:

Under this principle you will find guidelines relating but not limited to:

  • Keyboard Accessible: Make all functionality available from a keyboard.
  • Enough Time: Provide users enough time to read and use content.
  • Seizures and Physical Reactions: Do not design content in a way that is known to cause seizures or physical reactions.
  • Navigable: Provide ways to help users navigate, find content, and determine where they are.
  • Input Modalities: Make it easier for users to operate functionality through various inputs beyond keyboard.

Let’s see how to apply the guidelines to our products

2.1. Make all functionality work with a keyboard

2.1.1 Keyboard

 Make sure every task can be completed using just a keyboard.

2.1.2 No keyboard trap

Make sure that keyboard-only users do not get trapped within any element.

2.1.4 Character key shortcuts

 If you’ve added custom keyboard shortcuts, provide a way to switch off or remap these shortcuts.

2.2. Give people enough time to read and use  

2.2.1 Timing adjustable

If there is any time limit (like a session timeout), give people an easy way to extend it.

2.2.2 Visual distractions

Do not show anything that automatically blinks, scrolls, animates or updates frequently if it lasts more than 5 seconds. Or give people a way to stop it.

2.3. Make sure it won’t trigger seizures

2.3.1 Flashes 

Do not show anything that flashes more than three times a second.

2.4. Help people navigate and find  

2.4.1 Skip to main   

Give keyboard and screen reader users a way to go directly to the page’s main  .

2.4.2 Page title

Give every page a unique and helpful title that indicates the purpose of the page.

2.4.3 Focus order

Make sure that interactive controls receive focus in an order that makes sense, when users navigate through them with the keyboard.

2.4.4 Link purpose

Make sure the purpose of every link is clear from the link text alone, or together with associated   (if screen readers recognize the association).

2.4.5 Multiple ways   

Give people different ways of finding each page (like searching or browsing links), unless the page is a step in a process.

2.4.6 Headings and labels

Headings and form labels should help people find   and complete tasks.

2.4.7 Focus visible   

Make sure that keyboard-only users can clearly see which interactive control is focused when they tab through them.

2.5. Make it work with other input methods beyond keyboard

2.5.1 Complex gestures     

Do not require complex gestures or using more than one finger to do things.

2.5.2 Touch or click cancellation  

Make sure that custom buttons or links do not activate as soon as they are touched, so that users can slide their finger or mouse away to cancel the action.

2.5.3 Label in name 

When an interactive control has a name on screen, make sure that assistive technologies (like Voice Control) know it by the same name (or a name that includes the name on screen).

2.5.4 Device motion   

 If a feature uses the device’s motion (like shaking or tilting), make sure that responses to these motions can be turned off, and that the feature can be used in another way.

Leave a Reply

Your email address will not be published. Required fields are marked *