How to Make Your Custom Block Accessible

It has been almost two years since the initial release of Gutenberg; and although a lot of users have embraced it, there are still a few who prefer the old WordPress way of doing things. It will take a bit more time to make everyone use the new editor. Even though the launch was a little problematic, the product itself is quite good. It is only going to get better, especially once you learn how to make your custom block accessible.

Gutenberg default blocks were built with accessibility in mind. With every release, more accessibility improvements are being added. The WordPress Gutenberg, Design, and Accessibility teams spend a lot of time and effort toward improving user experience. WordPress, at its core, has always been committed to being as inclusive and accessible as possible; and every single new release brings in new accessibility improvements.

Because of this, every new additional feature to WordPress, be it a custom theme or a custom block, needs to follow the accessibility guidelines. But how do we make sure that our custom blocks are accessible? How do we test it?

 

How to Make Custom Blocks Accessible

Creating a new block is fairly easy. The Block Editor Handbook has an easy-to-follow tutorial to hep you get started named Writing Your First Bock Type. Below are a few things you need to include in your custom block:

1. Assign appropriate ARIA landmark roles to each area of your custom block. These will allow screen reader users to know exactly what your block is and where they are inside your custom block.
2. Use Semantic HTML. Semantic HTML is standards-based and stable. It will be parsed and elements will be styled and communicated properly to end users by screen readers and other assistive technologies. In short: IT JUST MAKES SENSE.
3. Make use of the `.screen-reader-text` CSS Class. The .screen-reader-text class was introduced in 2009 and each theme and/or custom block should have this style class added by default. This class is used to visually hide text meant for screen readers and for `skip links` to make sure that it is visible when focused for those who use keyboard navigation.
4. Pay attention to heading structure. Add headings to meaningfully describe the content of your block where necessary.
5. Be mindful of links. Screen readers call a list of links to quickly navigate a site. You must make sure that all links are structured correctly and meaningful. Below are some things to avoid:
   1. Multiple/duplicate links to the same location
   2. Meaningless link texts
   3. Too many tab stops

If you want to know more about making WordPress accessible, you can head on to the Accessibility Handbook.

How to Test Accessibility

There are many ways to test accessibility of a website. Below are some tools that you can use:

1. WordPress  Accessibility Best Practices
2. WordPress Accessibility Front End Code Test
3. The A11Y Project Checklist
4. WP Accessibility Plugin
5. Accessibility Insights

I hope this blog post will help you make your custom blocks accessible. If you like this article and want to learn more about accessibility, read the WebDevStudios blog for more information on this important subject.