accessibility: Fix heading structure to begin with h3?

[openstaxalina]

From https://drive.google.com/file/d/0BxiTbl6K_ZNRelpxRlkwYkZnb3c/view

Issue 3: The heading structure is broken
The sections have headings that identify them (1.3.1) but headings are marked such that they cannot be programmatically identified.

Example with empty headings: the structure of headings is broken and there are two empty headings

Reference to standards
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be
programmatically determined or are available in text. (Level A)
Suggestion

• Make headings to organize an HTML page and avoid empty headings. Use an < h1 > element for the overall title, and < h2 > elements for major sections, and < h3 > elements for sub-sections.

• Alternatively, you can use multiple < h1 > headings, but each of them has to be a heading to a separate section or article. Avoid skipping the levels of the headings, e.g. if you have < h1 >, it can only be followed by < h2 >, which can only be followed by < h3 > etc. Use Web Accessibility Toolbar for IE to find defects on your website.

[openstaxalina]

Comment from Phil:
Seems like this stems from the CNXML->XHTML transform. The HTML page does not know that it will be in webview so it uses a higher heading level.

Also, as part of baking we update the heading levels so it might need to be fixed in there as well

[openstaxalina]

[PiotrKozlowski]

Is there any link to page from screenshot? Or should we force checking headings structure before loading content on every page?

[openstaxalina]

@PiotrKozlowski this accessibility audit was performed on an unbaked version of Biology. I believe this is the specific page from the screenshot: https://cnx.org/contents/[email protected]:TK9ID2hI@9/Cell-Division.

I am not sure about your second question; I suggest we park it on Thursday, or you may be able to talk with @helenemccarron before.

OpenStax CNX

[PiotrKozlowski]

Outline is different for me. Also I don't see empty headings.

There is additional heading Add pages which is not visable but it's in the outline. It's below div#add-page-modal. This should be removed. Should we create new issue for this?

Left - unbaked | right - baked

[openstaxalina]

https://github.com/openstax/cnx-recipes/issues/1051#event-2318972908 is likely related