🔤 Review Alt-texts, ARIA labels and link descriptions to follow best practices

[RM-1978]

🔤 Copy

Our approach to alternative text descriptions, ARIA labels and descriptive links should already be consistent and follow best practices across the platform, but it never hurts to be sure.

🕵️ Details

Research this indicates that:

To ensure optimal accessibility, best practices for Aria labels are:

• labelling only the elements that need it
• using descriptive and concise text
• Not duplicating readable text

Good ARIA descriptions reference longer content that provides a description.

Alternative text (alt text) is descriptive text which conveys the meaning and context of a visual item in a digital setting. Best practices for writing alt text include:

• accurately describing the content and function of the image,
• using proper punctuation and spelling, and
• not including “image of,” “photo of,” etc.

Good descriptive links should be:

• Concise so users with screen readers can quickly discern the distinguishing information of the link. Each link should make sense if read alone; rewrite to avoid ambiguous text such as ‘visit this page’ or ‘click here’ Unique so users can differentiate between similar but different links
  • Brief and descriptive so users can easily know which link they have navigated and where they will go next.

For example , it is easier to understand Link purpose guidelines than:

• https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=121#link-purpose-in-context or
• Read about links

🙋‍♀️ Proposed Implementation

1. Extract ARIA labels
2. Check them against descriptive links and best practices.
   • Confirm that all aria-labelledby provide the element it references with an accessible name. Update as required.
   • Confirm that all aria-labelledby are not duplicative of descriptive links. Update as required.
   • Confirm that all aria-describedby direct users to a longer content description. Update as required.
3. Extract all Alt texts
4. Confirm that Alt texts describe the meaning (information) and contexts (function) of visual images on the platform.

✅ Acceptance Criteria

A set of assumptions which, when tested, verify that the copy has been added or updated appropriately.

• [ ] ARIA labels follow WAI best practices
• [ ] Alternative texts follow WAI best practices
• [ ] Descriptive links follow best practices

[RM-1978]

@esizer or @mnigh shall we identify if:

• all aria-labelledby and confirm if they provide the element it references with an accessible name
• all aria-labelledby and confirm that tjhey are not duplicative of descriptive links.
• all aria-describedby and confirm if theydirect users to a longer content description.

[petertgiles]

This is important work, but not really actionable by a dev. I suggest creating issues with batches of specific changes as you find them.

[RM-1978]

I will move it over to the Design repository, but I am not really certain if this is currently considered a design issue..

[RM-1978]

@petertgiles, I think we will need a dev to extract the labels