Should a web-app page title appear on every page, even with the current page highlighted in navigation?

Question

I'm facing a dilemma with other designers within our team about whether the main page frame of our web app should iterate the title of the page itself at the top left corner or if it should not exist... since the page title is already highlighted in the left hand navigation.

For example, if we imagine a web app or website with a left hand navigation with several items labelled Home, Plans, Reports, About, etc, then should the main page frame then display the page title as well which could effectively repeat the the text from the label in the navigation?

I can think of a potential use case where people using screen readers would need to hear the page name, and perhaps also provide focus away from the navigation itself. Are there any reasons for or against this?

Answer 1

Every page of a SPA should have a heading level 1, this does not necessarily have to be the same as the title or page name but should be descriptive enough that it lets people know where they are.

This is especially important for screen reader users for a couple of reasons:

1. Screen reader users navigate via different elements on a page (links, sections etc.). One of the primary ways a screen reader user will familiarise themselves with a page is with headings. They would expect a page to have one <h1> and they would also expect that to describe what page they are on.

2. Navigation best practices. I am not sure how you are handling loading pages at the moment but if the site is a SPA and navigation is all done with AJAX then you need a way to let screen reader users know the page load is complete when they click on a link.

The best way to do this is to programatically set focus to the <h1> on the page. I discuss this in more detail on stack overflow, which should cover the last point you made.

It doesn't just benefit screen reader users, all of your users will benefit knowing they have definately landed on the correct page and it reduces comprehension fatigue (without a heading in a prominent position I have to double check I clicked the correct link and that the current highlighted link in the navigation is hightlighted.), the more a user has to think, the more likely they are to leave your site, hurting conversions / retention KPIs etc.