new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

IBM Carbon · all subjects

ui shell header/accessibility

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

UI shell header keyboard interaction - Tab, Enter, Space

Each element in the UI shell header can be reached by the 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.

UI shell header skip-to-main-content link

A 'Skip to main content' link appears when a keyboard user first tabs into the page. This is implemented using the first item on the page with tabindex='0' and hidden through CSS until it receives focus.

UI shell header region implementation

Carbon applies a header region around the whole UI shell header using the HTML 5 header component instead of an ARIA landmark to set the region.

UI shell header icon-only button labeling

Carbon provides default names for each icon-only button in the header. These names are revealed on hover or focus. Icon-only components include search, help, notifications, and the app switcher.

UI shell header design annotation requirements

For every product, there should be a one-time design exercise to annotate the UI shell keyboard interaction, header functionality, roles and names. Where the product does not deviate from the standard Carbon implementation, it should be annotated that the behavior matches Carbon defaults. Individual product pages only need to annotate the header if something differs from the product-specific annotation. Where the header deviates from default Carbon behavior or labeling, such deviations should be annotated, including different labels for icons or interaction changes such as keyboard navigation.

UI shell header accessibility - what Carbon provides

The Carbon header 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.

Screen reader keyboard interactions with header

Screen reader users can trigger state changes in the header using keyboard shortcuts: VoiceOver uses Control-Option-Space or Space, JAWS uses Enter or Space, and NVDA uses Enter or Space. These shortcuts work when the header area has screen reader focus.

Give your agent this brain