UI shell header

The Carbon UI shell bakes in keyboard interaction, including a skip-to-main-content mechanism. Carbon also supports assistive technologies such as screen readers by setting labeling and page structure.

Each header element can be reached by Tab key. A “Skip to main content” link appears when a keyboard user first tabs into the page. Links and icons are activated by Enter. Icons can also be activated by Space.

Icon-only buttons in the header are revealled on hover and focus. Carbon provides default names for each. Interactions are covered under some other component topics: search, notifications, switcher.

For every product, there should be a one-time design exercise to annotate the UI shell keyboard interaction. Where the product does not deviate from the standard Carbon implementation, it can merely be annotated that the behaviour matches what is in the ‘How Carbon works’ section.

Once a product-specific UI shell annotation exists, individual product pages only need to annotate the shell if something differs.

Where UI Shell functionality deviates from the behavior described above, it should be annotated. Such annotations could call out different labels for icons, snf indicate interaction changes, where they exist. For example, some products may alter the keyboard interaction of some UI Shell header components like menus or side panels.

Keep these considerations in mind if you are modifying Carbon or creating a custom component.