skip to content W3C SVG

Wording

Introduction

It isn’t enough that elements in a web page’s HTML are marked up correctly. Where they provide textual labels, these labels need to be readable and descriptive.

  • Headings must clearly describe the sections they introduce.
  • Labels for links, buttons, and form elements must clearly describe the purpose of those controls.
  • Page titles must sufficiently describe the page and its purpose.

Screen reader software aggregates headings and links into lists, so it is important they make sense independent of context. For example, a link reading “read more” are of little use in an aggregated list, especially where there are many sharing the same generic label.

The page’s main (<h1>) heading must be a subset of the page’s <title>. Ordinarily, you would include the name of the site, along with the name of the page, e.g. “C3: Alerts Reporting”. This way, a user with many tabs open knows which pages belong to which sites. The name of the page should be similar to the content of the <h1> tag.

Finally, it is important that parts of the interface are identified consistently, using the same terminology. This includes pairing the terminology in link text to the destination page’s <title> and main heading text.

WCAG criteria

Scope of the issue

C3 lacks descriptive titles throughout the application. The application <title> is “Welcome to First Access” on the main page as well as on all child form pages, which has the potential to leave screen reader users confused about where they are on the site.

As mentioned in Heading structure, C3 often uses <span> elements in the place of <h1> tags with title classes to add visual styling to look like the native HTML heading elements.

Fixing the issue

It is recommended that the main <title> tag is changed on each child form page to reflect the site title and page content. For example, the Alerts Reporting form under Alerts could be re-titled “C3 First Access – Alerts – Alerts Reporting”.