This page is outdated and belongs to the Gutenberg testing the Accessibility Team did in 2018. We keep this page as it has value within that context. If you want to learn how to test for accessibility, please read the section about testing in the WP Accessibility Knowledge Base.
Please help us improve the WordPress editor!
Install the Gutenberg plugin to start testing. You can find more information about Gutenberg in Introducing a new way to WordPress.
The test below is set up to do the most common tasks for a content manager (who is not a developer). Like add and modify text, headings, images, lists, tables and embeds.
If you participate, please add the following information in your report:
- Date: the date you tested
- Gutenberg: the plugin version you tested (try to always test the latest version)
- Browser: the browser(s) you used
- OS: your operating system
- Test done with: list the assistive technology you used, including version numbers
Note: if you keyboard test on a Mac, read this first: Keyboard Navigation in Mac Browsers.
For screen readers:
- Test VoiceOver only with Safari
- We don’t include results with ChromeVox
We highly appreciate testing with Dragon, JAWS, NVDA, VoiceOver and Narrator
Reporting Results
Before reporting any results, please search the existing issues at GitHub to see if this issue has already been reported. If you find the same issue already listed, add a comment to the issue confirming that the issue is still present.
Documenting issues by writing a post at your own blog, by recording a video of your experience, or by posting directly to GitHub are all appreciated.
You don’t have to solve the issues or provide code. If you can just report the issues you find or any questions you have.
If you have questions about any of the tests, please ask them on Slack or ping @wpaccessibility on Twitter.
Basic tests: Add and Edit a Post
First: add a new post, using the Gutenberg editor.
Set up some content
- enter a title
- add a paragraph with some texts
- add an H3 heading with the text “this is a heading”
- add an image
- add a list of 5 items (cats, dogs, fish, birds, spiders)
- add a table with 2 columns, 2 rows and add some data in the cells
- add the YouTube embed https://www.youtube.com/watch?v=ZbZSe6N_BXs
Actions at the top:
- preview the post
- publish the post
- switch to draft
- hide and display the settings (the wheel)
- Open “Options” (3 dots icon) and switch from visual code editor to code editor and back again
Modify the paragraph
- make a link to https://wordpress.org on one of the words
- align the text to the right when you focus the paragraph
- with the settings on the top, select Fix toolbar to Top: is this usable for you when you change the content of a paragraph?
Block options
Modify the paragraph with the Block options (you can see the blocks by selecting the settings wheel at the top).
- switch on/off the drop cap
- change font size and reset it
- change background colour red
- change text colour light grey
- clear text and background colour
- align the block to the left
- add an additional CSS class wp-caption
Modify a heading
- change the H3 heading into an H2
- make a part of the heading italic
- remove the heading
Modify an image
- add a link to the image
- add a caption below the image
- align image to the right
- change the size of the image using the Block options
Modify the list
- add an item to the list
- delete an item from the list
Modify the table
- add a row
- add a column
- delete a row
- delete a column
Manipulate the blocks
- move the image above the H2 heading
- turn the list into a paragraph
- delete a block
Good luck and thanks!