`<article>` label is the same for every annotation by the same author

[acelaya]

Currently, each annotation uses an <article> element, which can improve navigation for assistive technology users. However, the article elements have identical labels and headings for annotations by the same person. As a result, when interacting with the annotations through the list of landmarks or headings, landmarks are announced the same for annotations by the same user.

To improve the accessibility and ease navigation between annotations, consider:

• Wrapping the articles in an unordered list (<ul>) tag with each article in a list item (<li>) tag so that the total number of annotations and position may be determined by assistive technology
• Changing the article heading to indicate both who added the annotation and the number, e.g. “Annotation 1 by Lisa Liskovoi”, “Annotation 2 by Lisa Liskovoi”, etc.
• Adding an aria-labelledby attribute and linking it to the article heading (the heading that indicates who posted the annotation)
• Adding an aria-describedby attribute to the article and associating it with the highlighted portion of the annotation.
• To improve accessibility further, an aria-describedby attribute can be added to the edit, reply, and delete buttons to associate them with the annotation as well.

[acelaya]

I think we can't do any of the last three points around using aria-labelledby, because the highlighted text and the annotation card live in different frames.

[robertknight]

See https://github.com/hypothesis/client/issues/6305 for some ideas around things we could add to the label to disambiguate annotations by the same author.