Title: Gutenberg Accessibility Testing Author: Rian Rietveld Published: March 6, 2018 Last modified: January 22, 2023 --- # Gutenberg Accessibility Testing Please help us improve the WordPress editor! Install the [Gutenberg plugin](https://wordpress.org/plugins/gutenberg/) to start testing. You can find more information about GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. [https://wordpress.org/gutenberg/](https://wordpress.org/gutenberg/) in [Introducing a new way to WordPress](https://wordpress.org/gutenberg/). 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 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. 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 technologyAssistive technology **Assistive technology** is an [umbrella term](https://en.wikipedia.org/wiki/Umbrella_term) that includes assistive, adaptive, and rehabilitative devices for [people with disabilities](https://en.wikipedia.org/wiki/Disability) and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the [technology](https://en.wikipedia.org/wiki/Technology) needed to accomplish such tasks. [https://en.wikipedia.org/wiki/Assistive_technology](https://en.wikipedia.org/wiki/Assistive_technology) you used, including version numbers **Note**: if you keyboard test on a Mac, read this first: [Keyboard Navigation in Mac Browsers](http://www.weba11y.com/blog/2014/07/07/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](https://github.com/WordPress/gutenberg/issues) 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 GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged by the repository owner. [https://github.com/](https://github.com/) 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 SlackSlack Slack is a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/). The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/) or pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” [@wpaccessibility](https://twitter.com/RianRietveld) 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? ### BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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 CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. 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! ### Share this: * [ Threads ](https://make.wordpress.org/accessibility/gutenberg-testing/?share=threads) * [ Mastodon ](https://make.wordpress.org/accessibility/gutenberg-testing/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/accessibility/gutenberg-testing/?share=bluesky) * [ LinkedIn ](https://make.wordpress.org/accessibility/gutenberg-testing/?share=linkedin) * [ X ](https://make.wordpress.org/accessibility/gutenberg-testing/?share=x) * [ Facebook ](https://make.wordpress.org/accessibility/gutenberg-testing/?share=facebook) * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Faccessibility%2Fgutenberg-testing%2F%23respond&locale=en_US) 1. ![](https://secure.gravatar.com/avatar/b7dbc76934c3ca484e3b4caa7e9784918451a304fbc19bcd8ae77739cf414ec1? s=32&d=mm&r=g) 2. [Rian Rietveld](https://profiles.wordpress.org/rianrietveld/) 9:24 am _on_ March 6, 2018 3. Initial post with test results: [Keyboard test Gutenberg, a first try](http://rianrietveld.com/2018/03/05/keyboard-test-gutenberg-first-try/) 4. ![](https://secure.gravatar.com/avatar/b7dbc76934c3ca484e3b4caa7e9784918451a304fbc19bcd8ae77739cf414ec1? s=32&d=mm&r=g) 5. [Rian Rietveld](https://profiles.wordpress.org/rianrietveld/) 9:17 am _on_ March 7, 2018 6. YouTube with demo on how (not) to [add a title using Dragon 14](https://www.youtube.com/watch?time_continue=2&v=w7uG17NvHLQ) by Eric Wright. 7. * ![](https://secure.gravatar.com/avatar/b7dbc76934c3ca484e3b4caa7e9784918451a304fbc19bcd8ae77739cf414ec1? s=32&d=mm&r=g) * [Rian Rietveld](https://profiles.wordpress.org/rianrietveld/) 6:13 pm _on_ March 26, 2018 * The video with the whole test with Dragon: [https://youtu.be/L-Vavq4qZVM](https://youtu.be/L-Vavq4qZVM) 8. ![](https://secure.gravatar.com/avatar/b6ac86c556d3a2119f401c34cf7d94b238cbf66db7210535b9139a0802205ed7? s=32&d=mm&r=g) 9. [Gab Nino](https://profiles.wordpress.org/gab-nino/) 1:37 pm _on_ March 17, 2018 10. Hello, 11. Here is my finding report with VoiceOver. The document can be download [here](https://drive.google.com/open?id=1L0PUpiRgboj5BLD-mBRwzzXHdoR1Dm99). 12. Rian asked me to mention about an issue that I had with VoiceOver. 13. VoiceOver was not working properly, its behaviour was very inconsistent and not responding like it should, to give an example, I was not able to select a link or open the web rotor. VO was behaving like when you use VoiceOver with other browsers than Safari. 14. So I chat with several persons in Apple support and we tried many solutions (even reinstalling Mac OS) without being able to fix the problem. Since the problem was not solved, they escalated it to the engineers and I got to speak with a person in their accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access”( i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/ Accessibility) team. It turns out that VO was behaving weirdly because of third- party software configuration. It seems something that I installed in my computer was interfering with the VO configuration. Although I’m still not sure which third- party software was the problem, the issue was fixed. 15. Here is what to do if you ever had a similar issue: 16. 1. On your mac, go to “Go” menu and the select “Go to folder” option 2. write down on the input text: /Library/LaunchAgents and click Go. 3. Erase all the files founded. 4. Repeat step 1 5. write down on the input text: /Library/LaunchDemons and click Go 6. Erase all the files founded. 7. Repeat step 1 8. write down on the input text: ~/Library/LaunchAgents and click Go 9. Erase all the files founded. 10. Restart your computer and VO should be working properly. 17. ![](https://secure.gravatar.com/avatar/cd18da60d54f0a7374dc62b122ff5050f33fad8c43ce013594f7703a37b9d906? s=32&d=mm&r=g) 18. [Andrea Fercia](https://profiles.wordpress.org/afercia/) 11:27 am _on_ March 19, 2018 19. Gab Nino thanks so much for your testing! Will go through your report soon. 20. Pingback: [Accessibility team meeting, March 26, 2018 | World of WordPress](https://www.worldofwp.com/accessibility-team-meeting-march-26-2018/) 21. Pingback: [Accessibility team meeting, March 26, 2018 | WordPress Today](https://www.wordpress-today.com/Blog/accessibility-team-meeting-march-26-2018-3/) 22. ![](https://secure.gravatar.com/avatar/66cadba30ee6b5a3eca86179514d6cda4818ad85a39594b1ec54c95d9ddcfebc? s=32&d=mm&r=g) 23. [Conlaccento](https://profiles.wordpress.org/conlaccento/) 3:18 pm _on_ April 28, 2018 24. Hello, I keyboard test on GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. [https://wordpress.org/gutenberg/](https://wordpress.org/gutenberg/) 2.7, on Windows 10 with Chrome v.66. 25. Some notes on my test: 26. * when I tab a new blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. is created, and if I tab again I have access to a menu with three icon on the right of the block (recently used?) and plus icon on the left to choose the block to add: it could be confusing to have icons surrounding the block and, most of all, tabbing I navigate the icons from right to left * if I move between blocks with up and down arrows I can’t always see the focused block * with the fix toolbar I was not able to access the bar with the focus on the block * I was not able to access the block options on sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. with the focus on the block 27. I hope my test can be useful. =) 28. Thanks! 29. * ![](https://secure.gravatar.com/avatar/b7dbc76934c3ca484e3b4caa7e9784918451a304fbc19bcd8ae77739cf414ec1? s=32&d=mm&r=g) * [Rian Rietveld](https://profiles.wordpress.org/rianrietveld/) 10:12 am _on_ April 29, 2018 * Thanks for testing [@conlaccento](https://profiles.wordpress.org/conlaccento/)! This is useful info. I’ll add your findings to the GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged by the repository owner. [https://github.com/](https://github.com/) issue about the keyboard order discussion. Take care, Rian 30. Pingback: [“Get your WordPress site ready for Gutenberg,” they say. But is Gutenberg ready for me? | Janepedia](https://janepedia.com/gutenberg/) 31. Pingback: [How to Take a ‘Block Editor’ Approach to Development](https://wparena.com/how-to-take-a-block-editor-approach-to-development-without-using-it/) 32. Pingback: [2020 Web Design Year in Review | Sacramento Web Design Group](https://www.sacramentowebdesigngroup.com/website-design/2020-web-design-year-in-review) 33. Pingback: [The difference between Gutenberg and the WordPress block editor – Gregory J Development](https://gjdev.ca/blog/the-difference-between-gutenberg-and-the-wordpress-block-editor/) 34. Pingback: [How to Take a ‘Block Editor’ Approach to Development - WPzoid](https://www.wpzoid.com/how-to-take-a-block-editor-approach-to-development/) ### Leave a Reply 󠀁[Cancel reply](https://make.wordpress.org/accessibility/gutenberg-testing/?output_format=md#respond)󠁿 You must be [logged in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Faccessibility%2Fgutenberg-testing%2F&locale=en_US) to post a comment. # Post navigation