Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

In order to be inclusive to all users, we need to consider how our applications behave on smaller viewports. (For more information on viewports, see The viewport is the window to your site – Digital.gov.) While designing and building using responsive design principles will allow you to create an optimized layout for users accessing your application on smaller viewports, this is not the only benefit. This will also ensure you are supporting users with low vision who need to enlarge text by using the browser’s zoom function. 

On smaller viewports, when tabs no longer fit within the screen width, content within tabs should be removed and presented as regular text content on the page. Don’t allow tabs to scroll vertically or span multiple rows, as this can become challenging for users to navigate efficiently.

It's important to remember that tabs should not be used as a means of fitting more content on a single page. Instead, consider whether the tabbed content might be better organized on separate pages or combined into a single, longer page for improved user experience and clarity.

Resources 

Government of Canada resources 

...