WordPress Playground Demo: Accessibility issues

[jonathanbossenger]

This issue serves to track individual accessibility issues found on the WordPress Playground demo at https://developer.wordpress.org/playground/demo.

These issues were surfaced using the Axe DevTools®: Digital Accessibility Testing Tools, available as an extension for Firefox or Chromium based browsers.

To view the individual issues, install the extension on your browser of choice, browser to the Playground demo site, enable the browser Developer Tools, and switch to the axeDevTools tab.

Then, select the Scan all of my page options.

Issues

• [x] #613
  • PR https://github.com/WordPress/wporg-wasm/pull/10
• [x] #614
• [x] #615
  • PR https://github.com/WordPress/wporg-wasm/pull/11
• [x] #616
• [x] #617
  • PR https://github.com/WordPress/wporg-wasm/pull/12
• [x] #618
  • PR https://github.com/WordPress/wporg-wasm/pull/13
• [x] #619
  • PR https://github.com/WordPress/wporg-wasm/pull/14
• [x] #659
• [x] #658
• [x] #657

[dmsnell]

@jonathanbossenger I left notes in each individual issue, but it looks like we're trying to fix things that are evident in a third-party site embedding the Playground but which aren't problems in the Playground itself.

Do you know where the developer.wordpress.org/playground code is? Also at least one of these reported issues appears to come from the twentytwentythree theme, so that issue needs to be taken up there as there's no way to solve it here.

[jonathanbossenger]

@dmsnell aha, interesting. Thanks for reviewing these and pointing this out.

I do not know where the demo code is, but I can only assume it's somewhere in the https://github.com/WordPress/wordpress.org repository. I'll do some digging on Monday, and if needed, log the upstream issues there.

I'll also look into the twentytwentythree related issue at the same time, and either report back, or log the upstream issue.

[jonathanbossenger]

Thanks to @dd32 I found the playground demo code https://github.com/wordpress/wporg-wasm.

[sejas]

I'll be working on some of these issues during contributors day 🙌

[sejas]

I created 5 PRs that solve https://github.com/WordPress/wordpress-playground/issues/613, https://github.com/WordPress/wordpress-playground/issues/615, https://github.com/WordPress/wordpress-playground/issues/617, https://github.com/WordPress/wordpress-playground/issues/618 and https://github.com/WordPress/wordpress-playground/issues/619

• PR https://github.com/WordPress/wporg-wasm/pull/10
• PR https://github.com/WordPress/wporg-wasm/pull/11
• PR https://github.com/WordPress/wporg-wasm/pull/12
• PR https://github.com/WordPress/wporg-wasm/pull/13
• PR https://github.com/WordPress/wporg-wasm/pull/14

For https://github.com/WordPress/wordpress-playground/issues/614, it seems the iframe comes from content inside the iframe. Probably core or the theme. For https://github.com/WordPress/wordpress-playground/issues/616 I couldn't reproduce using Axe.

Someone can take a look to the PR's? I'm happy to help setting up the environment.

[jonathanbossenger]

Thank you so much for this @sejas.

I will try and see if I can find some time to retest #616, maybe it's been fixed with a theme update.

[adamziel]

@jonathanbossenger All the reported issues are now fixed. For a better read we'd need to test using actual assistive technologies like screen readers – what's your opinion on this @jonathanbossenger?

Also, what's the use-case we're solving for here? I'm asking because I noticed you posted a screenshot from https://developer.wordpress.org/playground/demo which is an app built on top of Playground to showcase what's possible. The actual demo where you get all cool features like blueprints or different PHP and WP versions is https://playground.wordpress.net/.

[jonathanbossenger]

For a better read we'd need to test using actual assistive technologies like screen readers – what's your opinion on this @jonathanbossenger?

To be honest, when I was still a developer, I only ever used Axe DevTools, and that was enough for my requirements at the time. So when it was reported to me that the playground demo was not accessible (see below), that's all I had to refer to.

Perhaps we could see if someone from the Accessibility team is available to test this out and provide additional feedback. I will report back to the person who originally flagged this, and see if they can help as well.

Also, what's the use-case we're solving for here?

The original use case was not even the playground demo, but my attempt to have the interactive code block added to Learn WordPress. I you read in the comments, as the playground demo was not accessible, which is the public-facing "product" that folks can use, it's assumed that anything that uses WP Playground is also not accessible.

I noticed you posted a screenshot from https://developer.wordpress.org/playground/demo which is an app built on top of Playground to showcase what's possible. The actual demo where you get all cool features like blueprints or different PHP and WP versions is https://playground.wordpress.net/.

That might also be part of the problem as https://developer.wordpress.org/playground/demo is what is linked to from Learn WordPress, and this is one of the reasons that the button that opens playground on our courses includes a note that "Note that WordPress Playground is currently undergoing accessibility testing" - see example here.

So perhaps we should be using https://playground.wordpress.net/ on Learn WordPress instead?

I would also point out that running AxeDevTools on https://playground.wordpress.net/ also shows accessibility warnings.

[adamziel]

@jonathanbossenger would you post a screenshot of these warnings? Here's what I see:

[jonathanbossenger]

Sure, this is what I see. I have Best Practices On, looks like yours are off.

I don't use a screen reader, so I have no idea how important the best practices are, but I tend to err on the side of caution in these things.

[flexseth]

• https://github.com/WordPress/wordpress-playground/issues/1185

Tagging for visibility if anyone wants to tackle an accessibility challenge!

[adamziel]

For context – we need to check whether Axe DevTools with "Best Practices" on report any issues, and then either:

• Close this issue if there are no more problems
• List those problems here

[flexseth]

Self-assigned.

Didn't realize the contributor day was geared towards documentation, I'll try to close out some of the issues linked to the original post that aren't docs related.

[ironnysh]

I can help with that (testing and opening a PR to fix HTML and CSS issues). -- @flexseth

[flexseth]

I can help with that (testing and opening a PR to fix HTML and CSS issues). -- @flexseth

THANK YOU!! 🤙

[adamziel]

@ironnysh fixed the last accessibility issues in https://github.com/WordPress/wordpress-playground/pull/1246, yay! Let's close this issue and use https://github.com/WordPress/wordpress-playground/issues/1248 to make sure no new issues get merged in the future.