Screen Reader Text Format Plugin to Improve Accessibility Compliance

See how to improve the Accessibility and ADA compliance on your elements of your site with the Screen Reader Text Format plugin.

Video

Transcript

Hello happy site owners and webmasters! MaAnna here with BlogAid.

And in this tutorial, you’ll see how to improve the Accessibility and ADA compliance on your elements of your site with the Screen Reader Text Format plugin.

So let’s dive in.

Install and Activate the Screen Reader Text Format Plugin

First, you’ll want to install the Screen Reader Text Format plugin and activate it.

Button Example

Let’s jump over to our editor.

And we’re going to use the button as an example of how to use this plugin.

As you can see, I’m using the Gutenberg Button block.

And I have some linked text in my button that says “Get this offer now!”

Now that’s a great Call to Action phrase, but it doesn’t give any indication of where this link will take the site visitor. And that is not Accessibility compliant.

How to See the Link Normally

Now, if we preview this page.

And then hover over this button, down in the lower left corner of the browser we can see where this link leads.

But screen readers can’t do that.

So, we need to add some extra text that screen readers can recognize.

Turn on the Screen Text Reader

Okay, let’s jump back to our editor.

Now over here in the top right, click the little eye icon.

And check that box to Always show screen reader text.

Okay, now we’re done with that.

Add Text to Button

And now we can add the extra text for the screen reader.

So I’m going to click once in our button, at the end of our normal text, because this is where I want to add more info for screen readers.

Now in the block toolbar, click the down arrow. And from that drop-down, click Screen Reader Only.

Hit the space and you’ll see a new highlighted box. This is for that screen reader text.

So start typing your text for the screen reader that describes where this link will take them.

I’m going to input “on the DIY SEO course”.

Now, see all little divisions? That means it will spell this out instead of making it one word.

So it’s a little uneven that way, with making it words with spaces between them, or making them individual characters.

Okay, that’s all there is to it.

Verify Screen Reader Text Does Not Display on Page

Now, let’s preview this page.

And as you can see, the extra text is not visible to anyone who is not using a screen reader app.

Confirm Screen Reader Text is in Code

You can also check in your browser to confirm that the extra text is present.

I’m using FireFox for this tutorial, so this may be a little different in other browsers.

So, hover over the button and then alt click on your mouse.

And from that drop-down, choose Inspect Accessibilities Properties.

And if you can’t see this at the bottom, there should be a little line down here and you can move it up.

Here you can see the link and what the screen reader can call out. And you can see that our extra text is indeed there.

As a bonus, on the right, you can see more Accessibilities info, like your colors and contrast, and if they meet the WCAG AA standards, and more about the Properties.

Add Screen Reader Text to Image Caption

Okay, let’s jump back to our editor.

And you can also do this for images, although your Alt text is sufficient for Accessibilities compliance.

But I wanted to show you this extra tip anyway.

So, I’m going to scroll down.

And click on the image block.

And click in this captions area.

Then from the toolbar, click the down arrow.

And click the Screen Reader Only option.

And here you can add your extra text that describes this image.

I’m going to put in the title “get to Know the 3 Phases of SEO for Non-Geeks”.

Confirm Screen Reader Text is in Code

Okay, let’s preview this.

I’m going to scroll down and hover over the image.

And alt click on my mouse.

Then click Inspect Accessibility Properties.

Now as you can see, there is no extra text displayed in the caption area.

But if you look down in the Accessibilities part, you can see there is extra text on the Figure, which is a Graphic.

More info on Accessibilities Compliance

Now if you want to know more about Accessibilities compliance for your site, I hope you will visit Codefetti.com which is run by my fellow webmaster and designer, Michelle Phillips.

She has two important articles for you that are linked above or below this video, depending on where you happen to be seeing it.

The first is Why You Need an Accessible Website which tells you more details on just how important this is to do, and links to more resources for deeper reading too.

And then the second article is How to Make Your WordPress Website Accessible and it has an awesome checklist so you can self-evaluate your own site. Plus she lists many of the common and easy fixes too, like using this Screen Reader Text Format plugin.

And she stands ready to help you with theme-level and deeper fixes too.

Wrap Up

I hope you’ve enjoyed this quick tutorial on how to use the Screen Reader Text Format plugin to help your site be more Accessiblities compliant.

Be sure to subscribe to the BlogAid YouTube channel and visit BlogAid.net for helpful tips and tutorials just like this one.