Improve page structure

[StephDriver]

Aim

The have well structured pages

• H1 then H2, then H3 etc. consistent, sensible structure. Intuitive for the user to anticipate and navigate.
• landmarks, regions etc that make sense (no more 'favourite space images' on every page!)
• The headings themselves should be descriptive, and easy to distinguish.
• Tables, figures, exercises, (anything that could have a cross reference in the text) should be reflected in the heading structure.

Background

The structure of the pages are not consistent, most of this is about heading levels not being consistent, but regions and landmarks should also be reviewed.

Pages are formed from multiple templates being slotted together, so I propose the parent template pass the heading level to the child so that the heading structure will always be known at the parent level, rather than hard coded into any child templates.

This needs to be done across all themes.

Refer to #4194 for examples of page structure issues.

Consider:

WCAG 1.3.1 - Info and Relationships

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Techniques to meet 1.3.1

WCAG 2.4.6 - Headings and Labels

Headings and labels describe topic or purpose.

Technique G130 - Providing Descriptive Headings

[StephDriver]

from #4194

• Sample 1, item 6. The article name is correctly read out but as a heading level 2. There has been no heading level 1 before this.
• Sample 1, item 7. Author is not a heading of any kind.
• Sample 1, item 13. Keywords has no structure - should be a heading, probably an h4
• Sample 1, item 14. Likewise, how to cite, has no structure, and probably should be an h4
• Sample 1, item 16. Downloads has no structure - should be a heading, probably an h3.
• Sample 1, item 19. Download, Heading Level 3. This seems to be correct structure, but is a repeat of the earlier "downloads" section (see above)
• Sample 1, item 28. unhelpful use of landmarks (banner, main, Favourite Space Pictures region, content information) of which banner and main are the only two that are helpful - content information takes you to the janeway logo at the bottom of the page.
• Sample 2, item 9. Article title is read out correctly but identified as an image - so is the alt for the image, then when moving on, one gets "Research Article" followed by the title again (!) none of which is identified as a heading (should be H1).
• Sample 2, item 10. There is no heading level 1 at all.
• Sample 2, item 23. One Introduction, heading level 2 - This puts the article start on the same heading level as the metadata above it. Structurally this doesn't make much sense. I can see this being on the same level as abstract, i.e. level 2, in which case there should be an H2 for meta under-which keywords, how to cite etc are H3, or There should be an H2 here for 'article' and the Introduction should be an H3. Noting this here, but going down the list I am now looking for consistency of headings with this introduction as it is, at H2.
• Sample 2, item 35. 3.2.1.1 Focus and Linking is inconsistent at H4 (should be H5) - looks like the divs may be wrong too, this is not being coded as within the 3.2.1 div, but at the same level.
• Sample 2, item 55. Share is an h4, indicating that it is a subsection of References
• Sample 3, item 37. Notes is an H2. While this is consistent - is it useful? Would a series of front matter - article - end matter make this more navigable.
• Sample 3, item 40. Download is an H2, the same as References before it, making them neighbouring sections. But Downloads should be the first item in a whole new section - the article itself ended after References.
• Sample 3, item 41. heading 'information' is not informative! Maybe "Publication Information"?
• Sample 3, item 48. Harvard-Style Citation is an H5, but the heading on the main page before the popup was an H2
• Sample 3, item 49. table of contents - this is a strange location for this - maybe put it at the top of the page. And also need to have a 'back to table of contents) link at end of each heading listed from their position in the text.
• Sample 3, item 50. footer is not identified with the 'contentinfo' role.
• Sample 3, item 56. there is an option to log in at the bottom of the page, but not to register
• Sample 4, item 4. Abstract is an H3, but having had the article title as an H1, this should be an H2.
• Sample 4, item 6. Rights should be a heading
• Sample 4, item 11. license information is repeated in the metrics block.
• Sample 4, item 34. tables and figures should feature in the headings structure. Currently just styled text <span class="table-label">Table 1.</span>.
• Sample 4, item 39. authors as H4 when previous heading, references, was an H2. Also, authors have already been listed at top of the page. The two authors sections are not identical, this one includes more information ('Department of Animal Sciences and Industry') than the one at the top of the page.
• Sample 5.1, item 2. Journal tagline "the official journal of..." is an H2. is this good structure, or is it just formatting?
• Sample 5.1, item 6. Research Article is an H4, the previous heading is H1 (but should have been an H2) either way this shouldn't be an H4. It should also be plural as what follows is a list of articles.
• Sample 5.1, item 8. the article title is an H2, and is not a link to the article.
• Sample 5.1, item 18. Review Article is an H4, but is apparently a new section, but articles are H2. Also, make it plural.
• Sample 5.1, item 19. Correction is an H4 - same problem as above with Review Article. There is only one of these, so I will forgive it being singular, but might need to check it has a pluralisation.
• Sample 5.1, item 20. Most Popular Articles is an H2, putting it on the same level as the article headings above it.
• Sample 5.1, item 21. articles listed under 'most popular articles' do not have marked headings. They are not in a list either - in short they are not navigable.
• Sample 5.1, item 23. above the article title is listed, followed by the authors and other details, in this section, the authors are listed first, followed by the article title - this is not consistent and therefore not expected. Similarly, these articles are not listed with any other details, e.g. publication date which is both inconsistent and feels like important information to include.
• Sample 5.2, item 1. no H1
• Sample 5.2, item 3. about this journal is not a heading.
• Sample 5.2, item 4. Latest News posts is not a heading.
• Sample 5.2, item 7. Research is an H2, putting it on same level as the carousel items.
• Sample 5.2, item 8. Article title is an H5
• Sample 5.2, item 10. author name read out after article, but without anything identifying this as the author's name.
• Sample 5.3, item 2. user content - having the homepage headed up as 'about' is confusing.
• Sample 5.3, item 4. Latest News Posts is an H1. there should only be a single h1 heading on a page.
• Sample 5.3, item 6. news article byline is an H4 - but is this really a heading or is the heading being used to format text?
• Sample 5.3, item 10. there are no headings in any of the featured article cards. Each card should include a subheading (article title?)
• Sample 5.3, item 11. article authors appear before title of article, with nothing to audible to indicate that this is/are the authors.
• Sample 5.3, item 15. Volume and Issue number is an H2 - is it part of the featured articles section? Visually this appears to be the next section, not a subsection.
• Sample 5.3, item 18. the article (essay) title is an H2, but this is inside an H3 section. Should be an H4.
• Sample 5.3, item 23. Research Article is an H3, which is consistent with Essay, but having just had an H2 for an article title, appears to be within that article rather than a whole new section.
• Sample 5.3, item 24. featured article cards higher up the page had information in a different order (author then title) compared to these article cards. This is unhelpful for navigation and readability.
• Sample 5.3, item 25. other is an H3, see comment above on Research Article
• Sample 5.3, item 26. there is nothing to tell you you've reached the end of the main content.
• Sample Other, item 2. headings seem to be split when ever there is another tag inside them. I'm not sure whether this is a peculiarity of voiceover or a problem with our HTML. Need to investigate further. It is highly annoying! Because in this article there is a lot of use of <em> inside headings due to the subject matter, and so single headings end up being split as if three different by consecutive headings.
• Sample Other, item 3. despite both being H2, the "Download" heading is larger text than the "1 Introduction" heading. Is there consistency in how these styles are being applied, because otherwise they have the same font, and as font size is indicative of heading level, having H2 of inconsistent size is confusing.
• Sample Other, item 20. something that has become annoying very fast has been navigating by headings, when there are lots of subheadings - need to learn whether this is about my knowledge - i.e. there is a simple way to navigate to the next same level heading, or whether this is purely about page navigability in which case some way to move between same level headings might be good for us to implement.

[StephDriver]

Regions - there is some use of regions, but needs tidying up

Pages should be divided into regions whose purpose is clearly identified by use of an Aria landmark, e.g. navigation, ARIA11 Technique. Other regions can be identified via aria-lablelledby, ARIA13 Technique.

role="region" only appears in OLH theme, and only with the label "Favorite Space Pictures" so its use (and absence) needs to be reviewed, ARIA 20

Banner has been defined for OLH and Clean. All three themes seem to have navigation defined. But other regions, most importantly 'main' cannot be found within the code. Some use of ARIA labelledby but not for regions.

[StephDriver]

grouping roles to identify related form controls

role="group" only appears twice in the code, so it seems highly likely it is missing from other places it should be used.