Skip to main content
Logo Appt Light

Success Criterion 1.4.13 - Level AA

Content on Hover or Focus

Ensure it is possible to hide information which appears automatically after hovering with the pointer or focusing with the keyboard. It often happens that an element is interacted with accidentally. If new content appears, it may affect the completion of a task. Automatic content mainly causes problems for users of external input devices.

Impact

  • Users can get stuck in an app if it is not possible to hide automatically appearing content.

  • A menu may open after ho. Users should be able to stop or undo this action.

Check

“Can content be hidden if it gets in the way?“

You can use a pointer of keyboard to check this.

Solution

Add a close button to content that is automatically displayed to allow users to hide it.

Add close button

On Android, you can show a dialog by using AlertDialogBottomSheetDialog or DialogFragment. You should always add a close button by using the setNegativeButton method. The focus of assistive technologies is automatically trapped inside the dialog while it's visible.

val builder = AlertDialog.Builder(this)
builder.setTitle("Confirm Appt membership?")
builder.setMessage("Your bank account will be billed.")

builder.setPositiveButton("Proceed") { dialog, which ->
  // Proceed
}

builder.setNegativeButton("Cancel") { dialog, which ->
  // Cancel
}

builder.show()

Resources

Feedback?

Let us know!