Accessibility is a term that means the process of making something accessible to people with disabilities. The number of WordPress themes, plugins and widgets available for accessibility features has exploded over the years. This guide will help you understand how your site can be made more accessible for everyone, not just those who have difficulty using traditional interfaces like computers or mobile devices but also those who may only see text on a screen through an audio description service or braille support.
The “wordpress accessibility handbook” is a great resource for those looking to learn more about the new features of WordPress. It includes details on how to use these features, and how they can improve your site’s accessibility.
WordPress springs to mind when it comes to site content management. WordPress is the king of content management systems, powering 40% of all websites by 2021. (CMS). Despite its widespread use, the platform is not without flaws. Older versions of WordPress made it difficult to create media-rich sites, lacked a WYSIWYG editor, and were inaccessible to screen readers.
In December 2018, the WordPress development team developed the block editor to make the editing experience more accessible and user-friendly. The WordPress block editor, often known as Gutenberg, has undergone significant revisions since its inception to make it a platform that anybody can use. I’ll explain how Gutenberg works and show you how to use its new accessibility features in this article.
What is the Gutenberg Editor, and how does it work?
The TinyMCE editor has been replaced as the default WordPress editor with Gutenberg. If you don’t want to utilize Gutenberg, that’s OK. For customers who still prefer the old-school CMS, WordPress provides a classic editor plugin to download and install. Despite the fact that the former editor is still available, over 46% of WordPress users have converted to the new block editor.
The new Gutenberg editor is created with cutting-edge technology and offers an entirely new way to create online content. Rather than relying on plugins and custom code to create online content, the WordPress block editor uses blocks to create and design web pages. These blocks enable you to create multimedia-rich sites without requiring much technological expertise.
What Is the Gutenberg Editor and How Does It Work?
You’re probably wondering how block editors operate now that you know Gutenberg is a block-based editor. In essence, the new WordPress editor is a drag-and-drop content editor. Instead of utilizing unfettered text, added media, and shortcodes to construct a web page, you may create, move, and design various forms of content using intuitive components/blocks.
Gutenberg has a variety of specific blocks for a variety of content categories. These are some of the blocks:
- Text
- Image
- Video
- Audio
- Quote
- Columns
- List
- File
You begin adding content to the component after picking one of these blocks from the top toolbar. You may customize each block to your desire and drag it wherever on the editor to create a unique page layout since each block is an independent entity. To create personalized content, the WordPress block editor allows you greater power, flexibility, and accessibility.
Accessibility Options in the Block Editor
WordPress Plugins – Block Navigation is the source of this information.
The Gutenberg editor has many more usability and accessibility features to enhance the editing experience, in addition to a modular block approach and drag-and-drop capability. These new features make WordPress more accessible to everyone, especially those who use screen readers. I’ll go through the new accessibility features in Gutenberg and show you how to utilize them in the sections below.
Please use CTRL instead of and ALT instead of for the instructions below if you’re using a Windows or Linux machine.
Navigation Using the Keyboard
The fact that older versions of WordPress were unavailable to screen reader users was one of the most serious flaws. More than 7.6 million individuals in the United States have visual impairments and rely on assistive devices such as screen readers to access online information. The Navigation mode was added to the block editor in 2019 to make WordPress more accessible to visually challenged users.
The Navigation mode increases the general usefulness of WordPress while also making it accessible to screen reader users. Users may utilize the Tab and arrow keys to easily browse around the editor with this new accessibility feature. Using shortcuts to get to your chosen block saves time by removing the need to deal with vast pieces of material.
To make text production more effective, use the following WordPress block editor keyboard navigation tips:
Getting Around Nested Blocks
You must use Navigation mode if you wish to visit a parent or child/nested block without scrolling through a lot of text. Users may now travel from parent to child blocks and back, as well as between child blocks, in the newest version of Navigation mode. Select a block and then hit the ESC key to enter navigation mode.
Use the following commands once your block editor has entered navigation mode:
- To traverse inside the same level, use the UP or DOWN arrow keys.
- To enter a nested level, use the LEFT arrow key.
- To exit a nested level, use the RIGHT arrow key.
Use the ENTER or SPACE keys to confirm the new position if you wish to move the chosen block to a different spot.
Interchange Blocks Between Levels
Learning how to transfer blocks across layers might help you develop layouts quicker since more and more blocks will enable nesting in the future. The cut X and paste V approach is one of the simplest methods to relocate a block in Gutenberg. Furthermore, the block editor has a function that enables you to move blocks using your keyboard.
Click the Options item at the end of the block toolbar, then pick Move to from the menu to move blocks into and out of a parent block. To move your block around the editor, use the following keys:
- To move the block inside the same level, use the UP or DOWN arrow keys.
- To advance the block up one level, use the LEFT arrow key.
- RIGHT To move the block down one level, use the arrow keys.
Once you’ve arrived at your preferred spot, press ENTER or SPACE to lock the block into place.
Shortcuts on the Keyboard
The WordPress block editor now has various additional keyboard shortcuts to help you work faster and more efficiently. These shortcuts are also essential for screen reader users, who depend on keyboard instructions rather than mouse inputs to complete computer tasks. Here are some important keyboard shortcuts to help you get most out of the new WordPress:
Blocks may be moved up and down the page.
This keyboard shortcut is one of the block editor’s coolest new features, and it’s ideal for fast shifting blocks up and down the page. This functionality is comparable to an existing shortcut that inserts a new block before or after chosen blocks, so it may be recognizable to you. To move both new and existing blocks, use the keyboard keys below.
To place a new block in the editor, first pick an existing block and then use:
- T: Inserts a new block atop the one currently chosen.
- Y: Inserts a new block underneath the currently selected block.
The keyboard shortcuts for moving blocks already in place are identical to the ones listed above. They just add
to the command sequence using the UP arrow key To move an existing block, first select it and then use the following commands:
- To slide the chosen block(s) up, press T.
- To slide the chosen block(s) down, press Y.
Switch to fullscreen mode.
In the block editor, you’ll adore the new keyboard shortcuts. New features like as fullscreen mode and eliminating the settings sidebar increase screen space, allowing you to concentrate more on your work. These new shortcuts also make it easier for screen reader users to navigate and update material by removing sidebars and other distinct regions of the editor.
- F: Goes into fullscreen mode.
- ,: Hides the sidebar for Settings.
Enhancements to Usability
Increasing the usability of a platform makes it more accessible to individuals of various abilities. Allowing several methods to achieve the same thing is an excellent approach for making a platform simpler to use. The WordPress block editor has a slew of new usability enhancements that aim to remove roadblocks to getting work done and simplify the editing process for all users.
Here are some improvements to Gutenberg’s usability that will make it more pleasurable for everyone to use:
List View
The Block Editor’s List View is an existing feature that is continually being developed to make it simpler to explore and choose blocks. This usability feature is included in Gutenberg’s top toolbar, and it shows an outline of all the blocks utilized on the page. You may jump to any block in the editor by simply clicking on list items.
By default, older versions of List View collapsed nested blocks, making it more difficult to reach child blocks. The way blocks appear in the list has improved thanks to recent usability enhancements. The new and enhanced List View now shows all nested blocks within their parent block, and reusable blocks are identified by their custom names rather than generic names.
Select the button with three horizontal lines in the top toolbar, or use the O keyboard shortcut, to activate List View in the block editor.
Breadcrumbs
Because Gutenberg is a block-based editor, WordPress has made it possible to access blocks in a variety of ways to increase the platform’s usability. Breadcrumbs, like List View, is a usability element that makes it simpler to retrieve blocks stacked at multiple levels. When dealing with highly nested blocks, such as Columns or Group blocks, this additional capability may be quite useful.
So, how do you utilize the WordPress block editor’s breadcrumbs feature? Use the keyboard shortcut N to swiftly go to the next parts of the editor. Continue using this shortcut to skim over blocks until you reach the bottom left corner of the page, where you should see the block breadcrumb bar.
Toolbar Buttons with Text Labels
Icons are vague and difficult to remember for many people. If you’d rather have text labels than icons, the block editor has you covered. WordPress has included a new usability feature that enables users to convert all of the toolbar’s icon buttons to text labels. Many users will benefit from this new feature, which will make it easier for them to locate the tools they need.
This is what you need to do if you want to replace toolbar icons with text labels.
- Select Options from the drop-down menu (located at the far right of the top toolbar)
- Choose Preferences
- Click Display Button Labels in the Appearance section.
Change the behavior of the Block Inserter
The block inserter is a new feature in the WordPress block editor that allows you to browse and insert several blocks at once. The early version of this function, which was supposed to increase productivity, instead disrupted users’ workflow. After inputting a block, the panel would shut, forcing users to keep revisiting it to add new blocks.
Thankfully, the WordPress community banded together to resolve the issue. After adding a block, the current version of the block inserter stays open, enabling users to insert many blocks at once. There’s also a keyboard command to shut the panel after you’re done with the block inserter.
To get the most out of this new productivity tool, use the following keyboard shortcuts:
- ENTER or SPACE: Inserts a block but does not close the inserter.
- +Enter: Inserts a block, shuts the inserter, and brings the cursor back to the insertion place.
- ESC: Closes the inserter without a block being added.
Coalition Technologies can help you improve your WordPress site.
The block editor got off to a shaky start, with several accessibility and usability issues. Gutenberg, on the other hand, has gone a long way since its first release. The open-source community has worked hard to improve WordPress and will continue to do so so that it can become a platform for everyone.
Coalition Technologies can assist you with constructing WordPress websites if you want more support. We have the knowledge you need to construct extremely engaging WordPress sites, with over a decade of experience designing on WordPress and 200+ sites built. Please contact us right away to find out how we can help you increase your internet presence.
The “keyboard accessibility wordpress” is a new WordPress feature that allows users to explore their website’s accessibility. The feature includes keyboard shortcuts and the “accessibility inspector”.
Frequently Asked Questions
How do I make my WordPress site accessible?
A: You can use the following code on your sites HTML to make it accessible. This makes it easier for visually impaired people, such as those with macular degeneration or other similar conditions, to read your websites content without any need for additional software like screen readers.
Does WordPress support accessibility?
Is WCAG 2.1 compliant WordPress?
A: Yes. WCAG 2.1 is compliant with the WordPress platform and meets all accessibility guidelines for websites that are accessible to everyone regardless of visual or sensory impairment, cognitive ability level, age group, etc.
Related Tags
- wordpress accessibility plugin
- free wordpress accessibility plugin
- best wordpress accessibility plugin
- how to make wordpress site accessible
- one click accessibility