For the past two weeks, I’ve been frustrated by WordPress stripping out my carefully written accessible table HTML whenever the table was edited with the Visual (WYSIWYG) editor. There is no issue when the accessible table markup is edited in the WordPress HTML editor.
I searched online for solutions, asked over a dozen website accessibility experts/activists, and installed three different WordPress plugins:
No luck, none of the plugins would maintain the accessible code when the table was edited in the Visual editor.
Update: To clarify, the HTML that isn’t maintained is the “headers” HTML code on specific data cells. The caption, summary, th and scope HTML code is maintained.
Thankfully, my friend Chris Harrison offered a different approach: use the Disable Visual Editor WYSIWYG plugin, which disables the Visual editor for specific WordPress pages or posts. The plugin is ideal for pages/posts where you need to keep your HTML code intact. It’s a free plugin and easy to setup.
Once you’ve installed and activated the plugin in WordPress, navigate to the page you want to edit. In the right sidebar is the option to disable the Visual Editor. Enable the option and update the page.
Once enabled, the Visual editor will be disabled in the tabs directly above the right side of the editing area.
What I liked about the Disabled Visual Editor WYSIWYG plugin is the ability to enable/disable the Visual editor by page/post. Other plugins disable the Visual editor for all pages/posts on the website.
How do you maintain accessible table code on your WordPress sites?