[wp-trac] [WordPress Trac] #48609: aria-label on links

[WordPress Trac]

#48609: aria-label on links
-----------------------------+----------------------------
 Reporter:  lorigregor       |       Owner:  (none)
     Type:  feature request  |      Status:  closed
 Priority:  normal           |   Milestone:
Component:  Editor           |     Version:
 Severity:  normal           |  Resolution:  maybelater
 Keywords:                   |     Focuses:  accessibility
-----------------------------+----------------------------

Comment (by 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/H33.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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48609#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform