aria-label on links

[lorigregor]

Are there any plans to include a field on the insert/edit link interface so one could add an aria-label? We are required to comply with WCAG standards and this would help us immensely. For example:

<a href="someURL.edu" aria-label="Read more about our MBA Program">Read More</a>

We have both the stand-alone plugin for TinyMCE Advanced (5.2.1) and also WPBakery with TinyMCE integrated on different domains. Our WordPress version is 5.2.4.

I posted this on the TinyMCE Issue Tracker but was told that I needed to log it with WordPress directly. I modified a screen capture to help explain my suggestion and included it in their GitHub: ​https://github.com/tinymce/tinymce/issues/5037

[lorigregor]

Screen capture of the TinyMCE insert/edit link interface with a field added for aria-label

[afercia]

This ticket was discussed during today's accessibility bug-scrub. At the moment there are no plans to include a UI to edit an aria-label attribute for the links in the post content. Worth noting the aria-label attribute is already allowed in the post content, though it needs to be added manually.

There are concerns in giving so much power to content creators because incorrect usage of the aria-label attribute may introduce more harms than goods. Various types of accessibility needs and assistive technologies need to be taken into account.

For example: this would probably work with speech recognition software:
<a href="someURL.edu" aria-label="Read more about our MBA Program">Read More</a>

Instead, this would not work:
<a href="someURL.edu" aria-label="MBA admissions">Admissions</a>

Use of meaningful, visible, text should be encouraged as that's the most accessible option. For these reasons, there was consensus to not introduce such an UI, at least for now.

[lorigregor]

I agree that using descriptive link text is best, however, there are times when that is not ideal given space limitations or verbose text content.

We use Siteimprove and they flag accessibility errors like this where "Two Year" is linked up three times on the page, but each instance goes to a different location. Here is a simple example:

Full-Time MBA
[Two-Year]
[One-Year All Majors]
[One-Year Business Majors]

Online MBA
[Two-Year]
[Hybrid One-Year]

Weekend Professional MBA
[Two-Year]
[Two-Year South Florida]

The only way around this is to be verbose:

Full-Time MBA
[Full-Time MBA: Two Year]
[Full-Time MBA: All Majors]
[Full-Time MBA: One-Year Business Majors]

Online MBA
[Online MBA: Two-Year]
[Online MBA: Hybrid One-Year]

Weekend Professional MBA
[Weekend Professional MBA: Two-Year]
[Weekend Professional MBA: Two-Year South Florida]

This affects our menus as well, where being verbose like the above example is out of the question for our non-visually impaired users. Being able to add an aria-label would solve this issue while allowing visually impaired users to tab through the page from link to link and know exactly where the link would be taking them. Siteimprove says the following...

Link text used for multiple different destinations
Description of this issue:
The same link text is used for links going to different destinations. Users might not know the difference if they are not somehow explained.
How to fix it:
Make sure links are distinguishable by just their link texts or WAI-ARIA labels ('aria-labelledby' or 'aria-label') to make it clear that they lead to different destinations.

---

One of the methods to fix this issue: ​https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html

We are using some custom elements and have included a field for things like buttons so people can add an aria-label and it has worked out well.

I would imagine that anyone who doesn't know how to use the aria-label knows nothing of accessibility and would likely leave it blank. I have done my best to educate our website editors on this so they use it properly, however, ideally, there could be a tip icon that instructs people what the field is for. I am not sure how this could do more harm than good when a person is editing a website and could do more harm than good at any point in their editing. Perhaps the editing view could even show what the aria-label is so it doesn't get forgotten when the link changes.

For those of us required to make our website accessible, this would be a big help. If not now, please do consider adding this feature and one like it in the menu interface. I'll do a happy dance, if you do.