Open cdrini opened 1 month ago
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.
Hey @cdrini, @veronicamar can you please assign this issue to me I would like to work on this
Hey @cdrini @veronicamar I would like to work on this issue.....Plz assign this issue to me!!
Hey @cdrini , @veronicamar May I work on this!!
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!
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 goh1
>h2
, which would indicate that these headings should beh3
, 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:
h6
references in the relevant CSS toh3
: https://github.com/internetarchive/openlibrary/blob/dd3ca411cf828d153f1b9b62f1d44c5c64a1fc1d/static/css/components/link-box.less#L5-L21h6
children of each.link-box
element to beh3
elements, to ensure styles remain consistent:author/view.html
: https://github.com/internetarchive/openlibrary/blob/dd3ca411cf828d153f1b9b62f1d44c5c64a1fc1d/openlibrary/templates/type/author/view.html#L158-L161publishers/view.html
: https://github.com/internetarchive/openlibrary/blob/dd3ca411cf828d153f1b9b62f1d44c5c64a1fc1d/openlibrary/templates/publishers/view.html#L62-L64SubjectTags.html
: https://github.com/internetarchive/openlibrary/blob/dd3ca411cf828d153f1b9b62f1d44c5c64a1fc1d/openlibrary/macros/SubjectTags.html#L5-L7RelatedSubjects.html
: https://github.com/internetarchive/openlibrary/blob/dd3ca411cf828d153f1b9b62f1d44c5c64a1fc1d/openlibrary/macros/RelatedSubjects.html#L19-L20And 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