Inclusive Design Tip : Magnify all the things

A visual tip

Why do it

People with visual impairments use magnifiers to read on-screen content. While the content inside the magnifier is readable for them, the other information on the page could be out of focus.

What to do

  • Windows: press the Windows key‌ and + (plus sign). Or Start > Settings > Ease of Access > Magnifier, and then move the slider under Magnifier to turn it on > browse your site (See bit.ly/emplab001)
  • Mac OS: System Preferences > Zoom > check “Use keyboard shortcuts to zoom” > select “Zoom style: Picture-in-picture” > toggle zoom using the defined shortcuts (default is ⌥⌘8) > browse your site.

Things to check

  • Is there content or functionality (e.g. flyouts, drop down menus, tooltip, hover effects) that is no longer visible or accessible?
  • Is user feedback contextual and in the right place? (E.g. do validation or error messages sit next to their form fields?)

Things you could change

  • Make sure that tooltips and help/error messages display close to the elements or fields that they belong to: if information belongs together, show it together!
  • Use consistent layout and design patterns throughout your site.
  • Avoid visual clutter, including unnecessary animations or transitions and reduce distractions on the page.