Read time: 1 minute

Can you quickly understand the meaning of the page and complete your task?

  • Avi is distracted and needs to fill out an important web form.
  • Benny has attention deficit disorder and has trouble staying focused on busy pages.
  • Juanita doesn’t feel confident about using technology because of previously not being able to find information online.

Steps to take

  1. Make sure key information is understandable at a glance. Design minimally and intentionally so that the user can get as much info as quickly as possible.
  2. Create a clear hierarchy of importance by placing items on the screen according to their relative level of importance. For example, place important actions at the top or bottom of the screen (reachable with shortcuts).
  3. Plan heading structure early. Ensure all content and design fits into a logical heading structure.
  4. Think about reading order. The reading order should be the same as the visual order.
  5. Group related items in proximity to one another to help those who have low vision or trouble focusing on the screen.
  6. Experience the web as a person with a permanent, temporary and situational​ disability. The Metamatrix Web Disability Simulator (Chrome extension) provides a great introduction.
  7. Watch World Wide Web Consortium's (W3C) short clear layout and design video (1 minute 5 seconds):

  • Transcript and translations: clear layout and design (W3C)

  • Page last updated: 22 June 2021