Revise article internal cross references

[StephDriver]

Background

Cross referencing, and returning back to the original position having followed up on a cross reference are important for the readability of articles. This needs to work better. Our current situation is outlined below:

Currently

• cross references to other sections (e.g. a 'see section 4') are not consistently marked up as internal links, even within the same article, some will be marked as links, some will be plain text.
• The indices used to indicate an endnote are not contextual links
• Material theme does allow for return from endnote to original position, but does not have contextual links for this, with all such links being 'carat' ^ which is also too small a target for accessible selection.
• for figures, there is no distinction made between the cross-reference link to the figure, and the link which enlarges the figure.
• references don't have a way back to the text, as described in #3242
• handling of references is also discussed in #3939

Task

• revise how cross references to other sections of the main text are handled
• improve endnote handling (contextual links)
• improve reference handling (contextual links, and ability to return to main text)

[StephDriver]

Examples from #4194

• Sample 2, item 25. When following the link to a reference (link goes to References section), there is no way to return to the original position.
• Sample 2, item 26. Endnote indices do not indicate that they are endnotes rather than just a number - contextual links needed.
• Sample 2, item 28. Missing internal cross-ref. "see discussion in §3 below" without any link.
• Sample 2, item 49. '] used with the carat as the only link text within notes are problematic. All of them end with these, so there is nothing to differentiate them, and repeated 'carat, link' is unhelpful when traversing the document by links.
• Sample 3, item 17. endnote not a contextual link (just the number read out)
• Sample 3, item 19. the end not link back to the original reading position is not contextual (just read as 'carat') such that all end notes have links that are read out identically.... imagine navigating by link 'carat, link, carat, link, carat, link...'
• Sample 3, item 28. cross reference to Sections VIII-IX. should include an internal link
• Sample 3, item 39. reference links should be contextual
• Sample 4, item 19. figure 1 cross ref is adjacent to figure one, such that the link is pointless.
• Sample 4, item 23. both the link to the figure at the end of the previous paragraph, and the figure itself are contextually given as 'figure 1' but one is a cross reference to that part of the page, and the other opens the enlarged version. They are also adjacent so this reads as "figure 1, link, figure 1, image, link"
• Sample Other, item 15. I am struggling to get the internal links back and forth to endnotes to work well. Need to find out whether this is my inexperience with screen readers or a functional issue with the code.

[StephDriver]

Note that the ^ is too small to be a link, the minimum size is given by WCAG 2.5.8 as 24 px by 24 px.

It is only 6.5px by 20.8px.

[StephDriver]

Dynamic page breadcrumb is for future discussion.

@StephDriver Split this into individual issues for more immediate work.

[StephDriver]

Revising and defining the work required on this issue

handled elsewhere

cross references to other sections (e.g. a 'see section 4') are not consistently marked up as internal links, even within the same article, some will be marked as links, some will be plain text.

• This is a matter of user content - added to placeholder for Phase 2 issues #4085

The indices used to indicate an endnote are not contextual links

• indices for endnotes should be connected to their destination anchor by aria-labelledby to give them context - the same approach as is being used for citation links in #3939 so I have added this to that issue.

to do here

Material theme does allow for return from endnote to original position, but does not have contextual links for this, with all such links being 'carat' ^ which is also too small a target for accessible selection.

• [x] style the carat to make it meet WCAG 2.5.8

for figures, there is no distinction made between the cross-reference link to the figure, and the link which enlarges the figure.

• [ ] update 'enlarge figure' links to state exactly that - that they enlarge the figure. An aria-label could be used here, but I'd prefer the link itself to be visually obvious as to its purpose.

[joemull]

@StephDriver to create a separate issue for the carat, to investigate what others are doing and design the content and appearance of the back reference button.

This issue is now just about the other button for enlarging figures.

[StephDriver]

style the carat to make it meet WCAG 2.5.8

and

@StephDriver to create a separate issue for the carat, to investigate what others are doing and design the content and appearance of the back reference button.

this is now set as:

• 4446