Page title and notebook title do not match

[isabela-pf]

Problem and context

This issue comes from our user testing round 1: navigation. At the moment, the page title (the words listed in the browser tab) and the notebook/document title (the H1, a.k.a # first used in a markdown cell) are different. When asked "Can you tell me what the title of this notebook is?" multiple participants were not sure which piece of information was the title. Some only reported one of the options though there was not a trend of locating one of the potential titles over the other.

Currently, the page title is the notebook/file name without the extension (ie. my_notebook or the infamous Untitled3). The notebook/document title is determined by the author's use of headings in their notebook cells, in this case what line they label their H1. I have not had a chance to observe what happens if the author does not define an H1.

Possible solutions

I don't think there is a experience-boosting reason for the page title and notebook title to be different (especially in light of #8's findings), though I would love to hear it if someone finds utility in having them separate. I would advise

• Setting the page title to be a combination of the notebook title/H1 appended with relevant source information like the project/repository it belongs to or STScI. Something like Examining the first JWST images - Space Telescope Science Institute or `How to write a tutorial in Jupyter notebooks - spacetelescope/notebooks.
• Keeping the notebook title as-is

Acceptance criteria

This issue can be closed when we

• Merge a PR that unifies the multiple titles.

Tasks to complete

• Define the naming convention we want for the page title
• Review if any changes will be needed for the notebook title
• Make code changes where needed
• Get work merged

[smythp]

I suspect that this might have to be in the style guide, since currently notebooks allow for two different kinds of titles, i.e. a recognized title corresponding to the filename (very frequently "Untitled") and a title expressed at the beginning of the document, ideally in a h1 element. If we are too clever in looking at the beginning of the notebook to create the title metadata for the page (what you see in the browser tab, on Google, etc.), then the user might miss out on useful information provided in the filename.

I think looking at a combination of the h1 tag and the filename is worth exploring, though I see potential issues. I think proper style would suggest making the filename and the h1 title the same, but that seems like it will result in a title that is a duplication if we combine the two to create the title metadata. For example, if the file name is Astronomy Data and the h1 text is Astronomy Data, March 2021, you would create a title that has "Astronomy Data" twice. You could try to add more logic to avoid this, but my feeling is that kind of "smart" combination will be brittle.

Pending further exploration, my initial suggestion here is to address this in the style guide.

[tonyfast]

i am not sure if i agree with the need for the title and notebook to match. if they do they we are introducing repetitive information into the screen reader. i think they have different purposes. is there a wcag criterion for this?

[smythp]

The closest I could find was this:

https://www.w3.org/WAI/WCAG21/Understanding/page-titled.html

I would generally say that it's not against WCAG to have mismatched title/h1. The most common version of this is that many websites have the name of the site (broadly) in the title, along with the name of the age, which I don't think is an accessibility issue. However, this is rarely done with a h1.

I think this still might be a valid issue, in the sense that Jupyter notebooks seem to cause people not to title the file fairly often (what Isabela calls the infamous "Untitled (3)". People are less likely not to put any title-like info at the start of a notebook.

I don't think we can realistically do a technical intervention here. It's too heavy-handed to take either the first h1 and make it the title or vice versa. I think the proper action here is to make sure the style guide says something like "Provide a descriptive title for the notebook."

[isabela-pf]

I'm following up on this as I clean up our content type test results.

We asked a similar "Can you tell me what the title of this notebook is?" question in the test 2 script and found similarly inconsistent answers from participants. We still had answers ranging from the webpage title, to the file name, to the h1 header.

Based on the feedback above and more style guide discussions with a broader community, I think I'm inclined to agree that this might not be a wise thing to override. It also did not block people from working with notebooks; it was only a point of confusion because we use the word title so loosely when speaking compared to the specific meaning it has in HTML.

I won't close this yet to make sure we're on the same page, but I will circle back. Thanks for all the feedback.