Posted on

Missing or uninformative page title – example

Missing or uninformative page title documentation

Summary: Real world example of the Missing or uninformative page title Error.

You can review what this means technically and the impact inside of our Results dictionary. Today I am only looking at this from the perspective of a Missing or uninformative page title Error found on a higher ed website from our Higher Ed in 4k project.

Example

On this University learning management system (LMS) login page there is no page title, no document language and no <h1>. These are all page level results so WAVE has added the icons at the top of the page.

For this article I am going to focus on the Missing or uninformative page title. In this case there is simply no page title. Without a proper title, many users (especially those using screen readers or other assistive technology) may have difficulty orienting themselves to the page.

When the page title doesn’t exist the browsers might show the url instead as the page title, screen readers do the same. When testing this page in NVDA I got a string of % signs and numbers and ? marks when I first loaded the page. The URL is 144 characters with all the URL parameters. It was not a good experience and is compounded by the fact that the first content is a logo without an alt attribute followed by links that the university added in the header. There is no <h1> to jump to either.

Using the NVDA screen reader it took my a bit to understand what the purpose was of the page I had landed on. If the link text linking to this wasn’t descriptive it could be even more confusing. Adding a <title> is very easy.

Solution

To pass the WAVE Error in this instance we simply need to add a <title> that matches the page. It should be informative and fairly brief. The <title> goes inside of the html <head>.

Updated html

<head>
   <title>Blank University LMS</title>

   <!-- here are your existing scripts and css -->
</head>

I added a <title>, this now passes WAVE and I can visually see the title in my browser tab and a screen reader lets me know what the page is I am on. I might specify the LMS and the University name, whatever makes sense for how you would communicate the LMS to students.