Description
"Pages for logged out editors (learn more)" reads out the following with VO in Chrome and Safari.
- "Pages for logged out editors ("
- "link, learn more"
- ")"
Video: https://jmp.sh/11WcFgz
This is a suboptimal experience for users with assistive tech because:
- The link text is not descriptive on its own. https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html
- The parentheses are distracting, and make it harder to understand the text.
The "Pages for logged out editors" label is not associated with the "Talk" and "Contribution" links, which means that context would be lost if the user is navigating by links.
Developer notes
The following changes could fix the issues above:
- Use pseudo element for the parentheses
- Override the default "learn more" link label with aria-label
Associate the "Talk" and "Contribution" links with the "Pages for logged out editors" by using the aria-describedby.
<div class="vector-user-menu-anon-editor">
<p>
Pages for logged out editors
<a href="/wiki/Help:Introduction" aria-label="Learn more about anonymous editing">
:before
<span>learn more</span>
:after
</a>
</p>
</div>
<ul class="vector-menu-content-list" style="margin-right: initial;">
<li id="pt-anontalk">
<a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [ctrl-option-n]" accesskey="n"><span>Talk</span>
</a>
</li>
<li id="pt-anoncontribs">
<a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [ctrl-option-y]" accesskey="y"><span>Contributions</span>
</a>
</li>
</ul>CSS generated content is read-out to screenreaders.
In order to remove the verbose parentheses at least for Chromium based browsers we need to add alternative content for assistive technology:
// Support: Firefox, Safari. Backwards-compatible generated content. content: '@{msg-parentheses-start}'; // Support: Chromium based browsers. Alternative technology supporting generated content. content: '@{msg-parentheses-start}' / '';
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T288293#7332744 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T288293#7339269 |
