Page Title - H1 - Best Practices

Page titles offer important context about the contents of a web page, but are often overlooked in terms of accessibility and semantics. In HTML, a page title is defined as an <h1> element and should be placed before the content of the page and after the site header and navigation. However, <h1>s are being hidden or moved out of order, which can negatively affect accessibility and SEO.

Why order and visibility of an <h1> are important

Accessibility

Assistive Technology (AT) such as screen readers are used by those who are not able to see or have visual impairments. A screen reader will read the contents of a page to a user in the order of HTML elements on the page (this can be different than the visual order). Screen readers also provide functionality to list and jump to headings on the page, such as the page title. A screen reader user will often jump to the page title to skip the page header and navigation which are the same on every page. So, when the page title ( <h1>) is hidden or not in the right order, it can cause confusion and/or frustration.

SEO

Search engines such as Google will crawl your web pages with bots. These bots will parse your page's HTML and determine key search terms. The page title is a very important factor in this calculation and if it is hidden or out of order, your search results might be negatively affected.

Don't use display:none

Sometimes it is desirable to not place the page title in its usual spot (e.g. hero image/video bands). It is still important however, that the <h1> is available to AT and bots. Often, web developers will simply hide the existing <h1> with css that uses display:none. However, that will also hide the page title from assistive technology and bots. Instead it is best to visually hide the <h1>. You can visually hide the <h1> in one of the following ways:

• Use the .wdn-text-hidden class on the <h1>. This will hide it from visual presentation, but keep it available to AT and bots.
• If you do not have access to add a class to the existing page title (UNLcms), you can define your own CSS to target it. For example:

    #main-page #pagetitle h1 {
    font-size: 0;
    width: 1px;
    height: 1px;
    display: inline-block;
    overflow: hidden;
    position: absolute!important;
    border: 0!important;
    padding: 0!important;
    margin: 0!important;
    clip: rect(1px,1px,1px,1px);
  }
      

Now, if you are visually hiding your page title, you probably have another one somewhere on your page. Ideally, it would also be the first visual piece of text. It is best to use a <span> in conjunction with some CSS to mark up that text. Be sure to add the attribute aria-hidden=true to make sure the page title is not spoken twice to screen readers (once for the <h1> and once for <span>). See the example at the bottom of this page.

Ensure the correct order

Heading elements need to be in the correct order. That means an <h1> should come first, followed by an <h2>, etc. Heading elements should also not be skipped; don't go from an <h1> directly to an <h3>. It is also important that the context of the heading element is preserved. For example, you might have have a large image band on your home page, with your <h1> at the bottom of the image. If the <img> element comes before the <h1>, screen readers and bots don't know that the image is actually part of the page’s content - they think it comes first! A screen reader would read the <img> alt text BEFORE the page title. Instead, place the <h1> first and visually hide it, then place the <img> element and and then the page title next. Mark up the visual page title as a span and apply the aria-hidden attribute to hide it from screen readers so that it won't be spoken twice. See the example at the bottom of the page.

Example Code

This example visually hides the <h1> so that it is available to AT and bots and in the correct position on the page, then adds a visual page title, marked up as a <span> with an aria-hidden attribute so that the page title is not spoken twice. Some things to keep in mind if you are doing this:

• You now have the same page title text in two places. Make sure to update them both if the page title ever changes.
• Don't use multiple <h1> elements as that can be confusing to bots and screen readers

<div id="maincontent" class="wdn-main">
  <div id="pagetitle">
    <!-- InstanceBeginEditable name="pagetitle" -->
    <h1 class="wdn-text-hidden">Your Page Title</h1>                 
    <!-- InstanceEndEditable -->
  </div>
  <!-- InstanceBeginEditable name="maincontentarea" -->
  <div class="wdn-band">
    <img class="wdn-stretch" src="images/splash/splash-poster.jpg" alt="A description of what is in the image" />
    <div class="wdn-promo-container">
        <div class="wdn-promo-content">
            <!-- This text is displayed over the above image -->
            <span class="page-title" aria-hidden="true">Your Page Title</span>
        </div>
    </div>
  <!-- The rest of our content -->
</div>

A better solution?

A better solution would be to only have one page title before any other content, however this is not always possible due to CSS constraints.