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, October 18, 2021, and a video recording of the presentation.
About the Topic
In our Meetup on October 18th, Nick Croft, a Senior Developer at Reaktiv and IAAP Certified Web Accessibility Specialist, discussed different approaches for adding screen reader text to various elements.
Thanks to Our Sponsors
WP Engine, a WordPress technology company, sponsored the live captions for this event. They provide the most relied upon and trusted brands and developer-centric WordPress products for companies and agencies of all sizes, including managed WordPress hosting, enterprise WordPress, headless WordPress, Flywheel, Local and Genesis. WP Engine’s tech innovation and award-winning WordPress experts help to power more than 1.5 million sites across 150 countries.
Leon Stafford, who sponsored the ASL Interpretation for this event, is a developer at Strattic and creator of WP2Static. He also maintains the Accessible Minimalism theme for Hugo and is in the process of porting that to WordPress. He thinks accessibility is one of the most important goals of technology, but also one of the hardest to get developers and stakeholders to care about. He gives thanks to all the champions in the a11y space and for everyone just becoming aware of its importance.
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:
- WP Engine’s website
- WP Engine on Twitter
- Leon Stafford’s Website
- Leon Stafford on Twitter
- Equalize Digital’s website
- Accessibility Checker Free plugin
- Screen Reader Text Format Plugin
- Bootstrap Stretched Link
- MultilingualPress
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
Hello, everybody, I’m so excited to see everybody today. Um, feel free- while people are joining- to, if you want to either type in the chat, or unmute yourself and introduce, you can. Whatever you are more comfortable with. Sometimes it’s nice for our speaker to have a feel for who is on the call, how they use WordPress, if there’s any specific questions that they came to the Meetup with, so feel free to either unmute, or type in the chat. Maybe I can pick on somebody. Who do I recognize? Alicia, do you want to say hi to everybody?
Alicia St. Rose 0:52
I literally just, like, got in here [laughs]. Hi, everybody. I’m Alicia in Santa Barbara, California, and I’m really excited about this Meetup because I want to really, really learn how to do this accurately. And, I’ve been doing WordPress for like 15 years, I got into accessibility, like almost the beginning of the COVID outbreak, and realized how important it was for people to have access to the web, and so like, become pretty much of a champion for it. So, it’s pretty cool.
Amber Hinds 1:24
Awesome. Thank you. Would anybody else be interested in introducing themselves? I can start picking on more people [laughs]. I don’t know if people hate that, or if they like that, because then they don’t have to feel like they can’t, uh, join, join in, so. Kathy has been a few times, and she wrote in the chat that she is “learning about WordPress and is committed to accessibility. This is a great topic”. Patricia says she “manages a WordPress website, and is trying to learn more about accessibility.”
Would anyone else be interested in introducing themselves? We can do some, uh, some, some small talk [laughs]. Are you working on any interesting websites that you can tell us about Nick, since you work on fun accessibility projects? I put you on the spot [laughs]. Or any recently launched ones that had big accessibility initiatives?
Nick Croft 2:41
You know, I do, but I, we’ve got, uh, some contracts on stuff, I don’t know exactly which ones I’d be able to talk about. Jay and Josh are here, if they could say one that I’m allowed to talk about, I’d love to talk about some of the stuff that we’ve done. That’d be cool. Um, I actually didn’t put any of those things in there, uh because-
Josh Eaton 3:01
-Hey, Nick?
Nick Croft 3:02
Yeah?
Josh Eaton 3:03
Since, since Cornell launched, I think you can talk about that one.
Nick Croft 3:06
Okay, awesome. I, I, that’s the one I wanted to talk about. So, yeah, we just did a project with Cornell University, the Alumni Association, and we’ve worked with them a lot in the past, and we just launched a new sub site for alumni. So, it’s alumni.cornell.edu/cornellians, and there’s two L’s in that, by the way. And, we implemented some of the strategies that I’m gonna be talking about today, actually uploaded the plugin to their site, so that we can begin doing this, provide some training, and record a video for them.
We did multiple accessibility reviews, and I’m actually going to be going through, as, now, as we change things and begin doing stuff, a lot of times you find that everything is perfectly accessible, and, then a little bit later, it’s not accessible again, so, we are going to be doing another full audit, do some complete keyboard and screen reader walkthrough of multiple parts of the site. But there was, a few, one of the big things that we wanted to give them was the ability to edit almost the entire site, using the WordPress block editor, and so, we created blocks, and patterns, and all of these other cool things, but the design called for certain things that were not entirely accessible, so, we’ll be talking about some of that stuff a little bit.
Amber Hinds 4:22
Oh, yeah.
Nick Croft 4:23
And, and the ability to go in and give content creators, the screen reader text formatting, so that they can actually just go in and take these links that are kind of vague, not very specific, and make them incredibly specific, you know, within context, it looks great, but without the full context, which a lot of screen readers deal with, and we’ll talk about that in a little bit, it just really upped the usability, not just the accessibility, of the website. So, I’m glad you allowed us to talk about that one, Josh, because it’s going to kind of highlight some of the things that we’re talking about here.
Amber Hinds 4:59
Yeah, I’m, I’m definitely looking forward to this talk, so. I think, and it’s interesting too, we’ll have, I’ll have to go later and look at the website, because I think it’s fun to maybe go there and try and guess “what were the design features that the designer wanted that you had to rework,” right? Let’s see-
Nick Croft 5:17
-Yeah, I’ll highlight that.
Amber Hinds 5:19
Yeah, that’d be great to share. We have a few more in the chat. So, Jay says he works with Nick, and already knows how much Nick excels at accessibility. Ann introduced herself in the chat, she’s “a marketer who manages a few websites, and wants to learn about screen readers, and what she can do to make things better for them on my sites,” so, awesome. I think we have time, if one more person is interested in introducing themselves, or sharing what they do with WordPress, or anything they’re interested to hear tonight, feel free to unmute or go into the chat, and then we’ll get started.
Or, I’ll just dive right in [laughs]. We’ve got, everybody’s quiet tonight. Alright, so, before we introduce the main event, I’m going to do a few announcements. So, if you have not been before, we have a Facebook group that you can join if you’re interested in connecting in between Meetups. It’s kind of small, we’re just getting started, I think we’ve got, like, 150 members, or something like that, but we’re starting to work on building- oops, I’m jumping around apparently- um, building that up and having some conversations in between. So, if you’re looking for help, then you could join, it’s facebook.com/groups/WordPress.accessibility.
And then, some exciting news that I’m kind of, like, sneak peeking, but, we’re in the midst of talking with the International Association of Accessibility Professionals about getting the Meetup to qualify as continuing ed credits for the website accessibility specialist, or, I always forget what it is, the CPACC certification. So, hopefully coming soon, you will be able to get continuing ed credits by attending our Meetup! Yay, more reasons to come! [Laughs].
In the meantime, I always like to say in any Meetups, if you have any questions or need additional support, we’re doing our best to make it as accessible for everyone, or if you have ideas for speakers or topics you’d like to hur- learn about, you can reach out to either myself or Emma, the other organizer who is here today as well, you can reach either of us just by emailing our first name @equalizedigital.com.
And then, just a quick “about us” if you haven’t heard of Equalize Digital, we’re a WordPress VIP agency, we’re a certified B Corporation, and we’re a member of the IAAP. And we’re super focused on accessibility, that’s our favorite thing. And we’re trying to make everything as accessible as we can. We have a WordPress plugin called Accessibility Checker, which, Nick I don’t know if you know about it, but we literally built it for the same pain point you mentioned, which is we launched websites, and then they stopped being accessible. So, it scans and provides reports on the post and page edit screen. There is a free version on wordpress.org that you guys can check out if you’re interested.
We have two sponsors tonight that I want to thank. So, first is WP Engine. They are a hosting company, and, well, I guess now they’re calling themselves a WordPress technology company, and they have both WP Engine and then their other brand, which is Flywheel. They build the Local for local development app, and they are the owners of StudioPress and the Genesis Themes. And they have sponsored our live captions tonight, so, huge thank you to them. You can learn more about them on WPEngine.com, or you can tweet them @WPEngine.
And then, our ASL interpretation sponsor for the evening tonight is Leon Stafford. Leon is a developer at Strattic, and the creator of WP2Static. He also maintains the accessible minimalism theme for Hugo, and is in the process of porting that to WordPress. Leon is a huge accessibility advocate, and he thinks that it’s really important for everything to be accessible, and he wants to thank everybody who comes to these Meetups, and is interested in trying to make their websites more accessible, and everyone who does all their work in accessibility. His website, if you want to learn more about him, is Ljs.dev, and he’s on Twitter @ljsdotdev, so all written out, “ljs dot Dev.”
And, I always like to say that our sponsors, if you are on Twitter, and you have the ability to just tweet at them, tweet @Ljsdotdev or @WPEngine, and say “thank you for sponsoring our Meetup, and paying for captions and ASL,” I think it really is nice for them to hear from attendees that it matters, and that it is helpful. So, if you are willing to do that, that would be awesome.
Amber Hinds 10:24
Some upcoming events. On Thursday, November 4, it’ll be 8 AM Pacific time, because that’s the official time of our Meetup, is in Pacific Time Zone, we’re gonna have Brian Gardner, talking about building themes with accessibility in mind, and how he approaches that as a theme designer. And then, on Monday, November 15, we’ll have Phil Webster, who is a lead developer at Delicious Brains, talking about building a custom plugin with an accessibility first approach. And he’ll be showing, I think, a bunch of code, and that kind of stuff, so if you’re interested in more of a developer perspective, that might be a great talk for you to attend.
So, today’s speaker, I’m super excited. I think I first encountered Nick in Genesis land in like 2010. So, if you’re in that land, he’s Nick the Geek. And I think I saw lots of YouTube- your tutorials way back when, and started following you online like a weird, groupie, WordPress stalker [laughs]. So, I, I think, like, you were one of the first people I saw who talked about accessibility and some of the things that you’ve done, and I really appreciated that, so, I was very excited when you agreed to come here and talk and I’m sure you’re going to share about your block editor, screen reader text plugin, but I know we’ve kind of been sneakily using it on some projects, so.
I, I think Nick is a really great person to have here talking about this. He is a certified web accessibility specialist, also has certified professional and accessibility core competencies, and a certified professional in web accessibility, and a 508 Trusted Tester certification, so, he is most definitely a great expert in the room. He is a senior developer at Reaktiv, which is also WordPress VIP agency that does some really cool work. So, I’m going to stop sharing, and I will un-spotlight myself, and let you take over Nick, and feel free to add any extra introduction information about yourself.
Nick Croft 12:33
Thank you, Amber. Let’s see, make sure I’m sharing my screen correctly. Hopefully everybody sees the first slide of my presentation. It has the Reaktiv Studios logo at the top. That’s the agency I work with. Josh, who spoke minute ago, is the CEO and owner of it. And Jay is also here, not sure if anyone else is here, Jay is a lead developer, and has recently taken on a managerial role in the company, so that’s really cool.
Next line down says, “Nick Croft presents,” and then, finally, the big heading is “screen reader text.” I’m going to be trying to introduce my slides and actually read them out. When I was attending the Deque web accessibility conference, I noticed several of the presenters were doing that, and at first, I was like, “why are they doing this, I was always taught never to just read what’s on the slide, because people can see what’s on the slide,” and then I was like, “oh, not everybody can see what’s on the slide.” And it’s a big part of what we do. We take things for granted. I see what’s on the slide, people taught me you- everyone sees what’s on the slide, and we don’t really realize that we’re kind of hurting ourselves, and hurting other people, when we take all that stuff for granted.
So, I’m trying to improve myself in my presentations by actually reading it out. Some of it’ll be integrated into what I’m actually going to be saying, but all of this is about continued growth. I don’t think any of us, Amber said I was an expert and I’m like, I hate calling myself an expert, because it makes me sound like I’ve reached the pinnacle. I am on a journey of growth, and I have become increasingly excited about accessibility standards. I really first came into the idea of accessibility years ago, trying to recognize that, the, the online presence should be the great equalizer. Everybody should be able to come online, and have access to the same content, and not have to, to go over the hurdles that they may have to go through in the physical world. But, I’ve realized that there’s a lack of understanding of how to do that appropriately. And so, this presentation is going to be focusing on one very specific part of that.
Um, a bit about myself, as I’ve come into this idea and I’ve got all these certifications that were listed, and, and those are all great. As I said, I’m on a journey of growth, and, recently, my daughter experienced really horrific, just mind numbingly impossible set of circumstances that’s resulted in her having a significant physical disability. And, through that I am becoming even more, I don’t know if the word is aggressive, just, I just, am very much passionate, even more so, about the importance of making this world a better place by making myself a better person, and encouraging other people to recognize that we can be better together.
As we go into this presentation, I’m going to be talking about a few things related to screen reader text. And, my slide’s not presenting- there we go, we moved forward. So, on the screen, I’ve got a couple of columns. On the left it’s got the, the heading “screen reader text,” every page is going to have “screen reader text” as a top level heading. And then, the, the four bullets of the things that we’re going to be looking at today. “Why we need screen reader text,” “how screen reader text works,” “the screen reader text format plugin demo,” and then, finally, we’re going to end with questions and answers.
I will say that while I have a section at the end of this for questions and answers, and also discussion, because I think that we can collaborate and grow, I am not the pinnacle. I think that we can come together and discuss things and all of us grow through that, so, when I say questions and answers, that doesn’t mean you ask me questions and I provide all the answers, it means that we collaborate and discuss. I’d like to have opportunities after each of the three sections before to have just a little bit of discussion if anybody has anything that they’d like to say. So, you don’t have to hold that to the end.
On the right side of the screen, we have an image that just shows some screenshots from the screen reader text plugin in the block editor itself. And so it can say- it says there “screen reader only,” that’s a heading that has some highlighted- sorry, “screen reader only text,” it’s a heading that has some highlight around it, and a section below that has “screen reader only text,” and then a partially visible paragraph from the WordPress block editor, and a drop down showing the screen format options.
Nick Croft 17:16
Now, as we’re going to get into this, I’m going to be showing you some code examples, very specifically, CSS examples, and I don’t want that to make you feel wary, like you’re not going to be able to hop into this. The largest part of this is really intended to be for content creators. Because, it’s not enough for developers to create a, you know, accessible theme, it’s not enough for us to create accessible plugins, we need to have full education for content creators to create things that are accessible as well.
As we talked about, we go in, and we create something, we make it fully accessible, and then we hand that over to the editorial team, and they start creating content, and they know nothing about having alt text for images. Or they’re like “oh, we’re going to add alt text to the images,” and it’s like the title of the image, or the, the, “this is an image of a flower,” or something like that, which is not particularly helpful alt text. And so, we have to create educational opportunities around how to do these things well for content creators.
As I look at the code examples, I’ll explain exactly what’s happening with that code, so hopefully nobody is, like, overwhelmed by seeing code on the screen. At the same time, people that are coming in here with a little bit more technical experience aren’t going, “I don’t really need to know how to, use, how to use a plugin, I can do this myself.” So, we’ll hopefully be able to find a nice happy medium in all of this.
o, moving on to the very next topic, we have “screen reader text” at the top of our slide, and then the heading “why we need screen reader text.” And then I have four bullet points, “screen readers ignore most visual markup and CSS.” “Design Patterns often create vague link titles, uh, link text, like read more or buy now.” And, “special links like skip links.” And then, finally, “instructions explaining visually apparent cues may need added explanation for screen reader users.”
There’s actually several other reasons why you may need screen reader text. Something I didn’t include in here is whenever we use icons to represent something, for example, if you have social icons on your site, and you would have an icon for Facebook, and instead of, its, being an icon that doesn’t say anything on that link, you would want it to say “Follow us on Facebook,” or something to that effect. Depending on how that icon is inserted, you may need screen reader text in that place to help, uh, screen reader users know what that link is all about. So, there’s a lot of different ways that this can interact and work on a site, but these are some of the bigger patterns that I see and use.
Let’s see if I can start sharing my Safari window. And, so now everybody here should be able to see a web page here, the title of the webpage is “screen reader text format,” I just spun this up using a local development tool, and then the subtitle of this is “a WordPress plugin demo.” And then we have just a basic web page presented here, I’m going to be going through all of this as part of the presentation, and kind of explaining these different ideas. Each of the main headings are the things that we talked about, so we’re going to go into it a little bit, a little bit more detail.
So, the first heading was, “why do we need screen reader text,” and then our subheading there is “screen readers ignore most visual markup and CSS.” So, this means that when we style text using bold, underlines, italic, strikethrough, or other visual HTML markup, the screen reader user is not aware of the markup. Often, this isn’t a huge deal, but consider the following example. Sometimes, content creators will, will update content, and strike out the content that is incorrect, and append content that is updated. A screen reader will read the full content without indicating some portions as edited.
So, I’m going to pause here and point out a couple of things. I literally just read this off the screen to you, and if you are not able to see the screen, you won’t see that I have bold text, underlined text, italic text, and strike through text. You won’t see that in the sentence where I said “sometimes content creators will update content, and strike through content that is incorrect, and append content that is updated” that the words “and strike through content that is incorrect,” has been struck out. A screen reader will just read it exactly like I read this to you originally.
And so, without that context of this strike through content, you may be losing very important cues that the reader needs to know that this content has been updated, and the information that was struck out is no longer accurate information, and the new updated information is now the accurate information to replace it. That can cause a lot of confusion for users who can’t see this. And because screen readers ignore the HTML visual markup, it isn’t going to help them at all. And they also ignore most CSS, because it’s generally considered visual presentation.
Nick Croft 22:16
Next, I have a blockquote that says, “another common use is when someone quotes a source then bolds a portion for emphasis. They may even add something like, in parentheses, ’emphasis added’.” What’s interesting is most screen readers won’t say “in parentheses” like I just did, and it also won’t highlight that it says “bolds a portion for emphasis,” which doubles the problem. You’ve now said to a screen reader user, something has been bolded, or emphasis has been added to this, but they have no idea of what that emphasis is. You are now excluding that screen reader user. Not just not giving them information, but you have let them know that they’ve been excluded from information.
So, I go on to say “when this happens, the added text makes it clear there is information that is not included to screen reader users, which only emphasizes the lack of consideration.” Now the real trick with this is deciding if the indicated emphasis is helpful or not, or if the message is unclear in the format it’s presented in without visual cues. So, to go on, just because you have bold text doesn’t mean you have to go “bold,” “not bold,” every time that shows up. It’s going to get annoying and irritating as you overuse all of that. In fact, sometimes we overuse bold text, and underlines, and different things like that.
If we’re underlining or italicizing a book title, we don’t necessarily have to indicate that it’s underlined or bold, but we may want to have screen reader text to say “book title,” if we haven’t already indicated that in the presented content. So, the important idea here is not just to use screen reader text, but to also understand when not to use screen reader text. Effectively, you need to read the content and understand your purpose in it. It’s kind of like creating good alt text.
Alt text isn’t just describing the image that’s on the screen. Alt Text is describing the reason that image is on the screen. If you have good alt text, then the user understands why that image is there, and the emphasis that’s being created by that image. It’s going to engage them, and make them enjoy that content more. If you’re just describing the image on the screen, and it has nothing to do with the rest of the context, then you need to revise your alt text and make it better.
If you’re using screen reader text to indicate where emphasis is, but it’s not actually enhancing your content, then you need to revise it and decide how to make it enhance your content so that it engages your screen readers, uh, users, and helps them to gain the information that’s being provided by visual means in a way that’s helpful to them. So, in my example on the first paragraph, I don’t know that it’s necessary to say “bold text is bolded,” “underlined text is underlined,” “italics text is, uh, italicized,” and “strikethrough text is struck through.” It’s not necessarily going to enhance the content of that opening paragraph, but in my second paragraph, it is imperative to make it clear that if I’ve struck through something and replaced it, what was struck through and what is replaced?
And finally, if I’ve let somebody know that there is emphasis in a quote, I should be letting them know where that emphasis is at. Otherwise, I am not only failing to provide that information, I have told them that I don’t consider them worth letting them know where that emphasis is. That’s very, very uncomfortable when you have that relationship with your readers. Now, our next section is the heading “design patterns often create vague link text like read more or buy now.” I think we’ve all seen this, it’s an incredibly common pattern. In fact, one of the oldest patterns I’ve seen is the dreaded “click here” text.
Nick Croft 26:14
As a general rule, never do that. What I mean to say is, don’t ever create a link that just says “click here.” It is very old and very bad. However, there are somewhat more valid reasons for having vague links. So, in the context, it seems clear, but screen readers often scan pages for headings, links, images, etc., and they don’t always see everything in the full context. It is possible, once they get to a vague link, to scroll back and have it read through the text so they understand the context, but it’s adding extra burden on them.
So, links and buttons need to have clear actions. This means they say what happens when clicked. “Continue reading” is a clear action, but it’s not helpful. “Continue reading about screen reader text” is a clear action, and it’s helpful because it’s specific to what you’re going to continue reading. If you can, visually present the longer text. But if you cannot, then screen reader text can help.
Reasons why you may not be able to put the full text in is limited space. We’re going to be looking here, at the end of this presentation, at price tables. It’s a very common thing that people set up and use, and, through the context of price tables, we see that there’s very limited space. You have two, three, sometimes four or more columns of information, and so you have limited real estate on how to put that out there.
Layout with buttons and other controls sometimes looks very odd and broken if it goes to multiple lines, and so, short, punchy calls to action can be incredibly important to maintaining the design. And, within context, it may work very well to say “buy now” or “subscribe now,” but, for a screen reader, they may not understand that context without more words. So, that’s where screen reader text can really help out.
The other one that we see are “special links like skip links.” And, so this content doesn’t have a skip link, but the page includes one, so let’s look at it. I’m going to come back up here, and I’m going to use tab, and, so we’ve got a few links that are happening.
Nick Croft 28:36
So, log out’s one of my hidden links. I should have a “skip to main content,” but I think because I did not set up my menu that that automatically got disabled, but it would say “skip to main content” here as well. And, so, in this case, it is also a visual link for keyboard users, but it’s hidden off the screen for screen reader users, so they’re able to actually access that using what’s called a rotator with their screen reader, and it lets them go through different ways of viewing and interacting with the on screen content.
So, the link on a skip link is generally not visible to users until it comes into focus. It’s also visible to screen reader users by the links rotator when it- and when it is in focus. This is important to ensure users can access these special links. Uh, for content creators, you likely are not going to be interacting with those, it’ll be built into your theme, but when designing a site, consider just going ahead and making the links always visible, because there’s a benefit to some users who are not screen reader or keyboard users, but want a quick way to move past a tall header.
We have to recognize that disabilities exist in a lot of different formats, and just because somebody is a sighted user with a mouse instead of a keyboard, doesn’t mean that they want to have to go through this big long, distracting header all the time. They want to hop down to your content. And, so, there’s reasons why we would not hide all the time. And again, part of this is understanding that just because we can hide text, doesn’t mean we should always hide text. When it comes to these special skip links, I’m also going to be showing, in our code example, how we can make them visible via the keyboard focus
And so, the last heading was “instructions explaining visually apparent queues may need added explanation for screen reader users.” So, when creating forms and other interactive elements, it’s best to avoid instructions that rely on direction based descriptions, like, “the description for each field can be found below the control.” Top,” “bottom,” “left,” “right,” etc. can be meaningless, however, we also take for granted how visual cues have no meaning for non sighted users. For example, I point out “a slider with coins representing the number of slides and active slide is not helpful to users who cannot see the presentation of it.” So, if you’re creating a slider, and you have, you know, those coins on there, the little dots at the bottom, or longer tabs, different things like that, provide additional text to indicate “slide one of four,” or whatever it’s going to take to make it clear what the visual content represents. And so that can be done with screen reader text.
I also want to say that there’s other ways of presenting this information. You can use ARIA labels or ARIA descriptions, and that will help to provide that added information. For the sake of this presentation, I really am narrowing down the focus to doing screen reader text, so, I just wanted to point this out, that there’s not just one way to do it, and learning the different ways to do this, especially for developers, helps you to find the best way forward for your given use case. I’m focusing on screen reader text here, because we have this plugin that allows content creators to go in and insert this into their content. And I think that’s really good for end users to be able to output and understand, or, sorry, content creators to output and understand how all this works for them.
I’m gonna take a moment here as I am transitioning back to my slide deck, does anybody have any comments or questions? And again, if you have comments and questions, you can drop them into the chat as we’re going. And I think we can circle back to them with each section here.
Amber Hinds 32:26
So, we did get one. Isla Waite said “what is a good practice for blog excerpts that appear on a homepage surface from a blog area? Usually you see the title and excerpt and “read more”. She wrote, “Ugh. In such a small module, is it good practice to repeat the title in the link, or maybe paraphra- paraphrase it? I’d love to hear you talk about this. Thanks!”
Nick Croft 32:52
Uh, it is an excellent question, and, as a developer, I would approach this differently depending on a few different ways that it’s laid out. This is actually one thing that I have struggled with, coming with a great solution for, for all use cases. Usually, this is what happens in my experience. I have a link on a thumbnail, and I have a link on the H2 tag, and then I have a link on a “read more” tag.
And, the general rule of thumb is all links to the same end location should have the same link text. And so, all of those should be, let’s say the, the title of this post is “a really good title.” So, all of those should be “a really good title.” So, my alt text on the image that’s inside of my link should be “a really good title.” And my link title for my H2 tag would be “a really good title.” And then my “read more” tag, I would probably use a ARIA label to override that so that it reads “a really good title.” And, that would mean that there would be three links in a row that say, “a really good title,” “a really good title,” “a really good title,” which is not a great user experience.
So, another thing that we’ve been doing a lot is actually linking the entire section. And, if you click anywhere in that, I’ll call it a card, for lack of a better word, even though they’re not always laid out like a card, then it will work, and then I just have one actual link, and that really works well. The difficulty is that a lot of times then we have a link to the category, and a link to the author, and maybe even a link to a date archive, that are all built into the meta on that. And so, we have to consider how that breaks things up.
If those kind of meta links, category, etc. break up the spacing, so you, you approach your thumbnail first, and then you get a category link, and then you get your title link, and then you get an author link, in that case, I would probably break it up so that they’re all separate links, because it’s not going to be three of the exact same links right in a row. Basically, I just said all that to say, it really depends [laughs].
Amber Hinds 35:21
Yeah.
Nick Croft 35:22
And, unfortunately, when it comes to accessibility, that’s almost always the answer, it really depends. But, learning the basics behind what’s going on, is we want to make sure that all of our links are clear and discernible text.
All of our, we don’t have a lot of repeated links, and we’re thinking through the process of how we can make those two things work together. So, all of our links have the same link text, it’s all clear and discernible text, and we don’t have all these repeated links. And as we begin to think through those things, it really helps to understand those three concepts and come up with a solution for that specific layout, uh, for how it’s going to work on, on that design.
Again, like I said, it depends a lot on if you’re going to have other links that are going to be in between everything to break it up, or if it’s all going to be in a row, and then we just want to have kind of one clickable thing. And honestly, I’ve been kind of pushing back against the “read more” link in general, because it’s vague, it doesn’t do a lot. And, the general pattern is most people know that if you click the thumbnail, it goes to the same place, and if you click the title, it goes to the same place. And, if you’re a screen reader user or keyboard user, that, tabbing through is gonna put you right into those things.
I hope that really helps. And I see some other good discussion happening on this as well.
Amber Hinds 36:45
Yeah, I have a follow up question on that card. So, if you link everything, I’m assuming we don’t want to end up with a link that’s got maybe 50 words. [Laughs]. Are you, instead of having the alt, and the title, and, you know, maybe the excerpt is in there, all read out, are you just having an ARIA label on it that just does that?
Nick Croft 37:08
Yes, exactly. So, when I link the entire, for lack of a better word, card, and usually I end up having to do some CSS tricks to make sure that we’re not getting all the text to show up, like the link, and even maybe using some pointer controls, so that things can be highlighted and picked up when you’re, when you’re highlighting text, some other stuff like that.
So, it’s a little bit trickier than just that, it’s a whole other discussion we could probably do an entire thing on, but, for the link itself, I would use an ARIA label, so that all of the inner text is not included in the link. And the really cool thing is, is most screen readers, when you interact with them like that, you can also go into reader mode, and it’ll just read through all the stuff, so they still have access to all the content as well, just like they would have otherwise.
Amber Hinds 37:54
Cool. Um, yeah, so there’s a few people that put some things in the chat. Alicia said, “as a developer, I add,” it’s like dot, underscore, title, so the title tag, “to screen reader text and to read more link.” That’s how she’s been approaching that, so.
Alicia St. Rose 38:13
Yeah, so that, that it says “read more about” and the rest of the name.
Amber Hinds 38:20
The other thought that came into my mind when you were talking about positional direction, and how that’s confusing, I think a good example of that was, we had a woman, Taylor Arndt, who is blind, and she was talking about her experience with the WordPress backend a couple of Meetups ago, and someone asked her how she interacts with the WooCommerce tabs in their settings, and it took a while for her to even understand what he was talking about, because, for her the way she experiences that page is it’s just a really long page, right?
With, like, skip links that jump you to different section of the content, whereas for sighted users, we see that as a different, like, we’re thinking “oh this is the first tab, and on the third tab is this,” and we have to click it and it loads, right? So, I think that that was something that came to mind, when you were talking about the positional thing. The way we visualize something is not the way that it’s actually experienced if you’re engaging with a screen reader.
Nick Croft 39:18
Exactly. Exactly. And I think if you’re writing a tutorial, you need to be aware of that, especially. Because, if you’re saying okay, “click tab,” and a screen reader user’s like, “what tab?” That’s not a great experience if you’re writing tutorials.
Amber Hinds 39:33
Also, she’s, she’s young, much younger than I am. I’m not sure if she knows what a manila folder, filing folder looks like, right? Which is what I think of when I think of tabs, I’m like, well, it’s like when you file in a filing cabinet, but she’s probably never filed anything in a filing cabinet, so. [Laughs]. Yeah.
Nick Croft 39:56
Well, I’m going to move forward. I hope I’m not skipping anybody, I do see a couple other comments. Daniel says “if using Bootstrap front end framework, there’s a class called stretch link. They can go on a card to work as described.” Yeah, that’s really cool. And it saves some of the issues with CSS that I was talking about, by the way. So I’ll often put that on the title of the card to help make sure it reads best.
And Isla says, “that was really helpful, we’ve been battling with it.” And Adrienne says, “agree with Is- uh, Isla, sorry, I read your name wrong, I apologize. Little dyslexia on my end, I literally saw that backwards for a second there until I read it separately. Yes. I apologize. “Isla, like Island.” Isla, Isla Nublar, I think on Jurassic Park.
Amber Hinds 40:45
So I think like “eye-la”.
Nick Croft 40:47
Oh, it’s “eye-la”?
Amber Hinds 40:48
Isla.
Nick Croft 40:48
Double sorry. Alright, so my next slide here, again, starts with “screen reader text,” and this heading is “how screen reader text works.” And on the left, I have two bullets, a visual example, and a code example. And on the right, I have a image that is a rectangular box that says “visible web page,” and it just has a bunch of lines there, it represents what a visible part of your web page is. And on the left side, outside of that box, is the word “screen reader text.”
The idea of it is, whenever we create screen reader text, the way it’s actually working is, in some form or another, we’re pushing that screen reader text out of the visible area. We can literally push it off the side of the screen, and, kind of the oldest way that I learned to do this, is using text indent negative 9999px, and it just pops the text off to the side of the screen. That actually creates a whole other set of problems, and so, we’ve created better, modern versions of doing that using clipping and bounding boxes and other stuff, where we actually create a, it’s a 1px box, but then we do an offset with that to make it a zero px, uh, space being taken up, and then we move the text outside of that box so it can’t be seen.
This modern method solves a lot of the issues that we run into with some of the older methods, where whenever you’re tabbing through, it can create weird highlights, or it can create scrollable areas, horizontal scrollable areas of your page where you can actually scroll over to where that text should be, but because of the way that it’s offset outside of things, you don’t see it there, it’s just this big, you know, 1000 pixel wide section of scrollable text that no one can actually see, which makes your website look broken, so it solves a lot of those issues.
For the code example, you get my visual studio code, and, uh, hopefully everybody sees the visual studio code. The top of this is “rkv-screen-reader-text.scss. And so, this is using a SCSS or SASS file, this is a part of our UI library, and this is a mix-in that allows us to pop screen reader text onto other elements. And there’s actually kind of two parts to this mix-in that allows us to make it a focusable element. The context here can be done in a way where it can just be applied to a regular class, like “.screen reader only,” and the basic ideas in here can be pulled in.
So, when we do this, we’re setting some variables, and these variables allow us to define some basic things that are reused multiple times. And, so, these local variables are part of the way SASS works, it’s not a CSS variable, which is a different kind of variable. And so, our first one is size, and that’s 1px, like I said, our original bounding box is 1px, and then our size negative, is negative one times size, and, so that just creates negative one.
If we were to change the size to 5px, or any number of other things like that, it would become the negative of whatever that value is. And the size negative is going to be used later to offset the 1px it’s created, so we end up taking zero px of space. And so we have a comment here, “state: hidden,” and, so, what this bit here, “&[class]” just means that it’s going to make it a little bit more specific to whatever selector this is applied to, whether that is, as long as there’s a class value ap- appended to this.
And then we include another mix-in, that’s “rkv-pointer-events-none,” and what this does is just makes sure that we don’t have pointer events showing up over the hidden, nothing that’s visually on the screen, but not there. I hope that made a lot of sense. But, like I said, it takes up 1px of space, but then we offset it so it doesn’t affect the layout of anything else on the page.
But, we also don’t want to make sure that it doesn’t suddenly change the cursor as somebody moves their mouse around, like, “hey, why did that change there?” So we make sure that there’s no pointer events that interact with that, and so it passes through to the parent event as well. To the parent on that page as well.
Nick Croft 45:33
We are setting background colors on this, because it allows us to apply our button background, our button text, and our borders on that. Whenever we have it focusable, all that stuff kicks in. And so, we also apply font family size, etc, that allow it to inherit the button designs for a particular site. All of these are part of the focusable concept. So, if you think back to that logout button, it showed up, when I tabbed to it, it shows up on the site as a button when it comes into focus.
So, we apply all those styles to the top level so that it doesn’t do anything wonky when it first comes into play. And, then, down here, these next steps here is actually going to be the part of what makes it work. So, “overflow: hidden” means that it won’t show anything outside of the bounding area, “text-decoration: none” means that it’s not going to have any text decoration applied, and “white-space: nowrap” means it’s not going to try and wrap the text and have some tiny portion of it appearing because of that wrapping. It’s going to force it all out into one line, and all that’s going to be pushed off to the side of our bounding box.
We now have to position it, and we just, you know, top, left zero, that way it just pushes it off the screen completely, so we don’t really see it. But the nature of the way positioning works is it can actually end up in some other portion of the screen, which brings us back to having this “rkv-pointer-events-none” so we don’t ever actually interact with it. The real fun happens here when we start using clipping. Again, I said this is a modern way of doing everything, the clipping is what allows it to have this kind of bounding box, but to not show up if, if it’s part of a link.
As we’re doing these offsets of different things, it would normally kind of show this outset or outline on our link, whenever we have the link and focus. Using clipping allows us to actually cut that off, and it pretends that it didn’t actually exist outside of that area. So, we’re setting a clip path, uh, an inset of 50%, which brings it back down, and then we have a clip rectangle of “size, size, size, size.” If you remember, size was set to 1px. So, we have a 1px bounding box, so it’s a very small bounding box. But then, we also do a little bit of extra stuff to make sure that bounding box doesn’t ever show up anywhere.
We can’t have a size 0000, it just doesn’t work that way, so we now do a margin top of “size-negative,” and a margin left of “size-negative.” And, so those values allow it to interact, and be offset by the size of the box. And then, we go ahead and set a width and height of our size. So, our bounding box and our size are the same, and then we use a margin to kind of move it off out of the corner a little tiny bit. I know this is a lot if you’re not used to code, but all this basically creates a small, one pixel box, and then moves it out of the way by one pixel, and, that effectively makes it take up zero space.
Hold on one second, for some reason my charger is not charging.
Amber Hinds 49:08
While we’re waiting, I think Alicia mentioned in the chat that some themes have screen reader classes included in them already. She mentioned “GeneratePress uses one that is called .screen-reader-text.”
Alicia St. Rose
Yeah, I believe if you put that in your customizer, you could start using that, too. If you’re not into SASS. [Laughs]
Nick Croft 49:38
Yeah.
Amber Hinds 49:38
Are you, Nick, are, is this what’s included in your plugin, or you’re putting this in the themes when you’re building custom themes? Where are you including the SASS?
Nick Croft 49:47
So, this particular thing is part of our rkv UI library, which is part of a base set of components that we use, similar to kind of like Bootstrap, or, or something to that effect. We’ve used Bootstrap in the past, and if you’re using bootstrap, it has its own screen reader only text. I believe it’s “sr only,” it’s been a minute.
Amber Hinds 50:08
“sr-only” in Bootstrap.
Nick Croft 50:09
Yes. Other themes, I know Genesis, all their themes have screen reader only text built into it, and I believe that is “.screen-reader-only.” And, WordPress itself actually has a screen reader only class built into it. It’s generally only in the admin, but it’s possible to surface it to the front end if needed.
I like to pre-fix things. So, fun story. Several years back, I created a plugin along with Rafal Tomal, uh, Genesis Simple Share, which, if I had some more time, I would explain how that plugin actually led to some of my experience with WordPress accessibility, but, in this case, we had used a class of “clear” to create a clear break, this was back before grid and flex were available to us, and so we were using floats and things to align everything, so we needed clear brakes, and another plugin author used the same class for their plugin, and kindly loaded their plugin CSS on every single page of the WordPress admin, and their CSS that they used for their, their class, the way they did clear breaks, completely broke the way that our page laid out.
And so, I had to actually go in and create a pre-fixed clear break that we used instead of the WordPress clear that was available. So, that’s why I tend to not use the WordPress built-in stuff, because, sometimes other plugin developers override it and do terrible things to us. So, we always pre-fix everything with rkv or something to that effect, just to avoid conflicts with things that helpful developers do to us sometimes.
So, we’ve already been having some great discussion on this, and I want to go through just a little bit, and show kind of how, sorry, there we are, we handle some of the other things. So, active states, we are using a “translateY(1px)” to ensure that we’re moving things correctly. And then, our hover states, and, uh the focus state, there we go, focus and active, allow us to set our Z index to show things up higher, reset our pointer events, undo our offsets, and reset our borders to make sure that everything shows up correctly.
And we reset all of our clipping and everything so that the button actually appears on the screen, whenever we allow that to be the focusable. So, this is the mix-in that’s focusable. So, these are things that we actually do to allow stacking. And so it’s “rkv-screen-reader-text, and “rkv-screen-reader-text” focus- “focusable,” are actually the classes that we apply here. And, if we apply both of those classes, then it makes it screen reader text, and then, it allows it to focus. If it’s not focusable, it doesn’t allow these focus effects to work, and so, you can’t see it when it comes into focus, even though you can focus on it.
Hope that made some sense. As I said, there’s times where you want to have these buttons show up, for example, a skip link button, or that logout button, but you don’t always want them to show up or be there. So, do we have any other discussion or comments before I move on to our next section?
Amber Hinds 53:51
So, Esteban says, he uses Divi, “and it has a “.screen-reader-text.” He says, “I’m not sure exactly what the class does, though. And I think they only added it in the last couple of years.” I’m assuming maybe you’re going to get to showing us what that class does. Or perhaps you could answer the question now.
Nick Croft 54:12
Yes, in a moment, I’m actually gonna be going over how the screen reader text plugin works, and so, we’ll actually see what happens on screen when we’re using screen reader text. But, it all works basically the same way as we see in the image on the right of this slide, where, in some way, it moves that screen reader text outside of the visible area, whether it’s offsetting it out of the visible web page like it’s showing in the image, or creating a bounding box, which is the most common way of doing it in modern development. That little 1px box that we offset so it takes zero px space, and then we just push the text out of that box so it can’t be seen ever, and we say “overflow: hidden” so it never shows up anywhere ever again, until we want to allow it to be focusable.
So, when you’re using that on Divi or some of the other screen, uh, sorry, uh, page builders that have similar ideas, it’s going to do similar to what’s going to happen in the screen reader text plugin, which I’ll show in just a moment.
Amber Hinds 55:13
I think that was the only comment that we haven’t already talked about.
Nick Croft 55:18
Great. So, moving on, our next slide simply says “screen reader text” is our main heading, and in the second heading is “screen reader text format plugin demo.” And the reason it only has that is because all of this next section is going to take place in Safari again. And so, I am changing what I’m sharing here.
And, hopefully, I can move to my next tab, I have created a really simple, um, uh, my brain just split, uh, sales page. And, on the sales page, I’ve got a, a three column product table.
So, my page, at the top, says “screen reader text format, a WordPress plugin demo.” The title of the page itself is “sales page with screen reader text.” And then, I have three products that are in three columns. The first product is “cheapest,” and then it says “$99,” “$59.” Then it says “feature one,” “feature two,” “feature three,” “feature four,” then it says “buy now” in a button.
The next column says “most popular,” and says “$99,” “$59.” Actually, it should say “$199,” “$159.” So, I need to refresh and update that. Then it says “feature one,” “feature two,” “feature three,” “feature four,” and it says “buy now.”
And then the last column says “most expensive,” and also says “$99,” “$59,” which needs to be updated. And it says “feature one,” “feature two,” “feature three,” “feature four,” and “buy now.”
So, it is missing a lot of information. There’s actually some visual information, if you’re able to see the screen, that is brought out, but I’m reading it out the way screen reader would read this page to you. If you were to bring up these links, there’s three links here, your screen reader would say “buy now,” “buy now,” “buy now,” and you really have no idea what you’re buying when you click on that.
Um, in the past, we would probably create this page using meta boxes, and then that would allow me, as the developer, to take a lot more control over what’s happening inside of these boxes, and ensure that the right content is being applied. But, with the block editor, with page builders, it’s a lot easier to create this content, and let end users do this, editors do this, content creators do this. And so, because other people are able to do that, we have created a plugin.
It is the screen reader text format plugin by Reaktiv Studios. I’m showing now the wordpress.org plugins page for this. I do need to get one little thing updated on that, but otherwise it’s looking pretty good. And, uh, kind of our quick description here is “screen reader text format adds screen reader only text format control to the block editor. This allows content creators to correctly mark up certain types of text content. For example, when using strike through text format, it is almost always correct to include screen reader text that indicates the content has been struck out, and if the content is replaced with an insert, the correct solution is to include screen reader text that indicates the insertion. Without this ability, content creators will have to do complicated HTML edits to create the correct text format informing screen readers of strike, insert, and even “important” notes that are indicated with bold text, since screen readers are completely agnostic towards those HTML tags.”
So, after installing this plugin and coming into the editor, let me first change this, so, I’m now inside the WordPress block editor. The WordPress block editor has a new icon in the sidebar, it’s the eye icon and the title is “screen reader text visibility.” So when you come to this icon, there is “screen reader text options” in the sidebar, and if you check the box that says “always show screen reader text,” it allows you to see where all the screen reader text has been added to this page.
The really cool thing that’s happening with this is when we come in and edit the page, and see where it’s at, if I turn this off, when we’re on a line that actually has screen reader text we see it, but when we’re not on that line, we see the way that it presents on the page itself. If we want to see where everything is at, we can check that box, and it will show all the screen reader text, and provide a red underline with it. The underline, it’s just helpful to know that those are screen reader items. Where we see all of those screen reader items, we can come in and edit them. So, if you actually click into one, it has a star icon, and it says “screen reader text above it.”
Nick Croft 1:00:26
If we click on the text format controls, or if we’re using a keyboard, we can tab up into those format controls to change things. On this format control, I click the down arrow icon to access additional controls, and, I can access inline control, inline image, keyboard input, screen reader only, strikethrough, subscript, superscript, and text color. So, I can add or change those controls to remove the screen reader text, or add more screen reader text elsewhere, highlighting content, and turning it to screen reader text.
So, the reason I’ve got all of the different controls done the way that I have them done, uh, again, we have our columns that say “cheapest,” and instead of just saying “$99,” and “$59,” which has no context, those items were struck out, but for a non sighted user that is accessing the site via screen reader, they don’t get that, it doesn’t say “struck out $99,” “$59,” so now we provide the actual text, “was $99,” “now $59.” And so screen reader users will now understand what that means.
We also struck out, on the features, so we have “feature one,” “feature two,” “feature three,” and “feature four,” we struck out feature three and feature four because they’re not included with this particular version, and so, we added the text “not included” to those. Uh, and then on the buy button, our button- our, our product is “cheapest product,” and so I added the product using screen reader text here, and so it now says “buy cheapest product.”
On the most popular product, again, we have the heading of “most popular product,” I’m fixing my price, “was $199, now $259,” oops, maybe. We don’t want $259 to be more expensive. “Now $159,” and then we have “feature one,” “feature two,” “feature three,” “feature four,” which is struck out, and now has the text “not included” that reads with it. And then our button says “buy most popular product now.”
And so, we have “most expensive” as our third column, and it says “was $299” and “now $259.” And then, “feature one,” “feature two,” “feature three,” and “feature four,” and none of those have strikeouts, so we didn’t have to add any screen reader text to that. And now it says “buy most expensive product now.”
So, if we go back to that page, and, sorry, wrong tab, go back to that page and update it, we’re going to look at this page, and it’s not going to show any of that screen reader text. So, that’s what that, that class is doing, is it’s applying those styles that make that little 1px box, if I bring up my, by the way, folks, please don’t report me for hacking, for looking at the the web inspector on this. I apologize, I don’t mean to be a hacker, but I do sometimes have to look at the stuff there. Some of you may get the context of that joke.
But if we look at there, we have “feature three,” and then “class span = text-format-sr-only,” and then “not included.” And so, that text format applies, to all of the classes over here, so pointer events none, outline zero, overflow hidden, text decoration none, whitespace no wrap, position absolute, top zero, left zero, clip path inset 50%, clip rectangle 1px, 1px, 1px, 1px, margin top negative one, margin left negative one, width 1 per- 1px, height 1px. So, that effectively makes it a 1px by 1px box, that it offsets by 1px and 1px, and then positions it away from everything else, and makes sure that if you ever happened to be moving your mouse around, you’re never going to accidentally interact with that in any way.
Nick Croft 1:04:28
And effectively makes it not exist visually. But, a screen reader is going to read this now, if we read this in, a, a screen reader in reading mode, it’s going to say “feature three, not included,” “feature four, not included,” “buy cheapest product now.” And so, we can now understand what’s happening. If somebody is using the rotator version to access this page, instead of “buy now,” “buy now,” “buy now,” and having no idea what they’re clicking when they click to buy now, it’s going to say “buy cheapest product now,” “buy most popular product now,” “buy most expensive product now.”
And that greatly improves the experience for a non sighted user that is using a screen reader to access your site. It’s completely removing the barriers that would make it difficult to possibly impossible to decide what they want to purchase on your site, to understand the information that you’re giving them. All of your content suddenly becomes more accessible. And the great thing about this is it’s designed to be really easy for content creators to use by taking advantage of text formatting.
So, you can see it works on lists, it works in headings, although I didn’t add any headings, it works in paragraphs, and it works on buttons. Um, we’re working with as much as we can, anywhere where text formatting is supported, we make this work. Does anybody have any comments or questions? I kind of blew through that sort of quickly, but I want to make sure that we have opportunity for more discussion. So, maybe I’ll kind of wrap this part up, and go into QA as a general concept as well.
Amber Hinds 1:06:06
Um, I did not see- oh, wait a minute, hold on. So, Daniel said, I think this might be a style thing, he said, I usually put those, so I think your columns into cards to make it more readable, I, obviously, for this purposes, you didn’t design or style that in any way, but he wanted to know, is that a good practice?
Nick Croft 1:06:29
Um, I would say absolutely, because it allows you to create visual standouts. When it comes to screen readers, visual standouts mean nothing, but, I do recognize that most of your users are not screen reader users, they are sighted users. And so, that most popular product, if I were designing this, I would probably create kind of a, a nice, you know, card kind of format.
And that most popular product, I would probably, obviously I would give these actual legitimate names, but I would kind of offset that one up above everything else, and I would put a tag on it that says “most popular,” and, above the name of the actual product, and probably use some icons, instead of just playing bullets for the feature list and stuff like that.
And all of those things are really great. The most important thing is make sure that your contrast is at least 3 to 1 for your headings, and 4.5 to 1 for your body text. When we start creating cards, that ends up becoming where we run into trouble, because, more than likely, especially that kind of featured product, the one that’s probably in the middle of the page, that one is going to have a different background, and so, you got to make sure your text shows up well against that, and all of those different things.
That’s really the only danger point is making sure your contrast is really good when you start dealing with any of that. But I really, I really do like styled product tables, and I think that they can be done very well, and be really good to interact with.
Amber Hinds 1:08:07
How, how much of what you just described, do you think you would want to explain in screen reader text? Do you think it’s import- uh, it’s good enough to just have like, the “most popular?” But, how, how much of like, the design aesthetic do you think would need to be conveyed on something like a pricing table?
Nick Croft 1:08:28
I think I would only focus on elements that enhanced the actual experience. I don’t think that I would necessarily say “featured,” unless I have the word featured there. It doesn’t help a screen reader user to add a lot of extra text that doesn’t enhance their, their end experience. But, where we have kind of grayed out, sometimes, text instead of struck out text, because it’s not an included feature, I would definitely include screen reader text that makes it clear that that’s not an included feature.
I would make sure, if there was a, kind of highlighted feature, that I was bolding to make it clear that that was like, you know, some super special brand new feature, especially if I’m adding like, you know, icons and different things to make that stand out, I would ask myself, “how can I make this accessible to a user?”
If I’m using color in any way, shape or form, I’m probably going to be asking myself, “what can I do to make that color clear to all users?” Not just screen reader users, but colorblind users, low contrast users, there’s a lot of ways that color is a difficult thing to work with, and I would be asking myself how I can make that color helpful to a user. Uh, es- especially if that color is highlighting something important that I need them to know. And sometimes, that is using screen reader text, sometimes that is adding just additional verbiage to the product feature or, or whatever that color is highlighting if it’s going to be something important for them to know about.
Amber Hinds 1:10:24
Yeah, that makes sense. So, let’s see, Alicia said, “awesome plugin,” and Adrienne said, “this plugin looks so helpful for working in the regular WordPress dashboard.” I’m excited to see that it’s on wordpress.org, ’cause I totally stole it off your GitHub. So, now I probably need to go reinstall it. So, will that cause a problem? Wait, that’s a question now. I wonder what version we have [laughs].
Nick Croft 1:10:49
It, it should not cause a problem for you.
Amber Hinds 1:10:52
Alright.
Nick Croft 1:10:53
I intentionally did it in a way that once it got put onto the WordPress repo, it should automatically recognize it and update that from the WordPress repo.
Amber Hinds 1:11:03
Oh, okay.
Nick Croft 1:11:03
So, very hopeful that there’s no issues moving forward with that. But, when, when you say “stole,” I, memory serves, I asked you to please test it and give me feedback and gave me excellent feedback, which I then applied and made it even better before our official public release. And hopefully, you’ve been able to get some of those updates that I did based on your feedback. So, thank you very much for that.
Amber Hinds 1:11:24
Thank you. Yeah. I, actually I do have a question for you about screen reader text, because this is something that we discuss. How, um, do you have any feel for, like, with the way your plugin puts it in, and the tags, on how that may impact translation at all? And whether or not it would cause problems with words being out of order, or will it translate appropriately?
Nick Croft 1:11:54
Sure. So the way this plugin works, it really depends on how you’re handling translation. I like using WordPress Multilingual. It works well with the block editor, it creates multi, a multi site instance of WordPress. Uh, well, you create a multi site instance of WordPress to make it work, I should say, it doesn’t create it. And so, each page or post or whatever, other category, etc., any other kind of content or container, it- did I not say that right? MultilingualPress. WordPress MultilingualPress.
Anyways, it links it to a post or category, etc., on a ‘nother site in the WordPress multi site instance. And, so, when you do that, then it allows you to go back in and edit the content, and create a perfect translation that has the same layout, same blocks, etc. And then you can go in, and edit your screen reader text formatting, so that it reads correctly in the language, because not all languages read the same way that we read, and so your, your word order format needs to be updated and changed. And you can totally do that. Other ways of doing translations may have issues.
Yeah, yes, you’re right, I probably said that wrong. MultilingualPress.
Amber Hinds 1:13:32
Yeah, I think it’s that multilingualpress.org. I just googled it.
Nick Croft 1:13:39
Yeah.
Amber Hinds 1:13:40
Does that look right?
Nick Croft 1:13:42
Yes, that is correct. I said that wrong the first time, I think.
Amber Hinds 1:13:48
Yeah. So, I think, like, the follow up question I would have is, of course, I think screen reader text is preferable, and in this instance, it allows content creators to add it, but where do you draw the line between screen reader text and it should be an ARIA label instead?
Nick Croft 1:14:19
That is a wonderful question. Thank you. [Laughs].
Amber Hinds 1:14:12
I’m gonna put you right on the spot. [Laughs] And-
Nick Croft 1:14:17
-I was done, I just like the questions. Oh, you want an answer?
Amber Hinds 1:14:20
[Laughs].
Nick Croft 1:14:21
No, um, again, it really depends on the context. The easiest path forward is the way I like to take it, um, when the code becomes kind of complex, so, y’know, you’re talking about like translation. If you were doing a, a translation, where you have like, “read about” the page title, the right way to do that under the code would be to make it a translatable, “read about” and then your, your parenthes- your, your percent sign, s, and then you would use a sprintf, or a printf to, to output that, and you’d put your, your title in there, and that would allow the translator to move that percent s around within the translation to the appropriate place for it to read correctly.
And then things get really complicated when we start marking out plural, and masculine, and feminine, and all kinds of other difficult things in, in internationalization and localization. But that’s kind of your basic way of doing it. As you start getting into more complex phrases, it can get really tricky, and get really complicated to create that output. And, when you’re having to then insert HTML into all of that, and expect your translators to know how to handle that HTML, even if you’re using placeholders for all of them, it gets really, really complicated really, really quickly.
Doing it with an ARIA label means that you don’t have to deal with the HTML side of it. And that dramatically simplifies it. So, if I’m having to insert a lot more of these little kind of placeholders in there to do stuff, after one, maybe two, I’m going straight to an ARIA label, because it’s going to make my code really janky, and difficult to read and understand, and it’s going to make it really difficult for translators to deal with it, and I like to make my code look clean and easy to understand, if for no other reason than, in six months, when I go back to edit something, I know what I did, and why I did it. I like to leave comments and other stuff, too, because Nick from six months from now really appreciates it whenever I’ve made things easy to understand.
So, in the code, a lot of times I’ll default to an ARIA label just because it kind of cleans a lot of stuff up, and makes it really simple. But, when it comes to doing this in the WordPress editor, adding those ARIA labels was a lot more complex, I actually started trying to do that, and I was like, “This is way trickier.” And it was a lot easier to do a, a text format. And I realized, when it came down to it, for end users, the difference between the two things was night and day for being able to see visually on the screen.
Let me just go back to, to what that looked like on the screen inside the editor. To me, this view here, just seeing all of that on the screen, once I actually got that out there I’m like, wow, as a WordPress editor, or, like a content creator, I felt that was a way better experience than having to click into each one of these and look over at the sidebar, and try and see if I’ve added different texts or anything like that to handle it. And it’s just a lot, a lot more freedom to create stuff that read well in whatever language you’re doing, and as long as you’re using a plugin that allows you to actually create individualized language.
Amber Hinds 1:17:57
Yeah, that, that makes sense. Now does this work, and feel free, everyone, we have a few more minutes for questions, so I don’t have to monopolize them all, or just use this my personal training session [laughs]. Does, does it work on pretty much every block? Or is there a possibility that it’s only going to be supported in certain, like, core WordPress blocks, or things like that?
Nick Croft 1:18:24
It, it is built to work with default WordPress blocks 100%, as long as they support text formats in general.
Amber Hinds 1:18:38
So, like, could you, like, go on the caption of an image block, like all those kinds of things? Or not necessarily?
Nick Croft 1:18:48
That is an excellent question.
Amber Hinds 1:18:51
Sorry. I’m asking all the hard questions today.
Nick Croft 1:18:56
I don’t have anything in my media library here. I think I have a appropriate meme I can upload.
Amber Hinds 1:19:26
Oh yeah, cool.
Nick Croft 1:19:34
That meme was from a former job, and we switched from Access Press to Rainmaker. It was wonderful stuff. But it was funny to share with the people I worked with there. So yeah, it works great for that.
Amber Hinds 1:19:44
So most core blocks, but it may not work in, like, random blocks from other block libraries.
Nick Croft 1:19:51
It’s built to work with anything that supports all of the text formats, but it’s possible to support limited text formats, and exclude text formats. And depending on how they’re doing things, it may not work with them. But, in general, it should work with other block libraries, as long as they aren’t taking too much control, and excluding all the things, and only inputting back the things that they want to support.
So, it’s, it’s really difficult, because there’s so many different ways that things can be done in so many ways that we can’t account for, but, I try to account for as much as I can, and allow it to be as across the board as possible.
Amber Hinds 1:20:34
Cool. Uh, Esteban is wondering, “does the plugin help with screen reader text on the back end as well?”
Nick Croft 1:20:39
So, this is really only focused on the block editor. So, it’s not going to apply to a lot of stuff. What I really need to experiment with, and see what’s kinda happening, is with the new full site editing. They’re going to be rolling that out very soon, they’ve already started rolling out parts of it. The, a lot of, uh, theme shops, are, you know, creating full site editing themes now, and I think it’s going to be a really great experience with all of that, I just may have to go make a few edits, but, generally speaking, I think anywhere the blocks are at, you know, we’re already doing blocks inside of the widget areas, and it works there.
So, you know, we’re getting a lot more experience with, with it being able to work in areas outside of just content editors. So, anywhere the block editor is, it should be adding that in. As WordPress adopts that into basically the entire back end at some point, that’ll just add more and more areas were can live.
Amber Hinds 1:21:41
Okay. Well, I think we have time for one more question, if anyone has one. You want to type in the chat or unmute. Otherwise, uh, how can people get a hold of you, Nick, if they have any follow up questions? And do you want to maybe throw the link to the plugin in the chat as well, on WordPress.org?
Nick Croft 1:22:05
So, you can get hold me a lot of different ways, but, probably one of the best is on Twitter, you can just @ me, @Nick_thegeek, and that will get me, and I will likely see what you say because I spend a lot of time on Twitter, and, I will probably reply back to you that way. You can also reach me at, uh, this one’s a little bit longer, I should’ve put it on a slide, Nickthegeek@nickgeek.com. And that email will come to me and I tend to reply to my emails almost as much as I reply to Twitter.
Amber Hinds 1:22:51
Great. Yeah, I did not see any more questions come in. Oh, that might have gone just to me, let me-
Nick Croft 1:23:02
-Oh, I apologize. You’re right, it did.
Amber Hinds 1:23:04
Yeah. This is for everyone else. So, thank you so much. This was a fabulous presentation, and I learned a ton, and I’m sure everyone else did. So, we really appreciate your time.
And thank you everyone who came, and don’t forget, if you get a chance to tweet at our sponsors and thank them for interpretation, and- ASL interpretation, and live captions, that is great because we want to encourage them to continue sponsoring, so. Thank you so much, everyone. Have a good night.
Nick Croft 1:23:40
Thank you, all.
