Browser Extension

Page Title

Feature

The first section of the side panel is labeled "Page Title" followed on the next line with the title of associated the web page.

Accessibility Considerations

• Verify the title of a web page provides a description of both the website and the specific page. The specific page information should be the first part of the title followed by the website information.
• People using screen readers hear the title first when the page is loading and using screen reader commands have the title read to them to understand which web page they are viewing.
• Related WCAG Requirement:
  • 2.4.2 Page Titled (Level A)
• W3C WAI Easy Checks for Page Title

Headings Tab

Feature

• The first tab provides a tree view of the heading (e.d. the h1, h2, h3, h4 h5 and h6 elements) structure of a web page.
• Each tree item provides the heading level and the accessible name used by screen readers.
• The tree items are indented based on their heading level.
• Headings level 3 and higher are initially hidden in the tree.
• Note: Some authors add hidden or off-screen headings that are intended only for screen reader users and cannot be seen in the graphical rendering. These headings are not included in the list of headings by default. This mimics the behavior of many screen readers to reduce the number of headings users have to navigate. This feature can be disabled in options.

Accessibility Considerations

• Descriptive: Verify headings accurately reflect the content they introduce. For example, a heading "Ingredients" should be followed by a list of ingredients, not instructions on how to prepare them.
• Logical Hierarchy: Verify headings are used in a hierarchical order, typically starting with h1 for the main page title, followed by h2 for main sections, h3 for subsections, and so on. Avoid skipping heading levels (e.g., going directly from h1 to h3).
• Unique Headings: Verify headings in the same sub-section are unique. This prevents confusion for users, especially those using screen readers, who rely on headings for navigation.
• Concise and Clear: Verify headings are relatively short and to the point, avoiding overly long or complex phrasing.
• Related WCAG Requirements:
  • 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
  • 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
  • 2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
  • 2.4.10 Section Headings: Section headings are used to organize the content. (Level AAA)
• W3C WAI Tutorials on Headings

Landmarks Tab

Feature

• The second tab provides a list view of the landmark regions of a web page.
• Each list item provides the type of landmark region (e.g. main, navigation...) and the accessible name when defined.
• Note: If there are more than one landmark regions of the same type without accessible names, the landmarks are not included in the list by default. This mimics the behavior of many screen readers. This feature can be disabled in options.

Accessibility Considerations

• Identify Regions: Verify landmark regions accurately identify all of the logical areas of the web page. The visual layout and styling of the page, including spacing, borders, background colors and alignment can be used in identifying landmark regions.
• Appropriate Type: Verify the type of landmark represents the content in the region. For example the main region contains the primary content of the wbe page.
• Unique and Concise Names: Landmark regions only need accessible names when there is more than one landmark of the same. For example, if their are two navigation regions, each region should have an accessible name that describes the types of navigation links in the region.
• Related WCAG Requirements:
  • Success Criterion 1.3.1 Info and Relationships
  • Success Criterion 2.4.1 Bypass Blocks
  • Success Criterion 2.4.6 Headings and Labels
  • Success Criterion 2.4.10 Section Headings
• W3C ARIA Authoring Practices for Landmark Regions.

Links Tab

Feature

• The third tab provides a grid view of the links of a web page.
• Each row provides the position of the link on the page, the accessible name and information on the URL or file extensions. The following lists are the common values for the type column.
  URL Information:
  • Internal: Links that scroll to a other content on the page.
  • ssd: Links to different page that shares the same domain and sub-domain name.
  • sd: Links to different page that shares only the same domain name.
  • External: Links to other websites.
  File extensions:
  • pdf: Adobe Portable Document
  • docx: Word document
  • xslx: Excel document
  • png: Image format
  • jpeg: Image format
  • mpeg: Movie format
• The grid consists of three columns (e.g. position, name and type) and each of the columns can be used to sort the gird rows.
• In the Options their are a number of filters to only show links with a certain type.

Accessibility Considerations

• Avoid generic phrases: Verify links do not use phrases like "click here," "read more," or "learn more." or the URL as the link text.
• Provide context: Verify the link text clearly indicates the link's destination or purpose. For example instead of "click here," use "Download the report" or "Register for the event".
• Concise and unique: Verify link text is short but still informative. Each link should have unique text, especially if it leads to different locations.
• Related WCAG Requirements:
  • 2.4.4: Link Purpose (In Context) (Level A)
  • 2.4.9: Link Purpose (Link Only) (Level AAA)
• WebAim: Links and Hypertext

Summary

Feature

The summary section provides information on the number of headings, landmarks and links on the web page.

Update Button

Feature

Activating the button udpates the side panel information from the current web page. This is useful when the page content updated automatically or through user interaction and the side panel does not represent the current information on the page.