Accessibility: "My Site(s)" doesn't respond to screen readers.

[arinoch]

Quick summary

When using a screen reader (VoiceOver on Mac, Nonvisual Desktop Access (NVDA) or JAWS for Windows (JFW) on Windows), the "my site(s)" button does nothing.

Steps to reproduce

1: Turn on a screen reader.
2: Go to WordPress.com.
3: Click on "my site" using the screen reader's appropriate command for doing so (check screen reader documentation to find the command for the screen reader you're using).

What you expected to happen

I assume a list of your sites on wpcom should pop out.

What actually happened

Unsure if it changes on screen, but the screen reader sees nothing as a result.

Context

I am a screen reader user, and have interacted with other screen reader users (not about this issue) as an HE. I have verified the issue exists directly.

Operating System

No response

Browser

No response

Simple, Atomic or both?

No response

Theme-specific issue?

No response

Other notes

No response

Reproducibility

Consistent

Severity

No response

Available workarounds?

Yes, easy to implement

Workaround details

Enabling the classic view, or navigating to wp-admin on any of your sites, will give you the option to "brows sites". That will redirect the user to https://wordpress.com/home as it should. If you know the URL already, you can target it manually, or bookmark the site list.

[yansern]

It takes 11 tabs to go to Switch Site.
It takes a lot of tabbing to go to Browse Site.

Browse Site tells you the number of available sites.
Clicking on Browse Site navigates to another page showing a list of sites.

Switch Site doesn't tell you the number of available sites (to be reconfirmed).
Clicking on Switch Site shows the list of sites in the side panel (this could be a source of screen reader confusion).

The search input for site list is already being focused on, while the voiceover description of the search input is not very descriptive (it doesn't explain that the search input is to search for the list of sites).

More investigation will continue later.

[arinoch]

It takes 11 tabs to go to Switch Site.

Screen reader users rarely, if ever, use tab to navigate websites due to how overly inefficient it is. Apple, in fact, makes no mention of it in their website navigation documentation. In short, navigating a website by way of the tab key is neither recommended nor supported.

[yansern]

@arinoch Thanks! How do you navigate quickly throughout the elements of the page? Using the rotor menu?

Particularly what are the steps that you take for you to get to "Browse Sites" on the wp-admin version?

[arinoch]

@yansern - I use one of a few ways, depending on the screen reader I'm using. On my current system, the "My Sites" button appears to be at the top of what I read. So I'll navigate to the top of the screen, then arrow down until I land on it (this would be DOM mode). Or, if I feel like shaving an extra 3 seconds, I'll make use of the quick nav utility, which has a hotkey to jump me to anything that happens to be labeled a button (as "My Sites is, currently).

[p-jackson]

The "My Sites" button was recently changed in Calypso so that it always sends the user back to "My Home". It was done to fix #49847, and "My Home" was chosen because it's the default sub-section within "My Sites" and clicking "My Home" should feel like being taken back to the "top" of "My Sites". In the same way that clicking the top-level "Reader" link always takes the user back to the top-level of the reader.

I realise now that this has only been changed in Calypso and not in wp-admin. We should make the change there too so that the behaviour matches. But does this change improve things @arinoch?

The styling of the "My Sites", "Reader" and account management links in the top-level nav bar sort of implies that it's a tab control of sorts. When you're on My Home or site settings, for instance, you're within the "My Sites" section of WordPress.com. But that's just styling, and I doubt it's semantically marked up that way.

[arinoch]

@p-jackson - Sorry I'm just getting back to this now. In that it returns me to "my home", yes it does as advertised. However, if it is also supposed to pop out a list of your sites if you have multiples, it still does not do this.

[worldomonation]

I tried to reproduce this issue in my environment. Note that I'm not familiar with a11y so if you find issues with my methodology, please do let me know.

• environment: macOS Ventura
• browser: Firefox Nightly 115
• screen reader: VoiceOver

1. enable VoideOver.
2. hit tab until the My Sites button is highlighted.
3. hit CTRL + OPTION + SPACE to dispatch a click action.

The link could not be clicked using VoiceOver. It can be clicked using a mouse click.

Screen.Recording.2023-05-16.at.3.36.13.PM.mov

[worldomonation]

I noticed that there is a different callout from VoiceOver when the My Sites is clicked manually vs highlighted using the screen reader.

Screen reader: Leaving navigation. Entering your site <site_name>...
Mouse click: visited, link, My Sites, ...

I wonder if the way the My Sites link is set up means the button is never truly highlighted when using a screen reader?

Edit: on Edge, I was able to click on the My Sites link using VoiceOver. The readout was also different than Firefox.

[p-jackson]

on Edge, I was able to click on the My Sites link using VoiceOver. The readout was also different than Firefox.

This seems to be a difference between Chromium browsers and Firefox because I observed the same behaviour using Arc. The difference in behaviour appears to be that if you ctrl+option+space a link (i.e. an <a>) in Firefox, and the link's target matches the page's current URL, then nothing happens. But in Chromium if you ctrl+option+space this link, it will trigger a page load. This might be an intentional design decision, but in any case, I don't think it's something we can control.

When this issue was opened the "My Sites" link wasn't marked up using a link tag, but now that it is I think the HTML semantics are correct.

In that it returns me to "my home", yes it does as advertised. However, if it is also supposed to pop out a list of your sites if you have multiples, it still does not do this.

I think this is where the remaining issue is. The "My Site" link has a title attribute which says "View a list of your sites and access their dashboards", but this message is misleading. A less misleading—but more verbose—title might say: "View the dashboard of your most recently accessed site and access a site switcher to manage your other sites".

But even this verbose title wouldn't be enough. The video @worldomonation shared above demonstrates a situation where clicking the My Site link jumps the user to the launchpad experience and that doesn't even include a site switcher.

The information architecture of Calypso's main nav bar isn't very clear. I proposed something to address it on P2, but it'd be a pretty big change: pdKhl6-1up-p2

Here's a proposal: we change the title for "My Sites" to something very generic like "Manage your sites".

I think it makes sense in the context of the top navigation bar. The three most important links in the top nav are "My Sites", "Reader", and "My Profile". That means when you're in Calypso you're either managing your profile, reading in The Reader, or managing one of your sites.

[arinoch]

@p-jackson - your assessment of the current status of this issue is correct. It behaves as expected with a screen reader if you have only one site - tested with a user account in latest Chrome. It does not respond at all if you have multiple sites - tested on my regular account also with latest chrome. The workaround I mentioned up here is still the correct answer until that is corrected.

[p-jackson]

Changing the behaviour of the My Sites link, so that it navigates users with multiple sites to https://wordpress.com/home, feels like a fairly large design change. I wouldn't call it a work around.

The fact that we currently favour the last-interacted-with site is an implicit design decision, so if you wanted to advocate for that sort of change I think it'd be better to do that on P2.

The reason I suggest just updating the link's title is that it fixes the markup so it better reflects the current design. And then we advocate for the change outside of GitHub where designers will weigh in.

[p-jackson]

I've put together a small PR for updating the link description. But I've also done more testing of the My Sites link on wp-admin and in the mobile layout. I'm so used to thinking about how My Sites works in the Calypso desktop view that I never realised how different things were in these other situations.

On mobile, the link is used to toggle the sidebar. I knew the sidebar was toggle-able on mobile, but I didn't realise it was reusing the same My Sites DOM element to trigger the toggling. It should probably be a different DOM element so it can have different semantics.

In wp-admin, clicking the My Sites link doesn't navigate the user but instead shifts keyboard focus to the sidebar. This is behaviour that was meant for the mobile layout that is being run in the desktop layout.

We should:

• Make the behaviour of the My Sites links in Calypso and wp-admin should be the same
• Make the link work like a link on desktop
• Make the sidebar toggle work like a sidebar toggle on mobile
• Make the markup for these controls semantic so they work correctly with screen readers

[davemart-in]

We removed the "My Site" button with the latest round of nav redesign changes. I'm going to close this issue as a result.