NYPL Design ToolkitVersion: 0.1.36
NYPL Design Toolkit
- About This Toolkit
- Buttons And Menus
- Color Accessibility Table
- Color Reference
- General Microformats
- SVG Index
- Tables And Data
- Visible Focus
- Landmark roles & Regions
- Skip Links
- Development Checklist
- NYPL User Experience & Visual Design Project Index
- Visible Focus
- Discovery home
- Discovery search results
- Discovery detail page
- Discovery request page
- Discovery request form
- Discovery request confirmation page
Landmark roles & Regions
Regions are the basic building blocks of a page. WCAG 2.1 defines regions as “perceivable, programmatically determined section of content.” Examples of a region are a page’s header or footer. Different regions classify the different uses and functions of a page. Similar to headings, regions programmatically represent the organization of a page, which is often visually conveyed as well.
Regions should block out large areas of the page. Because regions can be used for browsing a page at a top level, too many regions, say 15, can counter that. Remember Regions are only one of the ways to organize a page. For example, a complex page with a lot of different content in the main region may be further organized with headings.
All content on the page should be included in a region. If content is not included in a region, it may be missed by an AT user skimming the page by region.
Users of Assistive Technology can navigate by regions using shortcuts. They may browse through all the regions of the page or navigate directly to one in particular. For instance, a user may use the “main” region to skip through repeated information in the header. When navigating through a page, a screenreader will announce changes between regions with the type of regions and the region name (if added).
main region is generally the target of a skip link. While some Assistive Technology affords browsing by region, we include a standard skip link at the top of all pages to ensure that all users can skip repeated content.
HTML5 introduced sectioning region elements which map to ARIA landmark roles. NYPL continues to use HTML and corresponding, ARIA roles together but will eventually do away with use of ARIA roles as recommended.
Regions can be labeled using an
aria-labeledby to associate existing text on the page, otherwise use aria label.) Some single use regions, like main, do not need a label. However, when there are multiple regions of a type, they should each always be labeled with a unique and descriptive name. Labels can also be applied to make clear the content of a landmark such as an aside.
Note, a screenreader will announce the label and announce the type of region. For instance, a nav region named “secondary navigation” would be announced “Secondary navigation navigation region”. To prevent repetition do not include “Region” in the region label.
NYPL Label Patterns
- Secondary: In some current Drupal templates page orders, there is a subnavigation between the banner/header and the main content. On desktop, secondary navigation is anchored to the left of the screen and in mobile, secondary navigation is contained in an expandable menu. “Secondary” is the label for these subnavs.
- Pagnation: Nav regions for pagination should have the label “Pagination”.
||Used for content related or supplemental to the main content of the page, but not integral. For instance, we’ve used this for a region following the main region in page order with the heading “Related blogs” and links to blog posts which may be of interest.|
||Must be named with one of labeling techniques|
||<ul><li>One top level per page</li></ul>|
||<ul><li>One per page</li><li>Top level</li><li>Should include the h1 of the page</li></ul>|
||Often multiple navs on the page so best practice is to have labels.|