Page Interactions

A webpage with just text can be quite boring to users. Having items that a user can interact with can make your page more effective and better serve your users. When designing these interactive tools, you need to be aware of all the different ways a user could be interacting with your web page.

Interactive Elements

When referring to interactive elements on your page, you should use more than the shape, color, size, or location of the element. Telling users to "Click the big blue button" only works if they are consuming your site in a way where they can determine the size and color of objects on the page. A screen reader user wouldn't have access to either of these attributes, and would benefit more from knowing what the text of the button is. Interactive elements should have appropriate labels that describe what actions they will perform. If the same elements appear on multiple pages, they should have the same labels everywhere they are used. Interactive elements should be sufficiently large such that users on a mobile device or those with dexterity issues can successfully use interactive elements. A user must be able to interactive with these elements with multiple input devices, such as from a mouse, keyboard, and mobile device touchscreen.

Animations and Interaction Events

No content on the site should flash more than 3 times per second. If any part of a page is updating, moving blinking, or scrolling automatically, a user should be given able to control, pause, hide, or disable these effects. A user should be able to cancel any interactions they perform on a given site in case they were initiated by accident. If content appears whenever a user hovers over an element, the user should be able to hover over and dismiss this new content. If time limits exist to execute some task on a site, a user should be able to adjust the time alloted to them.

Content Changes

Content on a page should only change if the change was initiated by the user. Similarly, users should be made aware of any content changes on a page. Merely focusing on an element of the page should not change the page. Users should be able to disable any alerts from a page unless those alerts relate to an emergency of some kind.