Customizable keyboard shortcuts for WordPress
WordPress, Automattic
As an Accessibility Design Lead at Automattic, I had the opportunity to work on the design and accessibility of the new WordPress block editor (a.k.a. Gutenberg) alongside the open source community, working on features and improvements that made the authoring experience more accessible for everyone.
Giving users Ctrl
One missing feature of the block editor was to provide authors with the ability to customize keyboard shortcuts. This is an important addition that lets users avoid conflicts with various settings and assistive technologies, and enables users of different languages to adapt the shortcuts to their respective locale.
I designed and prototyped a new feature that allows users to customize the keyboard shortcuts in the WordPress block editor. My proposal expands the current keyboard shortcuts modal by adding the ability to manage shortcuts, right from the editor.
Prototyping the flow
As part of the deliverables, I created a guided prototype of the new customizable keyboard shortcuts feature, showing the flow a user will follow in order to access the functionality in the block editor in WordPress.
Prototyping a flow allows everyone involved to get a better picture of how the feature works, this is not only great for feedback and testing, but it also saves time and resources before code is written.
The prototype above is the last iteration after a few rounds of feedback from the WordPress open source community, particularly the WP Accessibility Team.
Keyboard flow
Because this is a feature that greatly benefits keyboard users and users of assistive technologies, I also prototyped the keyboard flow. This additional prototype showed each focus stop in the interface, allowing us to assess and confirm that we were providing a good overall experience to all users.
✌️