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 Thursday, March 3rd, 2022, and a video recording of the presentation.
About the Topic
In this presentation, Ronnie Burt, Sensei LMS lead at Automattic, talks about accessibility best practices inside the content editor for posts and pages.
Thanks to Our Sponsors
Empire Caption Solutions strives to create inclusive experiences and engage individuals with different abilities and backgrounds by providing high-quality accessibility services for recorded media, such as closed captions, transcriptions, Audio Description, and ASL interpretation. By utilizing both the latest technology and human expertise, ECS is able to help its clients meet WCAG 2.1 success criteria and ADA compliance while offering options that fit almost any budget.
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 WordPress Accessibility Meetup
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:
- WordPress Accessibility Facebook Group
- Equalize Digital Web Accessibility Resources
- Equalize Digital Website
- Equalize Digital on Twitter
- Upcoming Meetup: U.S. Accessibility Laws in 2022 with Lainey Feingold
- Upcoming Meetup: The Internet is Unusable: The Disabled View with Nicolas Steenhout
- Accessibility for Content Creators Slides
- Navigating Web Pages with JAWS Youtube Video
- WordPress Plugin: Accessibility New Window Warnings
- Using Aria-Label for Link Purpose
- WordPress Plugin: Screen Reader Text Format
- Simple JAWS Alt Text Example Youtube Video
- Web Accessibility Tutorials: An alt Decision Tree
- WebAIM on Alternative Text
- Campus Press Accessible Content on GitHub
- Equalize Digital Accessibility Checker
- Ronnie Burt on Twitter
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
[00:00:00] >> AMBER HINDS: All right, we’re on 10:05. I’m going to get started because I want to give our speaker enough time as possible to do his presentation. We’ll have a few announcements, and then we’ll dive right in. There we go. All right, our announcements if you haven’t been before, we have a Facebook group. If you want to connect with people outside the meetup, I think, we have 300 or more members now, which is super exciting and we’re getting some good comments and there’s a lot of people who add knowledge. If you have a question that– I posted a question the other day and I got some great feedback from people. We highly recommend it.
[00:00:43] You can find it if you just search WordPress accessibility on Facebook, or we can pop the link into the chat for you. If you want to find out about upcoming events and past recordings in one place, we have created a landing page on our website. If you just go to equalizedigital.com/meetup it will redirect to that page. I do have to have a note, we had some problems with our transcription from the last two meetups, they are not up. I know someone asked about that today. I promise they will be there by early next week on Tuesday at the latest, both of them. Usually, we have very quick turnaround but we had some delays and some other things that have held it up.
[00:01:25] We appreciate your patience and we are working, we will have those up soon. We are seeking additional sponsors for the meetup to help us cover the cost of live captions, we would like to be able to offer ASL interpretation again, which is something we did in the fall when we had sponsorship to cover that. Unfortunately, the WordPress Foundation does not have the budget to cover these things for ongoing meetups, they can only really do it for larger events like word camps. If you are interested in sponsoring, or your company is, please reach out to us. We don’t make any money off it, it literally is just to cover the costs.
[00:02:11] If you have any suggestions for the meetup, or you need anything to accommodate or make it work better for you, or if you are interested in speaking, I know we’re going to be looking for some speakers starting in May. Please, reach out to us as well. Our email if you just email meetup@equalizedigital.com, that goes to both me and Paola, and that way we can do it. [inaudible] asked the cost for ASL, and I don’t have that off the top of my head. However, if you go to equalizedigital.com/meetup, there’s a sponsor section and then there’s a link or button you can click to go to a page that literally explains what it all is and it has a table of what we pay for everything.
[00:03:04] We do have to, with ASL, pay for two interpreters in order to have it because one gets tired because of how technical and how fast people talk so they have to take turns. I want to say that it was 350 per meetup, but that might not be the exact, and it’s more expensive in the evening than it is during business hours, but if you are interested in sponsoring and you want to learn more, please reach out and let me know.
[00:03:39] Who am I? This person that has been talking to you this whole time. I am Amber Hinds. I’m the CEO of Equalize Digital. We are a certified B Corp, a WordPress VIP agency, and we have a product called Accessibility Checker, which audits websites for accessibility problems and can help augment your manual testing so that you can fix the errors that are on the backend of your website or see reports in as you’re editing and adding new content.
[00:04:12] That’s what we do. We volunteer organize this, and actually, today, we are the live caption sponsor because I didn’t find any sponsors. We’re covering the cost for captions as well today. We also normally, we have a transcription sponsor, but we also don’t have that, so that’s us. [chuckles] Just real quick, some upcoming events if you are looking ahead, I’m super excited about on Monday, March 21st at 5:00 PM Pacific, 7:00 PM my time if your central, or whatever time that is for you around the world. I think that’s like 10:00 AM in Australia 5:30 in the morning in India, but we have had some fuel from India comes down.
[00:04:59] We’re going to have Lainey Feingold, who is a very well recognized attorney practicing in the disability rights space for more than 25 years. She’s going to come and talk about what all of the website accessibility laws are in the United States, what the legal requirements are for different entities. She will be available to answer questions. I’m so excited that she agreed to speak for us because I’ve been a fangirl of hers for years. [chuckles] It’s going to be a really great topic. If you want to know more about laws, this is the time to really get answers from a lawyer and not just the rest of us who are like, “This is what I’ve heard or read.” It’ll be a great meetup.
[00:05:44] Then the next meetup at this time slot will be Thursday, April 7th at the same time. That is our reschedule of our speaker Nicholas Steenhout, who is from the Accessibility Rules podcast, who was sick and had to reschedule. I’ve talked about this one a lot, but basically, he’s going to really share a lot of different disabilities, many of which might surprise you beyond some of the more common ones and what can be done on websites to make them accessible for all of these different people with different disabilities and share quotes and things from his interviews with people with disabilities. It’ll also be a really great meetup. They’re all great meetups.
[00:06:33] That’s what we have coming up. Oh, I didn’t change the label. Sorry, Ronnie. [laughs] This is me moving quickly. All right. Today’s speaker is not Alex, as it says on the screen, today’s speaker is Ronnie Burt. Ronnie started his career doing accessibility audits of websites at the University of Texas in early 2000s. He’s actually here in Austin, near me, which is cool. For the past 12 years, he’s worked at the intersection of WordPress and education helping to build plugins, themes, and university website redesigns all with an accessible first experience at the front of mind. He is currently leading the Sensei LMS team at Automatic. I’m really excited to have Ronnie here to speak with us. I’m going to stop sharing my screen and let him take over and present.
[00:07:29] >> RONNIE: Thank you very much for that. If you’re going to put anyone else’s name on top of mine, [chuckles] Alex Stein is a really good one. I worked closely with Alex for many years.
[00:07:40] >> AMBER: Sorry about that. [chuckles]
[00:07:42] >> RONNIE: No, that’s pretty funny and ironic that it’s–
[00:07:45] >> AMBER: Everyone can tell I reuse my slides
[00:07:47] >> RONNIE: He is a really good dude that’s done a lot for us. Hopefully, my slides are coming through now?
[00:07:58] >> AMBER: Yes.
[00:07:59] >> RONNIE: Perfect. Thank you everyone and thank you, Amber, for the introduction. Super excited to be here. A little bit about me, this is my information there, my website, and my Twitter. I did just recently tweet these slides. I think we’ll drop ’em in the chat as well. Like we said, I have been working with WordPress for at least 12 years now. Before that actually, I started my career as a middle and high school math teacher, here in the Austin area and then a year in Durango, Mexico. As a– especially, middle school teacher, I’m totally used to being interrupted or things coming at me from all different directions so it’s okay and preferred actually, if you do have questions to be in context, please drop them in the chat.
[00:08:54] Though when I shared my screen, my chat went away. Let me take a second to find it. Zoom does not make that easy. Oh, there it is. Maybe. Okay, perfect. Sorry about that. Please, interrupt, ask questions. If I can get to it at that time, I will, or we can save some time for the end. Most recently, the 10 years or so, I helped run campuspress.com, which is a WordPress services company for higher ed and for K-12 school districts. We did anything and everything web and WordPress for school and for universities, including all the way up to main university websites.
[00:09:50] We also had a large use of student using WordPress in the classroom for e-portfolios and really cool things like that. Of course, relevant here education has always been one of the leaders, really, in accessibility and accessibility awareness and driving all that forward and doing their best to make everything that they do as accessible as possible. I was able to really learn a lot from that and help build some things along the way that I also learned a lot from and taking all of that and was very excited to share some of that with you here today.
[00:10:37] The main goal for today, though, really is I want to stick mostly from what you can do inside the WordPress editor and the post and page editor. There’s a lot of stuff that is outside of the editor’s control or the content creators control that can impact the accessibility of a website, but we’re really going to focus on anyone and everyone that’s writing a blog post or updating a page or anything like that. First few minutes, though, I do want to get on a little bit of a soapbox, probably, and share some of the philosophies that I have personally around accessibility and how that impacts the work that I’ve done and the things that I like to share.
[00:11:29] A lot of that really goes back to where I really got my start in accessibility and on the web. I was an undergrad student at the University of Texas, here in Austin and I had a really amazing opportunity to be assigned to this organization at the university called the Accessibility Institute. The Accessibility Institute was ran by a man, he was an English professor, he was visually impaired. His name is Dr. John Slayton. He really was one of the pioneers in the web accessibility world, really advocating for change.
[00:12:09] He worked a lot with instrumental and the original Web Content Accessibility Guidelines. I was just the undergraduate intern, but I had a desk in a big office full of cubicles, and really, I was not allowed to be paid for more than 20 hours a week but I hung out there all the time, did other work, or I had really fast internet and a nice computer on my desk. There were multiple people in the room that were visually impaired and use screen readers and you got could often hear what they were working on, and things like that, and just got to pick up a lot of information along the way. One of the things that we talked about a lot, and that I learned from that’s really stuck with me is this whole idea of accessibility is a continuum.
[00:13:01] It’s easy to say, and almost every talk you may listen to about accessibility, or blog post about it, or whatever it’s going to start about, compliance and the law and your legal obligations, and not wanting to be sued or all that, and really, to me, it’s important, and I understand working in business how important that is but it’s really more than that, and that it’s not a yes or no thing when it comes to accessibility. I think of accessibility like I think of performance on my website, I’m always trying to make my website faster or I’m always trying to make my user experience better, my conversion rate better. Accessibility is one of those things just like that, that’s it’s not my site is accessible or my site is not accessible, it’s how can we continuously improve and make that accessibility better along that continuum.
[00:13:59] Of course, I don’t mean to say that there are things that– there are obvious things that are not accessible that we want to avoid but I really hope that that helps frame where you’re coming from. Also, I think, this relieves some of the stress or some of the anxiety that you can have around feeling like you have to have everything accessible all the time, and of course, that’s our goal, but realizing that it’s a continuum and it’s a process, “Let’s pick the lowest hanging fruit, let’s work on the things with the highest impact and do those first and then continue to make improvements there.”
[00:14:45] Another thing that was always said back in the office in those days, and I brought it out but there’s this old textbook– or it’s a book it’s not really a textbook, that Dr. Slatin and some others published. This is 20-years-old. If you look at the table of contents and thumb through the exact same things that we’ll talk about today, or the things that people were working on, improving on their websites today, are the exact same issues and things that people were working on and learning about 20+ years ago. All that came from this philosophy that Dr. Slatin really had, and it’s the subtitle of the book, “Making Your Web Site More Usable for Everyone.”
[00:15:32] I think that was often said, “Good design is accessible design.” Design really is more than just how things look but it’s how it’s developed. What I’m getting at here is that everyone benefits from the accessible and usable experiences that you’re working on not just users that may have a disability, visual impairment, or physical disability, relying on a keyboard or whatever it may be. That the things that you’re working on are going to improve that experience for everyone.
[00:16:13] Now, I’m going get into– broke it into, I want to say, there’s about eight or nine different areas that as content creators, those of us publishing blog posts, editing pages, things like that, that we have the most control over. Things that can go horribly wrong if we’re not careful or that if we do well are going to make a huge impact to the accessibility of our website. The very first one that’s going to help us organize all of the content on our page is being mindful of the headings that we’re using.
[00:16:46] I have a screenshot here, I was working on a blog post. I’m going to also highlight some things that Gutenberg in the block editor that’s been with WordPress now for a couple of years. I’ve always been very excited and bullish on the whole experience. I recognize that it also has areas where it needs to improve, but I’m going to highlight some things that can help in a sense of when you’re creating content and keeping accessibility in mind.
[00:17:22] One of those is, if you open up the menu on the left, it will show you all of your headings and all of your blocks, really. This feature though, just helps you see all of the content on the page in one place and help organize it. The things that you have to be aware of with headings are, first of all, there should only be– if you’re not aware, this goes back to pre-web publishing, but you have H1, H2, H3, and those are heading 1, heading 2, heading 3. It goes on to six, I think.
[00:18:02] If you’re like me, when I started publishing stuff on the web, I only used those because I like the way they look. The theme that I happened to be using, the H4 was italics and none of the others were, and I wanted that text to be italic. I would choose H4. Really, these have a strong purpose, both for screen reader users, for SEO, and helping us organize our content. One of the other cool things in the block editor is where you used to have to rely on your theme to set those styles, like I was talking about, H4 was italic. Now, you can make one H2 on the page, you can go over here to the side and you can change its styles. It won’t impact all of the other H2s on that page. You still have that control, which is nice.
[00:18:56] The things that you have to keep in mind are: you should only have one H1 on a page, and that’s also important for SEO purposes, it lets our Google overlord know what the title of the page is and what’s the most important content on the page. Then you don’t want to skip headings. If you have an H2, you don’t want to then skip to H4, there needs to be an H3 before. You organize and structure all of your content this way so that if it’s related within the H2, then you would use an H3 under. If it’s a whole new topic or something, then you would do a second H2 below it. I’m going to give you an example of why this is really important. I’m going to try playing this video of a user that’s using a screen reader.
[00:19:48] He’ll describe a little bit more about why this is important to give you a better understanding. I’m going to fast forward to 1:30 here.
[00:19:55] >> MALE SPEAKER 1: A length that it has. It’s easier to navigate webpages, usually by looking for the headings because this is where the major content is usually laid out. If I hit the HP, it will show me what my headings are. I can also find headings by doing insert function six, but I’m going to just the H key.
[00:20:20] >> SCREEN READER: Take [inaudible] library of [inaudible] level 1.
[00:20:22] >> MALE SPEAKER 1: Look at my major heading.
[00:20:24] >> SCREEN READER: [crosstalk] [inaudible] heading level 3. [inaudible] materials [inaudible] level 3 links.
[00:20:28] >> MALE SPEAKER 1: You also hear that these are also links as well, which means I can hit enter on it and go to that particular part of the website. It’s going to display that relevant information.
[00:20:40] >> SCREEN READER: Resources added level 3 links.
[00:20:42] >> RONNIE: I know that can be hard to hear. Especially since we were talking about Alex earlier. I used to listen to Alex work and I don’t know how he hears things moving so quickly [chuckles] and can keep up with it. The screen readers can talk really fast but it gives you an idea that this is one of the main ways that people with screen readers will navigate a page or post with lots of content, is going through those headings, and so that just gives you some importance to that.
[00:21:23] [music]
[00:21:23] >> RONNIE: Similarly, one of the things that you heard also at the very end of that video is he said, “Oh, these headings are also links. I can just hit enter and it’ll take me to that place on the page.” Well, another main way that people, specifically with screen readers, but also if you’re navigating a site with a keyboard and hitting tab, is it’s going to hit all of the links on your page. One of the most common things that you’ll see all over the web is that, click here or only the here will be underlined on some content, or read more or some link text that’s not very descriptive. Basically, our goal here is to make it so that someone that’s only listening to the links on the page, will know where that link is going to take them.
[00:22:22] You want to just make your link text longer and don’t just make the read more part the link or the click here part the link, like read more to go and sign up for this giveaway or whatever it is. Be descriptive of those links and that’s going to go a long way to improving the ability for everyone to navigate around your content. This next one I threw in here because I saw in the Facebook group, just the other day, there was a pretty lengthy conversation around opening up links in a new tab or a new window in the browser. I think some even said that it’s basically, you should never do it. My understanding and I went back and tried to read some of the guidelines is that it’s okay when you really need to, to open up a link in a new tab or in a new window.
[00:23:23] The main things are that you have to let the person know that it’s going to open up in a new tab or in a new window. They have to do some action to do that. They need to click on it or hit enter. What you don’t want is an automatic redirect. Like you visited this page and five seconds later– We used to see this sometimes, you fill out a form and you would go to a confirmation page and after five seconds, it would redirect you somewhere else. As someone that’s not– they’re just using a screen reader, they won’t have a clue really where they were taken. As long as an action was taken, like you’re clicking on it or hitting enter or space bar or something and then they know that it’s going to open up in a new tab, that’s fine.
[00:24:12] I will typically, in my links, I will just put in parentheses, “Opens in a new window” as part of the link text. It’s not beautiful. My designers want to kill me for it. It’s certainly more useful and lets people know what’s going on. You’ll also see an icon sometimes with the square and the arrow coming out. I was just looking, I think, actually, it’s not a requirement in the guidelines, but it’s just becoming one of those best practices things that really helps everyone’s experience from what I understand.
[00:24:54] I want to note about the icon. We’re going to get into alt text a little bit later, but this is a really good example. It would be tempting to make the alt text if you were to have this icon be a square with an arrow coming out of the right top right corner or something like that, right? That describes the image but it doesn’t tell you the purpose of the image. The purpose of the image is that we’re letting people know that this is going to open up in a new tab, so you would actually make the alt text say, “Opens in a new tab,” and the fact that it’s a square with an arrow is not at all really important.
[00:25:36] The next tip or thing to talk about, and really, this is becoming less and less something to worry about because one of the things in the block editor that it does is when you hit a hyphen, it’ll automatically create a list block for you so you’re forced into using the list block. This is super nice because when someone’s using a screen reader, it tells them that they’re in a list and it tells them that it’s a list item. That’s very helpful information to put it all in context, and so what you would sometimes see is someone would create their own list, like using an asterisk or a plus sign and it visually looks like a list but it’s not semantically, in the code, going to be a true list that screen readers will pick up on.
[00:26:27] If you just use that list block, you’ll be taken care of. It’s going to handle that the behind-the-scenes code stuff for you and that’s one of the blocks when you’re working in a WordPress post. That’s usually right at the top. That’s easy to find.
[00:26:44] >> AMBER: Hey, Ronnie. I think Amy Letson might have had a question, I saw her hand was up.
[00:26:48] >> RONNIE: Yes, sure.
[00:26:51] >> AMY LETSON: Oh, thanks for letting me jump in. For the previous slide on links, I was wondering about your thoughts on using hidden text in the case where somebody wants a tidy looking page using read more, read more, read more, and then the full link text after read more is hidden, so you could have read more about this topic, read more about that topic. You think it’s okay to have some of that tucked away?
[00:27:27] >> RONNIE: I honestly don’t know off the top of my head. I remember looking into this in the past and I don’t know what we came up with. [chuckles] One of the things is that, in the work that I’ve done, we’ve tried to be overly obvious with some of our accessibility decisions and so that we wouldn’t do something like that. I don’t know if someone else knows, for sure, then I’m happy to get [crosstalk]–
[00:27:51] >> FEMALE SPEAKER 1: Yes, I could jump in there.
[00:27:53] >> AMY: Thanks.
[00:27:53] >> FEMALE SPEAKER 1: By adding an aria-label onto that link, it will read the text from the aria-label versus the text that’s actually in the link itself, so you could do aria-label or aria-describedby, and what aria-describedby will do is it will first read the text that’s on the button, it’ll pause, and then we’ll read the additional text. You could say, “Read more” and then after that give, usually, the heading of whatever it is that’s being read.
[00:28:25] [crosstalk]
[00:28:25] >> AMY: Okay. I know I’ve done, I’ve done something like that in the past. I don’t have any current situations, but I’ve always wondered, “Is that really desirable or should everybody just get the same thing?”
[00:28:38] >> FEMALE SPEAKER 1: No, you certainly can hide it with the aria-label. You also do have to consider the context of what that button is for people who might have a cognitive memory or some type of a cognitive issue that maybe it is better visually to spell it out as well, so that’s a decision in context but it’s not a problem to add aria-label or aria-describedby because the screen readers then will pick that up.
[00:29:03] >> AMY: Okay. Thank you.
[00:29:04] >> RONNIE: I think Adrian brings up a good point, is that that is harder or I don’t even know how I would do that exclusively within the WordPress editor. We would need to do something else or take it out of the editor, which so in general, if you’re just making a quick blog post, that’s going to be a lot more work or whatever, but I understand on your top-level sales landing page or whatever, you have developers involved then, for sure, at least, using the aria-labels makes a lot of sense.
[00:29:41] >> AMY: Thanks so much.
[00:29:43] >> RONNIE: Your question about like, “Is it okay? Do they need to be the same?” My gut reaction is like, “You don’t need to have the exact same experience, what you need is that people can end up with the same result and be successful in navigating and understanding what’s going on on the site,” so it would be okay to hide that text and only show read more for the sighted visitors.
[00:30:06] >> AMBER: I might answer some extra contacts on the question about the aria-labels and doing it in the editor. I don’t know as much about– I don’t think there’s a tool for this for aria-labels but Reactive has a free plugin on [inaudible]. I can find the link and throw it in the chat, that allows you to– it extends all the existing core blocks so that you can add screen reader text, and it will be hidden visually so you don’t have to flip over and do write the HTML code for it, write a span in a class, or something that. It handles all of that and it’s just integrates with [inaudible], which is handy.
[00:30:43] >> RONNIE: Yes. I’m going to have to look into that for some of our landing pages that I was just working on.
[00:30:50] >> MALE SPEAKER 2: I think–
[00:30:51] >> AMBER: We’ve been using [crosstalk] almost every site now.
[00:30:53] [laughter]
[00:30:53] >> MALE SPEAKER 2: Yes. Aria-label may not be desirable in every scenario. For example, our automated translators cannot pick up aria-label, so if you have read more about anything, you have the topic or whatever, is visually hidden, the automated translator can pick this up and can translate. aria-label will still remains the same. That is the benefit of having the text visually hidden. That’s one part. The side effect in quote is that you benefit from CEO because the crawlers will not be able to understand the aria-label, by the way.
[00:31:31] >> RONNIE: Interesting. Yes. I hadn’t thought about the translation aspect. That’s a whole another dimension to really dig into for sure. The only other thing I was going to say about list blocks is that same with numbered lists, it’s tempting when you’re writing your post if you have a numbered– one with a bunch of content and then two with a bunch of content if you will use the numbered list, part of the block, then that’s information is going to make a lot more sense, so i’d just be easier to navigate through the list items for users, for screen readers, for sure. Use those blocks.
[00:32:22] The next little topic is around acronyms, abbreviations, short-hands. I have some examples, couldn’t come up with a better example than the site that I’m currently working on, but screen readers will typically spell out capital letters in words and if they don’t understand– the example I gave you is, is Sensei LMS, I typically write it this with the LMS capitalized so that screen readers will say it how I want them to say it, basically, which is in Sensei LMS. Most, I think, if they don’t actually know the word, if they can’t figure out how to say it, then they’ll just spell the whole word, which can be confusing and slow as well. This tip and thing is also important on social.
[00:33:15] It’s the same thing when you’re writing tweets or whatever and with hashtags, capitalizing the first word will help them be read in a more understandable way. Then I put the a11y example of a shorthand, that most of those that are familiar with accessibility know that that stands for accessibility. It’s a shortened way of writing accessibility because there are 11 letters between the A and the Y, so that’s a shorthand way of writing it, but for those of us that may not be as familiar, the first time you see it, you’ll have no idea what it’s talking about and that’s not best practices on your content on your web. That’s just an example of something you would want to spell out and in full. Just be very mindful of any acronyms, abbreviations, and shorthands.
[00:34:13] From two perspectives, one, will everyone that’s reading ’em know what they mean? Two, how will they be read by screen readers? Now, we get into the fun one which is alt text. There’s lots and lots of content on the web about alt text and how to do it well and how to do it right and when to have alt text, when to not. I’m happy to spend some time, basically, going through some examples and talking some of these out because every time I’m involved in one of those conversations, I pick up on something new or think about it in a different way. The overall purpose, really, to go back to of why we have all alt text. Your SEO friend are going to tell you it’s to get better SEO and Google search [chuckles]. I try not to listen to them. The actual purpose of alt text is not to describe the image but it’s to describe the purpose of the image. I think that’s really important to differentiate and think about, like, “Why is the image there and what information does the image give to the person visiting the page?” The same can be said about other elements, there’s alt text for, again, a little bit above my knowledge, but anytime that you’re thinking about a different way of describing content that’s on the page, it’s not necessarily about just telling someone exactly what it looks like.
[00:35:57] I’ll give some examples and talk a little bit about it, but one of the tips for alt text is to avoid redundancy. I’m going to try to play another really short clip of how a screen reader, just in case you’ve never heard it, will read an image that’s on the page because I think that will help clear one big thing.
[00:36:22] >> SCREEN READER: [inaudible], Here is what Jazz sounds like. [inaudible]. The next thing it will read is the old text provided for the picture below, [inaudible] graphic: a beach scene with sand, crystal ocean water, clouds, and the bright blue sky.
[00:36:38] >> RONNIE: There’s a keyword there in what you just heard and it was actually probably the hardest word to understand that Jazz said, but it was graphic, it let the person know that it was an image, what you’ll see all the time is in all texts, it’ll start with image of, or picture of, well, we already know that. Let’s avoid some redundancy and help minimize what those using screen readers have to listen to to get through the content and save them some time.
[00:37:15] Yes, don’t typically need to start with image of or photo of, I will usually, if it’s a screenshot will say, “Screenshot off,” because I think that’s important to explain that it’s a screenshot but that’s one quick tip and then another benefit of that is, at least, long time ago, when I was working on this. Screen readers are sometimes, I think, it’s sometimes settings that the individual user can have but they may not listen to the whole alt text or may not read the whole entire alt text. One of the common limits, I think, was around 125 characters.
[00:37:53] Shorter than an old original tweet, is what you got to work with. By avoiding any redundancy, you’re also giving yourself more characters to work with. We talked about some more examples. I’m just reading in the chat a little bit, certainly, an art piece and an art gallery or an illustration, we want to be descriptive. Then the next thing that’s–
[00:38:28] >> AMBER: Sorry, I think there’s a question it says, “If the image is for decoration only, what should you place in the alt text?”
[00:38:34] >> RONNIE: Yes, I have a whole slide on that one, I think, after this one, I’ll definitely make sure to answer that one. Then what does a screen reader do with punctuation in alt text? I think I’ve heard it sometimes say “Colon” in the text, it might depend a little on which screen reader but it’s not announced. Okay, it’s a setting. That’s maybe what I was thinking. That’s where it gets a little tricky is each person that uses screen readers. First of all, there’s different screen readers, they have different settings, personalization settings, just like we have different settings on our browsers and where we like things, everyone can customize it to their own experience.
[00:39:15] >> AMBER: I was going to say, I’ve noticed that it’ll treat periods and things just like any other sentence, it might pause, and I’ve noticed sometimes, where our testers would get– they would think that alt description has ended and now they’re hearing the sentence that precedes following. I don’t know if this is true, but we started recommending, don’t write multiple– even if they’re short, it should all be one sentence, it shouldn’t have a period because if it pauses, then they might not know they’re still hearing the image description.
[00:39:45] >> RONNIE: Oh, that’s interesting.
[00:39:46] >> AMBER: I don’t know if you had that experience.
[00:39:48] >> RONNIE: That would make sense to try to make the alt texts fit in with one– It’s similar to the void redundancy keeping it relatively short as you can, in one sentence would also help make sure that like you said, there’s no additional pause and you know that you’re still in the alt text. I’m going to go into a little bit more detail of here when it’s a link and then when you shouldn’t use alt text. That, I think, will also help also clear up some of the questions around when it’s a purpose and when it’s not. If the image is a link, then its main purpose is probably to get someone to click on it or you want to know where they’re going to go when they click on it. Basically, if the image is a link, then it must have alt text and that text should tell the visitor where the link is taking them.
[00:40:40] I have a quick example here. You’ll see often on a contact page, an envelope that are in a footer, maybe an envelope to link to a contact page or to a mailing address or something. Even though this icon that I have is an envelope, the alt text doesn’t really make sense as envelope. The alt text would be contact support. The screen reader user doesn’t need to know that it is an envelope. It doesn’t really help improve their experience at all because what they want to know is if they’re going to contact support how to do that.
[00:41:19] That’s, also one of example of the purpose versus the description. That’s gets a little easier to differentiate when it is a link. If there’s words on the image, then almost always you’re going to want to put either a summary of those words if it’s too long or the exact words, if it’s pretty short as part of the alt text, because you can just assume that those words are on the image for a reason to convey information that someone using a screen reader would otherwise miss.
[00:41:53] There’s an exception though and that is if you’re using a caption that also has that text or if the text from that image is immediately above or below the image then, we want to avoid redundancy. We want to minimize that cognitive load and things that people using screen readers have to hear it. You don’t want to duplicate that content, that text if it’s bound really close by to the image. I know that’s contradictory and can be confusing to get a feel for. Hopefully, the distinction makes a little sense.
[00:42:32] That is an example of when you would leave it blank is when there’s a caption right below the image, that would basically be the same thing of what you would put in the alt text, then there’s no reason to have them both because the caption’s also going to be read. Then you could leave your alt text blank in that case and let the caption do its work. Oftentimes, icons will have, or just they’re for decorative purposes. They, like a super simple example in your photo, you have links to your social profiles if you have the F for Facebook, but it also says the word Facebook next to it.
[00:43:15] Then, you don’t need any alt text on that icon because for right next to it is the fact that it stands for Facebook. Then anything that’s obviously decorative, those are easier a little bit to identify, dividing lines, shapes, design elements, that don’t really impact any of the content or the purpose of the page that just is there to make it look nicer. It does improve user experience to give some light space or to help break up content for sure. You wouldn’t need alt text for those.
[00:43:50] I tend to not add alt text to featured images of my blog post, because it could be what the title is and the title’s right there. That is a tricky one. We can debate because maybe it’s shared and that alt texts would be pulled through in social or something. Typically, unless there’s a meaning that’s only found in the image, you wouldn’t need alt texts for featured images of blog posts, I wouldn’t think.
[00:44:20] Anything that is a background image is again, similar to the design element. Sometimes you have some gradient or wallpaper-like things with some text over it, then those images wouldn’t need alt text because it’s, again, not really adding to the purpose of the content of the page. All that being said though, some of the advice that I’ve always been given is, “If you’re not sure, it’s safer to write some short helpful alt text.” You know no one’s going to fault you for doing that but you do want to not add alt. It actually is a good thing to not add alt text when you don’t need to, because it’s, again, less that someone needs to listen to or saves time, and just like we’re working on performance on our page and you see people trail off if that loads slow, or you always see content on the bottom of the page isn’t getting read as much or visited as much as constants on the top of the page, the longer pages to listen to the same effect happens, right? We need to be minimal there. I was kind of missing some questions, I can scroll [inaudible].
[00:45:40] >> AMBER: I wrote them down. Maybe I can start with the top, although I think you addressed the one about describing the image versus the purpose of the image. If that’s still a question, maybe type in the chat, and then we can revisit that. What about including a note in the alt text that points to the caption instead of leaving it blank?
[00:46:03] >> RONNIE: I don’t really think that would be helpful, because the caption is going to be read immediately after the image and so, I don’t think I’ve ever seen that recommended.
[00:46:13] >> AMBER: Okay, the next one says, If alt text is blank, does that get picked up as an error in a web accessibility checker?
[00:46:23] >> RONNIE: Yes, it does, often, and especially in the older accessibility [chuckles] checker. I mean, I was checking websites, WAVE still exist and that’s what we were using 20 years ago when we were auditing university websites. You have to be careful about the word error, I guess. It’s usually a notice, it’s something to check. Most of these or many of, we’re going to show you all of the images that don’t have alt text, and people that use them more frequently than I do can also chime in but you just have to be confident enough to say that’s a false positive or false error.
[00:47:01] I’ve worked with one where you could check images as decoratives so you had that satisfaction of getting it off your list and saying, “No, this has been manually checked in, it’s fine,” but blank, technically, you leave it blank with just quotation marks and that is saying that it’s decorative. WordPress though, we’re talking everything in the editor is going to do that for you. If you don’t add alt text to an image, it’s going to be blank and with their quotation marks.
[00:47:30] >> AMBER: I think Wave calls it, it’s a feature now.
[00:47:33] >> RONNIE: Yes.
[00:47:35] >> AMBER: Which actually will kind of hide it in some ways. Like some people don’t even check those because they’re green. They don’t even look down there, right? Maybe there was one that they needed it and they won’t see it. We call it a warning in ours and we’ve had people tell us, “You should make this an error,” and I’m like, ‘No because it’s alt.” In my mind, an error is something is definitively a problem. Other things require a human to assess, which is why accessibility checkers are good, but they’re not the be-all-end-all. Right?
[00:48:03] >> RONNIE: Right. You will hear from people that just say, “I’m always going to add alt text to everything.” Think about it though from that end-user perspective, you actually might be making their experience worse and that, to me, answers the question of what I should do about it.
[00:48:22] >> AMBER: Someone asked, is there a difference between leaving the alt text field blank and setting it to equals “quote quote”?
[00:48:32] >> RONNIE: In the WordPress editor, I don’t know what would happen if you put quote quote, I’ve never tried it [chuckles] so I think–
[00:48:39] >> AMBER: I think it’s [inaudible] out, wouldn’t it? Like would it say image equals quote quote?
[00:48:43] >> RONNIE: I think it might read out the quote, yes. Maybe [inaudible].
[00:48:46] >> AMES: It will, in fact, in accessibility, you’re supposed to do it as alt equals, quote quote, empty quotes so that it doesn’t get picked up by the accessibility checker is if you leave it off, or you just leave alt equals no, then it usually will throw an error or warning. Whereas if you do alt equals quote quote, then it won’t throw an error.
[00:49:07] >> AMBER: Well, that’s code but in the WordPress accessibility error, like in the WordPress editor in the alt field, you wouldn’t want to type that in because I’m pretty sure if you type that in, it would–
[00:49:18] >> AMES: Well, that’s a good question.
[00:49:19] >> AMBER: -it wouldn’t escape it, I think it would put it in as alternate text.
[00:49:23] >> RONNIE: Yes, I might try to play with that because I’m curious if someone somewhere might have thought along the way to ignore that somehow if you did that. [laughs]
[00:49:32] >> PARTICIPANT 4: There is a big difference between attribute definition and the property of the image and usually, those accessibility checkers they use in get attribute method to get the value of the attribute, but this attribute may be differently slightly, that is being normalized as a property of the image. They should check always what is normalized, not what what is the attribute or even both?
[00:50:01] >> RONNIE: To play a little bit with what happens in the editor, I’m not quite sure of how that would be. Looking at Beth’s question, “How would I alt text a photo of a project manager in a blog post about being a better project manager?” The description verse purpose question. This is a great example. I, People will disagree with me, but I tend to think of that sort of image as being decorative. That, it’s there to help break up the content for the reader to give them a mental break before they move on to the next paragraph or to emphasize, it’s not there to emphasize content or a point, we just put those in.
[00:50:47] To me, that sort of image, of a project manager, smiling, holding a laptop or something, is not that much different than a horizontal line that looks nice. It just happens to be related to the content that you’re writing. I would tend to leave those blank but then I also know that makes people nervous because they don’t want to leave all their image [chuckles] [inaudible] alt text blank. I’m happy to hear what other people would think about it. Cool, that again, I don’t think that that image necessarily has a true purpose that we would need to define.
[00:51:28] >> AMBER: I wonder, real quick before you go on, on that front, that’s an interesting one because it is decorative, but there might be a reason why you chose the setting that the person was in or you chose the particular person. Did you choose a Black woman instead of a White man with [chuckles] beards, right?
[00:51:49] >> RONNIE: Yes.
[00:51:49] >> AMBER: I don’t know. Maybe that there’s a reason why you chose that particular image versus another one. Maybe you’re trying to show diversity, and you have three different pictures of different types of people throughout your posts and so it might be good to communicate that to someone on the screen reader that, “This communicates something about what we think project managers can be women and men, right, or can be–“
[00:52:12] >> RONNIE: Yes.
[00:52:13] >> AMBER: That’s a thought to think about it. That’s the reason why you might physically describe how someone looks instead of just saying, “Woman holding a laptop,” you might describe some of their kind or their age, or something like that, older or younger.
[00:52:25] >> RONNIE: Yes, that’s a really, a really good interesting point and it makes a lot of sense to me, I would add though, and then-
[00:52:30] [crosstalk]
[00:52:31] >> PARTICIPANT 2: [inaudible] a little bit too.
[00:52:32] >> RONNIE: -just [inaudible]. What’s that?
[00:52:35] >> PARTICIPANT 2: I’d like to weigh in just kind of backing up Amber’s point a little bit. There’s a reason why you chose that image to put in there, and it might be to illustrate something Amber was saying, but it also might just be to convey a mood or an experience that you want to convey with whatever section it is that you’re doing. To give a screen user that same experience or that same mood, I think it’s important to add the alt text to try to highlight what it is that you’re trying to convey.
[00:53:14] >> RONNIE: Yes, my mind may have been changed in the last minute and I think that I’m also jaded sometimes because I just get some of these stock photos that people come, I see a lot of content agencies that just push out a bunch of blog posts with generic stock photos, then I would think people would probably want most of those photos blank but if there is a purpose or thought behind the image, then absolutely we need to describe it and share what that purpose is.
[00:53:48] Just a few these are probably, these are the first things you’ll find if you go searching but I do rely on these two links frequently on these sorts of discussions. The links are two, the w3.org, has a decision tree that at first when you look at it visually, if you visit it and I can’t imagine what it sounds like, it’s pretty overwhelming but it is very helpful in helping you decide if you need alt text or not and what the alt text would be. It helps answer some of these questions that we’ve been talking about.
[00:54:22] Then there’s an interesting few examples on webaim.org. Alt text that describes the same image of a person in three different ways and in three different context and helps you understand how that alt text would be different in those three different places. Those are pretty cool to check out if you’re interested and haven’t come across them. One of the next things is we don’t have to spend too much time on this but emojis, just thought it was kind of fun to bring in, thinking about that emojis are also read by screen readers is [chuckles] I haven’t really thought about it before. You’re seeing more and more emojis pop up on in blog content and sales pages and stuff like that as people are trying to be more emotive in their content and so interesting to think about screen readers read alt text of the emojis, which are often by default, going to be the title of the emoji, which may not be the exact meaning that you were going for because we all have repurposed many emojis for different meanings. There are just some tips here, probably best to put emojis at the end of the content instead of the beginning, just to reduce some of that confusion.
[00:55:43] You may not want to replace words with emojis because it’s going to really break up the content and make it hard to be understand if you can just move them to the end. There’s an example here of an image of a button that just says, “Let’s go with like the fist bump,” what I think of is the fist bump emoji, but apparently, it is the oncoming fist emoji. it would be read in one example, “Oncoming fist, oncoming fist, oncoming fist, let’s go,” which doesn’t sound very interesting, but it’s a little bit more concise as oncoming or let’s go and then one oncoming fist so just an example of using emojis that I felt fun.
[00:56:26] In videos, we don’t have to spend a long time. We all know basically videos need captions. One of the things that I came across recently though, about why captions, automated captions can be bad was actually how someone was asking earlier, “How do screen meters read punctuation?” Well, automated captures are getting better at picking out words, and most of us, I probably misspoke and said some words that I didn’t mean to say during this conversation, we’re all pretty good at like figuring out what someone actually meant when a word is missed or changed.
[00:57:05] Where it does get even more confusing is that many of the automated transcriptions are most of them, the punctuation is what’s really missing so there’s a meme here. It’s a common reason for commas. The meme is “Let’s eat grandma.” “Let’s eat, grandma,” and how punctuation can save lives. The whole idea is that a comma is pretty important and so this was just hopefully a reminder of automated captions are better than no captions but we can clean them up and make sure that the punctuation is right and that’s going to help people that are relying on those captions.
[00:57:49] Then one other thing, if you haven’t played in WordPress editor a lot, and I saw in the chats that many were newer to WordPress, which is pretty cool. One of my favorite features that’s getting better and better really is in many different places around the editor including in the new full-side editing experience, there’s more warnings if your contrast isn’t good enough between the text and the background. There’s a screenshot here of an example of really bad contrast and what the warning is, which the warning isn’t overly scary and the warning doesn’t tell like, “You can’t do this”.
[00:58:26] The warning just says, “This color combination may be hard for people to read, try using darker background color and/or a brighter text color,” but this is a nice nudge if you are on the lookout for it too. I use it if I’m quickly writing something and just want to test without having to go off to one of the contrast checkers, it’s built-in right into the WordPress editor now, which is pretty nice. It doesn’t give you the exact ratios and all the things for compliance but it does give you some helpful tips.
[00:59:03] The main thing here though is that you want to make things as high contrast as possible and you’ll actually be surprised I’ve made many a designers frustrated in my day of like, “Things are just not quite enough contrast enough, and let’s go send it back,” and maybe it doesn’t, to the designer’s eye, look as nice when we have to add that increased contrast, but that’s also changing.
[00:59:28] I think design trends have improved and understanding has improved that we’re all more familiar and appreciate actually everyone. As my eyes get more tired and older of contrast, it’s good for everyone. There’s some chat here about contrast, algorithm, and ratios, I haven’t gotten too much into this yet so I don’t know if we want to discuss a little bit further but I did want to highlight the built-in WordPress tools for sure. Getting to the end here, but for those of us creating content, one thing about the WordPress editor is we’re working hard to make finding blocks much easier and adding blocks much easier. This is a really good thing and that there’s a lot more blocks and blocks are really powerful, but it’s also a negative-ish bad thing that not all of these blocks are going to be following the best accessibility practices.
[01:00:36] When you’re choosing your blocks, just make accessibility one of the things that you’re testing for or thinking about, ask the source of the block if they know about any accessibility issues or if they’ve done any testing. I listed a few of the usual suspects of blocks to be suspicious of off the top of my head. Those are image sliders, things that make tables and layouts, calendars, and form plugins. Now, all the major form plugins, most of them have worked pretty hard there.
[01:01:11] I worked on a calendar project for a long time, and that’s an example of the purpose of discussion that’s not exactly with alt text is that we’re working on university websites that wanted the traditional calendar layout in a grid. We’re all used to experiencing where you have the 31 days of the month or whatever are shown, and maybe one or two events each day and some days are blank. That, visually, to look at is a good experience.
[01:01:46] When the client came to us, they wanted that obviously needed to be accessible but the expectation was that we would read out all the blank days and all that because that’s the experience. We had to explain, “No, no one wants to listen to, there’s no events on the 3rd of March or whatever.” It was okay to give an alternative solution to screen readers that just read the events in order and skipped out on days that didn’t have anything. Be careful with those blocks that you choose.
[01:02:27] If you are testing it yourself, it’s a whole another topic I’m sure but just keyboard navigation. I work with the developers, I work with– Just don’t touch your mouse and see if you can get through it on the front end, that’s going to get us a good chunk of the way there. That will help you know off the bat if it’s something to explore more. All right, so where I got all of these tips today was basically from a project that I worked on about three years ago. When I was working at CampusPress, we put together a plugin for WordPress that’s still available and free called Accessible Content.
[01:03:12] It’s only on GitHub and there’s a link there. I just checked yesterday, It still works, but it is something that I don’t think is an act of development and I’ve since left. What it did is put all of the things that we talked about, if you were previewing a post or a page in the WordPress previewer, it would give you warnings or examples if it found some of these things. I just wanted to share that as– You can’t use it for sure, but I think the spirit of open source, it’s also something that is perfect for a fork or a repurpose or reuse or anything like that. Totally happy for people to re-explore that project.
[01:03:52] We worked with different universities and their accessibility teams to think really hard about what are the things we could catch and educate the content creators in real-time as right before they hit the publish button, it would force them to look at the preview and see what those things there. That was really all I have but definitely, hopefully, we spark some more questions and discussion. Happy to stick around.
[01:04:22] >> AMBER: Thank you so much. That was fabulous. I think that one of my bigger takeaways on this is that we may need to have a whole meetup on alt text because I feel like there’s so many questions and so many things. If anyone has any other questions or comments or anything for Ronnie, feel free to either raise your hand. That’s probably the easiest way so we don’t all talk over each other or pop them into the chat. The only question I saw that came up post or while you’re talking was another one about alt text. I don’t know if you want to dive back into that but there was a question about product images. For example, at a furniture store, a brown sofa is a brown sofa. How far would I go into describing it when the title of the product already does that? This one says, like, Alyssa power loveseat in brown leather, what would the alt text be? I mean, that might be a fun one for us all, everybody type how you would describe [chuckles] that in the chat, right? We can see all the different all types of alternatives.
[01:05:40] >> RONNIE: I think that just proves a point that going back to what I tried to say at the beginning like there’s so many different ways of approaching this and there’s no like one, there are certain wrong ways, but there’s no one right way often and that can be frustrating and intimidating but the sales kind of marketing person would come to me and think like, “Well, what would I want to take this opportunity to reiterate to someone [chuckles] that’s listening to this image and I have their attention for that second?” Now, I wouldn’t, [chuckles] “Yes, please take me home.” That’s the example there. You know maybe there’s something unique about the couch.
[01:06:33] >> AMBER: Well, I think–
[01:06:34] >> RONNIE: That is only seen in or shown in the image that you would want to highlight, no.
[01:06:42] >> AMBER: Yes, like the height of the back or the curve of the arms, or is it a really formal brown leather sofa, or is it one of those ones it’s like a recliner with like baggy stuff? Like if a blind person wanted to put it in their house and they’re trying to decide between this brown sofa and not brown sofa, you probably want to describe the features, unless you have a really great written product description [laughs] [inaudible].
[01:07:06] >> AMES: Well, and I think that written product description is probably more important because the challenge of putting in too verbose of all text with specific information is that there’s not a way to navigate through that, they just have to listen to it and rather than go back, then they have to keep listening to the alt text versus seeing the description. I think leaving all text as brown couch or whatever the image is or leaving it blank as the caption or the heading of it, and then leaving descriptive text for everybody visually sighted and non-visual. People navigating through that, because they can’t navigate through alt texts with their keyboards.
[01:07:45] >> AMBER: I think that brings up a point, which is we sometimes use all text to direct people to where they can get really detailed information. We might say something like, “Brown leather to person sofa,” see detailed descriptions in this sections, and then they know what heading to look for and they could jump to that section and get all the specs on themselves or something instead of having to just move through the page. Sanna, is that right? I think you’re muted.
[01:08:14] >> SANNA: [inaudible], can you guys hear me?
[01:08:15] >> AMBER: [inaudible]. Sanna?
[01:08:16] >> SANNA: Yes. Hi, Ronnie, thank you much for this webinar, it was really helpful. I’m actually an accessibility analyst for Target and currently, I’m working with our interns. We’re developers, we’re working on a pro bono website, more of like a computer science for Minnesota Educational website, and they’re working specifically just with WordPress. I have no experience in WordPress. I’m planning to do just a one on one training for accessibility with the interns. Is there any advice you would like to give me as far as how I can start get the process started on the right foot?
[01:08:56] >> RONNIE: [inaudible] so it’s about in terms of your own use of WordPress or getting the intern started and knowing what–
[01:09:06] >> SANNA: I don’t know how to integrate myself like I would be testing manually on through the website, whatever they built through WordPress on the website and it’s basically two to three landing pages that they have of educational content for people who want to get into computer science. There’s going to be a lot of headings and alt images, but not nothing like tables or anything more like [inaudible].
[01:09:33] >> RONNIE: One thing that comes to mind maybe I don’t know the process, or where they are along in the process, but if there isn’t like code already written or contents already in WordPress, having that conversation around accessibility looking at any designs or wireframes or something like what are the things that are relevant to think about before any of that work happens, just having that accessibility discussion-
[01:10:01] >> SANNA: [inaudible].
[01:10:02] >> RONNIE: -as early on in the process as possible would help drive what’s already known, what’s already thought about, what are the things we need to look into more.
[01:10:12] >> SANNA: There’s nothing I can do from an accessibility standpoint, like manually testing with WordPress, correct? Whatever they’re using, they’re using and I have no control over it.
[01:10:21] >> RONNIE: Yes. Someone’s putting here too, if you’re starting with a free WordPress theme, there are some that are labeled and have been reviewed as accessibility-ready. You can point them to some of these starting points and different plugins that will help get them on the right foot. That’s where I was at. Then, most of the testing that I’ve ever done is not WordPress specific, I suppose.
[01:10:50] >> SANNA: Okay, that’s helpful. Thank you.
[01:10:58] >> RONNIE: I’m just reading through some of the chat, too.
[01:11:00] >> AMBER: I could chime in that the intent behind our plugin is to, it’s like the one that you said isn’t being developed anymore [inaudible] to provide reports like the SEO plugins, when you’re on a poster page and it says, “This is what you’re doing right. This is what you might want to rethink.” That’s the thought behind ours and we use that to train our clients because a lot of them come to us and they are required to have an accessible website but their past ones weren’t because they were outdated. Now they’re updating, they have to get right in line. A lot of them don’t know that kind of stuff and so it’s helpful because it flags content issues.
[01:11:37] We also use it for testing because it’ll also identify code stuff outside of the content area. Maybe that would be helpful using that. We have a free version on wordpress.org. I would say teacher interns how to use even WAV or like a keyboard to move around the website. I think that’s really important and we tell our clients that. If you install a new plugin on your own, you’re going and doing this, go to the front end of your website and use only your keyboard and see if you can do everything that you would do with a mouse. That’s a really good point that people shouldn’t be afraid to try that. Teaching your interns to do that would be really important.
[01:12:20] >> SANNA: That’s a good point. Thank you, Amber. That’s what I’m planning to do on Friday when I do the training with them.
[01:12:26] >> AMBER: Yes. Ames-
[01:12:29] >> RONNIE: Sounds like [inaudible].
[01:12:31] >> AMBER: -they have their hand up.
[01:12:34] >> AMES: Yes, thanks. I also wanted to interject one aspect that often gets overlooked with content is cognitive. I also was a middle school teacher working with lots of different cognitive challenges and as well as elderly parents trying to navigate through sites that have very poor memory because of dementia. I think looking at trying to make our content as short and concise as possible, looking at the kinds of fonts that we use to look at a little bit about what does that mean for dyslexia, people with dyslexia, how they manage reading through content, et cetera, is that we often overlook how do we manage cognitive because it’s not as testable as contrast and making sure there’s alt texts, et cetera.
[01:13:20] >> RONNIE: Oh, thank you [inaudible] for bringing that up. I’m pinching myself for not thinking about that [chuckles] before putting it in the– Because it’s something that I’ve harped on to my teams that I’ve worked with so much. It makes so much sense. It’s tempting to just put as much content and SEO purposes or otherwise like, “Let’s make things as long and answer every possible question,” but sometimes you’re going to have an opposite effect.
[01:13:56] You’re going to make things too long, too overwhelming, cram too much information into a small space and that’s no good for anyone, particularly people that will process better with more whitespace or fewer distractions and things like that in front of them.
[01:14:15] >> PARTICIPANT 3: For the WordPress content, I may also suggest to use some kind of grammar checker. I am not associated with the Grammarly but Grammarly seems pretty good. I’m using that quite often. That might be very helpful as well.
[01:14:34] >> RONNIE: I love [inaudible]. [chuckles]
[01:14:36] >> AMES: 100%.
[01:14:38] >> PARTICIPANT 3: Yes, yes, yes, yes. Also, later monitoring that as the users, for example, entering some content and being visible. It would be nice also to monitor what they are entering and then just getting notifications from that, but that’s just ongoing monitoring. It’s something, some things, another topic I would say. [chuckles]
[01:14:59] >> RONNIE: Ames just pointed out in chat which is my experience as well that accessibility-ready doesn’t mean accessibility perfect. There are themes that are not labeled accessibility-ready that probably have strong accessibility. If we have to start somewhere, looking at some of those can help you get ahead of the game.
[01:15:25] >> PARTICIPANT 3: Yes, starting from a few basic fundamentals, stuff like headings, keyboard navigation, stuff like that. It doesn’t have to be perfectly done, but it can be adjusted over time and then you can make it perfect within a few months. That’s not a problem.
[01:15:41] >> RONNIE: For me, it feels good to talk about accessibility again because I’ve been on that game for a while so thank you. It makes me want to go back and relook at a lot of things I’ve been working on recently.
[01:15:57] >> AMBER: Yes, thank you. This has been a really fabulous talk. I’m going to “On the spotlight” everyone because boy, it’s hard for me to keep [inaudible]. [chuckles] I’m trying to make sure people are visible when they talk, but it’s hard. Thank you very much. I don’t know if there’s anyone else who has any final thoughts at our last minute, but this has been fabulous, Ronnie. I feel it’s really been helpful.
[01:16:24] Every time we have a speaker, I’m just like, “I learned so much. I really appreciate it.” [chuckles] Yes, thank you, everybody. Quick reminder, our next meetup is in two weeks on Monday, the 21st. It will be with Lainey Feingold talking about laws in the United States. Ronnie, how can people get in touch with you if they want to follow up or have additional questions?
[01:16:54] >> RONNIE: Twitter is probably the best way. It’s at @ronnieburt on Twitter. There’s a contact form on my website as well, ronnieburt.com. Yes, it was probably the best two. I definitely check them both.
[01:17:09] >> AMBER: Awesome. Well, thanks so much, everybody. Have a great day.
[01:17:14] >> ?RONNIE: Thank you.
[01:17:15] >> PARTICIPANT 3: Thank you. Bye-bye.
[01:17:17] [END OF AUDIO]
