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

GitHub Primer · all subjects

page-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.

Page header landmark usage options

PageHeader allows usage of different HTML landmarks to create a more accessible UI. The usage of header and nav regions are allowed within PageHeader, both with different use cases.

Page header role prop for landmark when not contained

If the PageHeader is not contained within a landmark, consider using the role prop to indicate one and provide it with an accessible name via aria-label, perhaps the same as PageHeader.Title.

Page header with header landmark guidelines

When using the header landmark: Only utilize header if one does not currently exist on the page. Utilize header if the PageHeader consists of site-oriented content, typically existing at the top of the page. Ensure that when used on PageHeader, the component itself is not within other landmarks, such as main.

Page header with nav landmark guidelines

Navigation landmarks are best utilized to group links that pertain to navigation of the page. You can have multiple navigation landmarks, but ensure each unique navigation element has a unique label via aria-label or aria-labelledby. If you have a list or grouping of links within PageHeader.Navigation, use the nav type for this element. If you're already utilizing a component with a navigation landmark such as UnderlineNav, do not use PageHeader.Navigation as a navigation landmark, as this would be a duplicate.

PageHeader.Navigation as navigation landmark

You can utilize PageHeader.Navigation as a navigation landmark through the as prop. This further extends the accessibility of this component, as it allows users to navigate via landmarks easier.

PageHeader.Title heading structure and default level

PageHeader.Title renders its content as a heading in the background. PageHeader.Title is shipped as an H2 by default, but only if you do not pass a heading level to it via the as prop. You should modify the level of this component if the default heading H2 does not make sense with the existing heading structure on the page.

Page header landmark example with role and aria-label

Example showing PageHeader with role="banner" and aria-label: <PageHeader role="banner" aria-label="Page Title"><PageHeader.TitleArea><PageHeader.Title>Page Title</PageHeader.Title></PageHeader.TitleArea>...</PageHeader>

Give your agent this brain