Chapter 28: On focus & on input

On Focus

Every user interface component have a specific functionality. Users predict the functionality of that component when they focus either with a mouse or using a keyboard. In certain cases these predictive behavior will be over written with some scripting. E.g. When the user is filling a form, as soon as they enter a input field a help dialog opens taking the user focus away from the input field. This is not a predictive behavior but the context of the input is changed. Similarly, a menu is coded as a link, when the user focus on it a submenu opens.

On  Input

If the user interface component changes when the user inputs data or selects an option without prior intimation it may disorient the user. In some web pages we observe when the user selects an option from a group of radio buttons, automatically a new window opens. Fundamentally the radio button is just select one among group of options, since a new modal opens this disorients the user. Similarly in some websites a language dropdown is provided. User can change the language of the website on their comfort. However, if the user navigates to different options on the dropdown, press escape or tab without selecting the desired language still the current option gets changed and new page is displayed. This is not something user predicts.

Remember that both on focus and on change only talks about the change in content, not change in context. Change in content is not always change in context.

Validation of  on focus

  1. Open the page on a browser.
  2. Navigate to every element on the page using both keyboard and mouse.
  3. Check if any unexpected changes happen on any component of the page as you focus on them. E.g.: opening a submenu.
  4. IF such change does not happen on any component this success criteria is considered pass.
  5. If any such changes happen without prior intimation to the user then this success criteria is considered as failed.

Validation of on input

  1. Open the page on a browser.
  2. Navigate to each element that allows user input. It can be a text field to input some data or a dropdown or radio button to select a value.
  3. On inputting the data, check if any unexpected change happens on the page. Eg: Opening a new page when a radio button is selected or new fields are added before the component when the user checks a check box etc.
  4. If no such changes happen this success criteria is considered as passed.
  5. If such changes happen without prior notice, this success criteria is considered as failed.

WCAG Success Criteria

3.2.1 On Focus (Level A)

3.2.2 On input (Level A)