Heading elements are not in a sequentially-descending order

[cdrini]

Describe the problem that you'd like solved

It seems that the issue is that the subject tags on the book page (see image) are h6 elements, but the page headings up to that point only go h1 > h2, which would indicate that these headings should be h3, so that the page can be more easily understood by both screen readers and search engines.

Proposal & Constraints

The solution should be as simple as:

• Switching the h6 references in the relevant CSS to h3: https://github.com/internetarchive/openlibrary/blob/dd3ca411cf828d153f1b9b62f1d44c5c64a1fc1d/static/css/components/link-box.less#L5-L21
• Updating the h6 children of each .link-box element to be h3 elements, to ensure styles remain consistent:
  • In author/view.html: https://github.com/internetarchive/openlibrary/blob/dd3ca411cf828d153f1b9b62f1d44c5c64a1fc1d/openlibrary/templates/type/author/view.html#L158-L161
  • In publishers/view.html: https://github.com/internetarchive/openlibrary/blob/dd3ca411cf828d153f1b9b62f1d44c5c64a1fc1d/openlibrary/templates/publishers/view.html#L62-L64
  • In SubjectTags.html: https://github.com/internetarchive/openlibrary/blob/dd3ca411cf828d153f1b9b62f1d44c5c64a1fc1d/openlibrary/macros/SubjectTags.html#L5-L7
  • In RelatedSubjects.html: https://github.com/internetarchive/openlibrary/blob/dd3ca411cf828d153f1b9b62f1d44c5c64a1fc1d/openlibrary/macros/RelatedSubjects.html#L19-L20

And it should solve the same problem for publisher, author, and subject pages!

Additional context

For testing, you'll want to run docker compose run --rm home npm run-script watch-css so that you can see your CSS changes reflected live in Docker.

Stakeholders

---

Instructions for Contributors

• Please run these commands to ensure your repository is up to date before creating a new branch to work on this issue and each time after pushing code to Github, because the pre-commit bot may add commits to your PRs upstream.

[veronicamar]

From PageSpeed: Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies.

Ensure headings are in a logical order. For example, check that all headings are marked with h1 through h6 elements and that these are ordered hierarchically. For example, the heading level following an h1 element should be an h2 element, not an h3 element. Finally, don't use heading mark up on text that isn't actually a heading.

Usually, the best practice is to start the main content of a web page with a level 1 heading element (h1), with no other headings before this high-level heading. Markup the sub-sections of the page as level 2 heading elements (h2). If there are sub-sections within the level 2 sections, mark these sections as level 3 heading elements (h3) and so on. Anything that comes before the main content of the page should not be marked up with any headings at all, though this is not an iron-clad rule. One of the main reasons that the h1 element should appear at the beginning of the main content is because screen reader users can use keyboard shortcuts to navigate directly to the first h1 element, which, in principle, should allow them to jump directly to the main content of the web page. If there is no h1 element, or if the h1 element appears somewhere other than at the start of the main content, screen reader users will have to listen to additional web page content to understand the page structure, wasting valuable time.

As with all best practice recommendations, there will be exceptions in which it doesn't make sense to start the content with < h1 >, or when it may be best to put other headings before the content, but the exceptions do not apply to the vast majority of web pages.

[sanjanaynvsdl]

Hey @cdrini, @veronicamar can you please assign this issue to me I would like to work on this

[srivastavaarpit977]

Hey @cdrini @veronicamar I would like to work on this issue.....Plz assign this issue to me!!

[Naresh-kumar-Thodupunoori]

Hey @cdrini , @veronicamar May I work on this!!

[rebecca-shoptaw]

Hi @sanjanaynvsdl, I'm going to do some more research and add a little more detail to the issue re: desired implementation; once that's done, you're welcome to work on it if you're still interested!