Make sure the aria-label for the "Logged in as" link in comment form is containing the same string as the visible text

[juliemoynat]

Hi,

In the comment template, for the "Logged in as" link, there is an accessibility problem for speech-input users (WCAG failure to ​Label in name criterion).

Actually, in English, we have two strings:

• Logged in as %s. Edit your profile.
• <a href="%1$s" aria-label="%2$s">Logged in as %3$s</a>. <a href="%4$s">Log out?</a>

But, in the French translation (and I think the error may be present in other translations too), we have this:

<a href="/wp-admin/profile.php" aria-label="Connexion en tant que pseudo. Modifier votre profil.">Connecté en tant que pseudo</a>

The aria-label is different from the visible text and is using different translations for "Logged in" ("Connexion" and "Connecté") while it must be the same.

I think it's not really a translation problem. I think that, by development, we should take the visible text string and put it into the aria-label string to translate it only once and prevent errors.

[SergeyBiryukov]

Hi there, welcome back to WordPress Trac! Thanks for the ticket.

Adding a patch with what I think a fix could look like.

[joedolson]

What purpose does this aria-label attribute actually serve? If there's visible text inside the link, I can't see any benefit to retaining the aria-label here.

[joedolson]

This was introduced in [34525]. It looks like the intent was to provide greater context for screen readers than the default text offered; but I think that's not necessary or helpful. As long as the link's text provides meaningful linking content, the aria-label is unnecessary.

I think we should remove aria-label entirely in this context.

[SergeyBiryukov]

Replying to joedolson:

This was introduced in [34525]. It looks like the intent was to provide greater context for screen readers than the default text offered; but I think that's not necessary or helpful. As long as the link's text provides meaningful linking content, the aria-label is unnecessary.

I think the "Edit your profile" part was the point here, per comment:20:ticket:29974 and comment:23:ticket:29974:

that link points to your profile but the link text is your display name, this could be confusing when read out of context. To be honest, I think it's not so clear also for sighted users :)

Does "Edit your profile" in the label makes the link a bit less confusing?

[juliemoynat]

If the link label is confusing, here, it's a problem for everyone, not only people using a screen reader. Even if you read the link in its context, there is no information to know the link allows you to modify your profile (there's a heading "Leave a comment" before and then a "Logout" link in the same paragraph + the required fields text, that's all).

It's a UX problem trying to be solved through accessibility spectrum.

If the link label needs clarification, I think it should be for everyone (or no one).

We could have <a href="">Logged in as PSEUDO (Edit your profile)</a> without aria-label. Same label for everyone.

What do you think?

[lopo]

During the Yoast Contributor Day, we discussed about this ticket and came out with a new patch.
The idea is that the link should just convey the information about its purpose ("Edit your profile") while the information "Logged in as Jane Doe" should just be simple text.

Props to @afercia, @SergeyBiryukov, @poena, @aristath

[juliemoynat]

I like this idea!

[audrasjb]

Before patch

[audrasjb]

After patch

[audrasjb]

The two above screenshots show the difference before/after applying the patch. It looks pretty good to me.

That being said, there's an issue in Twenty Twenty: links are not identified. I'll open a ticket for that :D

In the meantime, I'll share a video screenshot below, so we can validate the implementation :)

[audrasjb]

After patch, with links hovering

[joedolson]

Accessibility team agrees that this would be a good solution. Let's move it forward!

The related Twenty Twenty ticket is #56269.

[audrasjb]

Great! Let's roll!

Trac ticket: https://core.trac.wordpress.org/ticket/55718

[audrasjb]

Added a PR just to make sure unit tests are passing.

[audrasjb]

In 53796:

Comments: Improve accessibility of the "Logged in as" link in comment form.

This changeset ensures the "Logged in as" link conveys the information about its purpose ("Edit your profile") while the information "Logged in as Jane Doe" is only a simple text.

Props juliemoynat, SergeyBiryukov, joedolson, audrasjb, lopo.
Fixes #55718.

Committed in https://core.trac.wordpress.org/changeset/53796