Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix accessibility issues found by Axe #1246

Merged
merged 1 commit into from
Apr 16, 2024
Merged

Fix accessibility issues found by Axe #1246

merged 1 commit into from
Apr 16, 2024

Conversation

ironnysh
Copy link
Collaborator

What is this PR doing?

Fixes two accessibility issues found when scanning https://playground.wordpress.net (i.e., the generic instance) with axe DevTools.

See discussion in #612.

What problem is it solving?

Makes Playground more accessible.

How is the problem addressed?

Testing environment: Arc/Chromium with the Axe DevTools (axe-core version 4.8.4) extension. The Best Practice option is enabled.

Findings:

  • The first test found 22 issues
  • The second test, with the wp-admin-bar hidden using CSS, found 4 issues
  • The third test, with the Twentytwentyfour navigation hidden using CSS, found 2 issues. Only these last two are generated by Playground.

Left: First scan. Right: Third scan:

First-scan Playground-generated-a11y-issues

Both issues affect Playground's address bar area:
Issues

Solutions:

  1. To solve issue number 1, Form elements should have a visible label:
    change the title attribute of <input class="_input_845jo_7" name="url" type="text" title="URL to visit in the WordPress site, like&quot;/wp-admin&quot;" autocomplete="off" value="/"> to aria-label (i.e., aria-label="URL to visit in the WordPress site, like&quot;/wp-admin&quot;").

  2. To solve issue number 2, All page content should be contained by landmarks:
    change <div class="_toolbar_8xy06_95">...</div> to <header aria-label="Playground toolbar" class="_toolbar_8xy06_95">...</header>

See screenshot after applying the changes:
After-the-fix

Testing Instructions

Run a scan with axe DevTools (enable the Best Practice option)

Copy link
Collaborator

@bgrgicak bgrgicak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the improvement! Let's just make sure it passes all tests before merging it.

@adamziel
Copy link
Collaborator

This is fantastic! Thank you @ironnysh 🎉 🎉 🎉

@adamziel adamziel merged commit 25796da into trunk Apr 16, 2024
5 checks passed
@adamziel adamziel deleted the fix-a11y-issues branch April 16, 2024 08:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants