do these links (in same context) go to the same page?

[StephDriver]

When inserting references as hyperlinks to the bibliography at the end, this results in multiple links having the same non-descriptive text, so that someone pulling up a list of links within the document does not have enough context to differentiate them

[ajrbyers]

• [x] @StephDriver to provide a couple of examples

[StephDriver]

example 1

https://www.iastatedigitalpress.com/mmb/article/id/12951/

the first 2021 link is https://www.iastatedigitalpress.com/mmb/article/id/12951/#r103 the second is https://www.iastatedigitalpress.com/mmb/article/id/12951/#r54

But the text is the same.

<a class="xref-bibr" href="#r103">2021</a>

<a class="xref-bibr" href="#r54">2021</a>

[StephDriver]

example 2 - figures using the same text and alt for the open popup link - I think this may be an XML problem as it seems all figures in this article are titled "Figure 1" such that all links to open a larger figure are also labeled for 'Figure 1'

https://www.iastatedigitalpress.com/mmb/article/id/11683/

[StephDriver]

This might be addressed using aria-label to provide additional context for the link. see https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA8.html

[joemull]

Backlog refinement notes:

When inserting references as hyperlinks to the bibliography at the end, this results in multiple links having the same non-descriptive text, so that someone pulling up a list of links within the document does not have enough context to differentiate them

This needs a bit of comparative investigation. How do others do this? Possible options we thought of:

• add an aria-label to reference and footnote links
• refer to the footnote text with aria-describedby (Andy will add a link below)

example 2 - figures using the same text and alt for the open popup link - I think this may be an XML problem as it seems all figures in this article are titled "Figure 1" such that all links to open a larger figure are also labeled for 'Figure 1'

This part needs more investigation, so Steph will try to find a good example.

[ajrbyers]

Here is a suggestion:

https://kittygiraudel.com/2020/11/24/accessible-footnotes-and-a-bit-of-react/

[StephDriver]

User Story - example 1

• User can read the article.
• Within that, they can understand link purpose for the footnote/citation and make a decision about following the link. Where this relies on visual styling, there should be alternatives for assistive technology such as screen readers.
• If they decide not to follow that link, they can continue reading the article without interruption or diversion.
• If they decide to follow that link, they can then read the additional information, and return to their original position to continue reading the article.
• When presented with a list of all links in the article (e.g. screen reader function to pull up all links) the purpose of the links are distinguishable from each other.

Changes required

• [ ] use aria labels to add context to inline citations
• [ ] implement new functionality so that linked information can be read such taht a return to the original location is possible - whether by a 'pop up' where the original location is not lost, or by a link back at the end of the footnote.

Useful information

W3C example of aria label for additional link context

In this context, Pan et al. (
  <a href="#ref103" aria-label="inline citation">
   2021</a>) used automated....

example of back link at end of footnote

[StephDriver]

example 2

This has now been shown to be a different problem.

• #4149

[joemull]

Here is an idea for how to handle it without losing article location.

Click on the footnote number to open a side pane containing all references that scrolls to the right location. The pane can be dismissed without disturbing your scroll location in the article.

This would be tricky to implement on all of our current CSS frameworks, so we might need to choose one if we go with this solution.

[joemull]

@StephDriver to split off aria-label action item into own issue.

[StephDriver]

Idea - dynamic breadcrumbs

A key problem here is that citations may have a many to many relationship between where they are cited in the text and the list of references. One way around this would be to have dynamic breadcrumbs that are generated as the reader navigate the page, because their following of the links will always be one at a time, so a linear non-branching one to one relationship.

I imagine this as something that sits at the top of the page (easy for anyone to find / navigate towards). Potentially hovers there while scrolling (in some collapsed form on mobile sized screens). As the user passes sections, they are added to the breadcrumbs, but not when fast scrolling, only when page is paused. A precise location is added when internal page links are followed also added to the breadcrumbs. Some way for users to prune the breadcrumbs too (dismiss individual ones) would be a bonus.

I imagine the whole thing as client-side processing, with no actual user tracking beyond their own browser. Lost on refresh or move away from page (make sure to highlight links that will take them away from the page). I think the no-tracking could be important as a philosophical standpoint and fits in with our non-use of cookies. I wonder whether for logged in users it might be different - that we should save the history and allow navigation away from the page.

A system like this would then cover all over kinds of internal link - cross referencing (also many to many), glossaries, examples, notes etc.

I also think that something similar could be useful on the backend for breadcrumbs - it could address the difficulty I had determining useful breadcrumbs on a structural basis for workflows where one clicked between tabs that seem to be on the same 'page'.

[StephDriver]

Backlog refinement discussion - this needs to be pinned down into what is actually being proposed to be done. Sending for more investigation.

[StephDriver]

for the first example:

We know the destination of these links is unique. We can use an 'aria-labelledby' with the destination id. Therefore, in text citations links to the bibliography could have an aria-labelledby connection to their destination anchor.

[StephDriver]

• example 2 is how handed in #4149

[StephDriver]

The same approach could be used for giving context to indices which link to endnotes, as requested in #4245. Therefore combining that with this issue:

Defined tasks for this issue:

• [ ] in text citations links to the bibliography must be contextual.
• [ ] in text indices linking to endnotes must be contextual.

The context they need could be from a combination of aria-label to describe that is is a citation or endnote, followed by aria-describedby with the id of the destination anchor.

See WCAG 2.4.4