Project app: All pages have the same h1

[eatyourgreens]

Package

app-project

Describe the bug

Each page of the project app has the same title and h1 heading, which is set to the name of the project.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://www.zooniverse.org/projects/msalmon/hms-nhs-the-nautical-health-service/
2. The page title and heading are 'HMS NHS: The Nautical Health Service'
3. Navigate to a subject set and workflow: https://www.zooniverse.org/projects/msalmon/hms-nhs-the-nautical-health-service/classify/workflow/18109/subject-set/83397.
4. The page title and main heading are still the project name.
5. As a blind user, at this point I'd have no idea whether or not the link I'd just clicked had taken me to a new page.

Expected behavior

Each page should have a title and heading which describes the content of the page eg. 'HMS NHS: Classify' for the Classify page or 'HMS NHS: About: The Team' for the team page.

Additional context

Here's a useful comment from Léonie Watson, which describes how the page title and heading are used to orient blind users while navigating a single page app: https://github.com/gatsbyjs/gatsby/issues/5581#issuecomment-392919628

Pages with the same title and heading might also be indexed as duplicates. Unique titles and headings are also good for SEO.

[eatyourgreens]

Pages have a title prop now, so that could be used to set the page title in the document head, and in the OG metadata. The main page heading is part of the common project header, so that needs a bit more thought.

[goplayoutside3]

Closed by #2271

[eatyourgreens]

Re-opening this because the h1 headings still need work.

[srallen]

@eatyourgreens could you add a description of what work is needed for h1s so it's clear for other people?

[eatyourgreens]

Each page needs a h1 heading which describes that page. eg. the heading for the Research page could be ‘Research’ while the heading of the Classify page could be ‘Classify’ (or perhaps the workflow name?)

Basically, when you navigate to a new page and hear the page heading read out, in a screen reader, you want to be reassured that you are on the right page.

I think BBC News does this well. I’ll dig up some examples.

[eatyourgreens]

Here are some useful resources:

• Headings (Princeton University: Digital Accessibility)
• WebAIM: Headings
• A BBC News story. Examine page structure for BBC News pages with a tool like WAVE and you'll see that the h1 heading for each page is the article headline. On the news home page, the h1 heading is 'BBC News Home'.

[eatyourgreens]

If we aren't doing it already, we should also wrap the main page content in a <main> landmark.