TinyMCE is failing WAVE accessibility plugin validation

[conner_bw]

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

[afercia]

@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]

Testing the TinyMCE buttons with Firefox and NVDA.

[alh0319]

@afercia are you able to use TinyMCE without a screen reader (as if you were a sighted keyboard only user)? If so, what key combinations are you using to reach it?