Interactivity

Learn how to write UI content in the Content Style Guide.

Overview

Interactivity includes every element on the screen that a user can click, tap, swipe, or enter text into. Use these interactions between users and a screen to create meaningful experiences.

Best practices

General

• Use standard interactions where possible.
• Make sure assistive technology users can operate all UI components.
• Make sure targets are large enough for touch screen users and users with fine motor difficulties. 
• Warn the user if a page is about to time out. If necessary, allow the user to change the time-out settings.

Hover and focus

• Include an esc key or close icon on any element that's triggered on hover or keyboard focus.
• Clearly indicate the current state of an element or page.
• Allow the pointer to be moved to content that's triggered on hover or keyboard focus without it disappearing.
• Make sure content that's triggered on hover or keyboard focus remains visible until it loses focus, is dismissed, or is no longer relevant (because the error is resolved).
• Don't open new windows when a component receives focus or an input is set.
• Don't change focus to another component when one component receives focus or an input is set.
• Don't include a disabled component in the focus order.
• Indicate clearly which element has focus as the user tabs through a page.
• Tell users that when they complete input fields, focus will automatically move to the next field if this is the case.

Mouse events

• Action something with the mouse on its up-event only. This is when the button is released, not when pressed down. Rarely, you might action something on the down-event, and reverse it on the up-event, for example, showing a video only when users press and hold the button.
• Cancel the action if the user moves the mouse pointer off the target before releasing.
• Submenus in fly-out menus should not disappear immediately after the user moves the mouse from the selectable area.

Text inputs and forms

• Display a caret if a field is empty. If the field contains content, select all the content.
• Allow the user to review input content before submitting a form.
• Keep displaying the content of the whole page even if extra form elements are displayed when a user selects a Radio button.

Resources

• WCAG 2.1 Understanding success criterion 2.4.7: Focus visible
• WCAG 2.1 Understanding success criterion 3.2.1: On focus
• WCAG 2.1 Understanding success criterion 3.2.2: On input
• WCAG 2.1 Understanding success criterion 1.4.13: Content on hover or focus
• WCAG 2.1 Understanding success criterion 2.5.2: Pointer cancellation