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.
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.
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.
Use the .wdn-text-hidden class on the <h1>. This will hide it from visual presentation, but keep it available to AT and bots.
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.
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 persevered. 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 pages 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.
You now have the same page title text in two places. Make sure to update them both if the page title ever changes.
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.