Header Right

The Top 3 Accessibility Features of Gutenberg

When Gutenberg releases to the wild, expected to be sometime in April, 2018, WordPress will become more accessible. While part of that is from the constant improvements being made by the WordPress Accessibility Team, the new Gutenberg editor is bringing in some impressive features that greatly improve the accessibility of content produced using WordPress.

Gutenberg's history with accessibility is…complicated. When the plugin first launched, it wasn't truly ready from an accessibility standpoint. A lot of reviewers jumped on that issue, and rightfully so. Since then, a lot of improvements have been made to Gutenberg's accessibility. But that's not what we're here to talk about.

The trick with accessibility in WordPress content is it relies on the content creator to be aware of accessibility guidelines and standards. WordPress and the Accessibility Team do all they can, but ultimately some things are out of their hands. That's where Gutenberg's new features come in. Here are the top 3 new accessibility features of the Gutenberg editor.

3. Heading Blocks

The advent of the block system is a big shift in the way creators create content in WordPress. The great thing about these blocks is they make your content more accessible by default. One of the new blocks is the Heading block. This block places <h> tags in your content. You're able to select the heading level, from H1 to H6 using the contextual sidebar menu. This may not seem revolutionary, but it is because it is taking the need to markup your content out of the hands of content creators. From an accessibility point of view, it means users are less likely to misuse HTML markup, meaning pages will be more semantic. More semantic markup is very good for accessibility.

One of my favorite features of Gutenberg is the Table of Contents that has been added both to the editor sidebar and the new info tab. The ToC tracks your heading blocks and builds a dynamic table of contents for you as you write. This feature is incredibly helpful for writers in general, but it has an additional benefit of keeping track of the semantics of your content.

As mentioned previously, semantic content is more accessible. The Table of Contents feature shows you what level headings are, and nests them accordingly. It also tells you when you have an incorrect heading level, highlighting the heading in a dark yellow for added attention. This reinforces the idea of semantic markup, and helps keep uninformed content creators in line.

Beyond semantics, the ToC also gives creators a preview of how screen readers will present content to users. Screen readers often give users a table of contents based on the headings as a way to skip past sections of content. Now creators will be able to see what is being presented to their screen reader users and allow them to structure their documents so that the content stays accessible.

1. Color Contrast Checker

One of the great new features of Gutenberg is the ability to change the background and text colors of individual paragraphs. Accessibility gets brought into the fold in this feature as well with a color contrast checker that happens instantaneously.

This feature gets my top spot because color contrast is one of the easiest ways to make your site more accessible, but until now it required active effort to check it. You had to use one of several online tools available, input colors manually, and then be informed enough to know what the results mean. Gutenberg takes all that way and simply tells you that you may want to pick a new color scheme. By taking the guesswork out of the process and informing the user automatically, WordPress is yet again pushing accessibility forward.

Closing Up

These three features are just the tip of the iceberg when it comes to the improved accessibility of WordPress. The Accessibility Team is working hard day in and day out to make sure Gutenberg and WordPress as a whole are as accessible as possible before launch.

Do you have a favorite accessibility feature in Gutenberg? Let me know in the comments below!

Like this:

Related

Reader Interactions

Your email address will not be published. Required fields are marked *

Comment

Name *

Email *

Website

Notify me of follow-up comments by email.

Notify me of new posts by email.

Primary Sidebar

Adam is a WordPress developer based in Orlando, FL. They currently work as a Web Developer at Findsome & Winmore. Adam is a member of the WordPress Orlando organizing team and a frequent speaker at the WordPress Orlando meetup. Also known as Aleta Soucie. Read More…