Tabbed Interfaces in Canvas: Browser vs Mobile App

Browser View

This is a screenshot of what a tabbed interface looks like in Canvas when using a browser:

Screenshot showing a tabbed interface in Canvas browser view with three tabs displayed horizontally at the top of the content area

Mobile App View

This is how that same tabbed page would look on an Android device using the Canvas mobile app:

Screenshot of Canvas mobile app on Android showing the tabbed content displayed as a continuous scrolling page instead of separate tabs

Accessibility Considerations

When designing content with tabs, keep in mind:

Mobile users will see all content in a continuous scrolling format rather than as separate tabs
Screen reader users may experience navigation challenges with tabbed interfaces
Content organization should make sense both when viewed as tabs and as a continuous page
Important information should not rely on the tabbed format to be understood

Best Practice: When using tabbed interfaces, include clear headings within each tab to help mobile users navigate the content when it appears as a continuous page.

Click on the Next button below to continue on in this module.