WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#47028 closed enhancement (reported-upstream)

TinyMCE is failing WAVE accessibility plugin validation

Reported by: conner_bw Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.1.1
Component: TinyMCE Keywords:
Focuses: accessibility Cc:

Description

During a recent accessibility audit at Pressbooks, we were informed that pages with Tiny MCE failed to pass WAVE tests. (web accessibility evaluation tool)

Steps to reproduce:

1) Install and turn on Classic Editor Plugin
2) Go to Add New posts screen
3) Enable WAVE plugin

Expected: No errors
Actual: Many errors, all in TinyMCE

Related: https://github.com/tinymce/tinymce/issues/4465

Attachments (2)

tiny-mce-wave-fail.png (221.7 KB) - added by conner_bw 2 years ago.
TinyMCE buttons Firefox NVDA.png (93.7 KB) - added by afercia 2 years ago.
Testing the TinyMCE buttons with Firefox and NVDA.

Download all attachments as: .zip

Change History (4)

#1 @conner_bw
2 years ago

  • Type changed from defect (bug) to enhancement

#2 @afercia
2 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

@conner_bw thanks for your report! As you may know, TinyMCE is an external library and there's not so much WordPress can do to directly change its code. I see the issue has been already reported upstream, so I'd lean towards closing this ticket.

That said, this is a border-line case and very close to WAVE reporting false positives. While the markup used by TinyMCE for the toolbar buttons is a bit unusual, I'd argue WAVE doesn't understand the necessary semantics and labelling are rebuilt with ARIA roles and attributes on the <div>s that wrap the buttons. This particular markup may not be 100% compliant (technically, role="presentation" is not allowed on button elements) but it works in the real world.

Worth considering all the automated "accessibility checkers" always require manual checking. They help a lot in identifying the most common violations but sometimes they just can't understand what's going on.

As far as I can tell, all the TinyMCE buttons are announced properly and are operable with keyboard and screen readers. The only exception is the "Text color" button: this is a known issue, see for example ticket:35710#comment:30 and hopefully will be fixed in the next TinyMCE versions.

@afercia
2 years ago

Testing the TinyMCE buttons with Firefox and NVDA.

Note: See TracTickets for help on using tickets.