As part of our commitment to giving back and sharing knowledge, we have partnered with the WordPress Foundation’s community team to run an official WordPress Meetup centered around building more accessible websites with WordPress. This post has a recap of our Meetup that took place on Monday, November 15, 2021, and a video recording of the presentation.
About the Topic
During the WordPress Accessibility Meetup on November 15th,
Phil Webster, a Senior WordPress Developer at Delicious Brains, discussed the steps to build a custom plugin that for a client site that has accessibility top of mind. Topics included design considerations, using semantic markup, vetting third party extensions, preventing accessibility issues by using validation, and when to use aria attributes.
Thanks to Our Sponsors
About the Meetup
The WordPress Accessibility Meetup is a global group of WordPress developers, designers, and users interested in building more accessible websites. The meetup meets twice per month for presentations on a variety of topics related to making WordPress websites that can be used by people of all abilities. Meetups are held on the 1st Thursday of the month at 10 AM Central/8 AM Pacific and on the 3rd Monday of the month at 7 PM Central/5 PM Pacific.
Learn more about the WordPress Accessibility Meetup Group.
Watch the Recording
If you missed the meetup or would like a recap, watch the video below or read the transcript. If you have questions about what was covered in this meetup please tweet us @EqualizeDigital on Twitter, or join our Facebook group for WordPress Accessibility.
Links Mentioned In This Video
The following resources were discussed or shared in the chat at this Meetup:
- Accessibility Tools Survey
- Focus State Newsletter
- Equalize Digital on Twitter
- Equalize Digital website
- WP Engine website
- WP Engine on Twitter
- Leon Stafford’s Website
- Leon Stafford on Twitter
- Phil Webster’s Author-Press GitHub
- Carnegie Museums Accessibility Statement
- Plugin Machine from Josh Pollock
- How to Build an Accessible Slider or Carousel from Jason Webb
- Accessibility Insights for Web Chrome Extension
Article continued below.
Stay on top of web accessibility news and best practices.
Join our email list to get notified of changes to website accessibility laws, WordPress accessibility resources, and accessibility webinar invitations in your inbox.
Read the Transcript
Amber Hinds 0:00
Our announcements for this evening: The first one is, if you’re not part of our Facebook group, please go join. Maybe Emma can throw the link up in the chat, but it’s facebook.com/groups/wordpress.accessibility. And the link will be in the chat for anyone who needs that. And it’s a great way to connect with people in between Meetup events. And we’re starting to have some really good conversations there. If you need help with something, or you’re looking for feedback, or if you want to provide value to other people, we really appreciate that. So, please join the Facebook group.
The next announcement is, if you have not done so yet, please go take our accessibility tools survey. It’s at equalizedigital.com/survey, and, what this is is it’s totally anonymous unless at the very end, you choose to enter your information, but you don’t have to, it talks about how your organization approaches accessibility, what tools you use, and things like that.
We are trying to get at least 200 participants. Our goal is to put together a report, and do a talk on it in the springtime at a Meetup event, so that we can sort of share what the current accessibility landscape looks like among website owners, particularly in WordPress. So, that is there. There is the ability to enter to win a $200 Amazon gift card in case that is motivating for you. Otherwise, please go take it, because it will be helpful to us, and you’ll get to see what all the results are as well.
And then, I did want to announce that as of last Wednesday, we started an email newsletter. We’re calling it Focus State, it’s going to come on the second and fourth Wednesday’s of the month. And, I wanted to encourage people to join it, especially because I sent some announcements out on Meetup, which you may have gotten last Friday, and then I got feedback from somebody that said “it really would have been great if there were headings in these, so that I could jump around in my screen reader and get to different sections.” And I realized I had coded headings into that Meetup email, and Meetup had stripped all the H tags out when it sent the email. So, especially if you need an accessible version, please consider joining the email list, because we have more control over it than we do on Meetup.
And then, just a quick shout out, we are looking for additional sponsors to help cover our- some increased costs we’re anticipating with regards to our interpreters, and, transcripts and things like that in the new year. So, please contact me if you, or your organization might be interested in sponsoring, and I can give you more information. And then, um- let’s see, someone asked if the host can enable the option to save the transcript. I can try to do that. Um, I may have to do that when I am not sharing my screen, but let me see if I can do that.
To be honest, I am not 100% certain how to do that, but I will say that we do provide- yeah, I’m sorry, I’m not seeing that option in the, in the Settings panel, but we do provide the, uh, a full corrected transcript with the video, usually within a week, if not sooner. So, there will be a transcript available on our website. And then, on that note, if you have any other suggestions, if you do know how, and you want to tell me, and send it to me in the chat, I can try and do that in a minute here when Phil starts talking. I’m just not certain how to do it right now.
Amber Hinds 4:08
So, let me- if we go the right direction- real quick, I’m gonna give some information about who we are, and then also our sponsors, and then I’ll introduce Phil. So, our- I’m Amber, I’m the CEO of Equalize Digital. We’re a certified B Corporation that specializes in WordPress accessibility, and we have a WordPress accessibility checking tool called word- called Accessibility Checker.
And, we have been organizing the Meetup, a little bit selfishly, because we wanted to have the ability to learn from all these great speakers that we’ve been having. And, so, I was sort of like, “there’s no one in my area, what can I do?” So, we started the meetup. So, that’s what made us start it. If you want to get a hold of us outside, you can find us at equalizedigital.com, or we are on Twitter a lot, @equalizedigital.
And then, we have two sponsors this evening. The first one is WP Engine, who many of you probably have heard of. They are a hosting company. They have their brand, and then also Flywheel, and they own the Local app for local development, and are the owners of the Genesis themes. And they host more than- let’s see, I’m looking at this- one and a half million sites across 150 companies, or, sorry, countries, 150 countries. And you can find them at WPengine.com, or on Twitter @WPEngine.
And then, our interpretation sponsor for this evening is Leon Stafford. Leon is a developer at Strattic, and the creator of WP2Static. He also maintains the accessible minimalism theme for Hugo, which is a different CMS, and he’s in the process of porting it over to WordPress. He wants us to thank- he asked us to thank everybody who attends this Meetup, because he thinks accessibility is really important, and he thinks it’s amazing that people are learning about how to make things more accessible, and so that is why he is supporting our ASL interpretation, which is awesome.
Emma put links in the chat for Twitter @WPEngine and Twitter @ljsdotdev. We ask, if you can, just send them a quick tweet saying “thank you for sponsoring our Meetup.” I think that that encourages them to want to continue to sponsor our Meetup, and help us to make these as accessible as possible.
Some upcoming events that are important to know about, on Thursday, December 2, we will have Meryl Evans, who’s an accessibility consultant, who is deaf, and she’ll be speaking about how to create accessible captioned videos for WordPress and beyond.
And then, on Monday, December 20, so this same time slot in December, we will have two different accessibility engineers from VMware, one is Joyce Oshita, and the other one is Chris Lane, and they will actually be doing an accessibility test of the FacetWP plugin, which is a faceted search plugin that is very popular. And they’ll be providing feedback to the developer, who will be on the call as well. So it’ll be the opportunity for people to sort of observe how a blind user- so Joyce is blind- how she engages with the site, with her screen reader, and then some of the feedback that they have. And, also the plugin developer will be able to ask questions. So, it hopefully will be both educational and helpful, so that it can improve not just that plugin, but all the websites that use that plugin.
Amber Hinds 8:16
So, I am so excited, now I’m going to transition, I know you guys have heard me talk a lot, and you’re probably ready to hear the main event. So, I’m very excited to introduce Phil Webster this evening. He is a Senior WordPress Plugin Developer at Delicious Brains, and he works on the WP Migrate DB Pro team. Phil has a deep interest in making the web accessible for everyone.
You may have heard, at the beginning, we were talking about how he’s been tweeting a lot about accessibility lately. And, he’s from Pittsburgh. He has a wife, and three kids, and he enjoys being outdoors, and all sorts of awesome stuff. He often tweets pictures of pizzas he’s made, that made me feel incredibly hungry [laughs]. So, I’m going to stop sharing now, and I’m going to hand over the reins to Phil. I’m going to turn off my spotlight. If you do have any questions, I’ll be paying attention to the chat. And we’ll let Phil go ahead and take it away!
Phil Webster 9:27
I’m trying to share my screen here.
Amber Hinds 9:29
Is it letting you?
Phil Webster 9:41
Alright. I think I have to get your permission.
Amber Hinds 9:44
Okay. Alright. So, in just a minute, we’ll get Phil’s screen up, and then we’ll go.
Phil Webster 10:01
Alright. Hopefully it’ll allow me to do it now. There we go. Do we have it?
Amber Hinds 10:16
Yes.
Phil Webster 10:18
Great. Alright. So, as Amber said, my name is Phil. And, today we’re going to be talking about building a custom plugin with an accessibility first approach. Let me put the link that I have here on that slide into chat. I am really not good at hosting on, on Zoom. There’s the chat.
Amber Hinds 10:58
We might be able to type it in for you, too. If that would be easier.
Phil Webster 11:02
Yeah, I don’t know. It’s- keeps putting me into Preferences. Alright. Why?
Amber Hinds 11:13
I can find it. It’s on your GitHub?
Phil Webster 11:17
Yeah. Is that it? Do you see it now? Is that in the chat?
Amber Hinds 11:21
Uh, no, I do not see it in the chat. But, I’ll find it, if you want to get started
Phil Webster 11:30
Okay. Thank you. Alright, so I’m gonna- we’ll get to that GitHub eventually. Alright, so, as we already said- what was that?
Amber Hinds 12:00
It’s in the chat now.
Phil Webster 12:02
Okay, thank you. I completely have no idea what the chat is. I just found the chat [laughs]. Thank you. So, if you have any questions, I think it might be good to, um, maybe Amber can interrupt me, if we get a bunch of questions at some point, and stop, so that we don’t get too far away from wherever that question was.
So, as Amber said, I work at Delicious Brains, and I do work on the Migrate DB Pro team. We have, in our last release, we made some fairly decent improvements to accessibility. The, it’s pretty much 100% keyboard navigate- you can use a keyboard to navigate through the entire plugin. There’s definitely still work to be done, and, we are working on that for sure, but it’s way better than it was when I first started there, so. I’ve been at Delicious Brains since, um, since June. And before that, as Amber said, I was at Equalize Digital, where I did some work on the Accessibility Checker plugin, and I also did a lot of the work on the actual Equalize Digital website itself.
Phil Webster 13:34
So, 26% of the adults in the United States have some type of disability, according to the CDC. So, accessibility is very important for us to work on. And, one of the things that I like to think about is that we need to be building for, for everyone, and that accessible design can be beautiful, and accessible design can work.
This picture here of this big curly red access ramp is, is just one example of how architecture has really evolved over the last, what is it, 50 years of the ADA? Might not be that. About, what- I don’t know how many years it’s been. But, over the years of the ADA, buildings now really are accepting the beauty that they can come, come from accessible design, and I think that we need to do that too, as, as people who build for the web.
I found this quote from the Carnegie Museums, which are here in Pittsburgh, and the “Carnegie Museums of Pittsburgh welcome all visitors both on-site and online. We work to assist visitors with disabilities in obtaining reasonable and appropriate accommodations, and in supporting equal access to services, programs, and activities.” So, if you follow this, this link here, the web-accessibility.carnegiemuseums.org, what you’ll find there is a really great guide for developers, for developing with accessibility in mind. If you go to the GitHub link that I provided, all of these links that are in here are available there as well.
Alright, so let’s talk about the plugin that we’re going to be reviewing today. So, this is not a plugin that would be good for commercial release, but this is one that would be applicable to any agency or freelance developer who brought on a client, and then was going to build a custom plugin for, for them, with specific purposes. So, I know that lots of examples use plugins that are for selling books, or for listing books. Well, that’s what we’re gonna do today, too, but this one actually is for real. So, my mom asked me to help her with her website, and she happens to be an author.
So, this is a plugin that I’m working on to help her with her- list her books on her website. So, the books are available for sale on an external site, on Amazon. And she wanted a way to be able to list all of the different books. So, here’s the basic layout of, of the site. So, each book will have a title, a picture of the cover, a summary of that book, a button to be able to go buy that book, a list of details, and then a list of reviews.
So, as you can see, there are some issues that we will need to address, in terms of accessibility, here for sure, such as the icons, the slider for the reviews. I put the slider in there just to make it harder on myself on purpose, so we could talk about dealing with a slider. So, the most important thing to consider is that you need to write semantic HTML. A lot of accessibility issues can be avoided just by writing good, good HTML. So, HTML elements are the structure that happens on every page, and some of your main semantic elements are the header, nav, main, article, aside, and footer.
So, if we were to break down that example, this is approximately one, one, I think one decent interpretation of how we could do that. I didn’t label every single, single part on there to try to make this a little easier, but we’ll just go over. So, the main section here is, well, in general, WordPress is going to give us main.
So, this, this first outside red square is, would be, is going to be an article element, which is also going to be given to us by, by WordPress, if we don’t mess with it. And then, the title will be an h1. And then, the first main section, over to the right, we’re going to break into a section that has an h2 at the top, and then, each of the other main sections below that are, will be other sections, and then each of those headings will also get an h2. Alright.
So, in terms of what we’re going to use, on the WordPress side, is, we’re going to use two custom post types, one for books, and then, the other one is going to be for the reviews. And, in order to make the blocks, uh, for this, we’re going to use ACF Pro, to build the blocks, and, and a custom carousel too.
Phil Webster 20:27
So, I’m going to hop over to, to GitHub, for a second here. And, we’re going to walk through the, the plugin just a little bit. I built this in a way that wouldn’t require any build tools at all. So, you could download this, and install this, if you want to, if you want to, if you want to play around with it. The only thing you would have to have is ACF Pro, if you want to do it exactly the way that I have it in here. ACF Pro could be substituted with your own custom blocks, if you wanted to do that. But, I thought this would be faster and easier to use.
So, over here on GitHub, just go into the main author-press file. I’m going to go kind of quick through non-accessibility related issues with the plugin, and if we have questions about some specific things, then, we, we can probably address those at the end. So, the plugin starts with a few checks to make sure the PHP version is high enough, and also to ensure that ACF Pro is installed.
I’ll tell you what file I’m going to go to, if you want to look at the actual file. So, now I’m going to go to the bootstrap.php. So, one thing I would like to highlight is that I am using namespaces in this plugin. And, using namespaces allows you to not have to prefix all of your functions. So, this is just a short file. What this does is auto loads those, those namespace files, which prevents me from having to do requires. So, I don’t have to do a require, and, a lot of plugins you see will have a real long list of required files. This avoids that with being able to use the auto loader. And then it just loads this main class called “Start.”
And then, in, so Start is in the classes directory. And then, in this file, we define our custom post types. Which, I have constants up here, for their names. And, I also rewrite the permalinks here, so you don’t have to do that manually. Alright, so, let’s look at the, at the, at the two custom post types. So, since we are using the block editor, we have to make sure that we have “show_in_rest” set to true.
And, there are two other features that I have not used very much, but I really like, and that are, those are the “template” argument, and “template_lock.” These are built in features to control the, the block layout on the page. So, what block templates are, is, they are a preset layout of blocks that are on the page. So, this is a very simple one here. And, you can see in this function, it just has one block, and that’s the quote block.
When you declare a block template, what you have is you have an array that has, that has an a nested array inside of it that, where you declare the name of the block, and then, the second parameter are any attributes that those blocks might have. So, in this case, we’re using, we’re adding this, the class name “is-style-large” to that quote block. And I’ll show you, I can show you that. So, this is the, the template for the review.
Phil Webster 25:50
So, here’s our review post type. And, you can see that the template is this, just the core quote block. And that template block, sorry, “template_lock” is “all.” So, what “all” means is that you cannot change the order, or add any blocks to that template.
So, if we actually look at, this is what a review post type looks like, and you can see that the, the blue plus sign, where you would typically add blocks, does not function, because it is disabled. So, what we’re preventing is the the ability to add and change the content. So, this is a good way to control the user’s content. So, all you can add- all you can do is add a title, which doesn’t show on the front at all, in this case, add the quote, and then, who added it. And, and that is the only information you can add for the review. So, the thought is, is the mo- the more we can control what the user can enter, the, the easier it is for us to make sure that we can keep the, the content accessible.
Alright, let’s go back here. And I have a much more complicated block template for the, for the book itself. So, this is a combination of core blocks, and of those custom ACF blocks. I tried to indent the code here, so that it would be easy to see, like, the hierarchy. So, the top is two columns, so we have the core, the core columns block, and then we have those two columns declared with that core/column. And then, the second attribute here is, are the, the attributes for that, for that block, which is set to width of 50. And then, inside of that, we have another array, that has the content of that column.
So, this gets a little tricky, with so many arrays inside of arrays. But, it, we’re essentially writing the same code that you would see in, on the front end. It’s just, we’re using this, this, um, this array syntax to do that. And then, in the second column is our first custom ACF block, which I’ve called “ap-summary.” And then, below that is a details block. And then, finally, the reviews block at the end.
So, I’ve decided to, to use ACF Pro to create these accessible blocks. You can also do this with core blocks, I believe. Most, most of it- there’s probably other solutions, too- this is just one approach.
So, what, what we’re trying to do here is we’re going to try to create blocks that stand alone, in terms of content, so that that block will always be accessible. So, no matter where you put it, it will work. So, we’re going to start with the summary here. Every one of these custom blocks start with an h2. So, no matter where we put that, it will work. I can’t think of a place where you could stick this block, and it would break the accessibility of the page, in terms of content flow. So, all of the content are going to be paragraph tags, and, the button at the bottom, that’s not actually a button, is the- has ambiguous text, so we need to make sure that we deal with that somehow, too.
Phil Webster 30:39
So, this is our code for a summary block. So, we have the title. And then, we have this, this inner blocks thing here, which is not HTML, but, that is actually JSX, so. This is coming over from the React side of Gutenberg. But, what inner blocks is, is a way for us to tell the block editor that we want to have a section inside of another block that has other blocks in it. And, in this case, there’s this “allowed_blocks” attribute here, and what I do there is I tell, I tell WordPress that the only block that we’re going to allow is the paragraph block.
So, I could not stick a gallery in the middle here, or I couldn’t stick an h1 in there. So, the only content that we- you’re allowed to put there is, are paragraphs. It is possible that you could still break accessibility, but, we’re going to do, we’re trying our hardest to prevent that. And then, we follow up here with, with a link out to the, um, to Amazon, typically. But, instead of just “buy book,” we’re gonna have “buy book,” and then we’re adding the title of the book as screen reader text to ensure that that link itself is not an ambiguous link.
There’s this one extra div here in the inner blocks that I don’t really like, but, right now, that’s needed in order to function properly. It’s one of the quirks of Gutenberg. If I leave that out, then it makes my, my book, my “buy book” button disappear. So, maybe that’s something that we’ll be able to fix in the future.
Alright, let’s, before we move on, let me show you. So, if I go back to the main author-press directory, and then go into blocks. So, this is, these are each of the, of the custom blocks. So, we’ll go back into the summary block. So, there’s a little bit of extra stuff here, too. One of my- I find this to be an accessibility issue, and, it’s one of my pet peeves- is that, in Gutenberg, the links are active in the editor.
So, this, like, book link right here, where- if it’s on the, if it’s in the editor side, I’ve set it to not actually be a link. So, you can click on the button, and it won’t take you to that page. [Mumbles to self]. Yes, and then, so, here you can see where, the “allowed_blocks,” and that it’s set to be just “core/paragraph.”
Phil Webster 34:41
So, let’s see here. So, that, that, this ends up with this block here where we have “summary,” so. It’s automatically populated with summary, but I could change that here, if I want to change that to something else. And that would come over there. And then here, all I can put in, if you click here, you can see, like, I cannot add anything but paragraphs, which is a very nice feature. And then, I can click right on here, and it’s not going to take me to that page, but I can add the book link over here, and then that will link up the book. And the next section we’re going to talk about is this “details” here. Let’s look at the code first.
Amber Hinds 35:38
Phil, there was one question.
Phil Webster 35:40
Okay.
Amber Hinds 35:41
Nick said, “I previously used WP scaffold block to create blocks. Do you know if there are problems with it? Also, I think one can use templates to generate blocks. Do you know of any good templates for accessibility?”
Phil Webster 35:59
Um, I’ve never used WP scaffold block. There is a block plugin that I- or, like a scaffolding plugin I have used before. I can’t remember the name of it, I’ll see if I can find it, and I can, we could share that later. So, the issue with, like, a lot of those block templates are that they are just blocks. They’re just for creating blocks.
So, if you wanted to create custom post types or anything, in addition, it would be hard to find- it’s, it’s, it’s hard to add that on to, to that. I know that, like, Josh Pollock has just come out with his Plugin Machine Boilerplate plugin. That, I think, is try- he’s trying to address that issue, so, like, if you want to add blocks to a plugin, you, there will be a script to help you with that.
In terms of the other part, I don’t really know about good templates for accessibility. I will say that the core blocks themselves are are fairly good. It’s just how you use them, that’s going to be the, that’s going to be the issue there.
Alright, so let’s go back to the details block. And, in the block- so that is this block here, where we have a bunch of icons. So, when I program something like this, I’m going to program it with the screen reader in mind first. So, each of these icons stands for something. So, when you initially code this, instead of putting the icon there, start with the text that would make sense for the screen reader. And these icons themselves don’t even necessarily portray very well what it is that I’m trying to represent here.
So, if we look at the actual block itself, this details block, we have number of pages, which is that little bookmark icon. The formats, which is the book icon. Publication date, which is a calendar. Language, that globe. And dimensions, which is, which are the ruler. If you go to the actual Amazon book page itself, they have, they have a very similar set of icons, and details about the book.
So, when I see a list of items like this, whether it’s an, an actual list, an actual bulleted list, or numbered list, I’m thinking that my semantic HTML is some form of a list. And, the, the type of list that I think works best for this is, is a DL, which is not used very frequently. But a DL is a description list. So, you use the DT element, which is the term, and then you can have one, or multiple, DD elements, which is the description that goes with that term. So, one of the reasons I chose that was because we have multiple formats of the book. So, I think that’s, it’s sensible markup to use for, for this.
And, and the icons are, they’re all SVGs, and they are inline SVGs, so they don’t use an image tag, but they actually use the SVG right on- in the code. So, I took the approach of using the ARIA specifications, so, I use an ARIA hidden to remove the SVG from screen readers, and then provide those, the terms with screen reader text.
Phil Webster 40:57
And, something that I think works well for this- so, I said, I’m creating helpers to ensure you do this correctly, so, what I mean by that is, so, I’m looking at the, the helpers.php file, which is inside of the classes directory.
So, I wrote a function here that I just called “icon” that takes two parameters. It has a name, which is the name of the icon, and the screen reader text. So, this function will not work if I do not provide screen reader text. So, basically, if the developer here- so this is developer accessibility, um, validation, basically- if I don’t provide a screen reader text, I’m just gonna get an error, and the plugin will no longer function.
So, what, what I, what it does here is, you paste a name in, and it gets that file, and then it also requires that you have screen reader text. And then, sorry, let’s get back to the block, and look at that in, so now I’m in the details.php/ So, each of these, you can see, is, so here’s our DL. Once again, the whole block starts with an h2, but we have a DL, so that’s our description list. And then, we have the DT, and inside of that, we have the icon. And then this icon, as we said, is outputting both the, the icon itself and the screen reader text.
So, it’s- using a, a function like that cleans up your, the way that this looks, and makes it a lot easier to, to look at, from a development standpoint. And, and then we have the detailed definitions. So, for pages, it’s just one. For the formats, we loop through, and, and print out each one. And then, the rest of them all just have one option, as well.
Phil Webster 43:31
Alright, let’s go on here. And here’s that, that icon function again. Alright, so, the tricky part is to build a slider that’s accessible. So, one of the things I really recommend is that you do not reinvent the, reinvent the wheel every time you want to add a function, or a new feature to a site.
So, there are lots and lots of sliders that are available. So, what we need to do is find one to use, and not start from scratch. It, in the, um, GitHub page, you will find an article, a link to an article called “How to build a more accessible carousel or slider” by Jason Webb. And, in that article, you can find a whole bunch of information about different types of sliders, what a slider should have, what, what to look for in a good slider, and, and how to implement that.
A slider that I’ve always, think works well with WordPress is called Slick Slider. It has jQuery as a requirement, so, since WordPress already has that, it is a good one to use. And, there’s actually a fork of Slick Slider that’s called Accessible Slick, that makes it even better. So, let’s take a look at the code for that.
So, our slider is in the blocks directory, and it is in reviews. So, actually, let’s go back to classes, where I register the blocks. So, this, this class does all the- handles registering the ACF blocks. So, that is here, when we do reviews. So, we’re just, uh, the, we’re just adding all the attributes for the, for the block here.
One of the things that I like about ACF blocks is the ability to, for it to enqueue assets. So, in this “reviews_assets” function down here, this is where I’m adding all of the files for, for Accessible Slick. So, this uses your, I think, the WP enqueue style, and WP enqueue script functions that you typically would see. And I have put the slick- I downloaded and installed the the slick files in a vendor directory here in the plugin.
If you wanted to use build tools, you could use NPM to install this, instead of having to manually do that, but I did it manually so that it would be easier for everyone to use the plugin if they want to. So, we’re, we’re enqueueing the scripts, and then, let’s go back to the, the block itself. And in the reviews block. Sorry, we got the PHP file. In reviews.php, I’m, once again, creating a block that will be accessible no matter where we put it.
Phil Webster 48:12
So, it starts with an h2. It’s wrapped in a section. And then, we’re creating the slider here. So, the slider, once again, is, is, consists of one block, and that block is a, um, quote block. So, we’re putting the quote here, which is just the content of, of that post, which, since it’s a post type.
And then, I’m adding this little additional screen reader text here, where it’s “Reviews %s of %s,” and these 2 dollar sign- sorry, “%s,” they get filled with the current review number, and the total reviews. So, on the front end, this will say, in screen reader text “review one of three,” and then, if you move to the next slide, it will then say, “review two of three,” so, so a screen reader user would have the context of which, which slide from the carousel they were on.
And, and then, let’s look at the JavaScript for this. So, here’s where we’re kicking it off, down here, just using a regular jQuery function here. So, this is called “initializeblock.” And then, up here you can see, we just call a function “slick” on it. But, the thing that is interesting about Slick Slider is that it gives you- it’s pretty easy for you to change a lot of settings on there.
So, one thing to note is that the Accessible Slick is, has autoplay off by default. So, there is no autoplay on this. On the slider, one of the things that you need to provide, for a slider, is the ability to pause it, or stop, stop the motion, if you have that as, if that’s on by default. So, we don’t have to deal with that, because this is paused by default. So, the only way to move the, change the slider is with the navigation that is, that’s there.
So, you can navigate with the, with the dots at the bottom. So, you can navigate with these dots, or you can navigate with the arrow buttons. And, you can see, we also have the ability to highlight those with the keyboard, and navigate with the keyboard too. So, you want to be- for navigating that, you want to be able to navigate with a tab button between those, between those different controls. In terms of what these controls need to be, these need to be, these need to be buttons.
So, if we- this might not be the best idea, but, let’s see if I can, I can make it bigger. So, there is a button here. And you can put the class of slick next, so that- this, this button is what controls the slider. And, you can see, I’ve added screen reader text here that says “next review,” and slick took care of this for us, but, they hid, they used ARIA hidden to, to hide that icon from screen readers.
So, if we look at the code, we can see how easy- alright, I’m gonna, it wasn’t necessarily that easy to hack this, but, the next arrow, and the previous arrow, I had to put all of this HTML in there just so I could change this. So, let’s say “next review” and “previous review.” They’re, they don’t have an a way of declaring just the screen reader text, the screen reader text does exist by default, but it is really generic. So, I’ve updated it so that it would be clear that this was for navigating the reviews.
And, this little thing here at the bottom is a way to load this JavaScript on the backside of the website, too, so you can see the slider in the editor itself. So, here, if we add a review, you can see that the review shows up. And then, if I add another one, the slider shows up. So that, I think that makes a little bit better editing experience for the user.
Phil Webster 53:35
Alright. So, that’s about all I have for my presentation itself. I think it would be great, if we have questions, to go, and have a discussion that way, so that I can actually answer people’s questions they have instead of guessing.
Amber Hinds 53:58
Well, thank you so much, Phil, that was really awesome. Hopefully I’m here. Yep, I am. I checked my other computer. Does anybody have any questions or thoughts about building plugins and accessibility? Feel free to just unmute, or if you want to raise your hand, or put something in the chat, whatever works best for you.
Um, I will say, I’ll maybe get started, Phil. I’m curious to know, as far as, from a developer standpoint, what have you found to be the most helpful as far as learning what you need to do to make code accessible, or the output of code accessible?
Phil Webster 54:42
Well, the unfair answer is that writing tests for a plugin that checks for accessibility makes you understand the output of [laughs] of what you need a lot.
Really, I would say that it’s mostly just making sure you have good HTML. So, good HTML is going to fix a lot of problems. The second thing that fixes a lot of problems is figuring out when you have to break HT- not break HTML. So, in my day job, I’m writing in React probably at least 50% of the time, so at least- so anytime that anything is seen by a user, it’s in React.
So, it’s not, I know that React gets a bad rep for being inaccessible, but React, in reality is just outputting HTML. For the most part. We, we do have ways of interacting with it. React, and, any HTML, allows us to, the, Chrome and the, the, the browsers are very forgiving, so, they’ll make broken HTML work.
I’ve seen lots of buttons that are really links, and I’ve seen lots of links that are really buttons, but to a sighted user, they work fine. Just knowing what the role of, of the elements that you’re trying to put on the page, what they do, is, using the right, using them for the right thing is the most important thing, I believe. Forms can be really difficult.
Amber Hinds 56:42
Yeah.
Phil Webster 56:43
To deal with. I mean, one of the good things about most front end code is that we can just use a plugin that is going to give us an accessible form. It’s when we start to create our own forms, or create interactive elements, that’s where it starts to become tricky. But, still there, it’s like, just properly formatted HTML, having labels, are- it’s gonna help you, like, give you a good start. You’re gonna get a lot of the way there by, by just, by just having good HTML.
Amber Hinds 57:24
Yeah. So Nick asked, “what are some considerations you have for developers who are blind?”
Phil Webster 57:32
I would say I don’t have a good ans- I don’t have a good answer for that. I don’t know, like, what the tools, that are in place. I, is Nick’s question about, in terms of, like, the admin of WordPress, or using a code editor? I don’t know what that, like, what particular direction?
Amber Hinds 58:02
Yeah, we have had some people- I’m not sure if Alex is still here, and if Alex is a developer- but we have had some participants in our Facebook group, who are developers, and, um- oh, I got a clarification but I’ll finish- but also are blind. So, that might be a good question for the Facebook group, because they might have suggestions on like, which text editor works better, and those sorts of things, right?
So, Nick’s clarification was, “what considerations do you have for the back end of WordPress?” And the output there for, maybe it’s not necessarily just developers, but more like users, or people who are building the plugin, or setting- building the block, right?
Phil Webster 58:57
Yeah. So, you know, I mean, it’s, it’s basically the same answer, because the backend of, the backend of WordPress is really still a front end application. It’s just, it’s, you have to log in to get there. I do think that there is not nearly as much attention put there by, at least, third party plugin developers. I know that, like, the block editor itself has seen improvements. I can honestly say that I have not tried to use it with a screen reader. I’ve try- I’ve, I’ve used it with keyboard only to see how that works, and, I feel like it’s, it works fairly well.
Amber Hinds 59:46
Mhmm. Yeah, I’ve, I feel like we’ve gotten some feedback on things that we’ve built with ACF, and they’ve said that that was fine. But, I think you have to think about, if you’re coding- you know, we put work into this with Accessibility Checker- the same sort of things that you do on the front end, right? So, not having ambiguous links, as much as possible. Using tables only where appropriate. No empty buttons, or, making sure they’re actually buttons. I, so, I think, you know, anytime you’re building a plugin that has settings, you need to make sure you’re following the same HTML semantics that you talked about, so.
Joe is asking, “Do you have any plans to submit this to the WordPress plugin repository?” So, I’ll start with that question, and then I’ll follow up with some other questions he had.
Phil Webster 1:00:43
Right now, I do not. I thought that maybe I would, but I’d have to take all of those ACF blocks, and write custom blocks for them. So that you could, you wouldn’t have to have ACF Pro. At least that’s, that’s how I would want it to work, is without that.
Amber Hinds 1:01:00
Mhmm. So, do you know, or can you talk a little bit about the approval process for submitting things to wordpress.org, and, will accessibility features make the approval easier or quicker?
Phil Webster 1:01:17
Um.
Amber Hinds 1:01:19
Oh, do you want to stop sharing? Someone asked if they could do that so they can get a larger view of the sign- of our interpreters.
Phil Webster 1:01:32
There we go. So, I don’t, I don’t know this as a fact, but, I don’t think that there’s any kind of accessibility review by the plugin team. At least, so, I don’t think that that would be a consideration for approval or disapproval. I could be wrong, but I don’t think that accessibility is part of that approval process at all. The- on the theme side of things, I think it is, but, I don’t think so on the plugin side of things.
Amber Hinds 1:02:09
So, my understanding of the plugin review process is that they mostly, I think, have, like, some automated scans that they run, and they look for some really specific things, like, if you’re using prefixes that are unique enough. So, I don’t even think you can have two characters anymore for a prefix. And, they look for, like, some security issues, they look for trademark violations. I’m not certain if they actually activate the plugins and try them, though.
Phil Webster 1:02:46
Yeah, I don’t, I don’t know. I know they do review all of the code in there.
Amber Hinds 1:02:51
Mhmm. Yeah.
Phil Webster 1:02:51
So, yeah. So, like the namespacing that’s in the plugin, I, I’ve, we’ll help with that. So, if you do like a two pref- a two letter prefix, you’re gonna get a response that says, use, “use namespacing or a longer prefix.” And then, the other main thing is, anytime you’re outputting data from the database, you have to use, you have to escape that data.
So, you’ll see, in the, in the plugin, there are, those esc- those “escape_html,” or, escape attr- attributes, which are escaping information that’s coming from the database. Which prevents people from, it’s really, it prevents people from adding malicious code, which you really don’t need to worry about that much if you already have to log in to enter information, but, it is just another layer of safety. So, I mean, most people who are going to be posting onto your website as an admin, are not going to inject JavaScript to delete your database or anything. You would hope.
Amber Hinds 1:04:00
Yeah-
Phil Webster 1:04:00
-They could just delete it, because they’re already logged in. [Laughs].
Amber Hinds 1:04:04
I will say, it’s kind of interesting on a, um, I don’t know, just from, like, a standpoint of someone who cares about accessibility, and we’ve talked about this a lot, you know, when we think about, we want to make it easier for people who know nothing about accessibility to build accessible websites.
It would be great, I, if there were accessibility audits on plugins, and all themes, because there’s only a optional accessibility audit, if you want to be able to get the Accessibility Ready tag on your theme, and, and then you can apply to get that audit. Otherwise, there is no accessibility audit on, on themes, and there’s no accessibility audit on plugins, which means that the average user, who has never heard of accessibility, will install things and not even know what’s going on.
But, I had a conversation about this on Twitter with someone just last week, following the whole, AcessiBe, uh, case, or, situation with Eyebobs, and the lawsuit that got settled. And, the problem is, is that all of the review teams are volunteer. And, I mean, who even knows, like, a lot of those review teams probably don’t even know about accessibility.
And then, even beyond that, it’s, an accessibility audit is a much more thorough audit, then what happens, which is why I think they say that if you request one for your theme, it can be really delayed, and it can take a long time because they only have so many people who are qualified to do it. So, that would be such a major shift in the plugin directory, to manage that.
Phil Webster 1:05:51
Financially, financially, I don’t see how WordPress could support running those audits, since they would have to be manual. Because, any kind of automated, I mean, they could add something that would be automated, but that’s only going to catch a certain percentage of those, of those actual issues.
Amber Hinds 1:06:02
I mean, a certain, a small percentage would be better than nothing, right? If things were more accessible?
Phil Webster 1:06:16
True, but then, like, are you going to put some kind of label on it? And then use that as like, “this is accessible”?
Amber Hinds 1:06:23
Yeah, but it’s not necessarily.
Phil Webster 1:06:25
Then it’s not really. Yeah.
Amber Hinds 1:06:26
Yeah. I think the, I think the other problem with that, too, is, right, is it just when the plugin first gets introduced? Or is it every single update? Right? Like, just because there wasn’t an empty button at the beginning doesn’t mean that the developer doesn’t add one later on. Which is a challenge, so.
Do you, are, can you speak at all to- so, right now at Delicious Brains, you guys are a plugin company. Do you, do you talk about, or can you speak at all about, like, how accessibility factors into any decisions there, or am I putting you on the spot and you can’t really answer that question?
Phil webster 1:07:06
You’re putting me on the spot, sort of. But, I would say that like, I, I am, like, I would be considered the advocate for that, at this point. So, I’m advocating for those, those things. I only work on one of the plugins, so. We’re working to improve it, for sure.
Amber Hinds 1:07:30
Mhmm. Yeah. Yeah, I think that’s the hardest thing, right, is how do we get more companies to make it a priority? And I would love to hear if anybody has any thoughts about this, um, and you wanted to chime in. Um, let’s see, I’m also looking at some of the questions. I think, Brian said, “Is there a way to tell whether a WordPress plugin has been well coded for accessibility? How would you test for that?”
Phil Webster 1:08:07
I would give, so, here’s two answers. One answer is use the Accessibility Checker plugin-
Amber Hinds 1:08:12
-I did not, I did not pay Phil to say that. [Laughs]
Phil Webster 1:08:15
[Laughs] The other set of, like, the other tools that you could use would probably be the, the axe web tools would be would be good ones to use. I have a Chrome extension that is called Accessibility Insights for Web that I, I’ll put the link for that in the chat, so that, that runs the axe web tools. And you can run that, so you can run that in your browser, so you could run that on a local site. You don’t, it doesn’t necessarily have to be, like, a live website, like a lot of the checkers, you have to have it on a website that is going to check it, so this is in your browser.
I like that one, because it, um, is, it’s really easy to get to, like, turn on, and to use, because it just sits as a web extension, a Chrome extension. So, you just turn it on, and you can run the test right there. And, that is going to give you, like, real fast answers to, like, there are missing labels, or these, these buttons are you know, have no, are empty, and that the color contrast is, is poor. I think it actually has a setting that’s called, like, “Fastpass,” where it runs through those, like, tests very, very quickly. And it, it’ll also give you a list of things to check, like “manually check these things.”
I also use the Lighthouse extension in the Chrome DevTools sometimes. Which, it, it’s a very, it’s very similar to when you do it with the axe, the axe web tools there.
Amber Hinds 1:10:09
Yeah, we’ll, we’ll frequently test, like, the demos, if it’s a plugin that has a demo. Um, but I, the thing that’s hard about that, I think, with testing the demos, is that you can, you have to be able to know, what are problems that exist in the theme that weren’t actually added by the plugin, because a lot of times the demo site has problems on it, so. So that, it, it kind of requires knowing a little bit, but. Well, we are getting close to time.
Does anybody else have any questions or thoughts about plugin development and accessibility, while we have Phil here to answer them? While we’re waiting to see if anyone does, do you want to let everyone know how they can get in touch with you, if they think of something later? Or where they can follow you, or find out more?
Phil Webster 1:11:12
Sure. So, on, on Twitter, it’s @phil_webs. Isn’t it convenient that my last name, if you stop after four letters, just spells “webs”? It’s like I was born for this. [Laughs]. Or, if you want to send me an email, you can email me at Phil@deliciousbrains.com.
Amber Hinds 1:11:44
Awesome.
Lance Hillier 1:11:46
Hey, thanks, thanks for what I heard, guys. I’m sorry I was late. Just a question about, I noticed this is being recorded. Is this going up anywhere, so I can watch back later?
Amber Hinds 1:11:59
Yes, we rec- we, it usually takes us a few days. So, it might not be by the end of the week, but I’ll definitely be next week, we will have it up on our website, so equalizedigital.com, on our blog. Equalize, equalizedigital.com. We do post the link in, on the Meetup event, and in the Facebook group. And, it takes a little while, because we correct the transcript, and make sure that we have correct captions, and then a correct transcript will be available as well, so.
Lance Hillier 1:12:35
Great. Thank you.
Amber Hinds 1:12:37
Yeah, thank you.
Phil Webster 1:12:41
So, today, I was working on a new feature for for Migrate DB Pro, that has, it has a version of what’s on the site that you’re, are migrating from, and a version of the site that you’re going to, and comparing those two versions of a, of a, either a theme or a plugin. And it has a little arrow that indicates if if the version is the same, if the version is higher or lower. And, you, I think, when you have accessibility in mind, you always need to be thinking about that during the entire process.
So, I’m, I’ve started my coding, started changing over, so that I’m coding the accessible part first. So, make it accessible, and then, like, take that away. So like, start with the screen reader text, and then get rid of that, and then put the icon in there. So like, does it work before I mess it up, basically. Before we mess it up. Before we mess with accessibility [laughs] does it work, you know? I think that’s, like, a better way to go about it. Starting, start with accessibility, and then go to, to the design, from that.
Amber Hinds 1:13:57
Yeah, I think- I definitely agree, like, and maybe that’s one thing, I don’t know how many plugin developers have designers on their team, or actually start with design. Especially for the back end of their plugin, and not the front end. Right? Um, and, which, the one you just talked about, it’s all backend, right?
Phil Webster 1:14:16
Yeah, it’s a 100% backend plugin.
Amber Hinds 1:14:18
Mhmm. And, so, it’s like, and I don’t know, you know, if you guys had designs, or created designs, and you have to go create this thing, and you have a design to look at. But I think that would apply the same way that we talked about with websites, which is it is way easier if accessibility starts earlier in the process.
So, if you have designs, your plugin designer should be thinking about accessibility. And if you don’t have designs, but they’re saying, “we need to add an arrow,” right, so, I like what you said you output the screen reader text first, you know, “higher,” “lower,” “version number,” or whatever, right? And then you go find the icon to make it pretty.
So, and, and I think, too, like, even thinking about that, right, you could have chosen an icon, you could have chosen an icon, which is just a dot, and said, “I’m gonna make it green or red,” but that would cause a problem for somebody if they can’t see red, green, if they can’t distinguish between the two. So, then you have to make the decision, right, to have an arrow up or down, versus just having a dot that changes color.
Phil Webster 1:15:27
Yeah, and the good thing is the designer that we do have on our team is, he’s open to these discussions. You know, so it, it has to be a conversation. So, you need to have someone who’s advocating for this. Whether it is, you know, if you, if you have the advantage of being on a team, you, someone, if someone’s not advocating for it, it’s going to get left out.
Amber Hinds 1:15:52
Yeah. Well, you guys may have heard in my background, a little bit, I have a little person who is not very happy right now. And we are about at time. So, thank you so much, Phil, I really appreciate this, and it was nice to have a more developer, code-focused talk.
So, we will be, as a reminder, we’ll be putting up the recording and everything soon, we’ll announce that in the Facebook group, and also on the Meetup event page.
A quick shout out again, to join our newsletter, which is equalizedigital.com/focus-state, and that will get you also upcoming events, and news and things because the Meetup emails are not especially accessible, as I found out last week. And, please do, if you get a chance to, send a Twitter shout out to our sponsors, we’d very much appreciate that, to thank them. They were, um, we posted them earlier, and we’ll message about them again. So, feel free to say thank you to them, so.
Thank you to our captioner, and our interpreters and I hope everyone has a really great evening. Thanks, Phil.
