Skip to content

Add axe-core automated accessibility tests - #13348

Open
afercia wants to merge 7 commits into
WordPress:trunkfrom
afercia:add-axe-core-tests
Open

Add axe-core automated accessibility tests#13348
afercia wants to merge 7 commits into
WordPress:trunkfrom
afercia:add-axe-core-tests

Conversation

@afercia

@afercia afercia commented Sep 1, 2026

Copy link
Copy Markdown
Member

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

Proof Of Concept (POF) to add axe-core accessibility tests for the admin pages.

For now, this POF only scans one page.
Re-introduces the bug fixed in https://core.trac.wordpress.org/changeset/62851 for testing purposes.

  • Make sure your local environment is correctly set up to run the E2E tests.
  • Run npm install and then build.
  • IMPORTANT NOTE: running the e2e tests will delete all your posts. Make a backup first.
  • Run: npm run test:e2e -- tests/e2e/specs/accessibility.spec.js
  • Observe the test reports 1 violation (the one intentionally re-introduced as mentioned above).
  • Observe the output:
--- Violation #1 ---
Rule ID:   select-name
Impact:    CRITICAL
Failure:   Ensure select element has an accessible name
Help:      Select element must have an accessible name
Help link: https://dequeuniversity.com/rules/axe/4.13/select-name?application=playwright
Failing elements:
  - Target Selector: #media-attachment-date-filters
  - HTML Snippet:
<select id="media-attachment-date-filters" class="attachment-filters"><option value="all">All dates</option></select>

Axe documentation:

@axe-core/playwright documentation:
https://github.com/dequelabs/axe-core-npm/blob/develop/packages/playwright/README.md

Axe JavaScript Accessibility API
https://github.com/dequelabs/axe-core/blob/master/doc/API.md

Use of AI Tools

AI assistance: Yes
Tool(s): GitHub Copilot
Model(s): Claude Haiku 4.5
Used for: test suggestions; final implementation and tests were reviewed and edited by me.


This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

@github-actions

github-actions Bot commented Sep 1, 2026

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props afercia, joedolson, sabernhardt.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@afercia afercia changed the title Add axe-core autoamted accessibility tests Add axe-core automated accessibility tests Sep 1, 2026
@github-actions

github-actions Bot commented Sep 1, 2026

Copy link
Copy Markdown

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

  • All changes will be lost when closing a tab with a Playground instance.
  • All changes will be lost when refreshing the page.
  • A fresh instance is created each time the link below is clicked.
  • Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
    it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

Comment thread tests/e2e/specs/accessibility.spec.js Outdated
runOnly: [ 'wcag2a', 'wcag2aa' ],
rules: {
// This is only to test how to disable a rule.
'aria-allowed-role': { enabled: false },

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Note that axe-core will report the group role added to the list item in the admin bar as a violation. Looks liek that's a known false positive. See dequelabs/axe-core#4910 and dequelabs/axe-core#3439

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Yes, that's well known; it's been reported against core a few times already. (Searched for the tickets, but didn't find them immediately.)

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Update: the axe-core rule aria-allowed-role runs only if the configuration allows to run the best-practice set of rules. In fact, this is a separate group of rules as aria-allowed-role isn't strictly required by the WCAG. We should make a decision on whether to run the best-practice rules as they may add many reported violations. Maybe we could introduce a flag to run them optionally.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants