Creating Accessible Content with WordPress

Talk by Jerry Jones

A perfectly coded website will still break down if the content isn’t written and built accessibly. Learn how to write content that is accessible to everyone, and how to quickly evaluate themes and plugins for basic accessibility.

View Jerry’s Presentation

Transcript

Jerry Jones: I’ll be talking about “Creating Accessible Content with WordPress.” And, yeah, ’cause you make great content so let’s make sure everyone can actually access it. Quickly, going over what we’re gonna talk about today. Talk about themes and–themes and accessibility and how they relate to content; quick tips about accessible content; the importance of headings and titles; images and especially writing good alt text which is a lot trickier than you would expect; about links and writing good links; some color.

The last session went so much into more detail than I will and it was great, but I just thought we’ll get a few quick points; and a little bit of cognitive accessibility; and the last part will be how to quickly evaluate plugins ’cause there’s, yeah, there’s so many plugins and themes about accessibility, and it’s hard to really, like, narrow down unless you look at the code, so there’s a few tips I can share on how to, like, get an idea of a site’s accessibility without having to look at the code.

And then, if we have time, we’ll evaluate some plugins and themes or websites together, so you can share a few themes or plugins, links to different websites, and I can use those tips that we talk about with the plugins. Oh, it’s–I know it’s a little odd to talk about content and starting with themes, though. But I wanted to make sure we had an understanding of what we are talking about in relation of themes to content, and how they, yeah, relate. So sometimes we get questions about, “I want an accessible, like, give me an accessible theme or I want a theme that’s accessible, where can I find one of those?”

But the problem is a theme on itself can’t really be accessible because they can’t be evaluated on accessibility because they don’t have content. Like, as much as myself as a designer too and other people might like to just go look at a theme, most people don’t really just go to a website to just look at the wrapper content or the wrapper of the page. You go for the actual content. And so when we talk about accessible themes, we say they’re “accessible ready,” because only a site with content can be accessible.

So a theme can be ready to be accessible as in if the content is accessible the theme, the wrapper, won’t get in the way of that. So with that out of the way, let’s dive into a little bit of the actual content. A few quick tips: little things make a big difference sometimes. So there’s a tweet in this–on this slide that says: “When using hashtags, if you capitalize every new word, blind Twitter users can actually hear the message you’re saying.” So instead of #, all lower case, “blacklivesmatter,” which still rocks but is less accessible, but capitalize–or the hashtag with capitalized “BlackLivesMatter,” with the capital from each word, so it’s more segmented, allows it to be accessible, even on Instagram, and yeah, you should capitalize multi-word hashtags.

When you use a screen reader and you are, like, for example, if you’re editing text with a screen reader, you come across that hashtag, blacklivesmatter, it’ll say it’s a misspelled word to you, if you’re in the editing mode. Whereas the capitalized ones, it will be able to–the screen reader can identify each of those words as separate and that they’re intended to be separate, and it will read correctly. As well as if there’s all lower case, it just assumes it’s one long string and will try to read it that way.

Similarly, for screen readers, we have this, like, emphasis meme or kind of format which is kind of a fun font visually with, like, clapping hands for emphasis but, unfortunately, when you view this content or access this content with a screen reader, which is an assistive technology, that will just read you the content screen and that blind users or low vision or actually I kind of enjoy using them from time to time as well, they’ll read this as “Don’t clapping hands use clapping hands lots clapping hands of clapping hands emojis clapping hands,” which doesn’t really have the same effect. So, in general, let’s try to avoid using this format.

And we’ll–captioning videos is really important, like we’re doing right now, because without those captions that is completely inaccessible and, similarly, providing transcripts for audio content which also was discussed earlier, and will be discussed in more detail in the future in some upcoming presentations. So, headings. Over here you have this “I’m a Heading,” little image that we’re gonna talk a little bit about what headings do for us and how they give content structure.

So on the right side of this slide, we have the page title is an H1, and then a little content. Second level heading, H2. Third level heading, H3. Another second level heading for a new section, H2. And these are all different, well, you can guess, headings and we have this H1, 2, 3, these numbers to designate the order–or not the order but the importance of, like, how that content is nested, which we’ll go over in a second. But I like to think of headings as, like, chapters in a book. They give the page structure and the book structure, so the page title would be like the book title. It’s the biggest, most important heading.

It defines what this content is, whereas underneath of that, a second level heading, H2, would be like a chapter within a book. It’s like, they’re important sections but the book title is the most important. And then, in H3, might be a little subsection within a chapter. So, and you have all the way down to 6, actually, that you can use, but often you really only use 1, 2, 3, sometimes 4, but 5 and 6 are there, by all means, if you want to go that far. But the important thing to remember too here, is to not choose a heading level, because it’s just by the size of the text that it is.

So, we don’t wanna use an H3 in a spot where we should use an H2 just because we want, like, smaller–a smaller break. So the semantics of the tag that each level is really important. And one of the reasons that this is important is screen readers can navigate by heading very easily so when you go to “end page” it’s kind of like skimming the content if you’re a sighted person you can, like, go to it, scroll down the page, look at some of the main sections and say, “Is this a page I want to be looking at?”

Similarly, if using a screen reader, you can press the “H” key, depending on the screen reader software you’re using, and it will–it’ll jump you to those headings and announce the heading level, so you get an idea of the overall structure of the page and where you’re at within that as well as if this is something I want to dig in on or what sections do I want to explore. And to illustrate what I mean by the semantic and the structure, let’s take, like, this presentation so far. It’s called, “Creating Accessible Content with WordPress.”

If we weren’t to give it any sort of semantic tag, that H1, it would just be at the same level of everything underneath of it. So next, we talked about “Themes and Accessibility,” some content considerations. We’re gonna talk about adding headings in WordPress next, and do you see how you get this structure of the page? It’s like, kind of table of contents effect is starting to form. So “Images and Alt Text,” and then H3 underneath of the images, “Select the Alt Text.” So even, just because of the way we marked it up by creating the right heading, we get a lot of meaning and structure from the page just by using those.

And so, in WordPress, just to quickly go over it in case you’re not sure, there’s a heading block. The page title itself is also a heading and you–and that’s always gonna be an H1 for pretty much everything. And so you won’t need to use H1. It’ll automatically be your page title. But you can add the heading block and then within the block toolbar you have the H2 up here in the top part of the toolbar, as well as in the sidebar, the heading settings. You have your H1, 2, 3, 4, 5, 6. You can choose the one you want, but my preference is using the little pound sign, number sign.

It’ll automatically, if you use two of them, it’ll automatically create the heading level 2 block for you, or three of them and hit space, it’ll automatically create a heading block at level 3, and so on. This is how I always do it. It’s just a really quick and easy way to create a heading block on the fly and– All right, so images and alt texts. On the right side of this slide we have a purple–the orange box with the little file missing sign and it says, “A purple slug on a red rose.”

That text there, if you’re a sighted person, you will–this is usually the only time you’ll interact with alt text is when a file or an image can’t be found or, like, the link is missing, it’ll show you that little symbol and show you the alt text in place of the image. But images, like, if you’re using a screen reader, then that alt text is what describes the image.

And a little tip, quickly: don’t use images of text. So I see this on Twitter all the time, same with Instagram, where people will post a big picture of text in order to get around the line limit and, as a result, unless you’re copying and pasting all that text and setting it as the alt text for that image, which you can do and should do if you are gonna do this, most of the time, people don’t.

And so it just says, like, the file name of the image; it doesn’t announce anything relevant. And so it’s entirely inaccessible. So all images in general need alt text. Well, it’s tricky. They almost always need alt text because some of them can be presentational as they kind of discussed in the last presentation that there are some images that don’t actually carry any meaning, and so we say that those are presentational-like.

Imagine, like, a graphic on the side that is just kind of like a decorative element. You don’t need alt text for those. But unless you’re, like, absolutely positive, I would just recommend going ahead and adding the alt text if you’re not sure; let’s just assume adding alt text is better unless you’re sure.

And when you’re writing–when you’re doing this to write content, it’s almost always going to be the right choice to add it. But writing alt text is actually kind of hard, in my opinion. I wanted to get better at it so I asked on Twitter, “What are your–” Like I asked people some– first, their favorite tips on writing good alt text. Said, “It’s sometimes hard for me to find the line between not enough and too much description,” and I got back what I felt like were some good responses that helped me kind of categorize how to write better alt text.

So some of them were to be descriptive but succinct, like, about one to three sentences max. Highlight the important details in the image that are relevant to the page content, and that’s the part that I had not considered before, is that it needs to be relevant to the page content, and it’s not just a standalone image if it’s within your content. There’s likely a reason it’s there, so try to, like, create that connection. I’d heard recently, too, about someone that tried to relate it to an image being like paragraph text.

Like, if the image wasn’t there, that text can be naturally inserted. And this is something I knew but I would still do from time to time, which is starting alt text with “An image of” or “A gif of,” and it’s not, like, you don’t need to do that. A screen reader already tells you that it’s an image when it reads alt text. Like, there is–there’s no reason to do that. But I would still catch myself trying to write it that way, for some reason.

And Carie Fisher did this good article for “Smashing Magazine” about the telephone and one of the things she recommended for writing an alt text was the telephone test. And this goes back to the first slide or the image, the broken image slide of the purple slug on a red rose.

So she said that imagine you’re on the telephone and–or you pick up a telephone to call your friend and, as soon as they answer, you just say, “A purple slug,” and hang up.

Well, if you do that, what image do you think your friend is gonna have in their head? For me, if someone did that, I would just have a purple slug in my head on, like, a white background. There wouldn’t be any, like, context. It would just be as this, like, floating purple slug. But if you compare that to just adding a little bit more context of picking up the phone and saying, “A purple slug on a red rose,” and hanging up, now in my head, for me in my kind of mind’s eye, I see the purple slug on the red rose and then the red rose is maybe in a field and so I get, like, the rest of the image filled in. It creates a fuller image for me.

And so those little details, those little extra things, can make a big difference. And so, let’s do a little practice of it. You can comment on YouTube if you want or feel free to just guess on your own and let’s select some alt text for this image here. I have a little story that I start–that says: “I was excited until I sat down and the small cart shook. ‘It will be worth it,’ I reassured myself.”

And then we have this image that we need the alt text for. There’s, you know, some mountains, the clouds, the little cable cars and it’s winter. We’ve got the alpine trees. It’s a nice image with the blue, with bluish cast, so let’s see. Option A: Image containing mountains, clouds, cable cars, trees. Blue and white with small houses. Photo taken from above. B: Mountains and tiny cable cars. And we’ll talk through this afterwards. C: Beautiful view of the mountains as we traveled across the land in cable cars, right before we passed through the clouds. Or D: Cable cars about to travel underneath the clouds, with large mountains in the background.

So option A, we have what is alt text that would be likely generated by, like, a stock photo library, when they run an image through, like, some AI that just kind of grabs all the details it can identify and shoves it into a text form. So, “Image containing mountains, clouds, cable cars, trees,” and all of that is just when you go to a stock photo library and look at the alt text, almost all of it is similar to this, where it’s just very generic and gives you all these little details but, for me, even though you have all the details, that, like, it doesn’t give me a great representation of the image. It feels like generic and kind of cold and so I would not use that as alt text.

B, “Mountains and tiny cable cars.” It’s a little short but it could totally–it could work but I feel like there’s a lot that is missing.

C, “Beautiful view of the mountains as we traveled across the land in cable cars, right before we passed through the clouds.” And this is tricky also ’cause if I didn’t write this, select the alt texting, I would have a hard time with these C and D options. But what I think C does well here is relates the content to the image. So it’s not just a standalone alt text, similar to D.

D is, like, a great alt text for this image, if it were just like in a slide gallery of images or in a stock photo library where it’s just the image outside of any context or content. So C, I would go with C ’cause it relates the text, the content, to the image better. And so you have D: “Cable cars about to travel underneath the clouds, with large mountains in the background.”

It’s still good alt text but maybe not the appropriate one within the context of this story. And then so how do we actually add alt text into WordPress? Is in the media library, in the alternative text field. That would actually be a great place to add that D option where it was, like, the standalone alt text that just described the image within, like, a gallery, because when you add it in the media library for WordPress, they’re actually in relation to the existing content in that sense.

But then, when you’re in the block editor and you add an image in, that is where you would give the option C alt text where you have the context of it within the context of the story or the content. So that would be a good place to put option C. And something to keep in mind or remember is that when you add it to the image settings, the alt text there, it won’t save that to your media library.

That alt text within the image settings there, within the block editor, only saves it in relation to the image in the content. And the reason for that is, it’s only–you can add that image again later on in a story or in another post, and the context could be different. And as we’ve discussed, it’s important to have the alt text be in relation to the content. And then–but if you add it via the media library, that’s when it would get used in the gallery, or if you don’t override here.

So I know that’s a little complicated but it’s just something to try to keep in mind if you’re not sure why your alt text is showing up or it’s showing up differently, things like that. So that was a bit about images and now we can go to links and, like, maybe that’s hyperlink, things like that.

Something–and I see people do use links inappropriately all the time. So some of these are, like, they’re very little things, a lot of accessibility too when you’re creating content is just doing the little things right can make a huge difference. So, one thing: don’t open links in a new tab, please. In general, anything that you code that takes away control from the user is a bad thing.

So, you know, when you go to a website, if you want to open something in a new tab, you can, you know, can click or right click and select “Open a new tab.” Those are choices that the user can make and when you code it so that it automatically opens in a new tab, you’re taking that control away from someone, which is not ideal. And almost all the time the arguments–I’m sure there is some valid argument for opening links in a new tab but, generally, when I hear them, they’re more focused on the business side of it than they are about the user preference.

And the other issues with opening links in a new tab is that it takes you out of the context that you were in and so now your, like, back button is broken. If you didn’t notice it open in a new tab, you’re not sure where you are, you might have been– yeah, there’s a lot of things that can go wrong because of that, so unless you’re absolutely sure that it’s a better accessibility to have it open a new tab, you should not do it.

Like the last talk described, you need something more than just, like, the color to offset your linked text so, in general, using underlines, you could do a background but you need to make sure it has sufficient contrast to what’s around it and some other element to help identify is preferred. And then, this is a big one, is to, again, you’ll see this everywhere, I’m sure.

We’ve all written linked text like this, but avoid generic phrases like “click here,” or “read more” because linked text should describe the link and not rely on the surrounding text for context. So a link should let you know where it’s going to take you just by having the linked text. That’s the ideal.

And these, again, they’re little things that you can do to make a big difference. And why I say that is this is the screen reader rota for voice over, is if you’re on a site that just uses, “click here,” you can navigate by links and see that structure. It’s just gonna say, “click here,” on everything. It takes those links out of context and there is no relation. But imagine instead someone used those links as “Buy now,” or “Upcoming Events,” or “All of our available properties.” You don’t even–with these things, you don’t even know, like, what site you’re necessarily on but you can get an idea of what’s gonna happen when you click that just from the link itself, from the text itself.

Colors, the last presentation did a great job of going over all the details of that, so I won’t spend too much time here. But the things–a few basic things to keep in mind are color contrast, and it says on the slide, “Can people read the text,” and the text kind of fades out into that blue that matches the blue background.

It makes it really hard to read. So we’re going for a minimum contrast color checkers, if you google down, they’re pretty easy to come across. Contrast ratio, the minimum that you would wanna shoot for is a 4.5 of contrast between the foreground and background, and then, ideally, you’re gonna get closer to 7:1, especially for body text.

Other, like, UI elements can be closer to 4.5, but it’s something to remember. As well as the last slide–last presentation mentioned this: to not rely on color only. And here’s an example of that. If you have–we have a form here that says “First Name” and has a red check and then “Last Name,” and has my last name, “Jones,” in it with a green check. And that has the “No Color Blindness” presentation.

And then if you look at the same thing with a red blindness, it–both those check marks start to become a lot more similar and there’s not like a strong, like, difference between them. And I used the check mark here because people can sometimes use that for both positive correct and the negative incorrect. But you can fix things like this by adding some text to describe it, ’cause similarly, icons shouldn’t be standalone. There should always be some text that supports that. So in this instance, for the empty field, we just say, “Your first name is required.”

And you can see on both those, with color blindness and with no color blindness, you get that text to help support and actually tell you it’s wrong, which makes it accessible for–way more accessible for everyone. Just quickly, some cognitive accessibility tips, is to make things easier to understand. And ways you can do that are if you have, like, a long paragraph that has a few points in it, break that up into bulleted lists.

You can also use shorter sentences and smaller words. If–highlighting or bolding the important pieces of text is super useful. Also useful for skimming so you can kind of like get the idea, take things in of a larger article and see the important parts. Don’t ever use a timer because, one, it puts pressure on people unnecessarily and, two, like, there’s no reason or there’s rarely a reason, I guess, that you would need to, like, limit someone’s access to the content. It just, yeah, it just creates something that could be accessible and makes it inaccessible just by adding a timer. So please don’t use them and don’t autoplay things.

I don’t–this is another thing that, like, that you’re taking control away from the user and is only that–the only argument I hear for them is from the business side of it. It’s not from, like, a person saying, “I prefer everything being autoplayed.” You know, you go to–we’ve all been to a website that has–it start autoplaying and then you don’t know how to turn it off. So many things that can go wrong with it. So please, don’t autoplay things.

Some–so about evaluating for accessibility. This is going back to the beginning when we asked for some plugins or themes. How I go over them, ’cause oftentimes I’d be in a situation where I would need to evaluate, like, you know, 20 themes or 20 plugins to say–to narrow down, to be, like, which ones of these should we even start looking at, like? And looking at accessibility and evaluating it for accessibility first is such an easy way to eliminate I’d say 90-plus percent of plugins or themes.

If you go to it, and just test it with a few things, they’ll–you will narrow down your pool dramatically, very quickly. So I call this the five-minute accessibility audit. I test the keyboard interactions using tab and arrow keys. I zoom in and out on it to see if it breaks the functionality. See if they’ve labeled inputs–and inputs here are, like, form fields. And we’ll talk about all these in a minute. And see how they use color. Do they use color appropriately. Contrast as well as the–if they used color to signify a meaning without the supporting text.

So, first, we have our keyboard navigation. I have this Twitter navigation here. If you press “Tab” on it, it will–you should see that focus ring. And that focus ring tells you where you are on the page as well and it should be very visible, like, easy to see and it should allow you to move around just using your keyboard. And, as a sighted keyboard person, like, using it, you would just use tab most of the time and then if you’re in, like, a radio group or, like, a dropdown you might use up and down arrows or right and left, so just because something, if you reach something and you’re not sure how to interact with it, try using the arrow keys and see if that help– if you get somewhere else.

Zoom in and out of things. When you zoom in and out, it should increase the size of the text and reflow content if necessary, so this is an example of website pressing command plus on a Mac and it zooms in and you can see the header, like, reflows to accommodate the larger text.

Labeling inputs. We see here we have this form that has the email, confirm email, password, and you see the inside of the box, labels, we need to describe the field but these inside of the input field are actually placeholders. They’re not labels. Because placeholders, they’re not actually necessary but if you use them, they are examples of the text. So instead of email there, it should say, like, example@gmail.com.

A placeholder is supposed to be an example of the content to be filled in there. But the bigger issue here is that once you click into that field or you start typing that field, your label is now gone. A much better way to do it is to have the label coded correctly and outside of that input. That way, when you’re typing into it, you can still see the label appropriately. And to demonstrate why, see if you can remember what this field was for. Now, there’s text in it. The label has gone. And if you happen to remember, it was the name field: “What should we call you?” So it’s really important to have those labels visible.

So now would be a time if anyone has shared something we can do a quick screen share and we can go to that website and just run over those few things, like, the keyboard navigation looking for inputs in the zooming, anything like that. And if not, then we can also just go over some questions in general. But that’s the end of what I have prepared.

Ahmed: Hello, Jerry. Thank you for the presentation. I’ve learned a lot of small thing that can make a big impact. I believe our users can take away that benefit and why also they can understand the reason why it is important. So we have a bunch of question and we still have some time to address them, so let’s just go ahead with them. I’ll get–with the first question for you. So for alternative text, you spoke of images, of block of texts needing alternative text that is the same text. When is that too many words? Is there a limit defined by WCAG for number of words in alternate text?

Jerry: I don’t think there’s a limit. If it is, it’s very, very large. But I don’t–I’m not aware of a limit but you could definitely, yeah, look at the WCAG or, actually, I’m not sure it would be in–I think it would be in the HTML spec for that, but if you are reaching a maximum, it’s probably not great alt text, is my guess. Unless you’re, like, like the Twitter image thing, unless you’re, like, trying to recreate a large thing and you’re limited by the platform, such as Instagram or Twitter, if you’re doing it on your own website it would be better to have that image just provided as content.

Ahmed: All right, great suggestion. Next question: “What are the best practices when it comes to alternate text and data-heavy charts?”

Jerry: In relation to– can you repeat that one?

Ahmed: Sure, so, “What are the best practices when it comes to alternative text and data-heavy charts? Should you just summarize the main takeaway or include all the details? For example, bar chart comparing results.”

Jerry: With graphics like that, it can get tricky there. You would definitely wanna provide all the detail in a accessible format, but sometimes it depends on the control that you have available. So, like, if you were able to mark that up in a more interactive way that could be accessible that was not an image, that could be better. But would also be outside of the scope, I guess, of this talk. But if you were limited to just having an image and you were–and that was your only option is just use that image, then you would probably wanna have all the details, yeah. But without seeing exactly what it is, it can be hard. There’s a lot of, like, subjectivity to it, in a way, but in general if you’re providing content, it needs to be–all of it needs to be available, yeah.

Ahmed: Absolutely, so what would be your one advice for writing good alternative text?

Jerry: I think the ones I broke it down into are, like, limiting it to one to three plus the relation to the content are my, like, the things that, I guess for me, flip the switches to, like, how to write good alt text but, yeah, I’d also, like I mentioned in the presentation, I’d recently heard someone describe it as a paragraph and I don’t think I explained that well when I discussed it.

But if you look up, I think Dave Rupert is his name and he wrote one about how he has reframed it in his head about how an image within context should make sense if you took the image out and just put the alt text in there, that should make sense within the flow of that document. So he started describing it to himself as just paragraph text. Why is it there and what is it doing down beneath his content. And if the answer is it’s not doing anything for the content, then likely the image either doesn’t need to be there, like, it’s not helping anyone in a way, it’s just like taking up space, so it’s not as, like, focused, good content, or it could be that the image is presentational.

Ahmed: Okay, thank you. So the next question, it’s kind of dramatic, so the question is, “As a member of Automattic, what can we expect in the near and distant future in terms of seeing those changes to improve the accessibility experience? Do you wanna share some insight thoughts?”

Jerry: I am not positive. It’s, you know, it’s definitely a large organization. I’ve been working more actively on accessibility with it and making sure that anything that comes through as part of my team gets, like, I’m very attentive to the accessibility of it. Doesn’t mean I always get it right but I can assure you that I’m doing my best as well as, I guess, just the general intention of the company.

People are very, very supportive of accessibility. And it may not always come out in terms of releasing fully accessible things all the time, but I can say that the intention is there in that every–like, I have not had to push back to be, like, “We need to make this accessible,” and someone be like, “Are you sure?” Like, it’s always been, like, “Oh, yeah, definitely. Like, how do we do that?” It’s–I’ve never had to have a discussion with someone about justifying that accessibility should be there.

It’s 100% supported by everyone there. And–but things move fast and not everyone is an accessibility expert and so it is hard finding that balance, yeah. Like just recently, right now, I put in a review for a combo box element which is a search field related to a dropdown where, like, you can think of, like, an autocomplete dropdown, and I put in a review of something that they–that I was, like, “Hey, this isn’t great direction.

Like, there’s quite a few reasons why this isn’t as fully accessible as it should be,” and it’s–that was maybe a month or two ago and they’ve since, like, totally rewritten it and gone a different direction that should be way more accessible. So, yeah, I hope that helps to answer that the intention is there and support’s there, but we’re also–a lot of people are human as we know and don’t always get things right.

Ahmed: I’m sure that information will pass. The next two question is a bit more technical so the next one is about Gutenberg and Block Editor. So the question is: “Does Gutenberg or Block Editor always pull in the alternative text that has been entered in the media library?” And also, “Does the Editor permit overwriting that already entered alternative text on local post?”

Jerry: So if I recall it, so it’s a question about the media library when you insert the image into the Block Editor, it pulls the text from the media library, if it’s there, and fills it into the Block Editor as, like, your kind of default. But then when you edit that text in the Block Editor, it won’t–and save the post. It won’t take what you’ve entered and save it to the media library.

I believe that’s how it works. But please double check that for yourself. But I believe any text in the Block Editor does not get saved to the media library. That’s–those are separate for those reasons I outlined before that, like, yeah, that they need–they need a way of being distinct from each other because of the context of the image within that flow, yeah. But go ahead and test it out and make sure I’m right on that.

Ahmed: All right. The next one sounds interesting. “Where can we find accessible-ready themes?”

Jerry: I believe just the WordPress.org, like, plugins repository search, I believe, has an accessible-ready, like, label. But that would just be for free themes. Otherwise, I would say if you’re looking at a theme outside of that, to go ahead and, yeah, use those kinds and you don’t know, like, the underlying code and a lot of the little details that those tips that I kind of pointed out on evaluating things, can really go a long way toward isolating, like, if you started out, like I said, with 20, you’ll probably end up with fewer than 5 that have really considered it and gotten it and done it well, yeah.

Ahmed: Thank you. The next one says: “Why is it not good to open external links in a new tab, especially the social media links?” Any thoughts?

Jerry: When you say “social media links,” is it like if you’re on your website and you have, like, a few different social media links to open. I think I would say the same things I went over which would be you’re taking control away from the user, so if I go to your website and I see the social media links, I can choose to open that new tab if I wish to do so or maybe I’m ready just to go on.

That, yeah, that when you are making an assumption, a lot of accessibility issues arise from making an assumption about what the user wants, because the user is not one person. We are very diverse in abilities and disabilities and what’s right for one group, a person even within a group, can vary widely and so the best thing to do in general is to just give the pattern and let that person decide for themselves what is best for them, and how they want to interact with something. So that might be a little bit more, like, accessible, philosophical, about just opening links in a new tab, but I think it’s an important illustration of the larger scope of that.

But more practically, like, specific reasons, again, would be like if you are using a screen reader and a link opens in a new tab, it’s very easy to miss, like, it’s very easy to just not hear that you’re in a new context and so, say you clicked that social media link, it opens in a new tab or new window. It’s harder to get back to that window if you’ve missed that you’re not in this new context. And so, I can’t just use the back button anymore to quickly go back because your history is within your browser, the current link browser tab, and when you open a new tab, that’s– there’s no more history. There’s a disconnect there. So that’s another reason I think it’s useful to not open things in a new tab.

Ahmed: Absolutely, Jerry, so we have only a few more questions to go, so the next one is related to the e-commerce industry. “FOMO, Fear Of Missing Out, is a famous or infamous technique used in the e-commerce industry where a counter is used to increase the sale. Does it make a site inaccessible according to your thoughts?”

Jerry: Yeah, I think it would. Yeah, there’s–and again, like, it’s similar to what I discussed before, is like, those are business decisions, not considering the person behind that, and, like, yeah, I’m not sure what user-focused decision would make a site more accessible by having a timer on it. I can only think of things that would be on, like, the business side of why they would want that.

Ahmed: Right, thank you. The last question is about the news broadcasting agents. “So, the majority of the websites for news broadcasting agencies or media agencies don’t really offer much accessibility options. Why is this the case? Would you agree?”

Jerry: I’m not sure I feel qualified to talk about it. I guess I would maybe need a specific site or something to evaluate but I’m not sure about a larger media organization and how that relates to accessibility, unfortunately.

Ahmed: All right, so Jerry, thank you so much for being patient and answering so many of the questions. We do see our audience is paying close attention and they have the eagerness to learn in depth from you, pick your brains at topics of interest, so I would like to once again thank you so much for being with us.

Additional Resources

WP Accessibility Day has not assessed speaker-provided presentation resources for accessibility.

View presentation slides

Questions on “Creating Accessible Content with WordPress

  1. QUESTION: For alt text, you spoke of images of blocks of text needing alt text that is the same text; when is that too many words? Is there a limit defined by WCAG for number of words in Alt Text?

  2. QUESTION: What are the best practices when it comes to alt text and data heavy charts? Should you just summarize the main takeaway or include all the details? (ex. bar chart comparing results)

  3. Q: As an Automattic member, what can we expect in the near and distant future in terms of CMS changes to improve the accessibility experience?

  4. QUESTION: Does Gutenberg / Block Editor always pull in the Alt Text that has been entered in the Media Library? Also, does the editor permit overriding that already-entered Alt Text on local post ?

  5. FOMO is a famous (or infamous?) technique used in eCommerce industry where counter is used to increase the sale. Does it make a site inaccessible?

  6. QUESTION: For external links — those that take users away from my client’s site get a target=”_blank” — in order to keep traffic on client’s site . . . is that confusing the disabled in some way?

  7. Q: The majority of the websites for News Broadcasting Agencies or Media Agencies don’t really offer much accessibility options. Why is this a case? Thoughts?