Archives: Talks

Transcript

David: Hello everyone. Welcome back to WordPress Accessibility Day. My name is David Vogelpohl at WP
Engine and I’m proud to be your host for the session: Much Ado About Captioning Videos for WordPress and Beyond with Meryl K. Evans. Please feel free to add your questions to the YouTube chat feed and we’ll answer those at the end of the presentation.

I’m honored to introduce Meryl and her talk, Much Ado About Captioning Videos.

Born hearing free, Meryl’s first encounter with captions came in 1983 when she received a closed caption decoder. Because she depends on captions to follow the video, she has seen the best and worst of captions. Fast forward decades later, Meryl’s digital marketing career has come in handy in educating people about the benefits of captioning videos and captioning them well.

When she started making videos she wanted to caption them. As a self-employed professional she worried about the investment to make that happen. Through trial and error she figured out an effective process for creating awesome captions that led her to create the 10 Rules of Great Captions. And here to share that with you today, I’d like to introduce Meryl K Evans.

Meryl: Thank you, David.

Howdy, y’all. Before we start here are a [unintelligible]. First, there are a lot of visuals. If this is an accessibility issue with anyone needing information or clarification, please contact me. Second, I want to quickly mention audio description also referred to as video description in AD. A narrator provides a description of key digital element in the video.

While I won’t cover it, it is important to mention, because it’s an accessibility requirement. Thank you David for bringing that to my attention. Third, thank you captioners and sponsors. Captioners, may the force be
with you in captioning this accent.

I’m Meryl, with two syllables, and rhyme with pill not pull.

I am a native Texan who lives in Plano, right next to Dallas. So I was born hearing free, aka profoundly deaf. I am not capital D deaf, because I am not part of the deaf community and I don’t know sign language. To listen, I rely on the hearing in my bionic ear, which is a lot cooler than saying Cochlear Implant, aside from being a caption pusher, I am a Digital Marketing Freelancer.

This is what my first caption decoder looked like. It was like clunky thing that sat on top, on top of the TV. Little did I know, it was going to change my life.

We’ll cover the other reasons to caption besides accessibility, because some don’t think it’s a good enough reason. Crazy, right? But that’s reality. I see a lot of posts where people ask if they should caption their video.

Unfortunately, captions don’t just magically appear. If only. Automatic craptions, don’t count y’all.

Look at this auto, auto craption, I definitely did not say that. So we’ll dig into how captions work.

You have many options for captioning your videos. We’ll cover those. And finally, great captions are more than just capturing the audio. Why should you caption your video? The number one answer is accessibility, of course.
That should be enough, right? Alas, it’s not and the second most popular reason is to help second language learner. Many focused on these two reasons and for some creators it’s not enough to justify their time and resources for captioning.

David: All right, we’re just trying to get the screen sharing going. Okay, there we go. awesome. Yeah.

Meryl: All right.Yeah. Sorry about that everybody. Technology right.

When you share the other reasons, it makes creators rethink captioning. Only 6% of the world’s population is deaf or hard of hearing. Naturally, creators may think their audience doesn’t include them, or was too smart to bother.

But they’ll change their mind when you share that people who are deaf and hard of hearing are not the primary users of captions. A survey has found 80% of those using captions are not deaf or hard of hearing.

That you reach more people with captions.

You want the caption, because it greatly increases the chances of people watching more of your video. Lately a lot of data has popped up that shows more people turning off the sound especially watching videos in public. But what about if they’re watching in private? A good number of them still keep the sound off. My youngest is a member of Gen Z, and he has ADHD. He does well with multitasking. He’ll be on his phone, with Nintendo while watching a captioned video.

Many of his friends do the same thing regardless if they have ADHD. It also helps those with language processing disorders and other differences.

Some people, none of these differences say they need captions because it helps them focus. Besides, even hearing can be affected on a temporary or situational basis. A cold and ear infection can change a person’s hearing. Think you go to a noisy restaurant, bar and gym. Masks are everywhere nowadays. A lot of people who can hear that they have a hard time understanding people talking with a mask on. What do Hulu, Netflix, Hover, MIT and Pornhub have in common? They have all been sued over the lack of captions.

Yes, you heard right. I said Pornhub. A man sued Pornhub, because videos were not captioned. He’s probably one of those who reads Playboy for the articles, right? Whatever floats your boat.

Contrary to what these companies may think, it’s not cheaper to deal with law suits over fitting accessibility into the organization. Caption users are passionate. They will speak loudly and fully comprehend it can hurt the company’s reputation. That the lack of captioning costs more than the law suit.

Captions also increase brand awareness. Any opportunity to help people remember your brand is a must do in those noisy rooms. And last, but not least, when you close captions, as opposed to open captions, caption can boost SEO. Captions don’t magically show up. They require two things: the video, the text files, the caption. Even if you use YouTube’s automatic captions, YouTube usually create a caption text file.

You can download it and use it elsewhere. The way to add caption to a video is to create a text file that goes with the video. The formats that you and I will use most likely are SRT and WebVTT. There are tons of formats. The captions are in a text file that you can open in a text editor.

The magic happens in the time column that tells the caption when to appear and disappear. When you play the videos that uses the caption file is called closed caption. Since this is a text file search engine can read it. That’s how you get the benefit of SEO with closed captions. You have many options for adding caption to a video. I am sharing one example, so you can see the process. This video shows you how to do it on YouTube, since it’s free and most everyone has an account.

[Video plays with captions]

[Clip within Video] Hey y’all. Meryl Evans here creating a short clip to show you how to caption a video.
You can copy and paste this script. Boom and then automatic captions do the work and then edit it.

[Video continues with captions]

[Clip within Video] Hey Y’all, Meryl Evans.

And copy and paste the script.

Boom let automatic captions do the work and then

[Video continues with captions]

Meryl: Two points. First, did you notice the line that the captions got shorter on the left and then that the caption lines matter. More on that shortly.

The point is, don’t rely on YouTube to set the length.

The second point, at the end when I selected to download the video I could download the SRT, CTP or SBV.

SBV is YouTube caption format. To add a video from YouTube or Vimeo to WordPress, you copy the videos URL and paste it into WordPress. No need for caption file.

However, you might need the caption file for other things such as posting videos on LinkedIn or Facebook.

Now this is what the SRT file I downloaded from YouTube at the end of the video looks like.

SRT is short for Subrip Subtitles File. Linkedin, YouTube, Facebook, Vimeo and many of the platforms accept this. You’ll see it has sequence number one, two, three, four, five followed by a time column.

This video will show you how to. It’s the first caption. It shows up when the video hits the first time code and it goes away when the video reaches the second time code. Let’s check out another format.

This is an example of WebVTT file. It’s modeled after SRT, but it takes captions a step further by allowing you to format the text to choose the positioning and other things. This is the same text in the previous example except it follows VTT formatting. No sequence numbers like the SRT file, just the time code showing the start and end time for each caption.

Who wants to type all that out? So what other ways can we create a text file to add caption to a video? You have three options for captioning will create the text file. You can Do-it-Yourself with tools like I just did, use the company that offer captioning services, or find a tool that automatically captions the video and edit those captions. A lot of people ask how long it takes to capture the video?

You’ll hate my answer. It depends.

The biggest factor is the length of the video and how much audio it has. Simply put, the longer the video and the more audio it has, the longer it will take to caption it. Let’s quickly take a look at each one. The list of captioning tools is long and these are just a few examples um. The best captioning tool, it depends on your processes and preferences.

Personally I use YouTube, because it has the easiest user interface. Youtube also has automatic captions, but I never ever rely on auto craptions, as I call them. They don’t like my accent very much. You know who creates the best caption? Humans do. So thank you to the person captioning this right now.

Some of these captioning and transcription services are 100% human. Some use automated tools called ESR, automatic pre-automated speech recognition. And others may use the mix of artificial and human intelligence. You submit your video to the service and they’ll send you the caption file. The output and the turnaround time depends on the service.

I’m sorry for the curse word in the photo. I did not say that word. It is auto craption’s fault.
Of course the photo on the right has the correct caption. The accuracy in automatic captioning is not good enough. Oftentimes it has no penetration and looks like one big blob of text with incorrect words.

The good news they are more apt to help you add captioning. The bad news, is they have caption formatting options that you can’t read or distract you from the video. Captioning audio is only part of the formula. For awesome captions, quality is the other half. The reason why great captions are boring is because they let the video be the star. They don’t fight for the spotlight.

When it comes to posting videos on WordPress, two things to keep in mind. One is to have player control with the start and stop button. No auto play please. Even I don’t like it. It creates a better user experience when the user can play and stop the video.

The second part, is of course caption your video. You can upload a video and caption file to WordPress, but the markup is more involved than simply paste in the URL of a video into WordPress. Besides, your website service may have a file upload limit and it may not be optimized for serving videos.

While it means, I have to depend on Youtube not going down, it takes some stress off my website. Most of you probably already know this process. This will be quick. These steps work with Vimeo and VideoPress.
Here’s what it looks like in WordPress.

First, select YouTube for the block. Second, copy and paste the YouTube URL into the WordPress editor and ta dah. Vimeo works the same way. If you enter the caption on YouTube or Vimeo they’ll show up on your WordPress website.

If you want to upload the video to the WordPress website typically requires using either HTML or adding open captions. Here is an example of HTML5 for adding a captioned video, kind which is highlighted in gray. The first highlight can be subtitles or captions. I use subtitles here, so you can see it needs to have an SRC or AMG for each language.

I use ES which is Spanish. You can also customize captions with CSS. There is no one standard for great captions. You’ll find guidelines for caption quality from the [unitelligible] and caption media program FCC, WCAG POUR which stands for: Perceivable, Operable, Understandable, Robust.

I created the Caption 10 best practices before I found these guidelines. The Caption10 includes many of the list of these guidelines and enhances them based on my experience. If you’re like me you learn from example, so here’s the number one rule of awesome captions and this shows you why. One side contains great captions, the other painful captions I have seen in video.

One thing to know, the right side that have many different captions since the [unitelligible] is important, but I wanted to show you actual examples of what creators have used in their captions. 

[Video plays with captions]

Meryl: Readability has four components: size, colour, background, which is the colour behind the text.

In fact, captions without a background are hard to read. When I was looking for exercise videos, I found captioned video from two companies. Peloton won me over, because they were more readable. The other one did not have a background. The next will explains why I say autocraption.

[Video plays with captions]

Meryl: Auto craptions are good for a few laughs, but they’re not so funny when you’re trying to watch a video.

I often quit watching videos when the captions aren’t good. It turned down many other viewers too. They just write, any kind of craptions are not better than no captions. When you watch this next video cover up the left side and see what happens.

[Video with captions]

Meryl: How was that experience? As I said, I can tell when the captions are out of sync, even when I’m not wearing my bionic ear.

Yes size matters.

Here’s why. Cover up the left side if you dare.

[Video with captions]

Meryl: Remember the YouTube video where I was showing the line length and breaking points are two areas I failed at in my early days to start self-captioning, because I let YouTube do it.

Bad idea, humans know best.

This has many factors and videos often break this rule for any of these reasons. More than one or two lines makes it hard not to lose your place while reading, and from one or two lines up to 32 characters per line. As for alignment, the important thing is to keep it consistent for the entire video.

Which position do you prefer, top or bottom? In this one, you might want to hide one side for about eight seconds and then look the other side for the remainder.

[Video with captions]

Meryl: Don’t worry your volume won’t suddenly stops working. This video has no sound to show you the importance of sound.

The left side shows the correct way to do it.

The right side shows what happens when you don’t caption the sound.

[Video plays with captions with no sound]

[Video] This was a simple video to show the importance of sound.

Meryl: Noting that static or background music is so important. One episode of a TV show went on and on without captions. I didn’t have my bionic ear on, so I was wondering if I was missing a voiceover or a song. Don’t leave humans wondering if the captions are messed up.

At the start of a TV show when introducing the stars, the caption and the chryon really overlap. In fact, many shows move the caption up temporarily and then bring them back down or they move the chryon above the caption.

[Video with captions]

Meryl: Now, let’s take a look at what voice means and why it matters.

I’m, going to turn off your sound for this one. The caption will tell the story.

[Silent video with captions]

Meryl: The next time that singer showed up on America’s Got Talent it was terrible. This time they didn’t even caption in the voice changes. You never want to confuse your viewers and have them wondering who said that. The quality of video clips is in the back.

The irony is I was trying to replace it with the better quality video, but the captions were terrible. Take a look.

[Video with captions]

Meryl: The video showed off three examples for identifying the speakers.

You can put captions under speakers when you use open caption or VTT which allows you to control positioning. Here’s the last one of the caption 10.

First session is the live event like all live events it uses just scrolling captions. That can’t be avoided, however, I think scrolling captions in recorded videos that were not Pop-in, is easier on the eyes, less detracting and most importantly that people read at their own pace. These videos are not in sync.

It was a challenge to make this. So the left is the Pop-in and the right is the Scrolling. I’m turning the sound off for this one.

[Silent video plays with captions]

Meryl: Accessibility should be reason enough to caption videos. It’s the right thing to do. Of course, that’s not enough for everyone and they’re not all required to comply with the law. Captioning is cheap, definitely cheaper than a lawsuit.

With other tools available, it’s easier and more affordable. Captions expand your reach, boosted your brand and company reputation and prevent lawsuits.

It’s possible to profit off captions as Peloton did when I became a member. Because it not only had captions, but high quality captions. Looking here, I’m talking about them spreading their name and brand.

What can we do to get captions to spread faster than Covid19? If you see a captioned video leave a comment thanking the creator for captions and encourage them to use #Captioned to help expand the videos reach or thank them if they use the hashtag. Next time you post your video online use #Captioned. It’s a unique hashtag, because it doesn’t tell you the topic of the video, but rather the video has captions. One of the biggest values to captioning is not knowing what to do.

Share captioning how-to and resources and guidance. Captions have changed my life. Captions let me know what happened when I saw breaking news.

They let learn something new, they let me catch more stories, whether it’s on video or a video call.

It’s only recently that I’ve ventured into the world of video calls, thanks to captions. You can learn more about that at meryl.net/calls. Feel free to connect with me and send me your questions. You can find everything and more at meryl.net/captions.

And I welcome any feedback on what could be added removed or changed in this presentation.

Thank you for your time. I want to send a Texas style thank you and yee haw to the WordPress Accessibility Day team for having me, to the sponsors you for making the event and human captions possible and to the amazing captioner who captioned this accent. Now let’s hear from y’all.

David: That was awesome. Meryl Evans did an amazing job. It’s super incredible. We’re gonna go to the questions so I’ll get the questions ready here for Meryl, and I’ll read it out loud here: So I’ve heard you present and mention Disney’s Hamilton being so impactful with their users or with their use of captions, because traditional musicals may not be as accessible as needed.

Can you share another development in captioning or technology i.e voice to text on mobile phones, that has been impactful for you?

Meryl: Well the Hamilton’s a big deal for me, because I love that show and I love Broadway.

Believe it or not, even though I’m deaf, I love musicals and I, I knew I would never be able to see Hamilton on stage, because it is so fast.

So I was so grateful when Disney decided to bring it sooner. As for another development in captioning with technology I have to say the video calls that I mentioned, because before the pandemic I never did video call, because the couple times I did it was a bad experience.

Now I call my mom every week. I call a friend every week and I just run Ping meetings a couple times a month. Actually, I have one every week that I know. Next question.

David: Yes great uh. All right, so the next question is how do you uh, what I’m sorry:

What do you use when you have a lengthier dialogue for longer videos. This can be costly.

Meryl: Well my videos are never that long, because I, I know people have too much on their plate.

There’s so many great videos out there. So I try to keep them short, but it just depends on the resources and what what you have.

I, I mean captioning those are just all getting cheaper, one of them does a dollar a minute. And I know that for a one person business, a video just 50 minutes long is gonna cost $50 and that might be a bit much. So one way to do it, is to try to do script and then you can copy and paste the script.

Oh, here’s what you can do.

If you use transcription technology, use it to caption your video. So let’s say I have an app, I record my video, I let the app listen to the video and and get the transcript. Copy and paste that transcript into YouTube and see how that works out.

David: Awesome, next question: Can you recommend uh learning resources for creating effective captions for a beginner uh? I want to make sure I can learn properly.

Meryl: That’s a great question. I just recommend unfortunately, I recommend you go to my meryl.net/captions, because I have a whole table of contents at the beginning and it covers the 10 things we just talked about. So you can go to where you need to begin. I haven’t seen any that stood out to me in terms of teaching how, other than the resources I’ve provided and links to other resources.

David: All right, awesome. Next question: Is it better to use closed captions or open caption? Is there any reason to have both?

[Meryl} Excellent, excellent question.

I always recommend closed captions, because it puts the viewer in control. For example, if I don’t like the font that they’re showing I can change it with closed captions. With open captions you can’t turn them off and on. You can’t, if if they’re terrible, you can’t fix it.

It affects the readability, but if you see some of my videos on LinkedIn some of them have open captions only, because LinkedIn has lost the caption file on some of my videos. And for me that’s worse than viewer control, because I cannot have any of my videos not have captions because I want to walk your talk. So closed captioning is my first recommendation, because it lets the viewer control the caption.

David: Awesome answer. Next question: Who, what company makes great caption videos that you really like or they do really well?

Meryl: Well that, I’m not not, no one sticks out, you know. I mean, those captions you see on TV shows are really well done, but that’s how it’s been done since 1983. There’s a reason why captions haven’t changed much, because it works. You don’t want them to distract them from the video. And as I mentioned earlier, Peloton, see I’m mentioning them again, their name’s getting out there and I chose them over the other brand, because I could not read the other brand’s captions.

David: All right, awesome. Next question: What is the most impactful place to start if you’re just at starting adding captions?

Meryl: Guess my website, again. I’m sorry, but um so I’ll capture, um companies that do the captioning they have resources, but I try not to be biased. I don’t like to mention one over the other, because I don’t want to have that connection, you know. I try to be objective, but if you go to the captions of the caption company, they have some good resources and and a couple of them are on my guide.

David: Awesome. Next question: Any advice for captioning translated content?

Meryl: Oooh that’s a tough one. That’s why closed captions, that’s another advantage of closed captions, because it’s very easy for somebody to change the language on there. So uh I think they start with, start with a closed captions with the English file and then you can translate it to Spanish. And I showed that HTML example, so that’s how you can offer examples, uh languages. And also YouTube can handle multiple languages as well.

David: Awesome. Next question, this is one of my own, I have so many notes, but: If people only remember one thing, what you, from what you presented today, what should that be?

Meryl: Caption everything, but seriously the second thing I would say is make sure your captions are readable.

If they’re not readable, all that hard work you put into captioning your videos, goes to waste.

David: Thank you, Meryl.

Transcript

Joe Simpson, Jr.: Greetings and a warm good evening from Southern California. My name is Joe Simpson, Jr. I’m the volunteer wrangler for WordPress Accessibility Day.

I’m also a WordCamp, WordPress meetup, WordCamp organizer, community and accessibility advocate. At my second WordCamp Los Angeles, I saw this fiery ball of energy and artistic-ness up on stage, presenting and commanding the stage, and I thought, “I think I wanna do that. I wanna get up on stage and speak.”

All these years later, it is my sincere pleasure to introduce her to you.

Okay, Alicia St. Rose began her adventure with WordPress when a UX friend offhandedly suggested using the CMS for a mutual friend’s website.

That was over ten years ago and the adventure has turned into a torrid love affair. Now she’s a freelance developer, exclusively powered by WordPress, and has yet to find a limitation in her magical–in this magical piece of software.

She is the owner, principal designer, and developer at WP with Heart, a small agency that employs one, so far. In addition to creating for WordPress, she provides an online one-on-one coaching for DIY website creators.

She’s also a creativity and mind shift mentor, empowering people to bust through their own limitations in order to radically express their authentic and creative ideas and selves. I’d love to introduce to you, presenting “Adventures in Accessibility: How Embracing Accessibility Made Me a Better Storyteller,” Alicia St. Rose. Take it away.

Alicia St. Rose: Hello. Hello, everyone. Thank you so much for that introduction.

I’m just really touched. Wow.

So, I wanna make sure that all the technical aspects are set up here. I’m getting ready to share my screen, and I want the thumbs-up that you can actually see it, okay?

So, I don’t want any–anything to thwart our experience. So, let me– Can everyone see the slide in– for the slideshow?

I can’t actually see any thumbs-up, unfortunately, because now I just see my slideshow, so I’m gonna assume, no one’s told me it’s not up, so here we go. So, “Adventures in Accessibility: How Embracing Accessibility Made Me a Better Storyteller.”

So, every story starts with “once upon a time,” and so the story has to start with that as well, and I’m going to go back to the not-so-distant past with my story. I’m going to go back to January 1, 2020, when I woke up on that day excited about what this year was going to bring.

It was gonna be different, I could feel it, but I had no idea how different it was going to be. And so, in March, things drastically changed around the world.

I mean, they were certainly changing unbeknownst to a lot of us on this Western Hemisphere, and then they changed drastically for the entire world. And in that time, within that time, technology seems to have had a renaissance and a bursting forth into some expansiveness that I’ve not seen in my lifetime.

And with that I–it brought some limitations that were always there on the web and in technological areas, but they became increasingly obvious. So, I will tell you a little bit about me before we get into the accessibility adventure.

So, I started my web development career by wanting to make my blogger website look better when I moved over to WordPress, and so I spent an entire night trying to find out what a hashtag and three Cs meant when there was a hashtag and six Cs, and I couldn’t make it work. And I didn’t understand it, and so I ended up going to a bookstore at 6–you know, I stayed up till 6 a.m. , and I rushed off to a bookstore as soon as it opened in the morning, and I came out with a book called “The Headfirst Guide to HTML and CSS.”

It jump-started my career as a web developer. I had no idea that I would be into that, that I would turn into a geek.

I actually was a fine artist up until that moment, and my drawing table got dusty as I realized that part–the other part of my mind really wanted to learn something every single day. And every single day I did when I was doing web development, especially as I was learning, so I was self-taught.

I learned from books, and I’m very detail-oriented, so every time something came up, I would do a little Google search. We all went to Google U to do this.

That’s what we do now, and there’s nothing–there’s no shame in that, by the way. So, I, over the years, I became better and better at the web development thing, and then I found out about WordCamps.

And had no idea these existed and went to my first one in Orange County, 2014, and I found my people. And it was an amazing experience.

And I’m the type of person that wants to inspire, to empower, and teach, and when I realized there was two days of that, that people could show up and just talk about WordPress and how it inspired them and how they could, like, impart that information to others and kinda grow the community, and I was hooked. And so then I went from the WordCamps to meetups, so I had my own meetup here in Santa Barbara.

I have it currently, and it’s the South Central Coast WordPress Adventure Group. Found out that the Central Coast all–goes all the way to Santa Cruz, and I was not willing to drive that far, so it’s South Central.

So now, you see I am detail-oriented, to that point that I can’t even geographically mix. So, in one of my meetups very recently, within this year of 2020, a woman showed up, and her name is Sumner Davenport.

And you will–you’ll meet her later, very shortly, if you haven’t met her already. And she showed up at one of my meetups, and she just discussed something about accessibility.

And I had heard about it, and I thought, “Yeah, I know what that is. It means that, you know, people should be able to, you know, read whatever is on the web and not have it hidden from them, that in my vague–my vague idea of it is that they just need to get the information. And that’s vitally important.”

I didn’t think their experience had to be the same.

That night, when she showed up to my WordPress meetup, she informed me but–that the experience being the same is actually essential because it really isn’t fair that someone can’t enjoy the same experience. Not only that, it was violating civil rights, and I was like, “Whoa!”

I was totally like, “Whoa!” And at the–as she was talking, I literally went to a client’s website and took off what is called an overlay that I had thought I was so crafty putting on his site to protect him, but I’d actually done the opposite.

And in that moment I realized, A, I had a goldmine at my WordPress meetup, I was just like, “Oh, wow. I just totally fell into the right company with this one.”

And then, from that moment on I realized that there was a lot more to this web thing that I didn’t know, and then I started to feel really, really kind of heavy about it. And I thought, “Shoot. This is more work than I thought, and I’m like feeling a little bit overwhelmed about this. I don’t know if I’m gonna be able to pull this off.”

And it just became this–now it seemed where I was very, very detail-oriented and very careful about what I did with web, that now I had gone back several meters to the starting line of, “Oh, my gosh. There’s all this accessibility stuff that I don’t know. And I’m gonna have to catch up with that. And I’m in the midst of a project right now, and I know right now that some of the stuff that I’m doing even on that site is not accessible. And I haven’t even launched that yet, and I’m just about ready to do it.”

So, I had to actually let that soak in.

I had to realize that, at some point, is gotta put the big-girl panties on, and I had to realize that this is a part of what a website entails. It can’t actually be an afterthought.

It can’t actually be something that you can put in later or maybe someone won’t notice, and so I decided, “I’m just gonna have to embrace it. Take a deep breath and just learn what you can, and the people will fall in line. They will show up to help.”

And Sumner kept coming to my meetup, which was awesome. I started going to her meetup. Then wonderful, wonderful presentations by people.

Some of them you’ve seen already today, Meryl and several other, like, amazing presentations put on by the San Fernando Valley Meetup, which is accessibility-based. And I realized this was actually gonna be fun, and that there were so many people on board and so passionate about helping other people get access to the Internet, especially in a time right now where they’re inside, quarantined in some cases, and in a lot of cases–because some people who are diff-abled, or disabled, if they would wanna be called that, have health issues that they don’t actually wanna be exposed to other viruses, so they were really–there’s a lot of people who are really depending on the Internet to be their window to the world.

And when I found out that only 2% of that could actually facilitate that experience for them, I was even more disappointed and even deeply was disappointed because I realized that if it was 2%, they were probably only the government websites. And that’s not gonna be–I know you wanna get information for–you know, during a pandemic, but sometimes you wanna be entertained, and you wanna go shopping, and you wanna buy food, and you wanna do all these things.

And so, I realized, “Wow, I don’t wanna be a part of that. I wanna be a part of bringing joy to someone who is surfing the web, and they’ve gone through site after site, and then they land on the one that I’ve made for somebody.”

And my clients are benefiting too because now everyone can have access. And so, I decided–after I decided that I was gonna embrace this, I realized that there were some gifts in this and that they improved my actual–my value and the way that I tell stories for my clients, because building a website is not–it’s not some, what’s the word?

It’s not a basic or vanilla task, okay? You are telling someone’s story when you put a website up for them.

It’s not, “I’m gonna go drag something around and make it look pretty for you.” It is how are they–you expressing their inner motivations and passion to the audience that they want to receive that, and so it is like storytelling for them, or even movie scripting, or whatever it is.

It’s not a basic tech task. There’s a lot of humanity in making a website, and so this aspect of adding accessibility even brings more humanity to it, because it’s actually a–I don’t know the word I’m looking for.

It’s an honorable thing to do, to bring access to those who do not have it at the moment. So, one of the things that I did learn on my adventure to this storytelling is that the sensitivity to others’ needs is actually in the forefront of every decision that I make when I’m building the website.

Oh, my goodness. Let me cancel that. Now I can see myself. Okay, so, I’m sorry. Some wild thing just happened on my screen, and it took me aback. A bunch of things just opened up, and I’m gonna close this.

Okay, so I’m back. So, the sensitivity to others’ needs became the permeating intention to everything that I did on the site.

And it wasn’t just the sensitivity to the visitors’ needs, which has always been the thing that was more important to me. I did not ignore the clients’ needs.

They always had these specific things that they wanted. They always had these design or aesthetic ideas that they needed to have on the website.

It was kinda like one of those cooking shows where they give you some Chiclets, a bagel, and a Pop-Tart, and you got to make up a five-course meal out of that, you know what I’m saying? Like, sometimes that happens, and you get Comic Sans and you get fuchsia, and you’re like, “I got to work this out somehow,” and so that’s where the creativity comes from.

Your creativity comes from, like, what you would sometimes call a limitation, but it’s not. It’s a parameter which you work in, and it actually creates–it makes you more creative, so my sensitivity to others’ needs was something I learned, and it became, actually, this fun way of dealing with content and layout.

It’s like, “So, if someone needed to tab through this, what do we have to do?” And then, to make sure that you’re happy with having this kind of cool hero image with only–we can do this.

We can merge the two. We can make it work, so the sensitivity to others’ needs was really, really important.

Also, as–whoops. As I got deeper and deeper into the accessibility–oops.

I skipped a slide. There it is.

Okay. I have a delay.

Okay, as I got better–as I got more and more into the accessibility and getting more information, my education of even web development became–got better, and then improving skills. And every time I learned something and I imparted it to my clients, it was–the fun part was actually explaining this stuff to my clients and explaining how important it was.

And then, in my experience, the people I’ve told have felt the levity and the importance of this. They realize that it’s to be taken seriously, and they actually feel honored that they could be a part of making the web better, so–and actually relieved that I care about it too.

So, there are clients out there who really want people to help them with this kind of stuff, and so–and if they do run into developers or people who think it’s not important, part of the client’s kinda like feeling a little uneasy about that, because it’s their job and their business that’s on the line. So, you won’t get–I don’t really get a negative response when I bring up the accessibility stuff.

I get surprise because they didn’t realize how important it has gotten, but I do not get any kind of negatives. So, there was the education and skills.

Of course, it’s something that makes you more valuable as a web developer. Also, it became–I became a better observer of my world because now it was a user experience not in the tech sense but just in a sense that was more global or universal.

You talk about the journey of the client through your website. Now you have to think about the journey of someone who, let’s just put it this way, broke both their wrists and can’t use the keyboard.

It’s not necessarily someone who is paralyzed and can never walk again or use their arms. Some of these things are temporary and there might be very, very–a very serious or important need to get to a website in those six months or four months that you have two casts on your arms.

So, when they say a percentage of people using the web who have accessibility issues, I’m not sure they even count the temporary people that are flowing in and out of that at any given time, so you have to–so, you became–not only did I become a better observer of the world in that way, but also the information and content that my client was putting on the website. I had one client who, he is an artist, a veneer artist, and he had a lot of art pieces, and he was using these prime symbols for inches and feet.

And I had to go investigate whether the screen reader, all of them, would pick that up, and it didn’t seem likely the way we were designing everything, so I actually revamped that whole thing to say “inches” and “feet,” they’re actually spelled out–and centimeters. And in the course of that, I also discovered a lot about his veneer work and what he was doing.

And also in the content, there were things that were alphabetized, like common names of wood, that are never to be alphabetized, and a screen reader would have taken that as, “Oh, we’re talking about a proper noun called Pine. Maybe it’s a city or something.”

But you can’t do that, so we learned–I learned things like that. I was able to explain it to the client, was able to explain to ’em that a genus and a species, you only alphabetize the genus.

So, I learned all these things by being attentive to accessibility, and so it’s not really dry. It’s really–it’s almost kinda fun.

It’s like having a lesson in life or what your client does at all times, and when your client feels like you’re that invested or you’re that knowledgeable about what they do, they actually value you more too and they feel very safe with you working with them because they know that you care about their business, sometimes almost as much as they care about it themselves, or sometimes more. So, that was one of the things, became a better observer of the world.

And, finally, of course, this is what this is called. I became a better storyteller.

Like, I could tell their story better, and I could–accessibility helped me–carved a way for–it carved a path for me to follow. It was–it almost kinda reined everything in.

So, sometimes when there’s content, it’s like, “What do I say and how do I say it? ” But when you’re thinking, “Well, how do I say it so everyone will get access?” it almost makes it easier to create the content, so I became a better storyteller for what my client was trying to do. And that’s what everyone is trying to do on the Internet.

They’re trying to tell their own story, and so you wanna be that person to facilitate that for them, not necessarily just give them a website. That’s not what we do.

You developers out there, we just don’t give people websites. It’s an experience.

It really is, and so–and it’s their story. And–every story has–there’s an end.

There is an end to a story, but the end is just the beginning in this one because you are never going to stop learning this stuff. There’s always gonna be something new, some new technology coming along.

It was like that before even accessibilities became a big thing. If you thought you were gonna stop learning because you were doing, you know, web stuff, that there was one point where you were gonna Google your last code snippet, that time was never coming.

There was always an opportunity to learn, and right now, anyone who’s been watching any of these sessions and getting any of this information that’s been dispensed throughout the day–valuable, valuable information–you’re learning some really amazing, amazing tools. That you are ready to go out to the world and make it a better place for other people to get to the web and also to bring more value to clients, so this is just the beginning of everything, and just the beginning for me because, to be honest, I have not taken any certification courses.

All of this is from meetups and working on websites. And every, you know, step that I take, I do a little bit of a search and go, “Hmm. Is that appropriate? ” and then I learn that way.

So, what I wanted to instill in people who felt overwhelmed–because even during some of the sessions, I saw some chat information. I saw some very informative chat about people–you know who you are too.

We joked about it. Wanted to give up their career because this looked too overwhelming, and I know exactly how the person felt because that’s how I felt in the beginning too, but it’s not really like that.

It’s like–it’s more like, “Oh, my god. Look at this horizon just opened up for you to help people.”

And all of these people, talented people, who are jumping on board and sharing their knowledge and really taking it seriously, and right now is just the beginning of that. And if 2% of the web is accessible, that means 98% of it is just flapping out there in the wind, low-hanging fruit ready for you to just go and grab it.

There was nothing Jerry Jones taught to get you started, okay? I’m serious, you could tell your clients how to put their content in correctly, and that’ll save almost two-thirds of their issues of any kind of accessibility, you know, red flags.

So, it’s just the beginning, it’s awesome, and so what I wanted to do now–first of all, that’s my last slide. That is my name.

“St. ” is not a middle name. My last name is St. Rose, so it causes a lot of problems with computers and fields and stuff.

I’m often called “Strose,” but that’s not it. You can find me on Twitter with IntrepidRealist, and my website is wpwithheart.com, and what I do there is I do–I coach people one on one how to put their websites up, but we don’t even start building a website for a while, ’cause no one should until they know what they’re doing and why they’re doing it. So, you can find me there, but what I wanted to do was I wanted to demonstrate a few things that I’ve done since that fateful meeting in that meetup, and one of ’em is actually quite recent, so let’s see.

I’m gonna escape here, and we’re gonna move this over. I don’t know what’s on the screen.

Okay, so, I don’t think you guys need to see the Slack here. I’ll close that.

Let me close that. One of the things that happened– and this is fairly recent.

So, there was a discussion. I can’t remember.

Sorry, I was–I should look this up. There was a wonderful presentation by a woman from Florida.

She was a UX designer, and she talked about designing the UX with accessibility in mind. Like, before even a designer comes in, she’s laying out, you know, the content, those whole things.

Oh, my god, I can’t remember what they were called. Anyway, like, the main content, the sidebar, and the footer, and all that stuff, all that’s planned ahead of time, so going in and trying to drag something around without having that planning is really not the best way to go about it.

So, one of the things that just popped out for me from that talk and what I’m trying to instill here is that if you’re a developer and you think this is a whole bunch of stuff you have to learn, just take one piece at a time and implement it. So, what she told me–it’s during–in a shopping site–that it’s better to have the product image on the right because as someone comes through the page, they’re going to hit the content, the text first as a screen reader.

It’s vital–more important to hit that first than the picture, which is just an illustration of what’s gonna probably be described over here, and so I managed to do that with WooCommerce. And not only does this picture show up on the site, but it’s actually the third thing that shows up on the page.

And I was able to use what’s called Flexbox and flex order to actually swap the order of the picture. So, I moved it to its–the third position, where it would have been at the bottom of the page here, by swap–just changing the order in CSS to make it show up second.

But when a screen reader goes through, a screen reader will come through the title, all this information, and hit even this before the picture, is something that they hit with a screen reader. So, that was really, really, really awesome to be able to do that, and it’s that one piece of information.

And so, it wasn’t like I was overwhelmed about, “Oh, my god. I–this whole WooCommerce thing and accessibility.” I’m like, “I’m just gonna take that piece. ” Today, I learned something.

This is a white background and that’s black, so I’m gonna gray that up. So, I’m just gonna go through the–with the CSS, and I’m going to make the font a little grayer instead of black on white because I just learned that, in one of the sessions today, that people with certain disabilities, the font will start moving around, so I’m like, “Got it.”

It’s not like I have to, like, learn everything at once and then go off and build. And another one that–this one happened, actually, quite a while ago, at the beginning, with–when I first found out about accessibility.

This is the one I was talking about with the veneer artist, and here’s what I’ve ended up doing with height and diameter. Before, it was just this string of numbers with primes and double prime or whatever, and you really didn’t even know which one was height or length.

And whoever did the content in, the three people, I think, over the years who put the content in, mixed those two up anyway, and so what I ended up doing for him is–this is another thing too, you can actually corral the client into being accessible by providing information on the back end. I’m using something called advanced custom fields, and it may sound like some kinda geeky thing if you’ve never heard of it, but once you get it under your belt there’s plenty of documentation on it.

You just create fields in the post that they’re custom for–that you want for your client, and then they’re custom to whatever they’re doing, and so what I ended up was making these different–you can just add the information here. And I explained to him how to do it, how to write, and all he has to do is come in–and anyone who’s working.

There’s no mistaking this unless they just don’t read directions, okay? So that’s, like, you can do these things to help keep the content accessible because that’s what’s gonna happen.

You’re gonna let the site go, and then you’ll come back maybe a few weeks later, and it’s not really working out because the client wasn’t educated on headings and things like that. And this is not–what’s going on here too is–that clearly it does not look like the Gutenberg editor.

It is not. It is actually–this is a custom post type that I created for his projects, and that’s another geek-level thing and not–that is not even difficult to learn, either.

There’s been some wonderful presentations on that in other–in meetups and other WordCamps. And so, a lot of times–does classic editor, so those people who are still on the wire, you can still have some familiarity with that.

So, it’s all these fields that he needed specifically for what he does. And then, the page looks like this.

So, that is the end of my talk, and I guess we can go for questions now. And I got to figure out what to do here.

Stop the share. Is that what I’m doing?

I think so. I just stopped the share.

Okay. So, I can take questions now.

Joe: All right, Alicia. Great job.

The funny thing is, like, I was–you know, I didn’t know–you know, I saw your finishing slide, and then you said, “But it’s not the end. ” And I was like, “Oh.” Then you started–then you–so, you caught me off guard.

Alicia: Like that– you know when people clap when they’re at that last bit?

And you’re like, “Oh, oh, there was more, oops.”

Joe: Yeah, I apologize.

One of the great things for the audience to know about Alicia is part of the inspiration and rebirth that she described. I went through the same thing with our next speaker, but the three of us, we got together a few weeks ago to promote this event because we were so into accessibility.

And all three of our meetups did a joint meetup on–it was called “WordPress Meetup Accessibility Day,” so it’s kinda cool to see everyone doing it. So, let’s jump to the questions here.

Let me refresh the page. And again, thanks, everyone, for–thanks everyone for chiming in and being part of the conversation here.

All right. The first question is, “How does art shape how you develop?”

Alicia: Oh, how does art shape how I develop? That’s why I do it.

Okay, honestly, I was a fine artist for 15 years, and there is a website up. And, please, that person doesn’t exist who put that up.

It was an ex-boyfriend, and it’s literally the worst site you will ever see on the website, on the web. And its, like, technical aspects–it’s aliciastrose.com.

It’s an old HTML site that’s literally–like, you know the ones that just kinda like suck themselves into the corner?

It’s like it wasn’t even–it’s bad, but my pictures are on there. So, I was a fine artist, and then I would go on the Internet, and I’m like, “I don’t see a reason why the Internet has to look like this.”

And so then, I just said, “I’m gonna be a web designer. I’m gonna make things beautiful. That’s what I really wanna do.”

And so, I was really, like, close–I was really concerned about the craft and textures and things like that, so art is a huge part of what I do.

And I think coding is an art form too.

Joe: Oh, that leads into our next question perfectly.

We’ve got that synergy going. “What caused a shift towards accessibility and where do you see this shaping your development work?”

Alicia: Oh, god, the shift was definitely that meeting that–the meetup when Sumner showed up. I mean, I was already, kind of, into the headings thing and all that stuff and, like, “Don’t use all caps. It’s screaming,” and, you know, things like that, but it was more leaning toward SEO. But then, when I found out that it violated civil rights–it was separate but not equal to put an overlay, and I had one on something that–and I–took me five minutes.

I took it off. I was really–I came back.

I was like, “I just–” I was like, “Excuse me. I gotta go do something.” And I came back, and I told her. And I was like, “Thank god I got that off.”

He’s well-known in the community too, and so, and I see right now there’s no way it’s gonna go back. It’s just gonna keep expanding because at this point, the Internet’s become quite–it’s a resource and it’s a lifeline, so–and it’s for everyone.

And not only that, like I–and on–is that I was also on a team called BRCvr. We were one of the–highly successful bringing Burning Man to virtual reality, and they’re even bringing captions into virtual reality, and I had this fun– See, what is happening, too, is because of the exposure to people, like the people who are doing the sessions here, like Meryl and then Sumner, I was in a beta testing in this–on one of these platforms, virtual reality.

And I asked, “Is there anyone in here who’s deaf? ” And there wasn’t, so I had to tell ’em, “This test probably isn’t gonna be effective. You know, you have to have someone who’s actually deaf to do these things,” so.

Joe: Awesome, all right, our next question, “Having had an active design business before learning accessibility, how do you deal with communicating with clients when telling them that something you did for them doesn’t meet accessibility standards?”

Alicia: Oh, that’s easy, guys. Don’t worry about that one.

The technology marches on, I’m sorry. It’s like we gotta get with the program.

I mean, even–a website–okay, have you ever googled lifespan of a website? I googled it last year, and it said five to seven years.

I googled it yesterday. It said three to five, or three to two.

The lifespan of the current design of a website is, like, three years. They should be thinking about getting a new website, even if it’s accessible or not, so this is–a website’s not something, like, you purchase.

Like, it’s, like, a cheap thing you get at Kmart, and you think it’s gonna work for you to make you a whole bunch of money. It is a serious thing, and people have to understand it’s an investment involved, and so I really want that to get imparted too.

And it’s an evolving thing. It’s not something that just you make it and it sits there and works.

A website’s never finished. It’s never finished.

It’s like an evolving thing, and the content’s always changing. You always have to be kind of like–it’s like gardening.

Do you ever finish your garden? You don’t–garden’s done, or do you–every season you’re kinda like, “I’m gonna grow these bulbs bigger.

Or I’m gonna try something else over there”? That’s exactly what a website’s like, and you shouldn’t–your garden shouldn’t be more important than the website that’s supposed to be your livelihood.

Joe: All right, so we got time for one more quick question, and it’s sorta tied into one of the earlier questions. “How has your thinking changed in terms of your development process or your mentoring business since you’ve been impacted by accessibility?”

Alicia: Oh, man; so accessibility is often–is always on the forefront of my mind. It’s whenever I’m doing anything, almost every day I have some–a conversation or a little bit of an exchange with somebody about something.

Just recently, there was a theme that–you know, there was–they weren’t underlining the links in the admin because they wanted the experience to be the same as the front of the site. And my links are underlined, but they were the same color as the content, so the response was, “Well, most people have different colors, so.”

I was like, “No, no, you gotta keep the underline. The underline has got to stay in the admin, I mean–” And then, I got a piece of code, and it took away all of the styling of the front-end stuff, and so I explained, “That experience is not the same experience that everyone’s getting because I wanna be–because I want it to be accessible.

So, you have to have–the experience has to be the same for everybody, so the underline should just show up. ” And so, like, there’s just things like that, so–and so–and I’m always, like, explaining to people a little bit at a time, especially clients.

You don’t wanna overwhelm them because then it looks like it’s too much work and really not.

Joe: Awesome.

Well, thanks again, Alicia. How can people get you–find you on Twitter?

Alicia: Oh, okay, I put it at the end of this–on the slides, but it’s IntrepidRealist on Twitter.

Joe: Awesome; well, thanks again and thanks, everyone, for attending this session with Alicia and myself.

You can continue the conversation on Twitter at WordPress Accessibility Day, #WPAccessibilityDay, #WPAD2020, or @WPAccessibility. Don’t forget to attend our next talk, “The Profitability of Accessibility” with Sumner Davenport at 4 p.m. , at 4 o’clock UTC, here on this same channel.

See you right after a brief break.

Transcript

Ahmed: Hello, everyone. Once again, welcome to WordPress Accessibility Day 2020. My name is Ahmed Kabir Chaion, and I’m working as
a business development manager at weDevs, I’m also a regular contributor to the making WordPress documentation, design, polyglots, accessibility, hosting, community, learn WordPress, and marketing team. I will be your host for this session.

You’re here for the 9 am UTC talk with Mitchell Evan. Please feel free to add your questions to the YouTube chat feed, and we’ll answer those at the end.

So, when selecting a content management system, you’re already asking “can you produce an accessible website?” But a simple yes to that question is not always enough. In this presentation, you will learn how to ask more detailed questions to find out the reality behind accessibility claims. This talk focuses on the following: how to use accessibility standards for authoring tools to help answer the detailed questions: WCAG 2.0 and 2.1, US and EU public procurement standards, ATAG; the importance of the “prompts” requirement; how to read a VPAT report skeptically; what to look for in a trustworthy accessibility report; ATAGS unique extra conformance requirements; why we should treat ATAG as required, even when it’s not explicitly listed in policy.

The speaker of the session, Mitchell Evan, has coached design and development teams for nine years, harnessing his ADHD creativity to achieve enterprise scale accessibility through the power of authoring tools, UI frameworks, and design systems. Most recently, he led the VPAT reporting practice at Level Access, applying international accessibility standards, WCAG 2.1, Section 508, and EN 301 549 to the web application, native software, authoring tools, and two-way communications.

Mitchell recently moved from San Francisco to Berlin to help build delightfully inclusive technology in the new era of European accessibility directives. Which brings to the session “If it’s true, it ain’t bragging: choosing a CMS for Accessibility.” Mitchell, welcome to WordPress Accessibility Day – the floor is yours.

Mitchell: Thank you very much, Ahmed, for the introduction- and can you see my first
title slide okay?

Ahmed: We are just waiting for your slides, to be sure.

Ahmed: No problem, again

Mitchell: We’ll do that again. How about now?

Ahmed: That’s uh, that worked. we can see your slides.

Mitchell: Okay, you can see the full screen?

Ahmed: Yes, we do it.

Mitchell: Fantastic. All right. Well, thank you Ahmed, and welcome folks. If it’s true, it ain’t bragging. Choosing a CMS, a content management system, for accessibility. As Ahmed said, my name is Mitchell Evan.

And I want to start by, if anybody does not see the screen, and wants the slides, um, bit.ly/cmsbrag. b i t dot l y slash c m s b r a g. And these slides are Creative Commons with some special requirements if you want to remix and reuse them.

So I’m going to start with a, uh, thought-provoking question to warm up. Who chooses your content management system? And this is a question that’s going to be answered by different people, in different roles, in different ways. Ponder for a moment. You might be very new to content management. You might be a core contributor to WordPress – but who chooses the content management system that you use?

It could be a lot of different people. This session today is especially for the content management system decision makers, but it’s also for everybody. Decision makers, it could also be known as buyers – some people, you know, buy software for
their company or agency, but even if you don’t spend money on it, you’re investing your time.

So you’re a buyer, either way. You could be an IT architect, you could be a template designer and developer. You could be a small business owner, of course. There’s a huge number of people who invest their time, and energy, and money, and money into content management systems as a small business owner. Anybody who chooses a template – you may be given the content management system, but you choose a template, or install a plugin, or, or activate a plugin.

You’re really modifying the content management system, so you’re a decision maker as well.

For everybody else, let’s say you’re just an author – you’re, you are an influencer, uh, you may need to influence the next generation of content management systems, if you find that the one you’re using is not up to what you need for accessibility. Now probably, most, a lot of people on this call are on WordPress, which is quite good.

Um, you know, so, influence what it can do, so that when you choose your next, your current or next content management system, it’s really an investment in accessibility – investment in accessibility.

Uh,how to choose your CMS. Here it is in one slide: Choose, choose WordPress! 38 percent of the internet can’t be wrong. Is that, isn’t that right? We are all here for Accessibility Day. Uh, that’s just a joke, here. I’m going to go, I’m going to go step by step a little bit more nuanced in that, uh, how to choose your content management system.

I’m going to say that maybe it’s more like two steps. Step one: Ask what the content management system can do. And then, verify that that’s true. And so, you know the rest of this is really going to be breaking down into those two themes:

Ask, and verify.

Unfortunately, there’s more than three slides in this deck…

Today, I believe that choosing a content management system for accessibility is harder than it should be, and I’ll give a couple of, uh, perspectives on this. Um, this is from the EU – the European Union We4Authors project, uh, which concluded this year. One of the conclusions is procurers – that’s buyers – find it difficult to validate which company can be trusted when it comes to accessibility. And that, uh, is borne out by the fact that even though just a week ago was the deadline for the entire eu public sector to have all of their websites accessible, they really – many, really – haven’t met that, or have met it partially.

With so much content built on content management, you know, certainly training and learning curves are part of that, but we have to look to the content management systems themselves. And these gaps really matter. And I’m going to read this entire next large quote, because I think it’s just, it really sums up the importance of getting this right. And this is from Kyle, who runs digital accessibility for Harvard University.

“If making something accessible turns into a process where you have to be a secondary subject matter expert, it’s not going to happen. These faculty are brilliant at what they do, and we need to make it easy for them to share and disseminate information. Today some of the research being done is a matter of life and death, issues critical to society.”

I don’t think, uh, I don’t think I need to add any more to what Kyle said. Um, you know, that really just shows – and I, I should mention that Kyle himself is a user with a visual disability, and so…um, you know, this perspective, I feel like is, is just, really, we should really pay attention to a perspective like this, and say, “what can we do to make this better?”

Because if it’s not accessible, we want to think of it as not functional. By now, if you’ve watched some of these presentations, I think people have said different things in different ways, um, but, you know, I’ll add my, a way of looking at this is thinking of accessibility not as a feature or an add-on, but it’s just a measure of “does it work” and, of course, you want your content to work for people.

Uh, when it is accessible people, with disabilities can use it, and anybody can use it. We’ve seen images like this, here’s one more of a gently rising ramp on a beautiful hillside. It’s for everybody. So those two steps – step one, asking what the content management system can do. Um, we’re gonna ask, or look for, you can ask Google, your favorite search engine.

Ask for accessibility statements. And – good news – I’ve highlighted a couple here. WordPress has a very nicely formatted one; Drupal as well. I want to give a good honorable mention to Wix. For those who have been following over the years, I would say, I myself used to, if somebody asked me what’s a terrible system for accessibility, I would have pointed to Wix. They are really turning it around, so give them kind of an honorable mention. And their, their own documentation on accessibility is now, has, has really become quite good. I’ll give them, like, a real turnaround success story.

Now, again, we’re not done with this presentation. If this were the whole answer, we could end it here. Um, of course we need to scrutinize these things, because nothing is 100 percent complete. We’re going to talk about, kind of, what to look for. You know – what is so important to look for in these accessibility statements.

Now, these are general kind of “pro” sorts of statements. Um, a statement of commitment. They always start with this: “we are committed to accessibility,” and that’s not worth much – but it’s, it’s a public statement self-commitment. And so we can, it, it’s, the fact that it’s there, it’s not worthless. It means we should hold that, whoever is, says publicly, “I’m committed to accessibility” – It’s out of the rest of us to hold them to that.

And what are some details that help us do that. Um, in the case of content management systems, it’s really important to, um, to tell users how to configure it for accessibility. You know, in the case of WordPress, you know, accessibility-ready themes that we’ve heard about, accessibility-ready themes; Drupal has core modules, both have plug-ins, and as we’ve heard, plugins can break accessibility. So really having that information about, available, you know, kind of a go/no-go on accessibility with this type of stuff. Um, the statements uh, uh, should say, how they’ve assessed their own accessibility.

Or, better yet using a third-party audit, an independent reviewer, to say what is accessible. There are going to be known issues. There are known issues in all of these content management systems, and they should disclose them, so we know what to do about, we know what works and what doesn’t today. Uh, hopefully some be able to either use workarounds, or really, choose whether to use that system. A remediation plan – a roadmap for what to do about it – is really important when you’re, when you’re ready to invest your time and or, and or money into a new system.

Okay, if it’s, if it’s getting there, is it being actively worked on. And you know, uh, and I really say last, but not least, a feedback channel for improvements. I mean, even if a system is perfect today, technology changes: browsers, assistive technology, the world changes, and you know it’s not realistic for accessibility to be bug free at every moment.

We want that. We want all software to be completely bug-free at every moment.

But users, of course, always find things. Not just for accessibility, and so having a feedback channel is a real, is also kind of a vote in favor of this organization producing this content management system. Is, is actually committed to accessibility because if they are, they will want to hear from users.

So, we talked just now about accessibility statements. Uh, there’s another thing called a conformance report, and this really gets into more detail. Um, and for content management systems, specifically, you’ve heard from others and there’s plentiful information on the internet, just about, um, you know, content accessibility. Just like, is a website, a website accessible?

Content management systems have some, uh, additional important, specific, requirements. Um, the first one, it may be obvious, but it’s good to split it out. Allowed: is it possible, does the system allow the user to create accessible content – is that even possible? We’ve heard a lot about that in these presentations.

I didn’t catch Hidde’s presentation, I was preparing for this one. I regret doing that; I’m going to come back and watch that later. But Hidde de Vries just presented on ATAG – the authoring tool accessibility guidelines – and they’re really going to cover these next two. Prompting, prompt: does the CMS prompt and guide authors to do that, to create accessible content? Not just possible, but actually encourage and surface the features that do that?

And – Inclusive Authoring, I call it, is a summary of the various features of the content creation process, content creation functions, themselves. Can a person with disabilities use those? Um, so these are distinct – we’re going to think about, remember these three as we go through, because we’re going to get into a lot more detail on these. Now the hard way to ask, well, what should be in these standards, in these reports, is to kind of look at all the regulations around the world, figure out what they require.

They’re going to vary a little bit. They’re going to be in different languages. And figure out what the standard is, and how to report on them. Now, this is very logical, but it’s, this is harder. This is more complicated than you have to do it, and uh, you’re going to see some of that complexity, but then, in the next slide I’m going to show you how to simplify it down. So, this is a sketch with a c…, with some shortcuts, here, some other simplifications, but this is basically a picture of the world of accessibility standards, and laws, and policies, and reporting, as they apply to content management systems. So, let me kind of work from the inside out here.

So, on the right we’ve got WCAG 2.0. Still the, by far the most common, um, standard around the world in terms of countries and regions that use it. US and Canada use it. Add to that 12 new criteria for WCAG 2.1, so, Um, in case you’re tuning in, or you didn’t, you know, really emphasize this, WCAG 2.1 is exactly WCAG 2.0, plus some more criteria, and the conformance requirement. So, um, if you meet WCAG 2.1, you’re meeting WCAG 2.0. So that’s the first simplification. The next layer out is, you’ll see EN 301 549. That is the European standard. The UK after Brexit is still using it, and it has more than, usually people think of it as just WCAG 2.1, but, uh, for certain types of products, like authoring tools, content management systems, it has some specific requirements for those. I call them the harmonized authoring tool criteria.

Because you see the circle below, US uses very much those same authoring tool criteria in section 508. So, and then finally, ATAG adds its own more detailed criteria, and that’s the, the blue bullet on the left, there. If you don’t see the screen, I’ve described, describe the structure of this, and as I mentioned before, the slides are available at any point.

This is a complicated graph, I do have a text alternative for it.

So the point is that you could try to figure out, all around the world, what everybody’s doing, but it boils down to these standards: ATAG, WCAG 2.1. If you meet those two standards, you’re completely covering it for content management systems anywhere in the world. The whole world can use it. So, I’ve done some analysis for you, um, you can, if you want to do less, if you want to do less good stuff for your users, you can go and analyze, re-analyze the world, and try to cut corners – but why not just keep it simple? WCAG 2.1, ATAG 2.0.

Now, how to report on these. Some good news – pretty obvious, you can do an ATAG report for ATAG. This one is still, especially in Europe, and we’re on Europe time today, um, it’s really not so widely known. Is, there’s, uh, a lot of people have heard of VPAT, the voluntary product accessibility template. But still a lot of people you talk to will say, “oh, that’s a united states thing.”

Since, uh, 2017 it’s been international. It’s covered both US Section 508 and EN 301. And now, as of, uh, last year, it covers all, it covers all of the standards that are listed here. So you don’t need to go and invent a report format; you can use this format, uh, to report not just for the US. It continues to do that, as it has always done, but now it reports it’s, it’s available for the EU.

So, we’re gonna, we’re gonna look a little bit more at what to expect in these kinds of reports. Um, I, uh, I believe it may be obvious, but, I, I will remind folks we’re covering a lot of material here, we’ll definitely allow time for questions at the end, and please put those questions in the chat as we go, and we’ll allow time for those. Certainly within this time period, um.

So one thing I want to highlight is, you might have noticed that there were no countries listed on the ATAG. Um, so who needs ATAG? Uh, requirements. One answer is: nobody! No law regulation directly requires, uh, the authoring tool accessibility guidelines, that I know of. If somebody knows differently, please put it in the chat.

Um, and yet I say that everybody should use the authoring tool accessibility guidelines, because they reduce your risk of an inaccessible website, and it’s the website that’s produced that has the most scrutiny, and the most users of anything, um, in this system. And so why would you make it hard for authors to make things accessible? And then, resulting in more bugs on your websites. So, it’s completely voluntary, but I think a really good idea. So we’re going to talk some more about, uh, you know, what are the differences and why that is.

If you use these two reports, remember those questions I asked before – the questions down the left here, that, the key questions of “is accessible content allowed/possible?” “is creation of accessible content prompted?” Is the process of it inclusive, is the authoring process inclusive?” And so this just shows what, those, those different standards and reports cover. The two, the first two columns are VPAT 2.4 international. They cover, um, they cover all three of those requirements. Um, the VPAT part – sorry, the WCAG part of VPAT, uh, doesn’t cover the prompts, and then those harmonized authoring tool criteria pick up the prompts, but I added a second check mark under ATAG because they just have more detailed, um, criteria. My favorite being prominence of prompts.

So prompts just need to exist in as far as the EU and US harmonized accessibility, uh, harmonized authoring tool standards, ATAG says they need to be prominent. They need to be equally prominent to other things. So thumbs up on that. Uh, we want that, we want to make it easy for authors to do the right thing. I’m not going to drill into this right now, uh, but in a moment I’ll show the, um, you know, just one example you can see what good prompts would be like.

Um, okay. So we’ve talked about, so far, about the, um, you know what, let’s say we’re, you, I, a business owner, an IT director is choosing a content management system. We want to go out and look to see that the producers of those content management systems have just, have have provided good instructions, uh, good information about, um, you know, what works and what doesn’t yet in their content management systems.

Now let’s verify that. Step two: verify what the content management system can do.

I like this as a starting point. WordPress lists a bunch of VPAT reports. Again, that’s the voluntary product accessibility template. I’m going to go ahead and follow this link, because we’re going to take a look at one of these reports. I think I’m going to need to change my screen sharing here, I just realized. Okay, bear with me while we change the sharing.

Okay. Um. I’m gonna check the chat really sec for, for a quick moment and see… Actually can I have an audio of, uh, is the, is the browser coming through here?

Ahmed: Yes, it is.

Mitchell: Thank you. Thank you for confirming that. Okay, so I just followed – it’s vpats.wordpress.com. And, um, it lists a bunch of VPATs. What, uh, the, the approach that WordPress has taken is to show VPATs of, of partners and content. And so I’m just going to choose the first ones here. So, the first problem, the first one – problem and the first VPAT is going to have a problem.

Um, and uh, remember that VPAT 2.something, I said, um, first thing we see here, doesn’t even have the number of the VPAT. Um, but this is not VPAT version two – this is VPAT version one. This was back when it was not international. it doesn’t really even reference web content accessibility guidelines. So that’s the first thing you want to look for. Now we’re going to come back to specific VPATs, and some of the things that they should contain. I’ll start by summarizing them, and we’ll kind of switch back and forth between looking at the, you know, looking at actual documents, and some of the, um, and, you know, some of the things that we’re going to, that we have to encourage you to look for when you’re evaluating these. Um, so the first thing I mentioned is, is the, is the VPAT report even complete. Does it have the things that it should? Uh, these days it should always be at least VPAT version 2.0.

Um, because that’s the minimum you need to even cover WCAG 2.0 accurately. Um, and if you’re using WCAG 2.1, like half a billion people in Europe need to do, um, it needs to be VPAT version 2.3 or higher. So it’s up to 2.4 now. The differences are very slight, so if you find, uh, anything 2.3 or higher, you’re all set, for WCAG 2, to cover WCAG. you know accurate.

Well, accurate – that’s a separate question. It has the right pieces in it to answer these questions. Um, it really must list the name and version of the product that was tested. You know, obviously features and bugs and change, so, if you don’t even know what was tested, it, it the reality is it may be a version old, or more. But if you know what it is, then you can triangulate what might be different. Um, and specifically for a content management system product, you know it must, it must actually include and report on the authoring tool criteria. Um, I meant, because, um, let’s just say there’s a varying range of quality of these reports, and we’re gonna look a little bit more about that.

Um, you know, it doesn’t have the just basic requirements that it needs to contain. Uh. next question: is the report credible? Does it say what, in what was tested, like what was the scope of testing? It’s normal to test a sample of things in complex systems. Well, what was the sample that was tested? Was that a reasonable sample?

You should cover, you know, at least, uh, you know, a core, core process of logging in, uh, choose, choosing accessible ready templates and, editing content, like, uh, like a block editor. You know, if it doesn’t, if it was missing one of those core steps, well, it shouldn’t, right? First of all, and you want to know what it includes, and didn’t include in the, in the sampling.

Um, and we’ll look at, look at these next ones a little more detail. Remarks explaining the ratings. Uh, I’ll give a visual of that in a moment. Um, this third one – the auditor is a reputable third party. Um, that is, uh, not a minimum. Um, that is a, you know, there are companies that test their own, um, and do a good job, but it, you know, if, if it’s, if it’s a third party that’s named on the, um, on the VPAT report, uh, you know, that both shows independence and you can look into that company and say, “hey, are they known for doing a good job on these things.” Um, I wouldn’t say that’s a must-have, but that’s a, that’s a bonus, it’s a plus in terms of credibility, especially when you’re in a hurry. And who isn’t in a hurry. You know, so, um, we’re gonna… That first one that I mentioned: what, what was tested. Um, in the case of content management systems, not just the functionality of the content management system, itself but what it was creating is important. And let me say that if you just stick in “hello world” or “lorem ipsum” into a content management system, you really haven’t tested it.

You got to think about what are the different kinds of content elements that are pertinent for accessibility. And I know that others in this WordPress Accessibility Day have, you know, covered this as well. Um, you know, so you know take, take this as my perspective on what are some key kinds of content. Um, images of course, with alt text. Content structure such as headings, lists and tables. Don’t forget nesting, then interactive elements like links, buttons and forms. Don’t forget error messages of forms, if you use those.

More complex patterns – there’s many of those. Threaded discussions and menus are a couple of examples. You might contain video – well, the pro, the product, the content management system probably supports video, and it probably supports multilingual, multilingual content. One of the things you’ll notice here is your website might not include every one of these. And so this is where the detail of the reports can be really helpful.

Because it might have a problem with video, it, you know, this particular tool might really be, really bad at video. You might choose it anyway, because you say I’m seldom, if ever, gonna use video; or I don’t need multilingual content. I mean, those would be shortcuts. You never know – you might get committed, and in the future need those things, but at least you can be a discerning customer.

Um, so I said that the next one was like, do the ratings match the remarks. So, for this I I’m going to bring up, um, I’m going to look at Adobe. Because I worked on these. I, when I did the one I’m going to show you, I actually wrote, although they don’t disclose that. That’s fine. Um, this is, this is, public knowledge that I’m telling you. I know that a lot of consulting companies are, keep their clients secret, and Level Access was no exception.

Um, but we were proud and, to publicly talk about our partnership with Adobe so no particular secrets here. Um. What we’re going to look at here, jump to the WCAG section – the web content accessibility guidelines part of the VPAT report.

And just at, for example, the very first criterion: 1.1.1 non-text content – that’s talking about alternative text for images. Well, I wrote this, so, of course I think it’s great. It talks about, for example, uh, this one is for, uh, for installed software – this was for FrameMaker, actually, um, which is a content, which is, um, whether it’s a content management system or not, it’s an authoring tool, and that’s what they have in common. Um, so a rating. So, ratings and remarks, now we’re talk – that was the thing I mentioned. What, what about ratings and remarks?

The rating or conformance level here was “partially supports.” Now, what does that mean? It could be “supports,” “partially supports,” or “does not support.” That’s the only three levels we would report at, but if that’s all you said, a lot of different things are going to be “partially supports.” That can range from one little bug through, like, 40 percent of all of the websites screwed up. So you really need to look at the comment, the remark for that, Um, so the remark is here:

“most product functions do not contain images which would require a text alternative, but exceptions include…” So what it’s saying is: For the most part, there aren’t even any images in the product where this matters. But there’s a couple of specific ones. Now right away you can say, well, yeah – that sounds like mo…, you know, partially supports, mostly works, and you even have detail of, like, oh, you can go and work around those problems, or you know, use JAWS scripting if you had to. Or, you know, this is useful information and, but really important, so that just in terms of order, the second one is maybe, arguably, first in priority, which is the author content.

Also is “partially supports.” Okay, great. Oh, so what can I not do with author content? Oh, okay, what does that mean? Partially supports means I can only partially put alt text on images? Okay, what’s going on. Um, so, in here the case was, um, well authors can provide text alternative for most images but, some image buttons in certain navigation controls. So, again, from a point of view of verify, just making, seeing if this is even a trustworthy document, you want to see that there’s this kind of detail here. Now, it’s going to be very different detail in different situations.

But, like, is there an explanation for why they gave that rating? Like, if there is not, if you look at this and you’re like, that doesn’t tell me anything, it kind of puts the whole report into question. And then, if it does tell you, it makes the report much more credible, and hopefully actually provides useful information that you can work with.

Now there’s, you know, 50 WCAG 2.1 criteria. And you’re in a hurry, and you want to compare two, you, you have a access, you have a product in mind you want to use, you’re in a hurry…

Where do you start now? All of the criteria are important, but I like to look at the heavy hitters. Uh, what do I mean by “heavy hitters.” A criteria that apply the most broadly. So, like, basically every product is going to have, these are going to apply to every page and screen of every authoring tool and the content that it produces. So, you know, if you look at these, this first list, and this is like the non-text content graphics we just talked about – info and relationships for structure of html. I’m going to jump to the fourth one: Name, Role, Value, for the structure of interactive elements.

To this middle one: numerically resizing and reflowing text for low vision, people with low vision, especially to enlarge content. And the keyboard criteria – there’s a list of those, so this list, right here, is a lot less imposing than, you know, the whole list of 50. Now, again, the whole list of 50 is our hard requirements. But we’re talking about, you’re opening up somebody’s report and where do you start?

It actually can be a kind of a, you can take a whole day trying to read from the top to the bottom. And I would recommend start by jumping to these heavy hitters. Color criteria are interesting. They’re kind of special, because for content they’re super important – like contrast, and use of color.

But, um, I just find that for content management systems specifically, they rarely fail to allow authors to set colors. I mean, that’s what they do, so the author is capable of choosing colors that will conform to contrast. But they tend to be pretty bad at prompting authors to do that – so that’s kind of a special one. Something to watch out for. I would encourage everybody here to be, make noise, and ask for, uh, better prompting on, uh, on color in authoring systems.

Um, now there’s a few more that depend on your content. Pre-recorded video has some criteria; multilingual text has a language of page and language of parts. Error messages – if you have them – have those, and I think those are all quite important. Those are my next level of heavy hitters. Again, I can’t repeat enough, they’re all required. The, the purpose of this is to say: I want to skim a report and see what it tells me. That, for that purpose, this skim, you know, somewhere between 14 and 22 out of the 50 will give you a very good first, first cut at reading a report.

And now what about those extra authoring tool criteria. So, I’ve already summarized them, and we’re not going to drill down into every one of them, but just, this is what to look for. I call them “harmonized.” Harmonized means that different standards try to be pretty similar. So the US section 508 has a prompts requirement. It’s hard to, harder to see that in the EU requirements, it calls it “guide the production of content,” “of accessible content guide,” – I’m sorry – “guide the production of accessible content.”

Uh, it also has a, it breaks out the templates to say that they’re identified as templates. Both of them also put a requirement on the product documentation. Which, I will say, is a shortcut that you might, you might find, uh, unfortunately, that might not just even get reported.

Um. Uh, but, the product documentation needs to highlight what are the accessibility capabilities of the product. Um, and I mentioned before, um, my favorite being the prominence requirement of ATAG. That, that’s a plus. That’s a, the ATAG guideline B has several more detailed criteria that are, that mesh very well with the US and EU global standards for authoring tools and content management systems, and it just adds more detail to some, such as prominence.

Um, so, you know, whenever possible, you know, ask for and then scrutinize, uh, whether, uh, the, the product is doing that. Uh, we are nearing our time, so we have to run through. Time for questions, I should say – I’m going to allow almost 10 minutes for questions, so we’re going to go a little faster here.

Test it yourself. Hopefully, you’ve got a report, so you don’t have to test everything. You can spot check and just reality check. Um, why do i say that? Um…because it’s easy to exaggerate even a well-written report. I’ve seen this happen. Boy, this was a great report – they’re so proud of their, their accessibility. But, like – it was an authoring tool – it was really hard to use. It was like, “oh, I guess you can do that, but… wow, that was hard.” So, you know, like any marketing claims, you know, go and test it. But at least you know what the claim is – you’re not starting from a blank slate.

And again, I just want to emphasize the importance of these prompts. Especially I mean, especially if you have a bunch of content authors. I mean, there’s no way you’re going to create an accessible website without good prompting. It just makes it too hard. Um, so test those prompts yourself, see if the and, and, others in this, uh, others in this series for, what ,of WordPress Accessibility Day have, have really shown you how to do that. Um, here’s an example of good prompts for those who are developing content management systems. Do take a look at Microsoft’s Accessibility Checker, built into Office. It is prominent, at its same level as the, um, as the spell checker. Now you can leave it on all the time, it’s great. That’s what all content management systems should do.

Um, so I’m gonna anticipate a couple of your questions. Okay, so just tell me what are the best content management systems for accessibility. What are they, it’s WordPress, right? Uh, I’m not going to answer that. Uh, this is like in 2001, a space odyssey, saying, “HAL, please open the pod bay doors,” HAL says, “I’m sorry, Dave, I can’t do that.” I’m sorry, I can’t tell you exactly what the best content management systems are. Uh, not because I’m trying to kill you in outer space, um, because it, because none of them is perfect. And what’s going to work best is going to vary by your needs. Uh, so I’ve listed some links here. Download the slides – I’ll give you the link for that in a moment here.

And I’m just going to highlight one of these – this one in the middle, TextBox Digital. Some folks in the UK have this, this helped, you can filter it by content management systems and find their accessibility statements. It’s really cool. I’ll come back to that, um, this is more for – I was not going to go over this in any case in detail – but, if you are a buyer, it’s a great idea to have a procurement policy. Not just for content management systems, but for any software, websites that you hire or buy.

And some great resources, plentiful resources on the internet to say how to set up your, how to, how to, make sure that you invest in the right ways. Aand then, uh, on the vendor side. Those who create the content management systems, um, you know, these statements that we talked about – here’s how to make them. Um, and still you say, “Ah, this is so much, Mitchell – but I need a content management system right now! Tell me the minimum!”

Well, first I’ll say, you know, don’t skip it entirely. Because do you really need it so soon that you’re willing to choose the wrong one? I, I, yeah – so there’s the challenging question. Take a breath. Choose the right system, and if you could only check one thing – if I could only check one thing, if I could do this, I would say: take a website that was produced by that, and have a person who really uses screen readers well check it out, and choose a website that’s like what you want to make.

If, if it can’t do that, yeah, you, you need to ask more questions. Um, I’m going to end with these thoughts.

Like, is a fully conformant cms possible? I say, yes, that’s possible. And here’s a thought-provoking question, is how to do that? Um, and I say, together, we can do that. That’s what this whole community is going to do together.

By being demanding customers, by the dedication that the core WordPress team and other, and other vendors are putting into this, uh, we just keep working at it. Keep asking these “how” questions. “How” is the right question until we get this done.

So with that, uh, we are a couple minutes into the content, into the questions, we do have, if I’m not mistaken, six more minutes for questions. We’ll get some here, and we’ll make sure that they all get answered later. Thank you.

Ahmed: Thank you so much, Mitchell. That was a insightful presentation.

We all learned a lot today. I’m sure the community itself, the organizers, stakeholders out there, people who want to learn about accessibility, was able to take away a lot of great points out of this. So, we will begin the question and answer session. We have five or six questions, so the first one:

What are your recommendations to the community building WordPress to be more accessible?

Mitchell: I will – I should have given you a couple of disclaimers up front. One is that I am not a WordPress expert. So I’m going to answer that in a more general, general way. And it’s a little bit of a repeat of what I said, which is, you know, I think that prompting for authors, prompting for content creators, um, like if you do that well, that’s the first thing to do well. Um, uh, I, I, I would say that… I’m tempted to, it’s a hard, it’s a, it’s a
close second though, to make the interface itself accessible. And it’s not just to meet the requirements, but to make the actual authoring experience rock solid for people with disabilities.

There’s two great things that happen when you do that. One is you help solve the employment gap people with disabilities around the world are today, you know, statistics are shockingly consistent, that are, like, employed less than half the rate of people without disabilities. And the digital world can solve that, but another great way, another great reason to want to make your authoring experience accessible, is that then you’ve got people with disabilities, um, both authoring and checking the results of their authoring, and so you’ve got a really great community feedback loop to tell you not only how to make your authoring process better, but how to make the output better. You’ve got more people with disabilities scrutinizing that output. So that’s a fairly broad, kind of philosophical answer, um, and like I said, I’m not actually the WordPress expert. I want to take a step back, and put WordPress in the context of authoring tools and content management systems in general.

Ahmed: I agree with you, Mitchell, but you do, did mention that it’s a community, and we should make changes together, so, which is why your comment does make an impact, and it, it’s adding value to initiatives such as WP Accessibility Day. So, the next question: How can we sell the idea, or even educate our leadership on leads to make accessibility a top priority?

Mitchell: Um, there’s many answers to that question, and I will just hit a couple of high points. Um, um, I, probably everybody on, on, One answer is watch all of the presentations for WordPress Accessibility Day, because I think that’s just a theme throughout.

Um, and… I mean, the, the best way is because you’re, you care about users in general. You care about your customers, you want to have more customers, you don’t want to slap your customers in the face when they come wanting to use your content. So whenever you can think about it in terms of a user-centered approach, if your company culture is already thinking about your users, these are your users. That’s the, always the best way to start. If that doesn’t get their attention, um, you know, go back to those slides with the complex rules around the world and the requirements, and the legis, and the legislation, and the lawsuits, and scare them a little bit. But then, once you’ve scared them, come back to doing the right thing. Don’t just think about laws all the time. Just, that’s the reason to begin doing the right thing, and then come back to that first question: what can we do for the users.

Ahmed: Absolutely. Next question: Imagine you don’t know anything about WordPress, and checking its VPAT, would you consider using it as a CMS?

Mitchell: Uh, so, uh, I have not – so somebody please ping me if there is one – I have not seen uh, like, WordPress core having its own VPAT report. So I’m going to answer it a little differently. Looking at, looking at WordPress’s accessibility statements – which I just had one link in there, just in the interest of time, I just said here, this is the start here page. But as many others on this, uh, series have talked about, you know, really drilling down into, you know, choosing the accessibility ready templates, developing your own templates, watching out for the plugins, you know, it’s got just a ton of information there. It says what works and what doesn’t. It really comes across as very, um, transparent, um, and honest about what works and what doesn’t. It tells you exactly how to go and find the known issues, so you know at a glance. I say it has, you know, has what we’re looking for. Um, one other thing I flew by, and so these are sort of, I guess I have to say that I haven’t gone and done the same level of deep verification for WordPress that I listed, that each of us should do.

And, um, and that, that still hasn’t been done in, in years anyway, like, uh, I know that, I know the, uh, the Gutenberg block editor got a detailed audit, uh, taking a look at that. Um, oh, so there’s an example I did take a look at that piece of it. And, um, well yeah, I mean, it was, it was audited by, um, a very well-known and reputable, uh, third party and I could see that it covered the different pieces, you know, the different requirements well, including the prompting pretty well.

Um, so, yeah. I mean, there’s a lot to like about WordPress, and it just, it lets you know where the problems are, and you can work around them, or work around them and, and, and, put and, put and, upvote them as well, you know. Yeah, that’s all.

Ahmed: Thank you so much, Mitchell. Uh, I would have loved to continue the QA, but we are out of time, so thank you so much. Once again, I would encourage you to post your answers on our website, uh, so that the question that are posted that can also be addressed. Uh, on that note, we come to the end of the session, “If it’s true, it ain’t bragging: choosing a CMS for accessibility.”

I want to thank everyone for attending, for this session with Mitchell and myself. You can continue the conversation using the hashtag #WPAD, #WPAD2020, and @wpaccessibility. And don’t forget to attend the next talk, “Making Accessible Accessibility Reports,” with Calum Ryan, uh, chart at 10 am UTC here in the same track with myself. See you right here after the break, so we will catch you again sometime later from now. Thank you very much.

Mitchell: Thank you, bye-bye.

Transcript

Allie Nimmons: All righty, welcome back everyone. Uh if you’re just joining us welcome to WordPress Accessibility Day my name is Allie Nimmons and I’m your host for this session. We are about to get started with “Unmeasurable Accessibility, The Case for Inclusive Design”, with Darice de Cuba.

Please make sure to add your questions to the YouTube chat feed and we will answer those together at the end of the presentation. Just a little bit about Darice before we begin.

Darice is a Web Developer and Blog Writer for the Independent News Magazine and Website of Rotterdam University of Applied Sciences, where she enjoys uh writing a blog, brainstorming with the team about the editorial, working on new designs, optimizing pages and maintaining and improving the WordPress website. Being late deaf which gives her a unique insight into inclusive design, she likes to write down her musics on her, musings on her website. She loves to explore the food scene in her hometown The Hague and in the Netherlands.

She is keeping track of cool places she finds in her food guide. Today she’s going to be explaining Unmeasurable Accessibility, The Case for Inclusive Design. So I’ll go ahead and pass things over to Darice.

Darice: Okay, hi everyone um it’s exciting to be speaking to a worldwide audience today and I ask you to bear with me, because I have a several screen including my own transcriber.

So thanks to Allie for the introduction.

So you know my name is Darice and I recap very short, I’m a web developer so I have experience with HTML, CSS, PHP, CSS and of course WordPress. And the rest you’ve already been told by Allie. And today I talk to you about Inclusive Design and user usability and my own experience.

So what most people understand on the accessibility is stuff like ARIA for screen readers, keyboard tabbable, colours with a minimum contrast ratio of 4.5 to 1 and CSS at media preference reduce motion reduce, that is to reduce the motion for people who get sick from it.

And the most important thing about all these things, are all testable, the tools are manual. So you can have a totally accessible website by those standards, but yeah your website may be very unaccessible to many people. There are several types of disability. You have visible and non-visible disabilities.

Non-visible disabilities: it’s a deaf or hard of hearing person, a person with autism, a person with brain damage, chronic illness and depression. And also under the number chronic illness, there are several kind of disabilities. You just pick a few, someone with, say, MS that make their hands shake which uh on the other hand makes it very difficult to use a smartphone or keyboard. So you know non-visible disability the person may look healthy to you, but they may have bad, many disabilities.

In our lifetime most of us will have to deal with either long-term or short-term illness, broken bones, high stress for long periods of times, all kinds of illness or injuries that can make you temporarily disabled or disabled for the rest of your life. So most people aren’t born disabled, but become disabled later than life. I became disabled later in life. When I was 25 years old I had a brain hemorrhage.

And when I had that brain hemorrhage it disabled my left arm so I had to re-learn how to use my left arm.
And for the first time at the very young age of 25 years, I experienced how hard it is to use a keyboard when you’re just recovering from brain hemorrhage. A year later when I was 26 years old, I used to be hard of hearing, but then I lost the rest of my hearing.

So one day I was still hard of hearing and the next day I woke up completely deaf.

So I had to like drastically adjust my life in one day. So I don’t consider myself disabled, rather I am made disabling by the obstacles created by society. A society built only for the seeing, hearing, talking, walking, healthy straight, cis male, white people.

Every time I leave my home this is what my life looks like outside when I’m deaf. I’m constantly avoiding things and adjusting.

So now a quick few facts about deafness and that many people are not aware of. There are two kinds of deafness. You have deaf with capital D which means a person who is culturally identifies as a deaf person. That those persons are born deaf or became deaf as very early in their life as kids and their primary language is sign language.

Then you have people with lower d deaf, that’s people like me amongst other and we became deaf later in life. And like I was hard of hearing since I was a kid, but I had a hearing life and later on I became deaf. And you have people who have been, have perfect hearing in your whole lifetime, but maybe they had an accident or they took some medication and it is known that some heavy medication may destroy your hearing and from one day to the next people went from perfect hearing to deafness. And of course this spoken language is primary language.

So they will depend more on caption and transcribe instead of sign language. Inclusive design is a design approach that takes as many individuals, their background, their needs, experience and ability into account from day one of the project. Accessibility is a part of inclusive design. We want as many people as possible to be able to use our products.
Smart examples that have big impact.

So this is a screenshot of delivery.com. Um I’m from the Netherlands so we have one of those ordering, food ordering is deliverable. And I have never used delivery. And I don’t know how well you can see the screen, but basically I’m just going to have already taken my dinner and now I have to pay. And on the screen there’s nowhere, there is an option, a text field, where I can fit in that I’m deaf. And imagine something is wrong with my order or the restaurant needs to contact me.

There’s no way that I can let them know that I’m deaf, so they can please send me an email or a text message instead of calling. And sames goes for the delivery person, there is no way I can put that they should text me. Imagine they ring the doorbell or something is wrong they are going to call me, because I can’t let them know I’m deaf.

So this place lost my business and my money, because it’s not accessible to me. And I like other foods, so every time something goes wrong this is the feeling I have. No food for me.

So one of the good things to use for such website are chat widgets. And little by little some place start using chat widgets, but they are not using them optimally to make them accessible to everyone. A lot of them have a bot behind tools ah I as a deaf person have no use for a bot. So if you’re going to implement a chat widget to communicate with the client, you should think about the real people behind it, reasonable waiting time and the widget should work with all web browsers.

In the Netherlands we have like a social government social service and they have a chat which is specially for deaf people, because they know we cannot call, but the first problem is that you have to click like three or four times on the website to finally arrive on that chat widget. And the chat widget will work with Chrome or maybe it will work with Firefox and every time they develop or they make upgrades it’s like a surprise with which browser is going to work.

Just make sure it works in all modern browsers.

Another thing that makes your website very unaccessible that you may not be aware of is, is using a no-reply email. So you have your WordPress website and you followed all advice to make it accessible: screen readers, the colours are working well, your links work well, but then when you enter active clients you will send them mail with a no-reply and there will be no contact info and the only thing you’ll be providing is a phone number. And this has happened to me several times and then I need to contact that company, I have no way to do it.

So if you’re gonna use a no-reply email make sure you do have options in that email for people who cannot call to contact you. Let it be an email address that you are reachable at, a chat widget or just a contact form. Another thing is when people write web blogs, I mean a lot of us start WordPress as a web blog and then we expand it with woo-commerce and everything, but people write so difficult.

I as a developer, many times I’m looking for things, how to do things in PHP, how to do things in Python how to do things in CSS and stumble across a web blog and it’s written so difficult. And it’s not only web blogs, the same government website also has to contact many people of all social economic status in the country.

And I don’t know if you know, but if you make a mistake in your social things and you may get a fine, but when you get a letter from them or an email from them, it’s written so difficult. I’m a college university graduate and even I have difficulties reading what are they telling me because it’s difficult.

Imagine a person with no education who works a low-paid job and they get a letter like that. So no one ever said when reading a web blog or a website, I wish this was written more difficult.

So leave the difficult words out and try to write like a writing for kids in sixth grade. A photo says more than a thousand words. This screenshot is of Spec Saver and it’s a Dutch website and after selling glasses they also sell hearing aids. And if you see the photos on this home page, they assume that only elderly people use hearing aids.

And that is a huge, huge assumption that is totally off base because like I mentioned, I became hard of hearing, oh I think I was born, nobody knows for sure, but when I started school they discovered I was hard of hearing. So I think by the time I was 12 years it was recommended that I had hearing aids.

So imagine nowadays you have a business and you just make an assumption of who your client base is and you design your website based on that. If I was 12 years today in 2020 I would want to scrape hearing aids with colours and you know, I’ve seen some photos, they are very very much more fun looking, than when back then. And imagine you have parents who have money or willing to spend money to have, to get the kids great hearing aids and they arrive on a website that looks like this.

And some they click away, right away because this website assumes there’s only old people who were hearing aids and the products will probably not be to the liking of a 12 year old here.

So when you have a website and you focus on commercial and clients, think very hard who are actually your client base, because it can cost you money in the long run. So captions, Facebook made a very bad d/Deaf research. I mean for them easy, because they can track everything.

And Facebook found out that increased view time of videos on Facebook was for 12 percent when they added subtitles. And they have a huge, millions of people to test on because we can count Facebook and Instagram on it.

And captions have so many advantages and it’s not only for hard of hearing and deaf people, but watching videos in noisy places or the silent train coupe and imagine you’re at the library studying, and you take a break and you want to see some video you’re going to need captions. It’s also very handy for the search engine optimization, because Google cannot index sound, but Google does index text.

So if you have captions Google will find your website and your features very much faster. And when spoken language is not your primary language, so if you are English speaking and maybe you understand a bit of Spanish, but it will be handy to have captioned maybe in English or as Spanish, but as long as you can follow extra well. And also if the speaker have an accent, I know I have an accent, because I speak four languages and not one mother tongue.

So I know my sound very confusing and I’m sure the caption will even help hearing people follow me along. I don’t know how many of you are familiar with the SRT subtitle file, but for me this SRT file is the biggest evidence that way more people want caption than who don’t, because the SRT files has been popular since the internet was fast enough to download media. And there are websites, out there thousands and thousands of captions and they are hugely popular.

So like everyone needs or want captions on their videos, so it shouldn’t be a question if you’re gonna put a video on your website, like should I put a caption on a video, it’s gonna cost money, it’s gonna cost time, but the answer is, yes. Because everyone, everyone wants caption and sometimes whether they know it or not they’ll prefer captions. So this is another huge fact, if, if you’re gonna caption, never ever do this. Do not caption ball sounds like this. I mean it’s just offensive to deaf people, especially and hard of hearing people.

But when Janice in Friends is laughing, that you do caption. And why? Because in this context one of Janice’s most annoying characteristics was her annoying laugh. And I can imagine, I’m hard of hearing, so I saw the whole of Friends before I became deaf, but now Friends is on Netflix and a whole new generation is meeting Friends for the first time. And I can imagine some some who never heard Friends who would appreciate exactly knowing why people are annoyed when Janice laughs.

So do think why, when you caption something, if you are doing the correct way and not in the offensive way.

So everyone likes, they pointing out to me that YouTube has auto captioning.

Auto captioning is not good enough. The first thing auto captions suffers from bias, because it doesn’t recognize accent and that is also little non-inclusive. When you have a team of the same people. I don’t know, I’m going to pick because most tech people are white and high socioeconomic captioning they are going to be thinking the same and now everybody is going to think “oh, there might be people who speak with accent.”

It fails with names. It depends on clear articulation. If someone mumbles it won’t get, caption it right and it also depends how slow someone speaks. And I practice, I sometimes recommend people to do it is, is you know like even for a day, I thought I would like some to do it for a week, but if you watch YouTube a lot, mute, mute the sound and watch YouTube on mute for a week long, and only, you’re gonna have to do it like deaf people do, depend on caption.

Auto captions, if there are captions, are they going to be good? And so I dare people who are here, for a week or maybe just try a day of watching YouTube on mute and you’ll find the horrors of auto captioning.

So for me the best and good examples are Netflix and TED. And the Netflix is the best because um English is not my first language, but my first language is Papiamento. I don’t know how many of you know that, because I was born and raised on Aruba, so unfortunately I won’t find Papiamento captions anywhere in the world, so my next go to is English and not Dutch like many would think, but English. So when I watch a movie on Netflix I will always choose the English captions first.

But even so, Netflix has many, many options and when I’m watching a movie from Spain, for example, I would put, I won’t block the language, I will let them speak Spanish, because I can lip read some, but I will also choose the Spanish captions.

Because if I know those people are speaking Spanish, I prefer to see Spanish captions and on the other hand if I’m seeing English movie, I know they’re speaking English, I want to see English caption. And again this is me, that is late deaf person, so you should not assume that early deaf person have the same preference .

And that’s attitude, there is no one deaf person.

Every deaf person – late born, late deaf or early deaf, they all have the individual preference of how they like a caption or sign language.

And Netflix also also has a very good day and lots of deaf people, lots of blind people and have audio description. So imagine someone who is blind is watching a horror movie, for example, and right now the screen is silent, but everyone who can see is looking a creep creeping outside the window. And the audio, caption will let the blind person know that there is a creeping person creeping outside.

So on that point I think Netflix was doing very well up until now with captioning, but there is also one thing you have to take into account. Yes, when I’m watching a movie, I don’t know how many of you know One Day at a Time? It’s a movie about American Puerto Ri, no a Cuban American family so they speak English most of the time, but the grandma, a lot of times speak Spanish.

And that’s one factor I have with captioning and why the English as the main language would be spoken and the moment they have to speak Spanish they will not caption it at all. There will be English, no Spanish caption, or maybe they’ll just put, person speaking Spanish.

And that is also inaccessible, so you have to pay attention to small details like that. And that that has captioning also blank and all main languages and depends how old, how long the video has been online. They also have podcasts and just podcast has auto transcription. So for me Netflix, and Ted are the go to places to see videos and talks, and all transcriptions not only for the deaf and hard of hearing.

And you know, I love to acquire knowledge and follow thoughts and but but, this at a new point of inaccessibility. But This American Life understands, this. They had all the trans and all the artists transcribed years ago and they did it in a few months.

They transcribed all their podcasts and since then every time an episode is published, within 24 hours it will have a transcription. And they have done, you can, I have a link under this slide you can look it up later and you have other statistics, huge research and since they have been captioning their listener has gone up, because Google can index, caption uh transcriptions.

So they had an increase of visitor, they have an increase of unique visitors. They can see that the transcriptions are being read and they can see they have more people visiting their podcast. And why transcript matter, there’s a huge list.

Because podcasts right now without transcriptions they are inaccessible to deaf people, hard of hearing people, people with hearing insensitivity, people with ADHD, people in noisy environment, people in silent environment as the train or the library.

And transcripts are also good for the search engine, people’s primary language isn’t English, and also for fast referencing or quoting. So imagine you have a podcast and it was a hit and you have it on your WordPress website your WordPress website is super accessible. You have a podcast that just went viral, but now you have problem. You don’t have transcript so Google won’t be indexing it and you’re going to use lose out on a huge group of people for which is inaccessible.

And that fast reference quoting and imagine a journalist came to your website to write about your podcast and the person has it, really doesn’t have time to go listen to all podcast. And in this sense, transcripts are very good, because people can scan them really fast looking for the point and they can quote from it and they can reference it in an article or another website. So the advantages of having transcripts are enormous.

So how inclusion works and why I’m going to tell you this, because when you have a project and maybe even a small project, it’s always good to have someone outside your bubble giving you feedback and their point of view on your product. It doesn’t help you to have a bubble of the same people who think like you, are the same culture of you. So diversity is having a seat at the table.

Inclusion is having a voice, and belonging is having that voice heard. I’m a person who can be considered the diversity in the Netherlands, because I am not Dutch.

I’m chronic ill and I’m deaf and many times that happens that people ask me to join them and to be, you know, the other voice. And that’s very nice to be sitting there and it’s nice to be talking, but sometimes you talk and people don’t listen.

And so it’s very important when you expand your bubble to really be aware, I am really listening to this person’s voice. I’m not saying you have to do everything someone tells you, but one should really listen and you know comprehend what they are being told about their website about the product.

And that’s the best way to be inclusive. And now I’m going to give you a perspective, because uh since I’ve been doing this, I got that question many many times: but it costs money, it costs money, it costs money. And the first thing you have to think about when you have a budget and you’re getting ready for stuff, whatever project, so you look I’m gonna use WordPress, that’s free, thank you that’s free.

The host is going to cost money and maybe I have to hire a programmer, but in that budget you should also think of about accessibility. That should also be from day one, because if you’re gonna have to later, it it’s gonna cost even more money. So day one you have your budget, accessibility is going to be part of your budget.

And this is the perspective: abled people will say disabled people are only what, like five percent increase in our web audience? Who cares about making the web accessible. And also abled people: our sign-ups increased of five percent. Bonuses for everyone!

So that’s really something you should always think about when you’re going to start a project. So thank you for listening and do you have questions for me?

Allie: Wonderful thank you so much, that was amazing. I learned a ton. I was tweeting through the whole thing. I really appreciate everything that you just shared. I do have the questions pulled up so I will make sure that we go through them from first ones to the most recent. Let me go back. Okay, so the first question that we have: How many fonts should I use when designing a website?

I found some websites using more than two fonts.

Darice: Okay the font thing, um I think just not only for disabled people, I think um like I like gifs and I get annoyed if there are too many gifs on the website I’m trying to read, but one or twice okay. Uh okay I do actually design longest web pages for my job and I stand by three fonts.

I will use one for the headers, and one for the body, and one for the block quotes, and maybe a fourth one, but just offer a small text the captions, because if I caption a photo I will always do that in a monotype space, but no more than four. And you show us, make sure they’re like in some flow and to just four. I know it’s very hard, I mean there are people who have font expert and I don’t think I’m a font expert, but like on Typekit from Adobe and Google fonts, you can always Google the fonts combination and it’s sure the combination work.

So you don’t have to guess and mix and match, but I will keep it four fonts max and which of two are the main ones: one for the header and one for the body.

Allie: Next question: Do you see enough changes in diversity in relation to digital accessibility?
How can we improve and what area needs it most? What is the first thing you address when you start a project? So that’s three questions in one.

Darice: Okay, I mostly advise people. And then it’s like, I don’t know how it is, I know I’m speaking to a worldwide audience, so I’m going to speak from the Netherlands for faster and the majority of the population here is white.

And after the industry at international products to do web apps and stuff, I remember back then there was a huge thing because it was a group of young guys in Silicon Valley who made the app for woman and they had it all wrong.

Why? Because they didn’t have a woman in the team.

So you’d have to do it on day one and you’re gonna hire people and freelancers and try not, I know after you’re investing, you hear a lot is, yeah buddy don’t fit in the work culture.

See that’s the problem, the work culture. You want people that don’t fit in your work culture because your audience and your clients are not going to be part of your work culture. So look for people who are very different from you. I’m not telling just pick someone because they’re a woman, because they are brown or because they are disabled, you’re gonna pick some because they know the job, but you’re not gonna pick them because they are the same as you. So that’s the first thing you have to think.

Allie: All righty, that was fantastic answer. Could not agree more. The next one we have up: YouTube auto captioning is not perfect, but can those captions be used as a reference to edit and fix the errors?

Darice: Okay, ah, yes that’s what I do at work. Do we have videos online you’re captioning them and yes the advice is you upload on YouTube and YouTube will generate the auto captioning and it’s going to be full of mistakes. And what you can do is you can edit that file.

So it does help that you don’t have to start from scratch. So you just get that auto generator from YouTube that’s going to be full of errors and still will take some work for at least you’re not starting from scratch. It will have all the minutes already noted and so you just have to go through that text and correct all the mistakes and then you have fun, well working captions. So yes, that’s advice, but never just generate it and leave it like that. You can correct them.

Allie: Absolutely, that’s fantastic. All right, next question. Um captioning is possible in YouTube Vimeo etc, but how can I use it in HTML type videos? So I guess that means videos that they’ve just embedded directly into the
site and not from a third party?

Darice: Well that’s a good question. You have to see the experts on that. I’m sure today there will be someone speaking about that.

Because I’m deaf myself, I’m not able to test these things and create the captions. But if I’m not correct [unintelligible] my video I just embed files, so you have to like burn the, uh, caption hard coded in the video. Because right now YouTube gives you the options turning it on or off and the menu too, but if you’re gonna embed it [unintelligible] then you make sure to make sure that you burn those captions in the video. So that’s what I thinking about, yes.

Allie: Awesome, uh so this is actually the last question that I’m seeing so, but we do have some time so if anyone has additional questions please put them in the chat so that I can grab them, uh, and pose them to the speaker here. So the last question I’m seeing right now is: Is it good to use “here” when providing links and if not what is the right method?

Darice: No it’s not right to use “here”. I, so I always like explain what the link is and that explanation part going to link, but here as well, yes. No, so if I’m going to link to this talk later on on my website I’m going to write, yesterday I gave a talk to the WordPress Accessibility.

You can view my talk on YouTube and I will link “you can view my talk on YouTube”. I’m not gonna say you can view it here, a link here, no.

Allie: All right, so we have one more that just came in. The question is: What are your thoughts on YouTube community captions being discontinued?

Darice: Okay, I think YouTube community is very big. I don’t think there is one YouTube YouTube community, because inside YouTube you have several sections. And I think uh yes, uh let’s say for example since this pandemic that we have been sitting at home, I’ve taken a liking to see these interviews writer who released the books. So they are not going on book tours anymore, so everyone is talking to the bookstores on YouTube and several of them are captioned. I’m not 100 percent sure if it’s auto caption or not.

I’m going to assume they were corrected, because they’re pretty good captions, but there’s time I’m missing. I also like seeing night talk shows from the United States. You know like [unintelligible], I can keep them apart, but I noticed that Conan never ever has captions. So I never ever, have yes, Conan and lately I just stumbled upon him in the recommendation and I saw he had captions. But before that Conan did not have subtitles on YouTube.

And I think it’s Kimmel, Kimmel has subtitles, but his subtitles are always delayed. And so it’s it’s very hit and miss in in in the YouTube sphere, but what I am very upset about is the decision of Google to stop community captions. I don’t know if you people have followed, but Google is gonna stop, uh, the possibility for people, like you have a channel and you have a video and someone can write the captions for you and submit them. But they are going to stop that.

So Google is actively working against accessibility on that point.

And it was also your thing with Twitter because Twitter started voice tweets. And I want to ask this world, well others, to think twice before you start using voice tweet, because they announced it voice tweet. And then everybody was like, okay what about other deaf and hard of hearing people? And it turns Twitter hadn’t even talked about with their accessibility team. It turned out they didn’t really had an accessibility team. So when people got mad they had to scramble and get that team set up, because you cannot think Twitter is highly accessible right now.

Write the text and you’re always giving tips how to keep the text accessible for screen readers and I want to advise this, that won’t be accessible to deaf. So now the voice threads are going to launch soon just here and the captions will follow later. So I’m asking right now the worldwide artist please do not use voice tweets. Please just keep writing your tweets and so many letters.

Allie: There you go. All right folks, that’s all the questions that I’m seeing for now. So we are going to go ahead and, um, wrap up. Thank you Darice so much for all that fantastic information. You made so many amazing points and it was such a pleasure and an honor to hear you talk today.

Transcript

Ahmed: Hello everyone. Welcome once again to WordPress Accessibility Day 2020. This is a 24 hour long event where we talk about accessibility. My name is Ahmed Kabir Chaion and I’m working as a Business Development Manager at weDevs. I’m also a regular contributor to the making WordPress documentation, design, polyglots, accessibility, hosting, community, learn WordPress, and Marketing group.

I will be your host for this session. You’re here for the 10 am UTC talk with Calum Ryan. Please feel free to add your question to the YouTube chat kit and we’ll answer those at the end. So how do we approach accessibility while testing in a way that’s sufficiently comprehensive from a technical perspective, at the same time presentable to clients without being technically knowledge and who may themselves have a disability. So that’s a question posed specifically for this talk.

So in this talk the speaker will explain some of the approaches and attention to detail it takes to test and present accessibility issues in websites that’s accessible. The points that are will be covered using WordPress to help make accessible, accessibility reports for clients, the conversations with clients as part of the accessibility testing process before and after, and what the benefits are of using this approach.

Our speaker Calum is an Accessibility Consultant for dxw, helping the public sector make their websites more accessible. His background is in front and web development and user interface design, having worked in the web industry for around 10 years, which brings to this session accessible, um, which brings to this session making accessibility, making accessible accessibility reports.

Apologies for that Calum, take it away.

Calum: Thank you. So I was really in pleased to give this talk about creating accessibility reports, which are accessible. And I, I work for a company called dxw who are based in the UK in London and Leeds has around 70 people roughly. And we design, build, operate through digital public services.

And within dxw I’m, I work in GovPress which specifically works with WordPress. We have lots of clients who use WordPress. They’re all public sector mainly. And throughout the past few months I’ve been working on making the websites more accessible and this is for the latest legislation which is now a legal requirement in the UK for all public sector websites to be accessible. If you take a look at accessibility.campaign.gov.uk there’s more explanation on what that involves,
the regulations and who that applies to.

So within organization of GovPress, I’m the only accessibility expert and it’s been my responsibility to interpret a lot of that information from the WCAG guidelines, the latest guidelines which all public sector organizations must comply to. So if some of you, I mean it depends, um I’m sure there’s a whole range of people listening to this talk um, but if you’re more technically minded you might have already seen these guidelines. They are an extensive documentation and listing of all the different requirements for having an accessible website.

I’ve probably spent some, quite a few hours bedtime reading for this. It’s uh, it’s not the sort of thing you can just read off in an hour. It’s certainly something you need to get your head around when you’re looking at how accessible websites should be.

In those guidelines I can summarize that websites need to be perceivable, operable, understandable and robust.

So that’s a lot of criteria to present to clients and what I’m looking at, in terms of report, is um for clients to understand the importance of having accessible websites and for that reports being useful to them, that not only before, but after the report, they can see which fixes have been done and which fixes are the most critical, need to be done and which are less important, but still need to be looked at at some point.

In terms of the report going forward as well, it’s a useful tool for the clients that we have to create their own accessibility statement which is a requirement for this guidelines at the moment. For certainly in the UK for the legislation that even if your website is fully accessible you still have an accessibility statement.

So in terms of actually creating an accessibility report there’s a methodology which you can look at from w3.org which gives a good in-depth listing of all the different criteria to look through and how to actually structure your accessibility report.

Now this is alone something we wouldn’t present to our clients because it is a very, uh detailed and quite technical presentation on highlighting what has been tested and who has tested it and the types of tests that have been formed. So the challenge that I wanted to get around was looking at what accessibility reports do at the moment and how we can make that more accessible to not only the people who are going to be fixing the technical issues in the website, but the content issues, the overall readability of the content.

So typically we’ll have a lot of different people looking at the report so it’s important that we make that report as accessible as possible to everybody who is not only reading it, but actually putting in information and issues into that report.

Typically there’ll be many issues which are the same over different pages on websites and the similar solutions as well to fix those issues.

And also in terms of our own example where we have many different clients, we need to have multiple people editing those reports or reviewing those reports. So we needed a solution to allow different people to look at those reports at the same time. We also had quite a short deadline to create all of these reports for different clients so having a facility to make those reports in the most efficient and accurate way was very important and having a way to present very technical language in a way which doesn’t completely take over the report and make it difficult for somebody who isn’t technically minded to get to the most important points in the report.

And also a lot of our clients are just used to having a pdf to print off whenever they look at documents. So, although pdfs aren’t inherently that accessible, we still have that option for the report to be printed off as a pdf or just as a paper printout.

So creating accessibility reports, we decided to use WordPress because WordPress is what we use day-to-day in our company. We have a whole team of people who can not only work on the backend, but develop a front-end user interface, can customize themes and WordPress just generally has got a great community of people to make the whole content management system a lot more robust.

Um it’s important to say we don’t actually use Gutenberg in our reports. We still use the Classic interface and that goes back to my, my intention is to make this report not only accessible for the front end, but accessible for people who are creating reports, so the whole way of entering information into reports is using the standard WordPress content management system, without any of the Gutenberg changes.

So starting with how we create the reports, we use, um if anybody is familiar with WordPress, on the backend we use a number of existing plugins, where we use the Classic Editor and the override, so we don’t get the Gutenberg presentation. We use Custom Fields, Advanced Custom Fields which gives us a few more options in terms of adding extra fields to content and making that more easy to add repeated content.

So if you’ve got like a repeated issue or repeated criteria, we can just start typing the words for that criteria and it will populate field without us having to go through and repeat the same thing for every single web book.

We, we use Custom Post Types to store the solutions and the criteria as a centralized area of content so we can refer back to those pieces of content and put those into each report, and that helps make the whole process a lot more efficient and accurate.

And in terms of presenting the reports to clients we use the standard password protection on posts when we publish them, so that only their client with a password can review that report.

In terms of actually viewing the reports, as a user we try and comply to WCAG 2.1 (AA) standard and so everything we do is client compliant to that level. You can navigate the entire report using keyboard, screen reader, and each of the sections are all accessible through a single navigation. And [unintelligible] say that the whole report is a single page. So if you want to print it off you can, just print off as a pdf if you wish.

And in terms of beyond the technical standards, we also look at how readable language is so if we’ve got a technical term such as ARIA, a-r-i-a, we explain what that abbreviation means and in terms of the whole sort of general design system, we try to apply standards which are accessible. So we have gov.uk has their own design system and we take influence from that so, things such as the issues which I’ll show you in a short while uh in reports are all using standard components, which are accessibility tested.

So let’s look inside the accessibility report.

Initially the report was a prototype which I developed without WordPress. So this report is flexible, we can use what um,
anybody could use the report in whatever CMS or even just a static template if they wanted to. The the current set we have is a WordPress setup that is fairly customizable to however you need it to be.

So we start off with saying who created the report, outlining the person that was optional if they want to have their avatar or any other information about when the report was done, what their role is in the organization and outlining if there was anybody else who quality checked the report and the overall compliance of report. So in some cases we have clients who stipulate they want their website to be up to AAA standard, so we’ll make a differentiation between websites which have been checked to AA or AAA.

So in terms of outlining what we tested, we created a list of say how many pages or pdfs have been tested and they’re now writing how it’s being tested, so we always um specify the automated and manual tests which we’ve done. We have different browsers and [unintelligible] devices we use in the different combinations we use. Typically that will involve a few screen readers. We have a limited team and you can actually do that so although we have, there are several different screen readers, we only test with what we have available at the moment.

We test with VoiceOver, NVDA and the mobile equivalent. So we’ve got VoiceOver on iOS and TalkBack on Android and Narrator on Windows.

And we’ll probably look at having some more when we maybe expand actually a bit more in the accessibility side of things. So this is giving an outline of just how it’s being tested and that is before any of the issues or outlining how we fix those issues.

Now the issues identified in report, we we typically have four user impact levels. So that starts with minor, moderates, serious and critical.

These are user impact levels we take from the axe tool by Deque and we use that as platform automated tests to get an overview of what are the the main issues with websites before moving on to the manual tests. And so within our report we we can use things such as the accordions from the gov uk design system to make the whole um collection of issues more simplified and more collated.

So if there’s an issue it’s the same issue on different pages it’s a lot easier to just go to that single issue and outline it within a certain section. So for each user impact level we have these accordion items which as a description of the image that we have to the right of the slide is the critical issues title, with the issue, the type of test, so in this case it’s an automated test and where the issue is located. So in this case we have the home page navigation and then after that we say the level that it’s been assessed to.

So in this case the level has been WCAG 2.0, AA and the specific criteria that the issue is not complying with, is 1.4.3 contrast minimum. So following those details we outline what is the problem and who it affects.

So in this case we have multiple instances of contrast between foreground and background colours. It doesn’t meet the contrast ratio threshold and this includes [unintelligible] post states this has a serious user impact because there are many types of vision impairments where poor colour contrast could affect their ability to view the website.

Then after that we have screenshots of where that is present. Now this also helps for again people who aren’t technically minded to actually get an idea of where the problem is. So in this case we have four small screenshots which can be opened in a light box kind of presentation, if you want to expand it, and within that we may also have code samples.
In this example we don’t have that, but in some we, we would do.

And finally in the issue is the recommended solution.

We decided to put the solutions in a separate section. So in this case we have a small summary of what the solution is and an anchor link to the link to the solution further down.

So the solutions section is again a collated list of what the solutions are. Typically a solution may be applicable to different issues and in this case we have an image again on the right slide with a few issues of being given solutions.

And in this case we have one about ARIA, removing ARIA, uh one about changing HTML here because bottom element isn’t used,
and another one for changing the colour contrast because background colour. So within each of these solutions we give the outline of the solution, how to fix it, in some cases the solution is aimed at a technical person. In some cases the solution is aimed as a content person. So in this example, we don’t actually specify that, but in a future iteration of this whole platform we’re going to make a lot clearer on who that issue, who that solution is aimed at in terms of responsibility.

And finally we refer again to the criteria that the solution is applicable to and again that is another anchor link to a section further down in the report.

And finally in the report we have the references section, Uh this again links you to the WCAG reference for the criteria. In each case we also have a secondary link to an explanation of how to understand that criteria, a bit more in both cases the explanation is a lot more than we can write and report. And one of the reasons why I decided not to include an entire description of the criteria in the report itself, again it’s just not to make it so overwhelming for different people in the report and to make the report a reasonable level for everybody using it.

So what have we learnt from creating this platform?

Certainly early on we’ve found there’s a lot of information to include in a report and using visual space effectively is certainly something which you need to do when you’ve got so much information to interpret to a vast range of different people you might be viewing the report.

We often have different clients and this is an example, we have the office for national statistics and in such an example as that, we may be creating reports to a more customized level than maybe some others in terms of the people viewing it, in terms of what they need from the reports. There are ways that we might consider making it more customizable than it is at the moment.

In terms of again going, going back to who the issues are applicable to, who’s responsible for fixing those issues, we should maybe look at making that bit more clearer um.

In the discussions we’ve had with clients I’ve found that often many will feel that the report is really just for a technical person to look at and really they’re just there just to um view reports and summarize that the timing, ah actually understand how much time they need for the fixes to be made. Whereas in many cases the fixes are for their own team of content editors and decision makers to spend time making lots of fixes themselves

And then also finally looking at the report in terms of how crucial it is to making websites more accessible, it’s only a complement to discussion and ongoing discussion with clients to understand about how to make the websites more accessible and going forward that the report is only a one-off snapshot in time. That they need to understand that making their website accessible is an ongoing process which they need to revisit frequently and not just as a one-off to meet this legislation.

So what’s next for our report platform? We currently have the platform in our own private repository. It’s not really in a state where we could open source it right now.

We would like to make it open source as potentially a WordPress plugin and also just as a static template that you can work as your own presentation for any content management system.

It would also be great to get users to test out the platform, not only as content editors, but as users viewing the report and we’d like to do some usability testing with people to really understand what are the problems are in interpreting that information and how to make reports more accessible. And then finally also to make the whole process a lot more streamlined we’d like to link those issues into a tracking integration.

So for example, if you’re using a system such as GitHub or Trello potentially having a link with it in that, so potentially maybe it’s something like a API so that we could make that whole information a lot more open and easier to link to certain aspects through the report. And not only developers, but anybody else who wants to see the progress of changes being fixed and any other information basically is a lot more easily accessible.

So really I’m probably finishing quite early for this, but um just as a roundup really I just wanted to say thank you to everybody who’s organized this event .

And I am happy to take questions now or later. The company dxw.com, do a whole range of work in the public sector. And if you are based in London Leeds or anywhere within the UK, uh we’re happy to talk about how we can work for you in making not only the web more accessible but and helping public sector services and service design. Thank you.

Ahmed: Thank you so much Calum, I believe we have a lot of time for questions.
We can, but we certainly are not seeing that much questions in the chat so I would like to ask you a personal question. What would you like to see in the future? You mentioned about open source as a plugin, would you give us a bit more details about that?

A little bit more in-depth idea about how the future, accessible future to you.

Calum: Sure, em, so my background is in mainly, sort of front end user interface design and I think making the whole um developer process a lot more friendly in terms of the linking of issues to a system which makes things like continuous integration, so developing a way for accessibility testing, an automated way a lot more easy to include in the build process.

And if that can be, uh I think mainly in my report context, but generally the availability of accessibility testing in continuous integration and development make that process look more well documented and promoted that would be great. Making the web more accessible I think is something which a lot of the developers I’ve spoken to aren’t really aware of enough and how to make that process maybe more easier, I think.

Ahmed: Thank you. So my next question to you is based on your experience, where do you think accessibility is successful more? Is it total is it more leaning towards technology or to acceptance of the use of technology?

Calum: Sorry, if you could repeat that again, sorry.

Ahmed: Sure. So where do you think the success lies for accessibility, overall accessibility? Is it on the use of more technology or making it aware for people to be able to use those technologies?

Is it on awareness or on technology? How would you prioritize it, the success of accessibility?

Calum: Yeah, I think certainly both. There’s room for improvement. On the latter point, I think certainly more in terms of awareness and making it more attractive, taking away some of the barriers to how we present that accessibility information. How we make it easier for developer relations to and not only just see it as an afterthought, but something you start doing as as soon as you start writing one line of code.

You know how you’re going to test it and where there might be potential problems for different users.

Ahmed: Right, so um another question. These are all coming from me so I really appreciate this opportunity for me to get first hand experience of asking the question. So I want to know while trying to explain accessibility to people who is not totally aware of such a thing which exists, would you share some of your experience of struggling uh and and trying to find it very difficult to make someone understand the importance of having accessibility.

Calum: Sure I think the perceptions of accessibility certainly on the web are very limited from my experience of speaking to developers and being able to convince them that what they’re doing is is important and that i think it’s something where they’re certainly improving.

And certainly events like this are helping with that process, but just as general awareness is again something which uh I see lacking in my experience of speaking to people and if there’s a way of making that process just a little bit easier in terms of the testing process and auditing websites to, to understand that, is certainly some way to go I think. And there are tools which are making that progress easier and the browser tools which I mentioned, axe and white tiles to some extent as well.

There are tools which I found have opened up some awareness more in terms of accessibility. I’ll still say that there’s some way to go.

Ahmed: All right, thank you so much. We did get a question from the chat. So the question is, how can we follow process for the code deliberation from your accessibility report plugin? And there’s a form of comment, I’m sure that WordPress a11y community could help to translate and contribute.
And also this the person says, thanks for the top down.

Calum: So thank you and so yeah the report tool is uh something which it is intention to make it open source. The code is all pretty much just WordPress based templates and WordPress based plugins. So things like custom fields and the presentation itself is relatively easy just to share and I’d like to do that within the next couple of months hopefully.

We are open about doing it and not just as an internal tool, but something to help other organizations with.

So certainly, um we’ll try and put up on GitHub for the next few months if we can.

Ahmed: Absolutely so thank you so much Calum for taking the time and initiative for speaking today at this event, 24 hour long talking about accessibility being part of it. What other initiatives would you encourage the stakeholders, if they could make a change, they could make a difference, who would you encourage to step forward so that accessibility can become more easily available for everyone to understand accept and apply.

Calum: So do you mean in terms of the organizations?

Ahmed: Yeah what’s the big ones, policy makers, government.

Calum: Yeah I think certainly credit to some of the people in the government who are stepping forward. Maybe not so much the current government, but in terms of the people working on terms as the government UK guidelines and the the overall drive to make at least the government’s website more accessible, that’s um certainly setting a good standard.

I think in terms of private sector as well, there’s some great examples of organizations I’m trying to think of one now, but uh potentially Monzo who are the, one of the organizations in Ukraine online banking and if they were possibly more vocal on what they’re doing for accessibility that’s a good example there, but also some of the more established private sector organizations and the uh, the banking sector certainly because so many banks are essential to making our day-to-day lives um possible through accessible websites. So that’s certainly somewhere which would be great to see. I know Barclays in the UK do a great effort towards not only accessibility, their own website, but talking about it, being more open.

So that’s certainly one I’d reference.

Ahmed: All right Calum, with that we wrap up the Q A session as well. Thank you so so much once again for your support towards the initiative and we hope to see you again in future WordPress Accessibility Day celebrations such as this one.

I would also like to thank everyone for attending the session with Calum Ryan and myself. You can continue the conversation using the #wpad, #wpad2020 and @wpaccessibility.

Also don’t forget to attend the next stop Digital Transformation or Social Digital Transformation with Merary Alvarado at 11 am UTC sharp, here in the same track. The host for the next few talks would be Amanda Bailey. I would like to personally give shout out to the session manager Stefano; our chat monitor, Monique, Hareesh, and also to Joe Dolson for being the lead organizer and putting up such an amazing team with efficiency and success. Until the next talk happens, we want to say goodbye to the viewers from Calum and myself. See you right here after the break, bye bye.

Transcript

Allie Nimmons: Hello, everyone, welcome to WordPress Accessibility Day. My name is Allie Nimmons.

I’m your host for the next few sessions. We’re about to get started with the very first session of the event, “So How Do I Know If My WordPress Website Is Accessible?” with Graham Armfield. So if that’s a question that you’ve asked yourself before, you are in the right place.

Please feel free to add your questions directly into the YouTube chat feed, and we’ll answer those together at the end of the presentation. A little bit about Graham: Graham is a web accessibility consultant with his own company, Coolfields Consulting.

He works with organizations to help them improve the accessibility of their websites, testing the functionality– or testing the websites for accessibility and advising the designers and developers on how to fix issues he’s found. He has written detailed training courses on accessibility for developers which could present on a regular basis.

He’s also a WordPress developer and has built many accessible WordPress websites for clients, both large and small. He has contributed to the Make WordPress Accessible Team and has spoken on accessibility to many WordCamps and other WordPress meetups.

Today he’s going to be answering the question, “So how do I know if my WordPress website is accessible? ” Graham, let’s get started.

Graham Armfield: Okay, thanks a lot for the introduction, Allie. I’m gonna share my screen now.

Can I share my screen? Let’s see.

Yeah, there we go. Am I–yes, I am screen sharing.

Thank you for the introduction, Allie. My name is Graham Armfield.

I’m just gonna make sure I have the right screens visible on my monitor here so that I know what I’m doing. Yeah, thank you for the introduction.

My talk, I’m honored to be doing the first presentation at the first ever WordPress Accessibility Day, and my presentation, as Allie has said, is called, “So How Do I Know If My WordPress Website Is Accessible? ” Okay, let’s get going.

Now, a bit about me. Well, I don’t really need to introduce myself anymore ’cause Allie’s already done it.

Yes, I’ve been doing accessibility for nearly 20 years now. I started working on it for a large financial, 20 years ago, and–but now I work on my own.

My company is called Coolfields Consulting, and yeah, that’s all I do now, accessibility. I look at how websites are doing on an accessibility scale, and I help developers understand the problems and fix the problems as well, so there we go, and I–yeah, I run training courses on a regular basis with developers too.

I’ve built a few accessible WordPress sites over the years, and I can help people build accessible themes. Right.

Moving on, since mine’s the first talk, some of us–well, you know, everyone probably knows what accessibility is, but I wanna talk a bit about why it’s important. Now, it affects more people than you think.

Something like 20% to 25% of the population have some kind of different, perhaps, access needs when it comes to websites. This might, of course, be caused by blindness, poor vision, color blindness, dyslexia, ADHD, autism, deafness, but also it’s like, well, people like my parents.

They’re just getting older in their 80s now. They use the web every day.

They need things to be simple, and they need things to be clear. This picture that I’m showing you, some of you may recognize it if you’ve been to London.

It’s the hill that leads up on the northern side, the River Thames up to Saint Paul’s Cathedral here, okay? It crosses a couple of streets, but it’s just–it goes up the hill, and they’ve got steps here for everyone to use.

But they’ve also put this ramp in when they built this. It’s connected with the millennium, so a few– 20 years ago now.

They put this ramp in here presumably for wheelchair users and for, you know, for people where, you know, we push chairs, buggies or whatever, but if you stand here and look at people using this slope, you can see that most people actually use the ramp rather than using the stairs because perhaps they find it easier. Now, it’s one of the things about doing accessibility is that, without realizing that you’re doing it, accessibility, doing things right, can help everybody, not just the people, the specific people you’re targeting.

Okay, so what I’m gonna cover, now, I’m familiar with the WCAG guidelines. You may have heard of them.

Officially, official title, the Web Content Accessibility Guidelines, Version 2. 1, published by the Web Accessibility Initiative of the World Wide Web Consortium.

It’s quiet a mouthful, and there’s a link there if you wanna find out more about them. Now, these are a great resource for web accessibility.

There’s lots of techniques in there, things to do to test it, but especially if you’re new to the game, it can be very hard to interpret what’s going on here. I still find bits that I’m not really sure about, as well, when I say I’ve been doing it for about 20 years now.

So I thought, “Okay, what could be useful would be a simple yes/no checklist for people, and so that’s what this presentation is. It’s 15 questions, 15 simple questions that you can ask about your own site, whether it’s your site or a site you’re building for a client or just any site that you’re looking at, things that you can check quite easily about your sites and with free tools.

I’ll mention some of these, and I’ve got some links at the end on how to get hold of those as well, okay? But in the short time that I’ve got, I do not wanna talk for hours.

I’ve got half an hour to talk, and then we can do some questions. I can only cover some common accessibility issues, but the ones I cover are ones that I commonly find when I’m reviewing websites, and the–also, they’re sometimes the most important ones as well.

So they’re not–I’m not covering everything, but if you can answer these questions correctly, your site is gonna be a lot more accessible than many websites out there. Sadly, there are a lot of inaccessible websites, and the situation doesn’t appear to be getting any better.

Firstly, we’re gonna talk about keyboard interaction. And before we get onto the actual questions itself why keyboard accessibility is important.

Well, some people can’t use a mouse, trackpad, or touch commands because they perhaps have a motor impairment that affects their hands or their arms, okay? So they’re gonna potentially be relying on keyboards to use their machines.

Some people have very severe motor impairments, and they’ll be using switch devices, and these hook into the keyboard API within their laptop or their desktop machine, okay? So it’s really important that we get keyboard accessibility right.

Also, if I’m using a screen reader on my laptop here or a desktop machine, I’m gonna be actually interacting with it using a series of keystrokes. So let’s get on to the questions.

The first one, “Can I easily see where keyboard focus is? “, and the second one, “Can I easily access all parts of the site using just the keyboard?”

Okay, the first one about keyboard focus, if you’re a mouse user, a touch user, or you’re using your– this, you know, a trackpad underneath your keyboard, you’re probably not gonna have necessarily any concept of what a keyboard focus is, but if I’m a keyboard user who’s sighted, I will be relying on it all the time. So if I’m gonna be tabbing around a page to the links and other things that get focus, I wanna know where keyword focus is ’cause it can very easily get lost.

So let’s have a look at this site, admittedly, not a WordPress site. Gov.uk is a well-known site in the U.K., and it contains a vast resource for everyone, information about government, local governments, finance, tax, disabled people, education, and what have you, and yes, they’ve got a lot of stuff on coronavirus at the moment, and it’s won prizes, this design. If I hover over these links–I hope you can see my mouse pointer here, but if I’m hovering over one of those links at the moment, they do change color, but it’s quite a subtle change, but then with my mouse pointer, I know where I am, okay?

So if I’m a sighted keyboard user, I’m gonna be really thankful for here, a very clear indication of where keyboard focus is, this yellow background and black links, and that’s common across the entire site. I can see at a glance where focus is.

That’s good. Okay, actually, this is a WordPress website, Hassell Inclusion.

It’s a company I do a lot of work with, and here there is clear keyboard focus everywhere on the site, and in terms of getting to all the site, this is good too because this navigation across the top, I’ve got submenus hanging off some of these elements, and I can get to them with the keyboard as well, so I think keyboard users are not effectively locked out from the site as they might be with this site. This is Odeon.

In the U. K., this is a chain of cinemas, and this is what happens when I hover over this link here. I get this gray hover indication, and this submenu appears.

So that’s going to show–you know, I can choose from these things on here. That’s fine, but for keyboard users, the situation is not so great, because if I’m tabbing through these navigation links, I can’t see at all where focus is, and also, when I get–when I actually get onto the “what’s on” link there, I’m not seeing the submenu at all, and so it can now be really difficult for keyboard users, and that could include screen-reader users here as well.

It can actually be really hard to find all the bits of the sites, so that’s something to avoid. Let’s have a look at a couple more questions, and you need to answer yes to both of these ones as well.

“Does the keyboard tab order Make sense?” and “Can I easily access all the functionality of the site using the keyboard only?” The first, one tab order, that’s an easy one to check, assuming that you’ve got a visible focus, or you can just press the tab key, and what you want is the tab also to follow kind of the way that the pages are laid out on the website that you’re testing, whether it’s yours or somebody else’s, okay? So you just need the tab order to actually follow the content, really, ideally, and not jump around randomly.

But looking at the second one, “Can I easily access all functionality with the keyboard only? ” Let’s have a look at this.

This is a WordPress site, and it uses a “lightbox” plugin of which there are a number available. Here, I’ve got these thumbnail images in the content, and if I click on those images or tab to them and press the enter key, it actually shows me a full-sized version of the image, okay?

I’m sure you’re all familiar with the concept. The problem is, for keyboard users, is that when I actually action that lightbox, yeah, sure, I’ve got this nice picture of the skyline in Newcastle upon Tyne, as the sun is setting.

That’s great, but keyboard focus has remained on the page below, so now I can’t see what’s going on. If I press the tab key, I’m actually moving through the underlying page, and I can’t get to the controls here.

I can’t close the lightbox window. I can’t get to these buttons along the bottom, which takes me to the next or the previous image on the page.

So that’s not great, okay? Jetpack, this is a WordPress website, and they’re generally not bad from an accessibility perspective.

They’ve got this language selector here, so if I tab to the language selector and press enter, I can see all the different options here of the different languages that I can have this website presented to me in. The problem here is, once again, the keyboard focus actually is still on the underlying page, and so it’s now impossible for keyboard users and screen-reader users to actually access and change the languages.

So that’s a bit of a no-no. Okay, moving away from talking about the keyboard accessibility, let’s talk about links in your pages.

Okay, the first one, “Are your links obviously links? ” Do they look clickable?

Can you tell them apart from other things on the page? You need to answer yes to that.

Okay, this is a paragraph of text about Exeter and Devon on a WordPress website, and this particular theme, which sadly, quite a lot of themes do, they have chosen by default to remove the underline from all these links that are in this paragraph of content. There’s a lot of links in there.

You may or may not be able to see them. They’re marked out in green text, assuming you’re not color-blind.

Okay, so it’s a lot easier, even if you have good vision, it’s still quite easy–it’s a lot easier to see where these links are if, here, I’ve overwritten the design to actually put the underlines back in. Now, I know some people don’t like these hard underlines, so you can use other ways of doing it.

You can use a gradient, or the border, a bottom border, or something like that, but please use this. The underlines are like a convention on the web to show where the links are.

It’s been around since the dawn of the web, really. The other issue here with having a few links in here with a green with dark gray text is that people who are colorblind or have poor vision just may not be able to see them at all because they may just look very similar to the actual plain content.

We can do better than that. Okay, so the next question– and you need to answer yes to this one as well– “Do all the links provide enough information to state where they lead to?” Does it tell you where the link is gonna take you? Okay, here, from a WordPress site, are a couple of links.

Now, sighted users are gonna see immediately what’s going on here. The first one, find out more about my plugin and second, click here to read more about our terms and conditions.

But these links, whilst, for sighted users, I can see what’s going on, for screen-reader users, the situation may not be as easy because an NVDA is a screen reader that you can download for Windows machines. It’s free to download, so it’s used by a lot of people.

It’s a very good screen reader, okay? And it has these dialog boxes which you can bring up called the elements list.

You can see at the top there. And the links that we just looked at are indicated here.

Now, what this means is that screen-reader users who are using this functionality–and other screen readers carry this functionality as well–they’re not gonna get any context for these links. These links, presumably, each one will take you to a different page, but as far as the screen-reader user is concerned, they’re just saying click here, so that’s not really that informative.

The other thing to note about the dialog boxes like this is that I can actually–if I–I can choose one of these links and actually follow it directly from here, so people are gonna be interacting with this elements list rather than your pages directly if they’re using a screen reader. Now, with a small change to the content, the situation can be so much better.

Here, I’ve changed it to remove the click heres and to put out much more informative links, and you’ll see here in the elements list that the screen reader is now–screen-reader user is now gonna understand exactly where it is that these links are gonna take them. So that’s good.

And which version is easier? Well, the one on the right-hand side.

So test your links to make sure that they’re meaningful. We wanna avoid this.

Now, if you’ve got–you got blog on your WordPress website, you’ll have a blog index page, I’m sure, that you’ll list your last 10 or 12 or however many blog posts, and some themes could put a lot of links into that page. And here, once again, I’ve got the elements list from my screen reader, NVDA in this case, and there’s a lot of links.

First one is–this is actually the featured image for this post, and if I click on it, it will take me to the blog post, but the link text here is effectively Koala Bear. I’ll talk a bit about featured images in a moment.

The actual blog post is called ISTC Southern Area, so that link is informative. I’ve also got links to the date I published it on.

If I’m not–you know, I’m not publishing five blog posts a day, so it’s not necessarily that vital to have a link to that particular date. “Leave a comment,” presumably that’s gonna take me to the bottom of the comments on the comment section.

“Read more.” Okay, now, if I got 10 or 12 links to blogs on this page, I’m gonna have multiple links that say read more.

Not very informative. I’ve got the categories and the tags.

So there’s a lot going on here. Do these links always make sense?

I don’t know. You–It’s your decision, really.

And this theme does a lot. Not all themes do as much as that, and if you’re building a theme for a client, think about which ones are relevant here.

Okay, moving away from links, let’s talk about images. And this first one, can you answer yes to this?

Do all the images on your pages have appropriate alternate text? If I can’t see the images because I’m blind, I will rely on alternate text, using the alt attribute, and yeah, in WordPress, it’s fairly easy to get this right if you know what you’re doing.

This is another from a WordPress site. Here I’m using the Wave browser extension, and I’ll show you a link on where you can get that from, and it shows me what the alternate text is for all the images on the page, here Exeter Quayside.

Once again, Exeter is a city in Devon in South West England. I’ve got a green icon here because it says– it’s telling–you know, it’s saying, “Yeah, you’ve got alternate text here.” That’s great. You get a red icon if it’s not set properly, okay?

Now, the appropriate alternate text may mean an empty alt attributes, and if we have a look at how you add images in the WordPress Classic Editor, here is how you set the alternate text, and if you notice underneath here, it says “leave empty if the image is purely decorative,” okay? So decorative images wanna end up with an empty alt attribute, and this is a convention for screen readers so that a screen reader comes across an image that’s got an empty alt attribute, then it just ignores it.

It knows it’s not really anything meaningful there. Just a note, if you’re doing this, make sure, if you set a caption, it’s a good idea to set the alternate text as well, because not all screen readers will actually link the two together even though they’re quite close on pages.

And this is what it looks like if you’re doing it in Gutenberg, same sort of box. Okay, now where you’ve got images that are part of links, it’s best to have the link destination as the alternate text for that image, and in this theme that I’ve used for my music site, that is the case because if I– this is the featured image for this post, and this is on my blog index page.

If I click on that image, it will take me to the blog post called “Recording Don’t Let Go. ” And you can have a look.

If you look under the bonnet at the code, here’s the link that takes me to the blog page, the blog post, and the alternate text. In the cases like this where the image is part of the link, what the alt attribute is set to becomes part of the link text.

So that’s good. This one’s not so good.

I showed you this one a little earlier. Here’s looking at the elements list in NVDA screen reader.

The actual clicking on the image takes me to the blog post, which is called ISTC Southern Area, okay? But the alternate text for that image is Koala Bear, so a screen-reader user might think that it takes me to a story about koala bears, but it doesn’t.

So if you’re using a theme, hopefully it’s one that doesn’t do that. Okay, videos now.

This is an obvious one, isn’t it? “Do all your videos have captions?” This is me doing this presentation–it’s not the first time I’ve done it–to a group of developers some time ago, and it’s on YouTube. So the captions are shown here.

I’ve made sure that the captions are all up to date up, are right and everything, up straight. Now, it’s obviously deaf people and people who are hard of hearing who rely on captions, but actually, surveys have found out that many other people can use captions with videos as well, sometimes people with cognitive impairments, dyslexia, and other cognitive impairments, will also use the captions as well ’cause it helps underline what’s being said.

Others, like, if you’re watching videos on Facebook or something or in a crowded train or in an office where you should be doing something else, you might be using the captions instead of having it blaring out. Okay, so make sure your videos have captions.

Okay, a few questions around what I like to call is signposting content, and the first one, you need to answer yes to this: “Are your page titles unique and meaningful? ” Now, actually, in WordPress, it’s pretty easy to get this right, because pretty much every theme that I’ve ever come across will take whatever the page title or the blog title is and actually use that as the actual title element in the page, which is what you see in this tab at the top of your browser, okay?

So this is the one from wordpress. org, and here’s one from my own music site, okay, the “Found My Way Album,” and if you look here, it sets the title element to “Found My Way Album,” Graham Armfield Music, right?

The importance here is that, when a screen-reader user arrives at a page for the first time, the page title is the first thing that they will hear. It helps people to know that they’re in the right place, okay?

Sometimes I find websites that just have the same page title right across the board, so that doesn’t mean anything, really. Okay, the next question, and yes, you need to answer yes to this one.

“Do your pages have appropriate headings and subheadings? ” Now, headings used properly and subheadings used properly help everybody, and here on my Coolfield site, I’ve got some headings here, and I’m using the Wave browser extension here, and not only does it show me that there are headings, but it’s also highlighting the heading level as well because the heading levels are important because they help people get an idea of what sections and subsections within your pages, and how screen-reader users do that is they’ll use, once again, the elements list here, except now, instead of looking at links, I’m looking at headings.

Notice that NVDA is exposing the heading hierarchy, and when you go through this list, the screen reader will read out to you what heading is and what level it is so people can try and build up a mental picture of the page from the levels of the headings, so make sure that yours are set appropriately. The important thing to note here is that headings in NVDA and other screen readers have functionality similar to this.

You can use these things to jump around the page, okay? So if I find a heading I’m interested in, press the enter key, it takes me straight to it.

Okay, talking about people jumping around pages, “Are all your landmarks being used correctly? ” Now, when I’ve done other presentations to developers, actually, I’m finding that not very many developers know what landmarks are.

But actually, many people do use them without realizing. Landmarks, they’re predefined areas within a page.

This is a typical–but not–it’s not the only design for a site. I’ve got a banner at the top, some navigation.

My main content and a footer and a sidebar here, okay? It’s sort of an older style layout for a page.

Okay, now, screen-reader users may use these landmarks to jump around to find a bit they’re interested in. The key thing here is when I arrive at a new page, it’s often the main content of that page is the bit that I’m most interested in, and so I wanna try and find the main content landmark, okay?

And then when I’ve read that, then I might wanna find the navigation to go and find something else on your site. Now, most developers don’t use landmarks on purpose, but they probably are using the HTML5 elements like these, okay?

And if you use them properly, they set up landmarks in an appropriate way. So make sure you are using them properly because screen-reader users will be using them.

Okay, so how do you test for the landmarks? Well, there’s a browser extension for that too.

It’s one that’s called Landmark Navigation via Keyboard or Pop-up. It’s available for Firefox.

As you can see here, I’ve got Firefox in the screenshot, or it’s also on Chrome as well, and if you check this box here, show all landmarks, it puts these outlines on your page so you can see where all the landmarks on your pages are. The key thing that’s missing from this page, because this theme, this WordPress theme didn’t put them there, there is no main landmark, so it’s no way using landmarks over a screen-reader user jumping straight to the main content of the page, okay?

There might be other ways of doing it, but if I’m a landmarks user, then it’s not easy for me to get there. Okay, next one, looking at text.

“Can I resize text in a page without breaking the layout?” Obviously, you need to answer yes to that.

Okay, here’s some–a list of links, a normal size. I took this screenshot a few years ago, but it illustrates the problem I find well– I find on some websites.

So here’s normal text size, and this is what it looks like when I made the text bigger. It’s important to realize that zooming and text resizing are not the same thing in browsers.

Zooming is the default option, but people do use text resizing, if they got poor vision, to make things bigger. And you know, people do that, so it’s important that you test your site to make sure that it can cope with it.

This didn’t. And it’s quite easy to find other examples across the Internet, where resizing kind of breaks sites badly.

Hopefully, it doesn’t break your site. Next one, “Are you using fully justified text?” And I would hope that you’re not, really. So here’s a paragraph of text, left aligned, and this is what it looks like when it’s fully justified.

What the browser is doing here is it’s stretching the gaps between the words. So, for example, on this line here, “Cathedral founded in the mid-11th century,” it’s had to stretch the words quite a long way apart, much further than on other lines.

Now, this actually creates a cognitive load for everybody but especially so for some dyslexic people. There is around 8% to 10% of the population could be affected by this.

You get this rivers of white space effect. I have a friend who’s severely dyslexic, and she couldn’t read this paragraph if it’s fully justified.

She just could not read it at all. The spaces just tend to take over.

Okay, a question around forms. In my forms, “Do all the form fields have an accompanying label?”

They need to for screen-reader users, really, because the way that screen readers work, when I arrive at this input field here, I need to find out what it’s for, so the properly marked-up labels are vital here for screen-reader users. This is–I’m using the Wave add-on here, and it’s showing me that all these labels are properly marked up so that a screen-reader user should have no problems using this form, okay?

However, on this website, WordPress website, using the Contact Form 7, with the default settings, sadly, the labels, what looks like a label here, is not linked to the input field, so screen readers will struggle here. So have a look at your own forms and see what happens with the Wave tool.

Okay, the last question, “Is the color contrast on your pages sufficient?” Obviously, you need to answer yes.

What we want to avoid is people not being able to read the text because it’s like a dark gray on a lightweight gray background or something like that. There are rules about what the color contrast needs to be.

To test it, you could use this tool, and I’ll put the link a bit later on, so you can download it. It’s for Windows machines and Macs as well, and you could use these color picker elements here and actually use this, and it will tell you immediately whether it passes or fails the WCAG 2.1 guidelines, okay? And quite a lot of these blue on the white backgrounds on this particular website failed.

This is a site I looked at a couple of years ago. Okay, here’s another one.

You’ve seen this a bit before. Okay, these text links here are green.

The problem is this green has not–insufficient color contrast against the white, and so it will show up. And now, here, I’m using the aXe browser extension.

This is another useful accessibility tool. The link will be provided very shortly.

And the great thing about aXe is it groups all the errors together. So here I’ve got 53 elements on this page that have insufficient color contrast, and it’s literally all these green links, okay?

And you can highlight them as well on the page so you can see exactly what it’s talking about. It gives you some ideas about how to fix it.

I can actually scroll through all the 53 of those if I want to. Okay, there we go.

So there are 15 questions, hopefully, fairly straightforward to look at, using the tools that I’ve mentioned. Okay, you got browser tools in there, like as I– just tabbing around a page.

I’ve got the Colour Contrast Analyzer. This is not a browser extension, but it’s available for Windows machines and Macs.

Paciello Group, American company, accessibility company. Then the Wave testing tool is made by WebAIM.

That’s another accessibility company. It’s available for Chrome and Firefox.

And then aXe is made by Deque, and that’s available for Chrome, Firefox, and Edge. And these tools, I use them all the time when I’m reviewing websites for accessibility.

I’ve also written some stuff about accessibility myself. Here are–I wrote– I was amazed.

I actually wrote this or published this blog post ten years ago now, but still, I’m finding websites that don’t have alternate text set correctly, so if you’re not sure, go and have a look at this blog post, and it gives you some ideas of how to do it properly in each of many situations. Okay, if you’re at all wondering about how to mark up forms for accessibility, I’ve got a series of blog posts about that as well.

You can find them here. And then as a technique that I described– I didn’t invent it by any means, but I describe how to do it here, “Text for screen readers only.” So it’s some text. You can put some extra information text there for screen-reader users, but it’s not visible for sighted users, so there’s a bit about that too.

Okay, things I didn’t cover, and so I just didn’t have time to cover in here, like other things as well, so you know, there are all kind of accessibility, all kind of tests around all of these things, but you know, the ones I showed are probably the most important. And there we go.

That’s the end of my presentation. Hope you found it interesting and informative.

Allie: Wonderful. Graham, thank you so much. We are gonna go ahead and go through some questions.

Graham: Excellent.

Allie: The first one that I’m seeing here asks, “Is image captioning also a part of accessibility?”

Graham: Image captioning. Okay, so that’s an interesting one, because yes, in WordPress sites, you can set the alternate text for an image when you add it to a page or a post, and you can set a caption too. Now, in newer WordPress themes, what it does under the bonnet, so I’m not sure where everyone’s gonna be as a developer on this particular call, so I am gonna get a bit technical here.

It actually puts the image and the caption in a figure and marks up the caption with a fake caption, okay, which is a–I think it’s a relatively new–perhaps an HTML5 construct. Some screen readers do actually now link these two things together, but I wrote a blog post about this a couple of years ago, and it’s not consistent– it’s not consistently implemented in screen readers, so at the moment, that’s why I recommended it when you’re adding an image into a blog post or a page.

It’s–even if you’re setting the caption, it’s a good idea to set–still set the alternate text as well because some screen readers will not link the two together.

Allie: Got it. Wonderful. Next question, “You’ve been working in the business for over 20 years. What has been the most important advance in web or WordPress accessibility during that time?”

Graham: Okay, well, it’s interesting.

HTML5 actually, which started to appear–I mean, I think that it’s published–the specification was published 12 years ago or something like that. Over the last few years, more recently, support for HTML5 elements has been getting better all the time, and I mentioned, when I was talking about landmarks, that the HTML sites’ sectioning elements, sectioning elements like main, nav, header, footer, et cetera, they have really helped because now they can define regions within pages for screen-reader users.

Unfortunately, some of the other great things that HTML5 has introduced, like, for example, “input type equals dates,” which gives you a fully–or in theory gives you a fully accessible date entry field for your forms, it works in some browsers, and it works in some screen readers, but it’s not at all supported by IE 11, Internet Explorer 11, which perhaps might–wouldn’t surprise you, but even Safari on Macs doesn’t support input type equals date, and there’s been an outstanding bug about that for many, many years. I think Apple need to get their backsides in gear and actually support–start supporting that, because let’s face it–I didn’t mention date pickers during the presentation, but if you’re providing a date picker for somebody to use, it can be a hell of an experience if it’s not an accessible one, especially if you force people to use a date picker.

That’s not a good idea at all. So I think, overall, to summarize, HTML5 elements have started to make a real difference now, and as support for these elements in browsers and screen readers increases, then it’s, you know– because you know, who wouldn’t wanna use them?

Because you get a lot of stuff for free. Whenever you use native HTML elements, you get all the accessibility for free there, so let’s start using them once they’re well supported.

Allie: Beautiful. Great answer.

Next question is “Which colors are best to use in accessible design?” I feel like that might have a complicated answer.

Graham: Well, yeah, I’ll try and keep it short. Okay, so that’s an interesting one.

And talking about color contrast is, as I did earlier, obviously, the most color contrast could be provided by having black text on a white background, but I would caution against that because whilst that’s the maximum color contrast you could ever have, this is not good for some Dyslexics. Some people who are dyslexic will find that that’s just too much color contrast.

It’s too in your face, which is another colloquial term, but hopefully everyone knows what I mean by that. So I think, don’t–yeah, avoid maybe black on white, or white on black.

These are quite good. Maybe high-contrast, you know, schemes are good for some people.

Just, I mean, most people who–most organizations I work with, they already got a brand palette already, and a lot of organizations have color colors in their brand palette that will actually provide combinations that provide enough color contrast without being too much. Some organizations, that’s not true, and then it can be a real problem with them.

So I think just make sure that you get enough color contrast there and using the tool that I mentioned earlier. Either aXe, or the Colour Contrast Analyzer will help you there.

Try and avoid, like, blacks and white–black and white. It’s a bit too much for some people.

Allie: So it sounds like the summary of that is it’s maybe less about the color themselves, but the relationship between the color, like, how the colors contrast with each other. Graham: Yeah, yeah, that’s it.

Allie: So the next question, “Do you have a go-to or recommended theme that is ally-friendly as a starting point?

Graham: That’s a good question.

When I’ve been–when I built WordPress websites for organizations–over the last ten years, I’ve been doing that–literally, I have always started from scratch and built my own, and I’ve got my own, like, effectively, starter theme, which I tend to just tweak. I think many developers work that way anyway.

But that said, a lot of the defaults, WordPress themes, are pretty good, like the 20x, 2020, 2019, and everything like that. I believe their features are quite good.

I don’t have a name of any other themes that I can recommend. Things to look out for, though, within the theme review process, there is a tag that people can apply for, theme developers can apply for, called accessibility ready.

It was something that was introduced by the accessibility team, and Joe did a lot of work on this over the years, and it’s–you know, if you want an accessible theme, go and have a look. You can select the themes.

When you’re doing review of the themes on wordpress. org, you can select themes that have the tag “accessibility ready,” and these ones probably are better than many others.

Allie: Wonderful. All right, next question, “It helps a lot when a site uses a different color for visited links, but how do you make that accessible?” Oh, so “It helps out when a site uses a different color than the default shade of purple for visited links, but how do you make that accessible?”

Graham: Okay, well, that’s an interesting one.

I mean, when you’re choosing colors for your links on your buttons and what have you, I mean, you’ve got, I mean, in theory, like, almost an infinite choice of what you can use, but it is important for some people to know which links are visited. I wouldn’t have said it was one of the highest importance, accessibility issues.

If I’m using a screen reader, I use NVDA for a lot of my accessibility testing, and it will tell me which links are visited and which I’ve already visited. It will just say so-so-link visited, okay?

So, as a screen-reader user, I know that I’ve already been there. Yeah, you can use a different color.

People would have to learn the default colors, like, for– are blue for links that you haven’t visited yet and purple for links that you have visited. Now, obviously, people wanna, you know, use something that’s in their brand palette, but I wouldn’t get too hung up about, you know, indicating visited links too much, really.

Yeah, just choose the color that–if you want to indicate them, then choose a separate color from the other one. But you know, don’t worry too much about that.

Allie: Awesome. The next question, “Graham, do you have any tips for an upcoming new WordPress developer?”

Graham: Okay, yeah, good question. I was in that role at one point, and you know, maybe I need to be learning it all again now.

There’s Gutenberg around. But yeah, in the theme review guidelines, there’s a lot of–yeah, there are a lot code standards now, coding standards now.

That includes a section on how to build an accessible theme. It’s got, like, it’s–I didn’t really have much of a hand in crafting this at all, but I know that other members of the accessible team have had a lot to do with it, and it’s worth having a look because it’s got some real–really good tips in there and talks about some of the issues that I covered in my presentation, and it explains from a developer’s perspective more about how to actually do that in the themes that you’re building, so I recommend that you start with the, you know, the WordPress theme coding guidelines and then the accessibility standards as well, how theme developers would get–yeah, would work towards getting that accessibility ready tag.

Allie: Wonderful. All right, next one.

This one is a little bit long. “It seems so many people knowingly ignore accessibility altogether. If you could wave a magic wand and immediately answer just one question mentioned during your talk and never need to address it ever again, what would you choose to make the biggest positive impact and why? Keyboard focus, interaction, tab order, links, et cetera?”

Graham: Okay, I’m gonna have to say it’s one of the keyboard ones here, and whether it’s– yeah, visible focus is– it’s just vital for– you know, the actual– people think of blind people using the web. Yeah, and that’s obviously gonna be a bit difficult, and then yes, they can use a screen reader, okay?

But actually, the population of people who are sighted but who have to use a keyboard or who choose to use a keyboard– I actually got into IT when these things like, you know, “Here’s my mouse,” these things didn’t exist, right? It was all black and green screens and keyboard keystrokes, and whatever, like that.

I’m still a bit of a power-keyboard user myself, so I would say visible focus, you know, is vital for– you know, and making sure that people can get to everywhere, everything, anything that’s a button or a link. Sometimes things pretend to be a button, and they receive a– you can click on ’em, but you can’t actually tab to them, right?

So keyboard–visible keyboard focus and keeping focus in the right place. That’s gonna be the one, really.

Allie: Wonderful. All right, we’ve got about three minutes left, so we’ve got time for a couple more.

I think this one’s my favorite so far: “Is there a way to do an accessible image carousel or slideshow?”

Graham: Mm, yeah, okay, a lot of companies that I’ve been working with–and there are some big organizations now– are actually moving away from using carousels because a lot of people–you know, see, there are people that think they’re a good idea, but there’s a lot of people who don’t think they’re a good idea.

The short answer is it’s tricky, but it is possible. I mentioned the WCAG Guidelines.

If you look on the Web Accessibility Initiative website, it’s got some useful pages that show accessible examples of things like, you know, carousels, drop down navigation. They’ve also got accordions, tab panels, and what have you, and you know, track those down.

I don’t know if I put that–I haven’t got the link handy at the moment, but maybe I can stick it in later on some way. They’ve got an example carousel, and it’s fairly good from an accessibility perspective.

It can be used by keyboard users, touchscreen users, screen-reader users, and also let’s not forget people who use voice recognition software like Dragon Naturally Speaking as well. It’s important that you–I didn’t mention that at all either, but it’s important that everything that you build can be actioned by people who use those tools.

So, you know, yeah, there are accessible patterns out there, and it’s useful to follow those. Allie: Wonderful.

All right, we have one minute left, so we can squeeze one more in, I think. Graham: All right, I’ll make it a quickie.

Allie: Wonderful. Last question, “Would you like to see accessibility standards for WordPress plugins, and if so, how do you think we could apply them?”

Graham: Okay, good question. Short answer is, yes, I would, that whilst there are guidelines for theme builders on accessibility, there is no guidance at all for plugin builders at all.

And plugins, as we’ve seen with the lightbox in my presentation and also contact forms can completely mess up the accessibility of your website, so it’s like the Wild West out there.

Allie: Fantastic.

Wonderful, Graham. Thank you so much.

That’s right on our time, and thank you all.

Graham: Thank you, Allie.

Allie: Absolutely.

Graham: Cheers, everyone.

Take care, bye-bye.

Allie: Bye-bye. And thank you all, everyone watching, for attending “So How Do I Know If My WordPress Website is Accessible? ” with Graham and me.

Transcript

Mike Demo: Hello and welcome to the 2 o’clock hour UTC of WP Accessibility Day 2020. I’m your host, Mike Demo, and I am so excited about today: the next presentation.

But before we get to that, a little bit of housekeeping. First of all, remember that we are a welcoming community, and the code of conduct is enforced in all areas of the experience, including the chat.

And that chat’s important because that’s where you put the questions, and our wonderful moderators will click them for me to ask after the presentation. Please make sure to follow us on Twitter @WPAccessibility, and our two hashtags are #wpaccessibilityday and #wpad2020.

It is–up next, we have Christina Workman. Christina Workman is a support technician at WebDevStudios and Maintainn.

As an advocate for contributing to WordPress, she recently launched the wp_contribute() podcast and helps organize WordCamp US, WordCamp Calgary, and the Calgary WordPress Meetup. She has a passion for teaching kids STEM and improving her accessibility skills.

Outside of WordPress, Christina is a purple-o-phile, tea fanatic, and lover of British detective shows. So, with that, it is my pleasure to welcome my friend Christina.

Christina Workman: Hi, Mike. Thanks.

All right, let me just get the slides. All right.

Hi, everyone. Thanks for joining me for our accessibility–sorry. Accessible Websites Benefit Everyone. First, a little bit about me: I know Mike already sort of touched on a lot of these points.

But I do have a podcast called wp_contribute(), where I interview people who contribute to the WordPress Project. I’ve been a Meetup and WordCamp organizer for several years.

And a good chunk of everything that I have learned about WordPress, I have learned at these kinds of events. I’ve been using WordPress for about ten years now, first as a freelancer and then, as Mike said, a support technician at the Maintainn Division for WebDevStudios.

I love tea and have at least a hundred different kinds of tea in my kitchen. And as Mike said, I’m a purple-o-phile.

I am obsessed with all things purple, as you can probably tell from my slides and my shirt, and, you know, if you see my headphones. So yeah.

I’m still a little bit of an accessibility newbie; maybe about two years ago, I started to learn about and consider accessibility for websites. But even in that short time, I’ve noticed that a lot of people still have a lot of apprehension about making sure their sites are accessible.

My goal with this talk is to help you recognize that implementing best practices to make your website accessible will ensure a better user experience for all of your site visitors. I’ll be discussing various examples.

They are by no means exhaustive, and I hope that you will start thinking of your own examples as we go through these and once everything is done. So there are lots of reasons that people give about why they won’t make their sites accessible, and I’m sure lots of you have a lot of these already.

So, the first one, of course, it costs too much. And there are a ton of counter-arguments to this.

But essentially, the sooner you start recognizing and considering accessibility, the less it’s going to cost. Another one is, it will wreck my design.

It might change your design, but of course, you can still make beautiful, creative, and accessible websites. And the third one, my site visitors don’t have disabilities.

This is a giant fallacy which often goes hand-in-hand with the misconception that accessibility is purely for the sake of people with disabilities, and for some, maybe to avoid lawsuits, which is not the right reason to be doing it. Not only do I guarantee, though, that your site has visitors who have disabilities, I also know that an accessible website can have a positive impact on anyone who visits that site.

We need to start understanding that an accessible website is one that can easily be used by everyone. So you might be thinking, how can I be so sure that your site has visitors with disabilities?

The answer is simple. We have all experienced disability, some form of disability in our lives, and we will again.

Often, the image of a person with a disability is somebody who is blind or deaf or has lost the use of a limb. These are considered permanent disabilities, but there are also temporary and situational disabilities.

So to put these into context, if you have an amputated arm, that, of course, would be a permanent disability. But a broken arm, which would be a temporary disability, can have the same impact on how you function.

And an armful of groceries also prevents you from using that arm for other purposes for a very short period of time. That’s situational.

And there are lots of accessibility considerations that make life easier for people who aren’t experiencing any form of disability. So let’s get to some examples.

And as I said, these are by no means exhaustive. There are a million different examples, and we’re not going to touch on every type of disability, but I hope these get you to start thinking.

So, first scenario. You get home from work and you have to feed your kids.

You have a migraine. The kids are excited and loud, which adds to the brain fog from your migraine.

You decide to order delivery from a website. So let’s discuss some of the potential barriers that could make this a difficult experience for you in this scenario.

Confusing navigation. Hard-to-find buttons and links.

These need to be clear where you’re going to click in order to get to the ordering portal, to add items to your cart, to pay for your order, all of these kinds of things. Otherwise, you’ll end up getting confused and frustrated.

Too many calls to action fighting for your attention when you can barely think because of the migraine and brain fog that you have going on. These are distractions that are too hard to cope with.

So again, confusion can ensue. Fast-moving animations similar to too many CTAs, but also, these can make your headache worse and make it hard for you to even look at the screen.

And finally, some checkout form issues. Input field labels used as placeholder text that disappear when you start typing in that field.

I’ve been caught by these when I’m not giving my site my full attention, even without a headache. Imagine in our scenario, you click into a field, you hear a crash in the living room that distracts you, and when you return back to that form and return your attention there, you have no recollection of what that input field was for and what you are supposed to enter there.

And something I see less often but certainly has happened, the inability to click into a field can baffle and frustrate and make you think that it’s impossible to complete this order. All of these factors could result in you giving up on placing an order on the site and taking your business elsewhere.

Not to mention adding to just the general frustration and chaos that’s happening around you. Migraines fall under the neurological category, which would include other things such as ADHD, autism, and epilepsy as permanent disabilities.

So who else can benefit from neurological considerations? I’m sure you can all relate to at least one of these situations.

Brain fog, which can happen on its own or can be a result of a lack of sleep or a flu or cold; mental health concerns like anxiety, depression, even general stress can impact your ability to focus and process what you see on a site as well as simply being in a distracting environment. Neurological accessibility benefits everyone.

So, our next scenario. You decide to remote work from a local coffee shop.

I used to do this all the time. You get stuck on a problem and search for a tutorial.

You find the perfect video embedded on its own webpage, but darn it, you forgot your headphones at home. So what are some potential complications here?

First, if there are no closed captions or subtitling available, you can’t watch it on mute and know what’s being said. If video is the only way the information was presented, there’s no transcript or blog post that sums up that information, both of these results in you being unable to get the information that you need when you need it.

The last item isn’t necessarily a barrier but definitely has the potential to cause issues and embarrassment. The video is set to autoplay, and as soon as the page loads, the audio is streaming out of your laptop for all to hear.

Personally, I’ve actually been startled by autoplaying videos before, even on sites I repeatedly visit. These issues are all audio related and certainly affect people who have some form of permanent hearing loss.

But there are a variety of other people who can benefit from text alternatives to audio, people with temporary hearing loss due to tinnitus or a plugged ear that could be caused from an ear infection or allergies or even if you’ve been traveling and just got off a plane. I often prefer to skim through text to find a quick answer rather than watching a video.

And some people simply process information better by reading it rather than listening to it. People learning a new language may use subtitles to follow along and help them learn and understand the language better.

And of course, in this age, we have digital assistants like Siri, Google Assistant, Alexa, and they can all read text from websites if it’s there. And, of course, loud environments in general can make it very hard to understand what is being said in audio. Audio accessibility benefits everyone.

So, our third scenario.

You’re a WordPress developer who never takes their hands off the keyboard. You know all the keyboard shortcuts, and there’s not a mouse to be found anywhere in your office.

You decide to register in an online course with the latest and greatest headless platform. So let’s look at some of the barriers you might experience with this scenario.

No “Skip to Content” option, which means you have to tab through every single item in the header before getting to the main part of the page. Add to that a main navigation that forces you to tap through every sub item.

And you may feel like it’s never going to get off of the header. No focus indication means you can’t see where you are on that page, what link or button you might click if you hit enter.

Then we’ve got unexpected tab behavior, which can take you all over the page in some random experiences. And I’ve seen where it goes straight from the “Skip to Content” right down to the bottom to the chat box that they have, then back up to the top, and then into the middle, and that’s just so confusing when you’re trying to follow the flow of the page.

And then, by the time you finally read the information about the course and decide to register, you may encounter keyboard traps like not being able to return to a field once it’s filled out or not being able to leave the registration form unless you hit submit. These are frustrations that people with physical disabilities, who need to use keyboards or other special devices to navigate websites, face all the time.

So here’s some other examples of when you might need or want to rely solely on your keyboard. You may have a broken arm, a broken wrist, a broken finger.

Anything on that limb that is just not functioning or even if it does function. I’ve had my finger broken before, and you get that splint on it. And try using a mouse with a splint on your finger. It just doesn’t work.

Maybe you have carpal tunnel syndrome or something else that flares up every now, but not all the time. Maybe you have a wireless mouse, and the battery died and you don’t have any extra batteries in the house.

Or my personal favorite, you have a sleeping baby or pet on your lap. My dog loves to sit on my lap and rest his head on my dominant arm, and I hate to disturb him, so I don’t move my arm.

I just put it in position on the keyboard and try to type as best I can and use my other hand as well. So keyboard accessibility benefits everyone.

Our last scenario.

You live in Oregon on the West Coast in the United States, and its three weeks ago.

Temperatures are high and you don’t have an air conditioner, so windows need to be open. Wildfires break out all around you, causing poor air quality that irritates your eyes and blurs your vision.

You have to evacuate to a more rural area that has poor wi-fi, and you’re going to work remotely while you’re there, and you need to visit a variety of websites throughout the day. So let’s look at our barriers here.

When you have blurry eyes, trying to read small or skinny font text is really difficult. Low contrast between the foreground and the background can make it hard to see information when you’re trying to get your eyes to focus and they won’t.

Linked text can be hard to notice if it’s only using color to differentiate from regular text and if the colors are too similar. Maybe you want to zoom in to make it easier to read the content, but the layout isn’t suited to resizing.

So images and maybe even text go off the side of the screen, and you can’t access it. And if images don’t load because of the weak wi-fi and there is no alternative text, you could be missing out on important information.

These all fall into the visual category, affecting people who have colorblindness or reduced vision. And again, we have lots of scenarios that can affect your ability to see a website.

You may have an eye injury, maybe you had eye surgery or an eye infection. I heard this mentioned in another talk earlier, you know, there’s a typo on this slide, but the dilated eyes from having an eye exam when you get those drops in your eyes.

Another form of migraine is an oral migraine which can cause part or all of your vision to be obscured. Bright sun, either shining directly on your eyes or on your screen, can make it hard to see when the contrast isn’t very different.

Allergies similar to the smoke irritant in our scenario can cause your eyes to blur or maybe something as simple as you forgot your reading glasses. Visual accessibility benefits everyone.

All of these scenarios are real-life examples, many that I have personally experienced or know somebody who has. Maybe you can relate to one or two of them.

Maybe you can relate to a lot of them. Either way, I challenge you to come up with your own examples that you can share with others that will help accessibility considerations become more commonplace.

And at the very least, I hope I have convinced you that making your website accessible makes it better for everyone. Thank you for listening.

You can find me on Twitter, send me an email, and of course, gratuitous plug for my podcast, wp_contribute() on all of the podcast players.

Mike: Well, that was a great talk.

Thank you so much for taking the time to share that. We are waiting for some questions to come in, so if you have any questions, please put them into the YouTube channel and then they’ll be brought over to the webpage at wpaccessibilityday.org. And you can actually find Christina’s slides at our website as well.

But as we’re waiting for those questions to come in, and we do have one, I had a– something that reminded me from your talk is I was listening to someone from Interactive Accessibility, and they said something that when designers are put in a box, they become more creative. And I think that’s very true.

And again, this was a while ago before accessibility was common, but your point of, yes, you can still design pretty things, you can still make interactive applications, but it doesn’t mean that you’re being restricted because of accessibility.

Christina: Exactly, and that–I mean, I’ve learned something like that too, that sometimes we need the box to be more creative, right?

The more you know about the box that you’re in, the more creative you can get. So absolutely, it helps.

Mike: Cool, well, going to do some questions. Our first question is, “For businesses, what is the easiest fix or win for making an e-commerce site more accessible?”

Christina: And that’s a good question. I mean, ultimately, it depends on how accessible your site already is.

But one of the biggest things that I think a lot of people miss out on when considering accessibility, sort of just trying to do these quick and easy fixes, is focusing on those contact forms, making sure that you can back tab in them, that you can get into them with the mouse or with the keyboard or with the screen reader or however somebody might need to access your form, making sure that they can get into it, they can move around in it, they know always what the fields are that they’re typing into, and that it’s easy for them to submit.

Mike: Okay, our next question is, “Do you have suggestions for tools people can use to stop or block annoying autoplaying sound and video?”

Christina: Oh, that’s an awesome question. I do not, but now, I didn’t even think to look for something like that because literally, I wasn’t joking.

I update sites every week as part of my job, and there’s one site that has a video that autoplays, and it’s quite down on the screen too. And every single week, it scares me.

Every single week. So I am going to look into that and see if I can find something that I’m going to use, and then I’ll update the answer on the website when I do.

Mike: Excellent; so on a similar vein, ’cause, you know, some people are, you know, we’re on a WordPress, you know, Accessibility Day, so obviously, we’re making our WordPress sites accessible, but not everybody uses the WordPress CMS. Do you think any of the out-of-the-box, like turnkey solutions that do work with WordPress but also things like Shopify or Wix or Weebly, like AudioEye or any of those, you know, application SAS accessibility services, have any value, or do you think it should–the site should just be natively accessible from the beginning of the design process?

Christina: I mean, I do believe the more natively accessible it is, the better. Starting with that foundation, you know, when–again, people talk about how much it costs to make a site accessible, it’s actually one of those retrofitting issues, right?

It’s more costly to retrofit accessibility into your existing site than to build it from the beginning with accessibility. And when you–lots of those things regarding accessibility don’t even have anything to do with the platform you’re on, you know, things like the contrasts of the colors that you use.

Those are design choices that need to be made from the beginning. So anything and everything you can do to start from a good place of accessibility from the very beginning is the best way to go.

Mike: Okay, excellent. So I’m not seeing any other questions, so I think we are going to wrap it up.

Again, thank you so much, Christina, for taking the time and sharing your expertise with us. And your slides can be found at wpaccessibilityday.org, and you’re also on Twitter, right?

Christina: I am on Twitter, yes.

Mike: Okay, and what’s your username? Christina: Twitter username is amethystanswers.

I will spell that because very few people know how to spell amethyst. So that is A-M-E-T-H-Y-S-T A-N-S-W-E-R-S.

Mike: Excellent; and while you’re on Twitter, please follow us @WPAccessibility, and our two hashtags are #wpaccessibilityday and #wpad2020. Thank you so much for watching.

Thank you to all of our wonderful sponsors. And please stay tuned because even though I’m out of here as your host, at the top of the hour at 3 a.m. UTC, we have Alicia, whose topic is “Adventures in Accessibility: How Embracing Accessibility Made Me a Better Storyteller.”

I know I’m excited for that. I just attended the STORY Gatherings conference two weeks ago. So everyone, go get a light meal or a snack, and we’ll see you in a half hour, bye.

Transcript

Hello, everyone! Um, welcome again to the WordPress Accessibility Day 2020.

My name is Roberto Remedios and I live in San Jose, Costa Rica. I’m a web developer and also user experience, and user interface designer, uh I’m a accessibility advocate, organizer of accessibility here in Costa Rica. Our next speaker will be Rian Rietveld, and she will be talking about the, how to use the ARIA standard in forms. Um, Rian is a web accessibility specialist in a full-service workers agency, Level Level and a trainer at the A11y Collective, so thank you very much, thank you very much.

Rian: Thank you for having me! Yeah, okay, I have a pre-recorded talk. I will explain why and I will share my screen now.

Okay, here we go.

Roberto: Sorry, but the video is muted.

Sorry, Rian, can you check the volume of the video?

I think you need to mute yourself.

Rian: What do you want me to do?

Try to, try to play the video now?

[Video] 24 hours event of WordPress and accessibility. This talk is pre-recorded, because it contains…

Close, well, because we developers learn by looking at example code, and not by reading the specs. I know. So, demos it is. First, a bit about myself. And my name is Rian Rietveld. I’m a web accessibility expert for Level Level. That’s a full service WordPress agency in Rotterdam, the Netherlands.

[unintelligible] That’s a platform of online accessibility courses. What is ARIA? The abbreviation means “accessible rich internet applications” – you can forget that right away, but what you need to know is ARIA are attributes, HTML5 attributes, that give extra information and feedback to assistive technology, like, for example, screen readers.

In forms you can use it for naming form controls, describing extra information, and for giving feedback on dynamic changes. I will give you examples of that in the demos later. Before you start, you need to know: the first rule of ARIA is don’t use ARIA. There are five rules – go and look them up when you have time – but the first rule is the most important. Don’t use ARIA to fix meaningless and incorrect HTML5, use the already available elements, because then the browser and the screen reader knows how to operate and understand them. ARIA is about feedback not about fixing. If you want to join me or look up the code later, the example code is on lvl.li/aria-in-forms.

These examples contain very simplified forms, and before you start nagging, no data is submitted; no security checks; no translation; I just want to show you what happens in the front end, so you get the ARIA.

I will do the demos in Safari. It’s the browser works best together with the VoiceOver screen reader. First, I’ll talk you through how to properly name form controls, and we’re going to look at the accessibility tree, to show how that works. And then we’re going to look at two different forms and add descriptions and feedback. For all the people expecting me to show how to build new web components from scratch with ARIA, I’ll share at the end of this talk, my opinion about going fancy in forms. Naming and describing form controls.

Let’s do that.

Before you use ARIA, you have to have the basics in order. The basics – the basic HTML5 – must be correct. And then it’s super important that you give your form control a name – an accessible name. Okay. I will show you how that works for a screen reader. Here we have a label, “your question,” and a textarea. If you can see, you can see the label is put above the form, the form control – perfectly understandable.

But the label is not connected to the form control, so a screen reader doesn’t know what to announce here. You have to connect the label to the form control, and you can do that with a label for is pointing to the id of the form control. Here, the textarea has an id of id-textarea, so the label has a for with id-textarea – now, they are connected. I will start the screen reader and let you hear how important that is. Okay, let’s start VoiceOver.

VoiceOver: VoiceOver on. Safari. Naming and describing form controls window, toolbar.

Rian: Okay. When a screen reader enters a form, they jump into “form mode.” That gives the user the opportunity to type instead of operating the screen reader. and then you can jump with tab key from focusable element to focusable element. So, I’ll tab now in the first form control.

VoiceOver: Leaving toolbar. Entering Naming and Describing form controls web content. Edit text, blank.

Rian: About the form field textarea, it announces “edit text, blank.”

So, it is an edit text field. “Blank” is “I have no name.” If I tab to the next one, that has a for and id connection:

VoiceOver: your question edit text.

Rian: Then it says “your question, edit text.” And then a screen reader user knows what to fill out. So without a connection VoiceOver: “edit text. blank.” With a connection? VoiceOver: “Your question, edit text.”

Rian: Okay. That must be in order. Uh, you have to have a name for the form control. You can use a placeholder – is a placeholder replacement for a label? No, it isn’t, but screen readers get smarter and smarter. In this case, I have a textarea with a placeholder, “your question.” Let’s listen how that sounds.

VoiceOver: “Your question, edit text, blank. Your question.”

Rian: So the screen reader announces “your question,” the placeholder, and then tries to figure out what’s the name. Cannot come up with the name, so it guesses, okay, the placeholder must be the name. Not all screen readers do this, so don’t depend on this always working.

There’s also another issue with this. The placeholder text disappears when you start typing, or when the field is filled out with an autocomplete. People may forget what to fill out, or need to check if the right value is added to the right fields with an autocomplete. Always add a visual label to prevent errors.

So the next thing you can do with ARIA, is give a form control a name with an aria-label. In this case, textarea, aria-label “your question.” If I tab into this:

VoiceOver: Your question, edit text.

Rian: It’s announced perfectly well, but there’s no visual label.

You can have a placeholder and an aria-label:

VoiceOver: Your question, edit text, describe your question. Rian: The placeholder is announced in a different voice, “describe your question” and aria-label is “your question,” but still you have no visual label.

You can use an aria-labelledby. Instead of the element label, you can use, for example, a div – yay, a div.

But you have to connect both together, and that you do with aria-labelledby. You give the div an id and in the form control textarea you say labeled by referring to that id.

How is that announced?

VoiceOver: Your question, edit text.

Rian: Perfectly okay. I have no idea why you should use a div instead of a label, but maybe you have some obscure use case for this.

Next one. aria-describedby, and this is super useful. As I told you, you jump into form mode

and then, you only get announced what is connected to the form control. So in this case, if you have your new password, and you have an input for your password, and below that, the rules “please use a password of minimal eight characters,” that also must be connected to the input field. Otherwise, the screen reader doesn’t announce it, because the screen reader doesn’t know it’s connected. And that you do with aria-describedby.

The paragraph with extra information, you give that an id, and in the input field, the form control, you say aria-describedby referring to that id.

VoiceOver: Your new password, secure edit text with autofill menu.

Please use a password of minimal 8 characters.

Rian: You notice there is a time lapse between announcing the label and announcing the aria-describedby information, that’s a safari issues. [Unintelligible]

…which will solve it, soon but now you first hear the label and then you hear the added paragraph so you get all the information you need with a form control. Next topic: icons. How do you announce an icon? Which of course the screen reader cannot know what’s in an icon.

Well, in this form you have a label with a search, an input field, and a button. And the button has a class that this font also classes, displays an icon of a search and loop. If you can see this it’s perfectly okay, but how does this announce?

VoiceOver: Search, edit text.

Rian: If I give the button focus I hear nothing. So I have to give the button a name.

And that you can do with aria-label. aria-label="Submit search." you put that on the button all the content inside the button is omitted, only the aria-label is announced. Now, let’s see what it does.

VoiceOver: Search, edit text.

Rian: I still hear nothing – that’s weird! I put an aria-label on it. I will mute the screen reader now.

And now, I’m going to inspect the code.

And then, I see button class font-awesome, aria-label “submit search” and then font awesome added “aria-hidden”=true to it. That’s because font awesome thinks, “Okay, if it’s an icon, better hide it from screen readers, because they cannot pronounce it.” But if you put a font awesome icon directly on a focusable element, on an element that really makes sense, and you put an aria-hidden through that, the screen reader doesn’t know what it is. It omits it, think, “Okay, it doesn’t exist.”

What’s the workaround for that?

You move the class of the font awesome class out of the button. Of, actually, you move it inside the button, in a span and you give the class to a span. So the button has the aria-label only, and the span with the font awesome class with the loop icon is inside, and it’s in the span.

That way the label aria-label is announced. Now, let’s see what…

I’ll close this. So let’s move from the start.

VoiceOver: Search, edit text.

Rian: You hear nothing.

VoiceOver: Search, edit text.

Rian: Scroll up a bit, you hear nothing, and then, with the span inside the button:

VoiceOver: Search, edit text, submit search button.

Rian: Then the button is announced. Okay. Keep this in mind: not every, this aria-hidden is generated by font awesome so, don’t put it on an element that needs to be announced, that needs to have a label, because it will be hidden.

You can actually check what the accessible name is for a form control by checking the accessibility tree. Each browser generates an accessibility tree, and screen readers, or assistive technology, actually read that accessibility tree to know what to announce and how to operate a form control. I will show you in Chrome and in Firefox. This is the one in Chrome.

I will inspect.

And here, I chose the area – textarea without connected label.

And.. with a sec.. I can check the tab “accessibility” and here’s the accessibility tree, and then you can check out the name. So, when there’s no connection between the textarea and the label, it has no name. and it cannot find any name, in, for example, the title, the placeholder, aria-label, [unintelligible].

So this form control has no accessible name. If we check the next one, with the for/id construction, it has name “your question” and the name comes from the label, and the label is “your question.”

Next one: placeholder.

Name is “your question,” and it gets it from the placeholder. This is a screen reader workaround.

Aria-label.

Name is “your question” and it gets it from the aria-label. So this is a super easy way to actually see where the name comes from, and if it’s actually specified.

This is a placeholder and an aria-label, the name “your question.” It gets a name from the aria-label because that’s override the placeholder, overriding the placeholder.

This is work in Firefox, as seeing. Firefox has an inspector tab, accessibility properties.

And with Firefox you also get error warnings: form elements must be labeled. You didn’t get a label because it has no name.

Let’s pick properties for the next one. Name is “your question.” If you have for/id, so inspect that. Look if you have problems, look what the accessible name is. If you’re not sure did I label this. Well, as you noticed, naming form controls is essential for understanding how to fill out the form when you depend on your ears and your fingers. Check this in your work or the plugin you use. Well, let’s do some live coding and screen reader testing – the reason I pre-recorded this talk. This is a simple subscribe form to our newsletter form, with an indication, please fill out all the fields and agree to the privacy policy. Then name, input field, with the extra description, “give your first and last name,” then an email, and then a checkbox “I agree with the privacy policy,” and below that, a link to the privacy policies and the subscribe button. Let me go through this with a screen reader. Let’s start up VoiceOver.

VoiceOver: VoiceOver on. Safari. Let’s build a form. Window. Toolbar.

Rian: And now I tab through the form.

VoiceOver: Name, required, edit text, main. Email, required, edit text. I agree with the privacy policy, required, unchecked checkbox. Visited link, read our privacy policy. Subscribe button.

Rian: And now I submit the form.

And you hear nothing. If you can see, you see a big announcement – “There are errors in your form,” and below that there are links to the input fields with the error, with the description of what the error is. If I tab further,

VoiceOver: Visited link, “back to index” content information.

Rian: Then I go to, then the focus is on the next link.

So for a screen reader user it’s so hard to understand what’s happening. I hear nothing. This is with an ajax submit, so it’s “subscribe” submits on an onClick event. So let’s fix this. I use as my code editor PhpStorm,

and let’s look at the form.

Above the form, so it will be announced, em, there is the title “subscribe to our newslette”r and the information what to fill out in the form, and there’s a placeholder for the notifications. How do you set it up? It’s up to you and your framework, and your way of working. This is just a demo. Just, uh, right. So we need to announce the descriptions with the input field.

So we have to give the descriptions

an id. It’ll be connected to the input field, aria-describedby.

Description, “give your first and last name” will now be announced together with the input. But I also see a placeholder for the error messages. Will be very useful, as the error messages are also announced together with the input field. So, I can use in the aria-describedby more than one id, and you can put the error first, and then the description after that. I do the same with the email. There is no description, so I only have to have an aria-describedby to the error message.

That is email error.

Right. The checkbox for the terms has a description and an error message, so they need both input field.

This is the terms error.

And I have to get some description terms, and I have to give the terms an id.

Right. If this is okay, everything will be announced together now. Let’s see how that works.

VoiceOver: VoiceOver on. Safari. Let’s build a form. Window. Toolbar. Entering Let’s build a form web content. Name, edit text, main.

Rian: Wait for it…

VoiceOver: Give your first and last name.

Rian: Right.

VoiceOver: Email, required, edit text. I agree with the privacy policy, required, unchecked, checkbox.

Rian: That doesn’t work.

VoiceOver: VoiceOver off.

Rian: Let’s see what’s wrong.

Terms error, description terms, I forgot…

Welcome in a world of code editing. Repeater again,

VoiceOver: VoiceOver on. Safari. Let’s build a form. Window Toolbar.

Rian: That’s why testing is so important.

VoiceOver: Leaving toolbar, entering Let’s build a form web content. Name, required, edit text, main. Email, required, edit text. I agree with the privacy policy, required, unchecked, checkbox.

Rian: It’s description terms, description terms. That’s why it’s so important too text.

VoiceOver: VoiceOver on. Safari. Let’s build a form window. Leaving toolbar. Entering let’s build a form web content. Name, required, edit text, main,

give your first and last name. Email, required, edit text. I agree with the privacy policy, required, unchecked checkbox,

Read our privacy policy, visited link, read our privacy policy. Subscribe, button.

Rian: Okay. Let’s see if the error messages are announced together within, with, together with the input field.

VoiceOver: Name, required edit text.

Your name is missing. Give your first and last name. Email, required, edit text.

Your email address is missing. I agree with the privacy policy required, unchecked, checkbox.

Please agree to the terms. Read our privacy policy, visited link, read our privacy policy.

Rian: So now, everything is announced in a logical order. What do we do about the error messages? Let’s dive in the code. Let’s try aria-live.

I’ll put an aria-life on the notification.

Live is… let’s make it polite. For aria-live, the element must already be in the DOM, in the generated code. Because putting aria-live on an element makes the screen reader listen to changes inside that element. If the element is new to the DOM, then the screen reader cannot listen to it, so it needs to be present before you add an aria-live on it. You have aria-live is polite – then the screen reader waits until all interaction is done, and aria-live is assertive – then it announces right away.

VoiceOver: VoiceOver on. Safari. Let’s build a form, window, toolbar, leaving toolbar, an…email, with, one, I agree with the, privacy, visited link, subscribe, button.

Rian: Let’s go.

VoiceOver: There are errors in your form . Bullet. Please enter your name. Bullet. Please enter your email address. Bullet. Please agree to the terms.

Rian: Okay. And if I tab now:

VoiceOver: Visited link, back to index, content information.

Rian: There is a disadvantage on that aria-live. It reads everything inside. If you have like 20 errors. that’s a lot to listen to, and maybe someone forgets it. And we also have to fix the focus error – the focus must be on the announcement, and people can tab through the links, and go to the form, and fix them. So, truth…

Roberto: Rian, I think the video stop. Can you check the video please?

Hi, everyone. Um, we, we got a little technical issue with the presentation. We’re working on getting uh Rian video again, um, please, if you have any question use the YouTube chat, and we will be asking the questions at the end of the talk.

Exact same for the question, Ahmed. I mean, it have been awesome. Um, I really loved the first talk, about, uh that – well, Ahmed on the chat asked about my experience at, I think Rian is back.

Rian: So, okay should I, uh where did it go wrong? From where?

Roberto: Do you remember, it our first online event so it always something happened. Can you play the video again at the point that you…

Rian: Yeah, and the point was when it stopped, um ,so i start with, um

Roberto: I think it was minute 25, 27.

Rian: 25?

Um, okay. I’ll run it from here. I’ll share my screen. Sorry about this.

Roberto: Go ahead. No problem.

Rian: I’ll put an aria-live on the notification.

Roberto: Can you please share your screen?

Rian: Live is… let’s make it polite. For aria-live, the element must already be in the DOM, in the generated code. Because putting aria-live on an element makes the screen reader listen to changes inside that element. If the element is new to the DOM, then the screen reader cannot listen to it, so it needs to be present before you add an aria-live on it. You have aria-live is polite – then the screen reader waits until all interaction is done, and aria-live is assertive – then it announces right away.

VoiceOver: VoiceOver on. Safari. Let’s build a form, window, toolbar, leaving toolbar, an…email, with, one, I agree with the, privacy, visited link, subscribe, button.

Rian: Let’s go.

VoiceOver: There are errors in your form . Bullet. Please enter your name. Bullet. Please enter your email address. Bullet. Please agree to the terms.

Rian: Okay. And if I tab now:

VoiceOver: Visited link, back to index, content information.

Rian: There is a disadvantage on that aria-live. It reads everything inside. If you have like 20 errors. that’s a lot to listen to, and maybe someone forgets it. And we also have to fix the focus error – the focus must be on the announcement, and people can tab through the links, and go to the form, and fix them. So, two things we need to address. First, we address the focus issue.

I use jQuery, because I’m lazy,

But any framework, any JavaScript will do. It’s up to your own preference. I have a document, getElementBy, notifications, focus. But in safari that doesn’t work. You need to add something extra to your HTML5. And it is…[unintelligible]

…and focus it by giving it tabindex of minus one. Now, remove the aria-live, because that was too much to announce. But what do you do then with notification? [unintelligible]

Because you move the focus, people can reach from there. Well, with aria-live,

use

role=”alert.” It will be announced.

So remove the focus on the h3, “thank you for subscribing” or “there are errors in your form.” Let me add a role as “alert.”

Let’s see what happens.

VoiceOver: VoiceOver on, Safari, Let’s build a form, window, toolbar.

Rian: I’ll run through the form.

VoiceOver: Reading, toolbar, email, I agree with the, visited, subscribe, button, there are errors in your form.

Rian: Now the screen reader, it gives a ping – there’s an alert! And there are errors in your form. And when I start tabbing:

VoiceOver: Visited link. Please enter your name. List, three items.

Rian: Because this is an unordered list, it announces how many items there are in the list, so you immediately also know how many errors there are. Please enter your name, if I enter that:

VoiceOver: Name, required, edit text, main.

Rian: It jumps to the first field.

VoiceOver: Name, your name is missing, give your first and last name, Rian: Okay, add that,

VoiceOver: Name, edit text, typing, R I A N.

Rian:, Yeah, sorry.

VoiceOver: Your name is missing. Give your first and last name, email, required edit text, your email is h u p, hup @ h u p, hup, n l. I agree with the privacy policy, required, unchecked checkbox, I agree with the privacy policy, checkbox.

Rian: Okay.

VoiceOver: Visited link, read our privacy policy, subscribe, button.

Rian: Okay, what happens now. VoiceOver: Thank you for subscribing!

Rian: Now the screen reader gets music as feedback! This can do with some styling, I know, but this is the principle, how it works. In WordPress, we have a very elegant way to add aria-live to your code. They are not depending on elements being in the DOM or not. It’s a JavaScript method called wp dot a one one y dot speak, and it’s included into WordPress core. There is documentation on how to do it on the accessibility handbook of WordPress. That’s on make.wordpress.org slash accessibility slash handbook. And there, with the development best practices, there’s a chapter about wp.a11y.speak. Let’s look at another kind of dynamic change in form. This is a very simplified form for ordering a t-shirt. Now on sale, get one for only 10 euros. You can select the size and an amount, the total price is calculated, and there’s a submit button with order. Right. How does, how does that sound?

VoiceOver: VoiceOver on. Safari, Let’s calculate, window, toolbar.

Rian: Okay, I’ll jump to the size.

VoiceOver: lessons test talk, medium, size, pop up button, main.

Rian: Okay. Select a large.

VoiceOver: Three items, tick, medium, closing menu, large, size, pop-up, button.

Rian: Okay, I’ll select an amount.

VoiceOver: One, amount, pop-up, button, menu, three, two.

Rian: And then, if you can see, you see total price is 30 euros.

VoiceOver: Order, button.

Rian: How can you solve this for screen reader? There are several ways, let me talk you through them. Okay. In this case, the total price is added into a paragraph. So what we can do is add aria-live, then if it changes, it will be announced.

Let’s choose “polite.”

What happens.

VoiceOver: VoiceOver on, Safari, Let’s calculate, window, toolbar.

Rian: Okay, I’ll jump quickly to “amount.”

VoiceOver: Leaving toolbar, entering, one amount, pop-up button.

Rian: I’ll select two.

VoiceOver: Menu, three items, tick. One, two, closing menu, two, amount, pop up button, Twenty.

Rian: It announces twenty. Why is that?

VoiceOver: VoiceOver off.

Rian: If you look at aria-live=polite, it’s listening in this container: Total price, Euro ,and this span with the amount. And it only announces the changes within, and the only thing that changes is the number, so we have to tell to announce everything inside the container. And that’s with aria-atomic.

is true.

Then everything is announced. Let’s see what happens.

VoiceOver: VoiceOver on, safari, Let’s calculate, window, leaving toolbar, one, amount, pop-up button.

Rian: I’ll change the amount.

VoiceOver: Menu, three item, two, three, closing menu, three, amount, pop-up button, Total price Euros 30.

Rian: Okay, this makes sense. So everything is announced, but it’s not really attached to anything in the form, so if, when, someone changes things, and goes over the form, the information is not repeated – only on when the change happens. Now we saw several ways to solve this. You can add an aria-describedby to the amount, pointing to the total price, so, if someone focuses the amount, also the total price is announced.

Um, think about this, What will be the best way for your use case? Is it the best way to edit to your order button? It’s an aria-label? Personally, I think in this case you don’t need ARIA at all. What about making it a read-only field. Solving it with HTML.

A label for total with the total price.

And then you have an input field. The id is total, and it’s read only, and has an initial value of 10. Right. In your use case, or form, this may be far more complex, but I just want to show you the basics. So you can think about if this way may be better for you. How does this work? There’s a field added, “total price” and initial value of 10. Let’s listen to the screen reader.

VoiceOver: VoiceOver on, Safari, Let’s calculate, window, toolbar, leaving toolbar, entering, Let’s calculate web content, medium, size, pop up button, main, one, amount, pop-up button, menu, three it…, two, closing menu, two, amount, pop-up button, twenty, contents selected, total price, text, order, button.

Rian: So now the price is always announced even if it’s the initial price. In a normal HTML5 form field. Think about this. I hope these demos were useful for you to get a better idea how aria works, and how you can use it, and test for it. Please try this at home. And now iId like to answer a question I get a lot from developers and designers: Can I use “select2.” The short answer is no. And I will explain to you why. This is the demo page of select2. It’s on select2.org slash getting dash started slash basic dash usage. Here you have first a normal select, and after that what you can turn it into.

Now this normal select doesn’t have a label. I will tell you this because we’re going to read through this with the screen reader. So this should have a label like “select a state” but it doesn’t. Okay. And then there’s an example code, an example with a search box, and you can select a state, with your mouse if you want to, and if you search for new, you get all the states with the word,

I will start with the screen reader.

[VoiceOver[ VoiceOver on. Safari, Basic usage vertical lines Select2: the jquery replacement for select boxes, window, toolbar.

Rian: I will tab to the first select box.

VoiceOver: Leaving toolbar, link, getting started, link, anchor link for: single select boxes.

Rian: Okay, here it goes.

VoiceOver: Alaska, pop-up button.

Rian: Okay, it’s a pop-up button, it’s called Alaska, there’s no label, whatever. If I use the arrow key, I can go through the options.

VoiceOver: Menu 55 items, tick, Alaska, Hawaii, Pacific Time Zone, California, Nevada, Oregon, Washington

Rian: Sometimes a little

VoiceOver: Arizona

Rian:, sometimes Safari a bit of hesitates,

VoiceOver: Arizona, Idaho.

Rian: Okay.

If Safari were to work properly then everything is announced. Also the date, uh, section headings. This is regular HTML5. Okay, I’ll select Idaho.

VoiceOver: Closing menu, Idaho, pop up button.

Rian: Now I go to the example.

VoiceOver: Alaska. Alaska, menu pop-up, combo box.

Rian: Okay. Normally, I open this with the arrow down.

VoiceOver: left arrow select class equals js example basic single

Rian: No, that doesn’t work. It jumps out of it. So I move up again.

VoiceOver: Idaho, pop up, Alaska, Alaska, menu pop up, menu pop up, combo box.

Rian: I press enter.

VoiceOver: Search text field blank.

Rian: Okay. The search text field without label. Um, okay, I will want to see if I can look up “new” again.

VoiceOver: n e w. New.

Rian: Gives no feedback on what’s happening below. So if I want to select something, maybe I’ll arrow down and I can select it.

I can select it, but I hear nothing.

And there’s, now I have no idea to get out of this, then to select something, okay, return.

VoiceOver: New Mexico, New Mexico, menu pop-up, menu pop-up, combo box.

Rian: So this doesn’t work well. You get not the proper feedback for a screen reader about what you search for, how to select it, what the select options are. I hope you get the point. If you create something like this, you have to test it with all kinds of different devices. User test. Because select2 doesn’t work for everyone, and you want people to contact you, order with you, subscribe to your newsletter. Make that as easy as possible. Make that as predictable as possible. I want to quote Hayden Pickering: “People don’t want to be delighted. They want to do what they came for, and then get on with their lives.” That doesn’t mean that your form needs to be ugly. It can be pretty, and also usable for as many people as possible, and that’s the extra challenge. Discuss this with your designer.

I’ll end my ranting here.

If you want to learn more about how to create and code accessible web projects, I’d highly recommend you taking a course at the a11y collective at a11y-collective.com. My colleagues and I created courses for everyone involved in the web project. Business owners, stakeholders, project managers, content managers, designers, and, of course, developers. The course about accessible code will launch very soon, but to start there’s also a basic course, where you can get a broad overview of what accessibility actually is. If you’re not sure, take the free tryout course to get an impression of what the courses are like. I hope you got an idea on how ARIA can make a form understandable and give proper feedback. If you depend on a plugin for your forms, check if the plugin uses ARIA to describe and give feedback. If labels are properly connected to the form controls, now you know where to look out for. Research this before you implement a plugin on your production website. You want everyone to be able to understand your form, of course.

Well, I hope I gave you a lot of homework, and I hope you got a better understanding on how people use the web and your forms in a different way. Thank you for listening, please be safe.

Roberto: Awesome! Um, thank you, very much Rian, for the talk.

Rian: Sorry, for taking so much time!

Roberto: But don’t, don’t worry about it. I mean, thank you very, very much. We don’t have time for questions, but everybody, the questions are going to be on the website, and you can answer the, the questions over there. Thank you very much for your time, and I mean, that’s the, the last talk that I will be hosting. Um, the, the next hosting will be Ahmed. Don’t forget to attend the next talk: Your CMS is an Accessible Assitant, uh by,

Rian: Yeah, I really would recommend your next talk, that will be an awesome talk, yeah.

Roberto: Okay, it will be eight utc time, and thank you very much, Have a good day – see you in a bit.

Rian: Bye.

Transcript

Ahmed: Hello, everyone. Welcome once again to WordPress Accessibility Day 2020. My name is Ahmed Kabir Chaion, and I’m working as a business development manager at weDevs. I’m also a regular contributor to the making WordPress documentation, design, polyglots, accessibility, hosting, community, learn WordPress, and marketing. I will be your host for this session. You’re here for the 8 a.m UTC talk with Hidde de Vries. Please feel free to add your questions to the YouTube chat, and we’ll answer those at the end.

Your content management system plays a decisive part in creating accessible content suggest the Authoring Tools Accessibility Guideline – ATAG. Whenever a content designer creates content the CMS could help with the accessibility of it. For instance, when a designer drops in an image, the CMS could point to the ideal text alternative or calculate the consequences for color contrast. In this talk, you will learn more about what ATAG is and how, with ATAG in mind, CMSs can personally assist content editors on their way to a more accessible website.

The speaker for this talk, Hidde, is a web developer and accessibility specialist at the W3C’s Web Accessibility Initiative, or WAI based in Rotterdam, Netherlands. As part of the WAI guide project, he works on the accessibility of authoring tools like CMSs and website creators, and guidance that supports the Web Content Accessibility Guidelines – WCAG. He has over 10 years of experience working as a freelance front-end developer and accessibility person for organizations like Mozilla and the Dutch government. On his blog he writes regularly about reusable components, CSS, and web accessibility. Which brings to the session “Your CMS is an accessibility assistant.” Take it away, Hidde.

Hidde: Hello, this is Hidde, and I’m here today to talk about how your CMS could be seen as an accessibility assistant, and how that can help organizations, including maybe the clients, or the users of a CMS. Very briefly about myself, I work as an accessibility specialist at the W3C, the World Wide Web consortium, where i worked at the Web Accessibility Initiative.

We have a website which I’d like to plug. On our website there is loads of information about web accessibility, about planning, designing, developing, testing, advocating, and training for web accessibility. So many people don’t know about all these amazing resources that are on this website, um, so I thought I’d mention it. But disclaimer I, I do work on some of the content for this site.

Now, I focus mostly in my work on authoring tools. And authoring tools, if you’re not familiar with that phrase, they are tools that create web content. And with that, as probably won’t surprise you, they are also tools that can improve a lot of web accessibility at once. That is a very exciting prospect, I think, and I’ll be talking a lot today about how we can, can make that a reality. How can we really employ authoring tools to, to improve accessibility in, in many places at once. Now, first let’s look at a couple of examples of authoring tools.

We’re talking about things like WYSIWYG editors, course creators, learning management systems, or anything that they use in online education – very important in times of COVID – content management systems, of course, wikipedia, your “save as html” functionality, social media, form generators, site builders. Lots of these, these different things, all have in common that they create content for the web, or that they they provide some sort of interface for their users to create something that will ultimately live on the web.

Now specifically about CMSs – we’re at WordPress Accessibility Day – you can think of the authoring tool as the CMS itself. And I imagine some people watching this today work, work on WordPress core, or have provided some patches for it, or maybe considering contributing to WordPress, but others may be working on plugins like form builders, custom field managing stuff, things where you can manage events, or social media, cookie banners, even. Just anything that you can plug into a website, and that will also create web content, it will also be considered as an authoring tool. When I talk about CMSs in this talk, I very much also mean plugins and themes, as well.

Now, the web is meant to work for everyone. That is a point that we take very seriously at the W3C. This is a photograph of Sir Tim Berners-Lee, the inventor of the web, who was at the opening ceremony of the London Olympics in 2012. And he made these four words appear. “This is for everyone.” Now I think and I haven’t, you know, I haven’t checked this with him personally, but I think you could interpret this in various ways.

One is that the web should be available for, for everyone to, to kind of get onto the web. So, of course you need to get a cable subscription, or go to a library, and maybe pay to use a computer. But, ultimately, the web is available for everyone – this is for everyone. Secondly, I think everyone can have a website on the web, as well. You don’t need to apply for permit at your local government, or something like that, or you know do, do something very special. You need to have a web server, or rent one, and you can put some HTML on there and make it available on the URL. So, in that sense it’s also for everyone. And, and the third way that you could read this, “this is for everyone” is as, this is something that should work for everyone, including people with disabilities. And that is the definition that we use at, um, at WAI.

Making the web work for people with disabilities is what web accessibility is about. We’re, we want to make sure that this is for everyone. Now, to that extent at WAI, we have three web standards that are about the accessibility of, of web content, ultimately. Now, many people will be familiar with the WCAG standard, which stands for the web content accessibility guidelines, but there’s two more sets of guidelines, that are very closely related, and that together really create that picture of an accessible web. So there is, uh, the web content accessibility guidelines about web content itself, but what about the software that people use to access web content? Browsers, or user agents. There’s a specific center for that, the User Agent Accessibility Guidelines – UAAG. And what about the software that creates that content, authoring tools?

And for that we have the Authoring Tools Accessibility Guidelines.

So together, these three standards, they all say something about the accessibility of web content. About the content itself, about the software we use to view the content, and about the software we use to create the content. Now authoring tools are very important, and CMS is with that. They’re essential in this picture of web accessibility. Because if we get it right, if we get it right in authoring tools, we’ll be able to include more content creators. We can have more people publish stuff on the web. And the second reason that I think authoring tools are so important and exciting, is that content creators may be allowed to fix accessibility problems before their website goes live. It is the central central theme of what I, what I want to say today.

Now the standard for authoring tools, as I said, is ATAG. With the latest iteration ATAG 2.0. Now, in ATAG, and I’ll talk about a lot of ATAG today, but if you want to read it at your own pace you can visit the source called “ATAG at a glance.” It’s a page that has a bulleted list of the main points that are in the ATAG standard. So that is something you could review at your own pace. But today we’ll also go through a bunch of different guidelines that are in ATAG – success criteria – and I hope to give you a good overview of what you can find in ATAG and how it can really help end users and people who edit content on the web.

Now, the ATAG standard consists of two parts. The first part is about the editing experience, so the content editing itself, the, the backends for example, and the second part is about the output of content. I’ll focus mostly on output today, but also talk a bit about what we can do to improve the editing experience for people with disabilities. Yeah, let’s look at that first. So, part A of ATAG is about the accessibility of the editing experience. So the very first success criteria, on A.1.1.1, is about making sure that your interface conforms to the WCAG standard.

And part of that, of course, is making sure that your interface works with text zoom. It’s something I heard a lot from users, uh, when I talk to them for my work. It’s when they zoom in the interface they are, it’s not as easy for them to use the interface, or sometimes the interface becomes completely unusable. So testing with text zoom is one thing you can do. Text alternatives for icons. It’s very common these days to have interfaces that consist of just icons. So, if you work on the, on a plugin, or a theme, or something that has an editing interface where icons are the main thing you click on, make sure that there are text alternatives for them, so that there’s an accessible name somewhere in the source code.

Make it work with a keyboard is another great advice. And that includes things like visible focus, so that you can see, at all times, where you are on the page, before you interact with something, and that you can use all controls. So that includes all form fields, anchors, and buttons. Another recommendation in ATAG is about displaying previews accessibly. Because most content management systems, or authoring tools in general, plugins as well, will have some way to preview the content that you’re working on.

And this material is about making sure that that content is accessible, as well. Or you can think of things like helping with spelling. Some people may have dyslexia – they’re editing some content – you can help them a great deal by helping them correct their spelling. Now, that’s a bit about the first part of ATAG, improving the editing experience.

But what I really promised to talk about today is how your CMS could be an accessibility assistant, and, in that sense, support the production of accessible content, as the official name is for part b of ATAG. And for that, let’s talk a bit about what accessible content is.

It is things like that you have tables with headers. That you have forms with the appropriate labels. That you have hero images with plenty of contrast. That videos are captioned. That you can have multilingual content with the right language attributes. That everything is nested according to specification. That carousels can pause, and that you have sensible heading structure. So all of these things, they contribute to, to more accessible content. So for your end users, for the people using the website or, you know, web content that you’re creating, all these things need to be in order.

So if we want to have a good accessibility assistant, it should assist with all of these different things. And usually they could be different, different products, right? Because sometimes you might have a plug-in specifically for creating tables, or one specifically for creating forms, so they could be specialized products that focus on these specific tasks. And an accessibility assistant would, of course, help avoid inaccessible content. So it would avoid things like tables with no headers, it would avoid things like form fields that have no names, illegible text, caption-less videos, multilingual content that doesn’t have the right lang attributes, non-standard nesting, carousels that don’t have a pause button, and headings for the wrong reasons.

So, a CMS that really helps you get your accessibility right will, maybe, warn you for these kinds of mistakes, or it will generate markup that doesn’t have these problems, and, and provide templates that comes with with the right stuff. So that’s what this is all about. We want to avoid inaccessible content for our end users ultimately, and we want to help the people that are using our products, like our CMS, or our plugin, or our theme. We want to help them avoid inaccessible content, so that they can ship a website that is accessible and find problems before they ship it, ideally. So a great CMS can really help content managers make their content more accessible.

Think about things like when content is created, it is accessible, which is the success criterion 1.1.2 – B.1.1.2 in, in the ATAG standard, and that is about things like, you know, you need to make sure that it’s nested according to the standard, you want to make sure there’s no empty links inside of this content. Sometimes, to make content accessible, you need some more information.

So maybe you need to prompt the user for required accessibility information, like a caption for table, an alternative text for an image, or for video, those sorts of things. You, you need to prompt for, if you know that, that could cause an accessibility problem. and, you know, you rely on the content editor to provide the information, you’ll need to prompt for it. So, uh, captions for tables, alt text for images, and labels for form fields, are just some examples of things that you could prompt for.

Or when content is generated, maybe there could be automated accessibility checks. Or if it can only be checked manually, maybe the tools could suggest to the user to do a manual check. For instance, if it’s about the heading structure of the page, or if it is about text alternatives, maybe they are centrally managed, and you want the user to make sure that the text alternative makes sense for this specific use case.

For instance a photo of a speaker, but their name is also in the content, so maybe at that point you would want a zero, or you would want an empty alternative text, rather than repeat the name of the speaker, so that sort of thing, that requires a manual check. Someone who knows the content and understands it to, to go through it, and as an authoring tool, as a CMS you could actually provide the right instructions and help the the user to figure out how to make their content accessible.

2.1.1 is about allowing to create accessible content. So, not everyone realizes this, but there are a lot of authoring tools out there that don’t provide, or don’t allow for entering accessible content. For instance, if you upload a video, if there’s no caption it isn’t accessible – but if your video widget doesn’t have a caption button, then you know the user cannot create an accessible video with your authoring tool. Or if there’s no alternative text option. And some social media. for instance. only recently added the option to add alternative text. And there is a bunch of social media out there that still don’t have that option available. So even if users want to create accessible content, they are not able to, because there’s no option for alternative text.

So, for image fields, that means there should be an alternative text field, and for video players there should be an upload button for captions. And this is specifically important for those creating plugins that deal with video or, or images. Make sure that people can manage their alternative text, so that they can create accessible content in the first place.

Something else that ATAG recommends is to have accessible templates for the most common use cases, and to be able to filter for that. Um, I know there is a filter available in the, in the WordPress directory of different themes, so that is another important way that you can help content editors make the right decisions. And there’s a B.2.5.1, which says that you should provide accessible UI components. Or, as the specification calls it, “pre-authored content.”

So when you provide something like a carousel, or, or tabs component, and users can add that into the page, make sure that they are accessible by default, so that the content editor doesn’t need to do anything – it just ships as an accessible component. So it makes a lot of sense to spend time on accessibility if you provide something like a carousel tool, because everyone is going to use your plugin is going to have a more accessible website. So, it’s going to have a huge, a huge effect if you spend that extra time on on accessibility, for all of those end users, specifically.

So here’s some interpretation of B.3.1.1 which is, why don’t warn users when they introduce a color contrast issue? Say you work at an agency, and a designer has produced this beautiful header with a dark photo of a black cat with white text on top of it. It has perfect contrast, and it’s been checked according to the accessibility guidelines. This is good, it passes all the tests, but then someone decides to replace the photo with one of Korean food, in this case. And it is a perfectly valid photo – but it is very light, and the text is also light, so at this point, when we drop in this photo, we’ve introduced a color contrast issue.

And it’s possible to programmatically detect color contrast problems. And with that, you could provide a warning for the content author that something is going wrong here. You could say, well, there’s not enough contrast – maybe there should be background color painted behind this text to fix the problem, or in some cases a larger text, or a bolder font could be just enough to address the problem.

Something else that you could do is to add a spell checker to content fields. I have a button here that says “Swpmit,” which, I guess for visual sighted users, they might parse it in their head and see that it probably says “submit,” because the “w” looks so much like a “u,” but if you are trying to use some assistive technology, it’s going to be pretty tricky to use this button, and it’s going to read it out weirdly in a screen reader.

If you use something like Naturally Speaking, it’s going to be hard to identify the specific button. So if there was a spell checker, you could avoid these accessibility problems altogether. Something else that you could automatically do is report readability levels. And I think I’ve seen this in some SEO plugins, but it’s also very valid thing to do for accessibility, to make sure that the text is nice and easy to read. And you could have readability levels, uh, warn the user when they’ve added text that’s too complicated and maybe help them fix the problems there, as well.

Something else that the standard recommends is to provide accessible examples.

So if you work on documentation, you can do a great deal, as well, about accessibility of your CMS or plugin by making sure that all of the examples really help the user to get their accessibility right. Sometimes that means the stuff that maybe gets copy/pasted, really ensuring that everything there is perfectly accessible. Sometimes, it means providing the right guidelines. Like, you know, if you leave this field empty, there won’t be alternative text, so make sure you put something in there. Or explain, kind of, how alternative text works.

So it’s really putting in an extra mile and making sure that the example is, is accessible and really encourages good accessibility.

So, basically, a good CMS can encourage more accessible content and help people get their accessibility right. Now, I’ve talked about the standard quite a bit, but I think one of the exciting things about authoring tools that help with accessibility is that it can really help with your process. Let’s look now at when, in the process, authoring tools can help. Now process is a bit of a tricky subject, I think, because whoever you talk to, depending on their organization, they will have different ways of organizing their projects.

Now this is an example of a process that your organization might be following, if it follows the waterfall principles. So you might start with some planning and strategy sessions, and do interaction design and visual design, then development and QA, then launch. You might have a process that is much more multidisciplinary, so you might have all the disciplines working together in iterations, and that could be a thing in sprints or doing something like scrum. Um, or you might be going back and forth between these phases. Like going back from launch, to strategy, or to interaction design, or sometimes maybe from QA to design.

Whatever you’re doing, I think there is a lot to say about where authoring tools fit into the process. For instance, if you’re working in planning and strategy, you can make a huge difference by choosing an authoring tool that supports accessibility in the ways that I outlined before. So adopting a lot of the principles in ATAG, and really helping the, the user to get their accessibility right, can really help in the long run, because if that’s the case, then later on in the process, it’ll be much easier for the organization to create webpages that are accessible.

In the interaction design phase, you could spend a great deal on how content should be authored in an accessible manner. You could test the authoring process with people with disabilities, if user testing is part of your your interaction design discipline. If you’re doing visual design, you could provide guidelines for customizing color, so that contrast works well. You could work on accessible examples, like large enough touch targets.

Uh, all these sorts of things, uh, can help you in a design phase, to make sure that anyone who’s authoring, uh, web pages later on, because you might not be designing every single web page – it might happen in the templating phase, and then content people might work with designs that were created. So providing some guidelines there can really help in the authoring phase.

When we’re talking about development, you could make a great difference by picking a theme that has accessibility support, or plug-in with accessibility support. Because, again, you’ll help people who create web content to do that in a more accessible manner, or sometimes get a lot of accessibility for free, if there’s a carousel component or something that was built accessibly.

When it comes to QA, you could embed automated accessibility tests in the authoring process. So, for instance, if someone creates a new page and presses save that there are some tests that are running automatically. If you have some test automation engineers in your team, take advantage of them, and let them help make the authoring process more valuable as well in terms of accessibility.

And then, when you launch, you may have something that is much more accessible than if you wouldn’t have done all those, those things, uh, because many websites are launched without much required for accessibility, sadly. That still happens. And those websites might find that they then hire accessibility consultants, get a big list of issues that they never thought of, and it might take them a lot more time to, to work through all of those issues. So if you start very much in the planning phase, and think about accessibility in all of these different phases – and I know that’s not a new thing, but I just want to say that that really makes a big difference.

And if you think of authoring in all of these phases, that can really help create much more accessible things by default.

Now it may be clear to you by now, that at WAI we find authoring tools are really important part of web accessibility. And to that extent we’re, you know, we’re doing a number of things to, uh, to improve the situation. The first thing is, um, I just wanted to mention that if the ATAG standard itself is a bit of a long read.

There is also the Implementing ATAG 2.0 document that has rationale and intent for each of the success criteria, and a bunch of different practical examples. And I’ve taken some of the examples in this presentation from there, as well. It helps to understand ATAG a bit better, if you you get stuck in in the main ATAG document.

Now, something that I’m involved with personally is something called the WAI Guide project. And one thing that we’re creating as part of that, to help people use the authoring process that I just outlined right, really putting authoring tools at the front and center, to help you get your accessibility right. We want to help people find tools that support accessibility.

So we’ve created a list of authoring tools where you can filter by ATAG criteria and find tools that support accessibility. Now this is all still dummy data that you can see here – it’s not live yet. But we are working on getting our first entries into the list, and you know, if you create a tool, uh, that you think qualifies for this, and has accessibility support, and that meets one or more of the ATAG criteria, do get in touch. I’d be interested to, to hear from you.

Um, at the same time, we’re also working on something called the ATAG Report Tool, where you can report on ATAG criteria.

So you can fill in some details, and then you go to each of the guidelines, and then you will say whether it passes or fails. And you can fill in some information about each of them. Now this is kind of on an optional basis, so each of these are optional. You can fill in the ones that you want to showcase, so if you particularly deal with one of the criteria well, then you fill in those, and maybe leave the others empty.

Of course we want to have as many criteria as possible, that will also make it easier for people to find your tool in our list, but yeah, we welcome reports this way as well. In this tool, you are able to create a report in JSON or HTML and you can also publish that on your website to showcase how well you meet ATAG. And, ultimately, you would be able to create a listing in the authoring tools list that we’re working on.

At the moment there’s not that connection yet, because it’s still in its early phases, bu,t yeah. Very much interested to hearing your feedback on this tool, as well.

Now, going to conclusions, uh, what I wanted to share with you today is very much that CMSs are essential for an accessible web. It won’t surprise you, as people who work on, on CMS’s and plugins, and maybe themes, even, but yeah, your work is very important for website, web accessibility. I hope this, this talk gave some more insights in more ways that it, that it does.

Now, secondly, I think CMSs should really help content editors get their accessibility right. And I open this talk about, like, the number of ways in which they, they can, so yeah. Hopefully, we can really see our CMSs as accessibility assistants, um, and that’s the question I want to leave you with: How would you turn your CMS, your plugin, your theme into a better assistant for web accessibility?

For now, thanks very much for listening. You can find the slides on talks.hiddedevries.nl. It is also, it’s also going to have all the resources, links, and video, ultimately, I think. Uh, if you have any questions, feel free to get in touch. It’s hidde@w3.org, or you can reach out on Twitter. Now I’m going to be showing off in a live Q and A right after this, so then I want to just thank you for listening, and shout out to the organizers of WordPress Accessibility Day. Thanks so much for putting this event on, and inviting me to speak.

Ahmed: Thank you so much, Hidde, with that presentation. We actually was able to learn a lot of things that are very, very important to choosing CMSs, and we have a bunch of questions. So, let’s just start with the first one, while a few more comes in. So, the first question we have for you is, “What would be the most important feature you must change in Gutenberg to be completely accessible? If you need to correct something, you could also do that.”

Hidde: Yeah, so I’m probably not the right person to ask, because I don’t work on, on Gutenberg. I think one very interesting presentation that would get you up to date with the latest on Gutenberg Accessibility is by Joe Dolson at the WordPress Campus. The video of that has recently been released, and I think that will give you a good overview of the stuff that that team is working on, sometimes struggling with, uh, sometimes really massively improving. So there’s, there’s a lot of work happening on uh, on Gutenberg, which I think is great. It’s hard to make a, an editor of the future, and also do it accessibly, so I admire the effort. I think it’s, uh, there’s lots of great work happening there, but I don’t have too much to say about the actual issues there.

Ahmed: Awesome. Next one is your suggestion if you know of any good tool for developers to test the different levels of accessibility – A, AA, or triple A.

Hidde: Yeah, so, those levels, they actually exist in multiple standards. So most people will refer to them when they look at the WCAG standard, that has these, these three levels: A, double A, triple A. The ATAG standard does as well. Now, for the UAAG standard, there’s a bunch of different automated test tools that try to interpret the rules that are in WCAG as test rules and, and run automatically.

Um, for, for ATAG those don’t really, uh, don’t really exist. Uh, so at the W3C we have this project called ACT rules, where we try to bring different tool vendors together, and work on, uh, test rules, harmonize those test rules, so that every tool kind of interprets WCAG the same way. Uh, I think that’s an interesting project to watch if you wanna, wanna know more about different rules that exist.

Um, but yeah, you can definitely test automatically for WCAG – that is good for if you’re developing a CMS, because one of the ATAG guidelines is conform to WCAG, so that’s, that’s good for the editing experience, but it’s also good for, uh, for the output. So if you check the the page that is being generated, or that the editor is working on, if you run that through some automated test tool, you might also be able to prevent some accessibility issues.

Ahmed: Great. So, the next question is one of my favorite, and this one asks why are we all focusing on WCAG and not also on ATAG – is there, uh, bias? Is there a priority when we’re choosing?

Hidde: It’s, it’s a great question, um, and something we noticed at WAI, as well, and, and kind of partly the reason why I’m now assigned to, to work on this. Uh, we would love more people to embrace ATAG and show the benefit of embracing ATAG, not just for people who make CMSs, or sell plugins, but also for the companies that buy them. We feel like there’s a unique selling point to be made because so many organizations are now required by law to be accessible. And if your tool can help them, you might be able to charge them more money.

So we feel like there’s a lot of benefit to, um, to looking at ATAG. It’s not happening, or it wasn’t happening so much, we see more uptake in the last year, and more people talking about it. We heard, um, Susanna talk earlier about the accessibility of authoring tools, and we have this, this conference day today, so there’s more, uh, more talk about it, and that is great. We see more people focus on it. But I think one of the main reasons is that WCAG is a standard that is embraced by so many governments worldwide, and the one thing that they, uh, put in, into legislation often. ATAG is, is not, but it can really help to, to meet that WCAG legislation.

So I hope to have showed that a bit in this talk, as well, that these things can really play together.

Ahmed: Awesome. Since we talked about the content management system being an accessibility assistant, the next few questions focuses on WordPress. So, this is my personal question to you: how ready do you think WordPress is, right now, to serve as an accessibility assistant among the CMSs that are out ther?

Hidde: Yeah, so I look at a lot of different CMSs for, for my work, and my work is vendor-neutral, so to say, so I don’t look too much at specifics. I do know in WordPress there are things like, um, good options for alternative text for, for images, so there’s, uh, clear information on what you should do there, I think that’s very helpful. Um, there is also something about color contrast, I remember?

That will, um, show you if you have the, the wrong color contrast, and help you get it right. Uh, I think those are, those are great features. Um, I think there’s a page structure thing, as well, so there’s, there’s a bunch of things in WordPress that really can help people get their accessibility right. But also work to do. I think, uh, people of the accessibility team, and organizer of this, this event, will be more up to date with, with the things that are still being worked on.

Ahmed: Yeah, we can certainly look towards the future. So, if you had to rate WordPress as an accessibility assistant, how would you rate it amongst a double A and triple A – I know it can get controversial, but up to you, if you want to make any comments.

Hidde: I, I cannot possibly comment on that, because we we look at all the different CMSs, and we want everyone to, to meet as many criteria as possible. Good thing to mention there is that, um, it’s not about meeting all of ATAG, or being completely compliant. Just like with WCAG, that is pretty hard to do, and not many organizations do it. Um, and they have to, by law, but you know it’s a continuous process.

And one person updates one image, it could be inaccessible. The point is really to meet as many of these criteria as possible, and, um, you know every, every little bit really, really helps. And we see that a lot, that organizations are, are doing that. And also that CMSs are making small improvements, and they are all helpful, and the end users will, will be happy with these huge improvements, I think.

Ahmed: Uh, I must admit, Hidde, that our talk is certainly sparking a little bit of conversation in the chat feed, we’re getting a few more questions as we speak. We have time, so the next question is on Craft CMS. Is Craft CMS much better than WordPress in terms of the accessibility of the editor, thoughts?

Hidde: Are you referring to the W3C choice of, uh, of CMS?

Ahmed: I suppose so, I suppose that’s the question.

Hidde: Uh, so I’d really like to refer to the the blog post I’ve already published about this, because, um, I had a tiny part in, in discussing this internally, of course. Um, the main, the main points are we, we found not many, um, not many tools meet all of our criteria that we need, and that’s a lot of different criteria. So we, we need an accessible CMS, we need a CMS that supports internationalization, because we work with the global community, um, bunch of different things, basically, that we’ve decided our CMS choice based on.

Accessibility was, was one of them, and in my work I really tried to convince other organizations to do what we did – make accessibility part of that choice, because, uh, it’s going to help you in the process, like I showed in the slides.

Um, they did that, so the, the vendor that we hired for the, the new website they, they looked at these different, um, aspects and also at accessibility, uh, and they looked at how they, how they feel it is going to improve. And that is, you know, that’s a different, difficult thing to, uh, to assess. Because, you know, you cannot look into the future. Um, but yeah, it seems like, like for them that the, the Craft CMS had, had more commitment, uh maybe also from the top, to, uh, to make their accessibility features better. Um, but yeah, maybe WordPress will be a better choice for other organizations. It’s really tricky to, uh, to say, and I can’t comment in too much detail about that.

Ahmed: That’s fair enough. Uh, then, I, I think I can understand where you’re coming from. So, uh, such forum, when, where we discuss and we try to assess, uh, CMSs, if they’re accessibility-ready, so such questions are quite realistic, I suppose. But then again, I request you to go through our website and answer the question. I’m sure you will be given the link later, also viewers, we’ve also shared the slides to the presentation by Hidde. Before, I can ask you the last question. So, the last one says: Have you tried to use ACF and a headless front-end as editor to get accessibility content creation?

Hidde: Yes. Not in my capacity at the W3C, but I do have from personal experience with that. Something in general you can say about, um, so, so ACF is an Advanced Custom Field, right, so you define your own fields. Um, and what’s interesting about that, is that you could have just strings of text that people put in, and then you can invent your own markup around that, so you control all of the accessibility. Uh, you could do it badly, and you could do it greatly, right. So, like I mentioned, some CMSs don’t have the option to add captions to a video.

Um, if you create your own fields, then you can create a field for captions, so you can really control that, uh yourself, and then make it more of an accessibility assistant in a way, as well, because you could explain why they need captions, do it in a way that is the perfect tone of voice, and that will inspire people to do it, rather than, uh, make them annoyed.

Because I saw someone asked like, you know, how can we, uh, avoid that people choose a different CMS if we confront them with accessibility too much. Uh, so yeah we have that positive tone of voice. So that’s something you can really control, if you define your own fields. Uh, so yeah, that’s uh, if you are, uh, an integrator with, with WordPress, and I think that makes a lot of sense to, to try and find your own fields, and get full control over, over what these fields look like and what they say.

Ahmed: Thank you so much, Hidde, with your time, your effort, and patience with the questions. Um, before we can wrap up, I would like to ask you one personal question: How would you like the stakeholders out there, who can make a difference to initiatives such as WordPress Accessibility Day, we know this is only happening for the first time, uh, what if you had a, um, had a platform, if you had a voice, what would your message be out there for the people who can make the difference?

Hidde: Uh, the difference in choosing, making,

Ahmed: making such initiatives better and more accessible. Hidde: Uh, like the today’s event or…

Ahmed: Today’s event, yes. Yes, thank you.

Hidde: That’s a tricky one. I, I don’t know. I mean there’s, uh, there’s captions, um, so that’s, that’s good. Uh, I don’t know. I haven’t looked too much in, into the accessibility aspects of today’s event.

Ahmed: I’m sure we will have your support for the future, so on that note, we come to the end of this session, um, your CMS is an Accessibility Assistant. I want to personally thank Hidde for being patient enough, and answering all the questions, um, also I want to give a huge shout out to Harish, who has been acting as the moderator for this session, posting the questions on our site.

Also, I would like to give a huge shout out to the session manager, Stefano. working in the background. So I also would like to thank everyone for attending with Hidde and myself. You can continue the conversation using hashtag WPAD, hashtag WPAD2020 add the at of @wpaccessibility. Don’t forget to attend the next talk: If it’s true, it ain’t bragging: choosing a CMS for accessibility”, with Mitchell Evan and myself, right at 9:00 am UTC, here in the same time. Until that happens, see you right here after the break. Thank you so much, Hidde. Bye bye!

Hidde: Thanks so much for having me!

Transcript

David Vogelpohl: Hello, everyone, and welcome back to WordPress Accessibility Day. My name is David Vogelpohl from WP Engine, and I’m proud to be your host for the session “Using Smart Speakers for Accessibility,” with Chip Edwards. I’m honored to introduce Chip in his session, “Using Smart Speakers for Accessibility.” Chip is a partner at CreateMyVoice.com. He helps content producers engage audiences on smart speakers like Amazon Alexa and Google Home. Chip is a teacher–hopefully he’s a good one today–a speaker, and technologist who is passionate about connecting WordPress content to the new voice technology.

Chip, welcome, and glad to have you here.

Chip Edwards: Thanks, glad to be here and be able to talk with us about the session. This is good stuff.

David: Looking forward to it.

Chip: Thanks, David. I appreciate it. Ready for me to share my screen?

David: Yes, sir, ready to go. Let’s get it goin’.

Chip: Okay, let’s see.

David: I love your background, by the way.

Chip: Oh, thank you, heh-heh. Share computer sound ’cause we’re gonna do some today. Let’s see. Hopefully that is up and runnin’. Okay, so we all care about accessibility, including making our websites accessible for the visually impaired. Stuff like using header tags properly, makin’ sure that the alt text has meaningful information. These are important so that screen readers can turn our text into audio.

But today I wanna focus on how the adoption of smart speakers is changing how we think about design. If you think about it, smart speakers are kind of like screen readers but more so because the primary interaction with our content is verbal instead of visual. When thinking about voice-first design, our mind-sets shift because now we aren’t talking about doing something special for the visually impaired.

With smart speakers, if your content doesn’t work well for the visually impaired, it doesn’t work well for anybody on the platform. And before we get goin’, I want to acknowledge that smart-speaker platforms are not necessarily platforms for accessibility, however, I wanna show you how smart speakers are causing a significant shift in our UI/UX design thoughts. Smart speakers are shifting how we access compute resources. And I’m gonna be using some smart speakers today.

I’m actually recording some of ’em, but it kind of doesn’t matter on your end. So now would be a good time to un-mute your Amazon or your Google device. Okay, there’s three points that I wanna cover in the next few minutes. First, let’s talk about how smart speakers or voice assistants make tasks easier. The goal is to reduce the friction to getting stuff done, to make it easier to find things, to turn things on or off, to get directions, to hear content, in essence, to make our lives more convenient and to make it easier to get computers to do things for us.

Next, I wanna demonstrate what’s currently happening with voice assistants, and then lastly, I wanna give you some bonus material around verbal branding and why you may want to secure your verbal domain name sooner as opposed to later. So let’s get started. Smart speakers come in many shapes and sizes and from a number of manufacturers. We’re most familiar with devices from Amazon and Google.

They’ve got, like, 85% of the smart speakers out there, I think, that are producing, but there’s many traditional manufacturers of speakers as well, and they’re now making their speakers smart by adding microphones to them and connecting ’em up to one or more of the digital voice assistants, almost always Amazon’s or Google’s voice assistants, but there are a few others out there. In a recent article on Voicebot.ai, they reported on where people are putting these smart speakers.

While it used to be the living room and the kitchen, now the bedroom is the most popular location at over 45%. The living rooms got about 43%, and the kitchen with 41%. The numbers add up to more than 100% because people are–once they start using these devices, they’re finding them really convenient, and so they’re actually putting–they’re actually purchasing multiple smart speakers and putting ’em in a number of locations. By the way, now more than 13% are putting ’em in their bathroom as well.

In an article titled “The Future of Voice and the Implications for News,” published for the Reuters Institute, Nic Newman says, “Voice goes way beyond smart speakers to become embedded in every device”, because the tech companies view these voice-assistant devices as a way to support and anticipate user needs. These tech companies want to have their voice assistants everywhere so they can help us anywhere we are. In 2018, “The Wall Street Journal” reported on Amazon’s direction for their smart speakers. “Amazon had more than 10,000 employees working on its Amazon Alexa virtual assistant at the time, and they wanted to expand Alexa in the offices, cars, and even hotel rooms,” and they’ve got more locations that they’re actually working on right now.

Matter of fact, have any of you seen the latest Buick commercial where they’re arguing over whether it’s an SUV or an Alexa? This idea of our voice assistants being with us everywhere is actually starting to materialize. Last year, Sundar Pichai, the CEO of Google, said that he was “Moving Google from a company that helps you find answers to a company that helps you get things done.” Subtle shift, but they’re changing that, and as you look at even the voice search results, you see how they’re actually making some of those shifts.

Well, it didn’t start off this way.

Now the same voice assistant that’s found in your smart speaker is also in your smartphone and in your cars, and in the latest is in wearables, like glasses frames or earbuds. My favorite place is my earbuds actually. Now my voice assistant can be with me anywhere, places like the gym, where I like to listen to blogs and podcasts, and when I’m in the grocery stores, shopping, and I can just ask for “Hey, what’s on my shopping list?” I’ll be glad when they have these voice assistants in every elevator.

There’s already a computer waiting for somebody to touch the button. Why do I have to touch the button? Why doesn’t the computer just respond when I say, “Third floor, please”? I’m predicting that voice technology will continue to get better, and soon, we’ll start relying on these devices because they make tasks easy, and then, just like our smartphone, we won’t know how we ever lived without the voice assistant. So now I’d like to demonstrate how companies are currently using voice technology.

Most people are familiar with using their voice assistant for things like turning on the lights, adding items to shopping lists, getting the news or the weather or navigation, actually, like letting Siri or Google to find the best route home. But Google and Amazon have made a way for companies to make these voice assistants smarter by building a voice app. Amazon calls these voice apps “skills.” You may have heard that. Google calls these voice apps “actions.” I’ll use the generic term of “voice app” through the rest of this.

But instead of me just telling you what companies are doing, I figured it would be better for me to show you. I just mentioned about using a voice app to add capabilities to these voice-assistant devices. There’s one new term that you need to know. It’s called “invocation name,” sometimes referred to as a “verbal domain name.” So just like your website has a domain name, your voice app has an invocation name. The invocation name is how Google and Amazon know that the user wants to talk to your voice app. You’ll want to own your invocation name.

Well, let’s look at an example of a voice app created by Capital One. Here’s a screenshot from the Capital One website. Notice they’re promoting the Capital One voice app to their customers. I actually got a Capital One credit card just to be able to use their voice app. Now, by using the Capital One voice app, I don’t need to sit at my computer and log into their website. What if I could just ask for what I need and let the computer do all the work for me?

Check this out: Alexa, ask Capital One what my credit card balance is.

Alexa: Your current Quicksilver card balance is $1,227.44. Do you want to know when this bill is due?

Chip: Yes, please.

Alexa: The payment of your Quicksilver card is due March 17, 2020. Do you want to pay now?

Chip: No, thank you.

Alexa: No problem.

Chip: You probably noticed that the Capital One voice app not only answered my question about my credit card balance, but it assumed that I probably wanted to know when my balance was due, so it asked me, and it even asked if I wanted to pay my credit card bill, all just by using my voice.

But what if I’m looking for something specific like recent transactions or how much I spent at a particular merchant? Well, all I have to do is ask. Alexa, ask Capital One what my recent transactions are.

Alexa: Between April 30 and May 30, you have 17 transactions for a total of $535.63. It looks like you also had a credit of $218.49; $72.15 at Harris Teeter on May 27, followed by $19.28 at Circle K on May 27, and $4.88 at Harris Teeter on May 26. Would you like to hear more?

Chip: That’s all. Alexa: Good talking to you today.

Chip: Okay, or how about this one. Alexa, ask Capital One how much I paid to CVS last month.

Alexa: Between April 1 and April 30, you spent a total of $187.85.

Chip: Okay, now voice technology is still advancing. It’s still in its early phases, but the capabilities are growing exponentially right now. So while the voice app is the presentation layer, obviously the information is coming from the Capital One systems. So I’m not sure what time zone you’re in, but in North Carolina, it’s supper time, so let’s order pizza. Pepperoni, jalapeño, and extra cheese are my favorite toppings.

You might not know this about me, but I live a little bit outside the city, in the country on a little farm. It’s close enough to the city to be able to commute in, but it’s far enough that I’m outside the delivery zone for Domino’s, but that doesn’t stop me from ordering a pizza. I just have to go pick it up. Since I have an Alexa wearable and Alexa auto–and actually, I’ve got Google and stuff like that too, but, anyway, I can actually start driving to Domino’s and say, “Alexa, I’d like to order a pizza from Domino’s.”

Alexa: What type of crust do you want for your pizza? You can choose hand-tossed, gluten-free crust, Brooklyn style, hand-made pan, or crunchy-thin crust.

Chip: Crunchy-thin crust.

Alexa: What size would you like for your crunchy-thin crust pizza? You can choose medium or large.

Chip: Large.

Alexa: I’ve got a large, thin, cheese pizza. What toppings would you like with that?

Chip: Pepperoni and jalapeños.

Alexa: Okay, pepperoni and jalapeño peppers. Would you like any more toppings on that?

Chip: Extra cheese, please.

Alexa: Okay, I’ve added a large, thin pizza with pepperoni, jalapeño peppers, and extra cheese to your order. What would you like next?

Chip: I’d like to check out now.

Alexa: Would you like to complete your order by adding a 16-piece Parmesan Bread Bites for $3.99?

Chip: No, thank you.

Alexa: Your order contains one pizza. The total is $18.24, after taxes. Would you like to review your order details, or are you ready to check out?

Chip: I’m ready to check out.

Alexa: Your order should be ready for pickup in about 12 to 22 minutes. Do you want me to place the order?

Chip: Yes.

Alexa: Okay, I’ve placed your order. Your day just got cheesier.

Chip: Notice how they walk me through the entire process of ordering a pizza. They even tried to up-sell me for the cheesy sticks. Anyway, I think it was actually quicker than pulling out my cell phone and finding the number for Domino’s and talking to a real person. And since it takes me about 15 minutes to get to Domino’s, perfect timing. I can get in my car and head out there, and it was gonna be ready when I got there.

So many of you listen to podcasts, or maybe you were a podcaster. How easy is it for you to listen to a historical podcast or try to let people know, “Here’s how to listen to this podcast that I did in the past that’s got the information that you’re looking for”? In this “Audio Banding” podcast by Jodi Krangle, she has a lot of great information, but episodes 35 and 36 are actually her most important episodes, and you’ll see why in just a second. Jodi’s invocation name is “Audio Branding.” What if you could listen to any past episode just by saying something like, “Okay, Google, ask ‘Audio Branding’ to play episode 35.”

Google Assistant: Got it. Getting “Audio Branding.” ♪♪♪

Jodi Krangle: Welcome to “Audio Branding,” the hidden gem of marketing. I’m your host, Jodi Krangle. In this podcast, we’ll discuss just how sound influences our behavior. I generally talk about this in the context of advertising and marketing, but there are other places this is important too. I really feel that it plays a much more important role in our lives than maybe we realize, so let’s delve a little deeper. This is the first part of my interview with Chip Edwards. Whether you like it or not, smart speakers like Amazon Alexa are used by millions of people. The same voice-assistant technology found in smart speakers is also used in smartphones, cars, wearables, and more. Voice assistants are everywhere, and they’re changing how people consume content.

Amazon and Google have made a way for you to register your brand on these voice assistants. My guest today is technologist and teacher Chip Edwards, and he’s spoken across the country about the opportunities available on this new platform and how you can own and manage your verbal brand on these new devices. The future is here, and we’re gonna talk about it. Thanks for joining me today, Chip. I really appreciate it.

Chip: Okay, so now you know why episodes 35 and 36 are her most important episodes. It just happened to be the ones that I was on for. So, but let’s–so audio is already relatively easy to be able to put on to smart speakers and digital voice assistants, but let’s look at this one here. Many of you actually know Aida Correa. In addition to being a fantastic speaker, she’s got a wonderful blog. So what if you could listen to her blog posts while you were commuting to work? Aida’s voice app connects to her WordPress website and makes her blog posts available. Let’s start her voice app by using her invocation name, “Love Built Life.” Alexa, start “Love Built Life.”

Alexa: Welcome to “Love Built Life.” There is a new blog post available, titled “The Joy of Overcoming: A Decade in Retrospect, Part Two.” Would you like to hear the new blog post?

Chip: Yes.

Alexa: “I didn’t bring you on this journey of the last ten years of my life to give all the gloom and doom. No, sir, because you’ve seen the last few years of this decade that has been a turnaround in my situation and my friends. She met a nice young man at work, and they are now engaged to be married, yay.”

Chip: And the blog post goes on, and it would’ve read it for you. I’m just doin’ the first piece of each of these pieces of content. So the point is that she can continue to write blog posts like she likes to do, but now anyone can listen to them just by asking. So William Jackson has been a WordCamp speaker and supporter all over the place. I’ve run into him in I don’t know how many different WordCamps. He’s also a prolific blogger with content that everybody should hear. Read, hear? Both, actually. William wanted to add some character to his blog posts though, so not only does his voice app connect up with his WordPress website, but instead of having the default smart speaker voice read his blog post, his sound is different. William’s blog and invocation name is “My Quest to Teach.” So let’s ask for it. Alexa, ask “My Quest to Teach” to play the latest blog post.

Alexa: This is blog post 77, and it’s titled “Using WordPress to Share Your Voice and Address Social Issues.” Brian: “‘Using WordPress to Share Your Voice and Address Social Issues,’ instructor, William Jackson, M.Ed. Intro: there is a growing need for content creators from diverse backgrounds to tell their stories, to share their experiences and to encourage the need and acceptance for diversity in using the ability to speak, write, teach, and deliver transformative content.”

Chip: So he had a different voice, actually, read his blog post, and it’s all done–this is all automatic, and matter of fact, these audio clips were done earlier in the year. They actually just, both Google and Amazon, upgraded their text-to-speech synthesis process, so the voices are actually getting significantly better. Anyway, let’s look at one more. So I write a blog as well. I use my blog posts to not just write about voice technology but to demonstrate some of the possibilities. So my invocation name is “Create My Voice,” and what you’re about to hear is me asking my smart speaker to play one of my past blog posts.

And just to prep you, you’re going to hear the voice assistant whisper, use different English-speaking voices, and even use voices from other languages, all from within my blog post. And in a minute, I’m gonna show you, kind of, how some of that is done. And so I’m gonna actually have it read my entire blog post. It takes two or three minutes, somethin’ like that, so we’ve got a few minutes for it. So let’s listen to my blog post get read by a smart speaker. Alexa, ask Create My Voice to read blog post 27.

Alexa: Let’s get started. This blog post is titled, “Bringing Life to Your Content.” Greetings, I’m Alexa, Amazon’s smart speaker voice assistant. With a little help from Create My Voice, I can read your blog posts aloud. Now your audience can listen to your blog posts while making breakfast, working out, or driving to work. It’s really easy. The Create My Voice team connects me up to your blog posts using your RSS feed and a custom voice application. This means that you can keep blogging like you always have and take advantage of the new smart-speaker platform. Your audience will ask for your blog by name, and I’ll read your latest post.

I can read your older posts as well, and I’ve heard this is available on Google devices, including every Android device on the planet. But since I’m an Amazon Alexa, you didn’t hear that from me. In addition to just reading your blog, I can help you bring life to your blog. If I was going to tell you a secret– [whispering] I would whisper it to you. [speaking at normal volume] But even cooler than that, I can change my voice. This might be difficult to describe, so let me demonstrate. I have several friends.

I’ll have them introduce themselves. [speaking in British accent] Brian: My name is Brian. If it’s not clear, I’m from across the pond. [speaking in American accent] Joanna: Hi, my name is Joanna. I’m really glad to meet you here. [speaking in Indian accent] Raveena: Greetings, my name is Raveena. I’m also available to read all or part of your blog posts.

Alexa: I told you it was pretty cool. Being able to use multiple voices in your blog posts can bring your blog posts to life in a world where your audience wants to listen instead of read. In addition to multiple English voices, I can also speak using voices from other languages.

I’ll show you by greeting you in French, Spanish, and German. First, a male French voice. Mathieu: Bonjour. [speaking French]

Alexa: Next, a female Spanish voice. Conchita: [speaking Spanish]

Alexa: And, finally, a male German voice. Hans: [speaking German]

Alexa: Pretty cool, don’t you think? Like the additional English voices, these are available to bloggers to expand how you communicate through your blog posts. This concludes the post titled “Bringing Life to Your Content.” Would you like to hear the next blog post titled “How Does Voice Technology Work, An Introduction”?

Chip: No, that’s all.

Alexa: Thank you.

Chip: So what I wanted to demonstrate there is that this idea of being able to take our content and make it available or present our brand is–there’s a lot of stuff that could happen in that space. So while you can go to my website and read my blog posts, sometimes it’s more informative or fun to actually listen to them. But you’re probably wondering how that magic happens. So similar to HTML tags, there’s a standard set of tags that provide directions to the text-to-speech process. It’s called SSML, or Speech Synthesis Markup Language.

Let me show you one of the tags. So here’s an excerpt out of one of my blog posts. Looks pretty standard, but let me pull up the source. So you’ll notice there’s a new tag that I’ve embedded into the blog post, a voice tag. There’s that one, and then there’s that one right there. So let’s listen to how Amazon Alexa turns this text into speech. Alexa: “‘Alexa and the Elderly.’ Comments from participants.

This first commenter shares how Alexa opened her world.” Raveena: “I thought Alexa was just for things like turning on lights, but it opened a whole new world. You can do anything that you want to do.”

Alexa: “And this last comment references how using Alexa helps someone with physical difficulties.” Brian: “I have a genetic tremor. So entering data is a pain. The ability to speak a command and get something to happen is a wonderful thing.”

Chip: So notice that my blog post looks like any blog post or a excerpt out of my blog post here, but when it gets turned into speech, we can bring life to our blog posts or to any of our written content as we use these voice assistants to be able to communicate with our audience. So normally, that’s where I would stop, but I’ve got a few more minutes, and so I’ve got some bonus material for you. So I’ve used that term “invocation name” a number of times, so let’s–I wanna dig into it just a little bit because there are some interesting nuances with this idea of an invocation name.

So with our websites, one of the first things that we think about is choosing a good domain name that represents our brand. Now, in 1995, we could just use our brand name as our domain name, but it’s not quite that simple anymore. Matter of fact, sometimes we pick our domain name first, and then that’s how we decide what our brand name is, but getting a good domain name now is a little bit more challenging.

But when we think about the voice-assistant world, we have to have to think about sounds, not sights.

So let me explain what I mean. Let’s say that I’m really good at giving my two cents out to everyone I meet, and I am, but anyway, so, but, obviously, I would want to build a website and get the domain name of “TwoCents,” right? So let’s say I could get the domain name at “TwoCents.” Okay, I’m good. But what about this domain name of “Two-Cents.com”? Or “2Cents.com,” with the number 2? Or “ToCents.com,” spelled T-O Cents instead of T-W-O, or T-O-O Cents.com.

And that’s not even addressing the idea of, you know, the “dot org,” the “dot net,” “dot ai,” “dot–” all the other top-level domains out there. So when we think about branding, and we think about “I’m building a website, I need a domain name,” we think kind of visually when we look at that, but when we look at the verbal side of it, how many different ways are there to say, “Two Cents”? Well, there’s only one way of being able to make the sounds of “two cents,” and this was just the “Two Cents” with “Cents” spelled C-E-N-T-S, but what about the “Two Cents” when we use a different form of “Cents”? Or the other form of “Cents”?

And so, in other words, when we look at this, we have this idea of this collision that happens because sometimes in the visual world, we think that “Here’s my brand,” but when we go to the audio world, sometimes we have these collisions, and so who’s gonna own the voice app that’s connected with the invocation name of “Two Cents”? So how that works is, with Amazon, what they did is they said, “Okay, we’re gonna let multiple voice apps have the same domain name or the same invocation name, same verbal domain name.”

It causes some confusion because now the user has to figure out which version of “Two Cents” did they want because there’s multiple of ’em out there. Google went the other way. They went the same way that the domain name is. They said the first person that builds that Google action or the voice app in the Google voice-assistant world, they’re the ones that whoever does that now owns the verbal version of the sounds “Two Cents.”

So, in that case, it’s kind of like 1995 right now. You can get your invocation name, but the first person that gets it is gonna own it, and they’re gonna be the ones that decide what is that dialogue that happens whenever somebody invokes that invocation name of “Two Cents” or whatever your brand name is. So that’s one of the things that you wanna think about in the idea of verbal branding of–your domain name or your verbal domain name is somethin’ that you’re gonna wanna look at, you know, I would suggest sooner as opposed to later. Before, we were usin’ the domain–or the invocation name of Capital One. Let’s look at that one, even.

So if I’m thinkin’ about Capital One, CapitalOne.com, right, and they probably own that name, but there’s multiple ways of spelling “Capital,” and there’s multiple ways of spelling “One,” and even words that sound like “One” or close enough that you might not be able to–the voice assistant might not be able to pick up the difference between the sounds, and so, when you register for an invocation name, you’re actually registering for the sounds that happen, not the spelling that happens. Okay, so let’s start to finish up with a quote here.

Britt Armour from Clearbridge Mobile wrote that “Voice is the future for how brands are gonna interact with their customers.” So let me do a quick recap before we get to questions. Voice assistant technology means that the visually impaired don’t have to figure out how to navigate a sighted world because we’re using computers to shift the cognitive load from the user to the computer. This is a transformational mind-set shift, and it’s changing how we think about user-interface designs. We’re changing our UI/UX from “How can we make computers easy to use? How can I put a good user-interface design so the user can figure out how to find what he wants or how to do what he wants?” we’re changing that to “How can we make computers– or how can we use computers to make it easy to get stuff done?”

So we’re shifting the cognitive load from the user having to figure out how to make something happen, to the user just says what he wants, and the computer has to figure out what that user’s intention is or what that user wants to happen, and now the computer performs the action. And so we’re shiftin’ the cognitive load off of the user and onto the computers, and that’s a change in how we actually design systems.

And you’ll see that change, not just in voice assistants, but you’ll see it in chatbots and stuff like that where a good chatbot or a good voice assistant is movin’ that cognitive load off of the user, into the compute space, and to be able to do more work, which is a good thing, but it’s a mental shift for us developers and designers.

And then there’s one final tip that I wanna leave you with, and that’s I would suggest that you consider getting your brand’s invocation name sooner as opposed to later while it’s still relatively easy to get them because there’s not a whole lot of voice apps out there right now, but companies are doin’–there’s a lot of companies actually workin’ to build their presence on these voice devices.

Okay, so here’s my contact information. I love talkin’ about voice technology. I’m available for strategy sessions, special engagements, and how I can build a voice app with your invocation name so that you can start usin’ this new platform as well. And that’s what I have for you today, and see if there’s any questions.

David: There totally are questions, Chip. Thank you so much. That was awesome. We’ll go ahead and start with the first one. Get my video going there. Hello, everyone. All right, first question, “What practical applications in the accessibility space that we’ll see first in terms of this smart speaker technology or is in place already? So what practical applications in the accessibility space that we’ll see first in terms of smart speaker technology?

Chip: So there’s two ways that this can happen because you noticed the first–what I was tryin’ to demonstrate is the idea that now people can just ask for what they want, and as the voice apps are built out more, now the computers are actually figuring that out and responding to them. So instead of having a screen scraper go through and read through a website and try to find different pieces of information and leave all that work on the visually impaired to figure out “How can I find what I want, and how can I make things happen?”– very, very difficult. I mean, they’re good at it. I’ve seen some of the visually impaired actually use some of those screen readers, and it’s amazing, actually. But we’re still putting the cognitive load on them, and we try to remind people, as they’re building their website interfaces, to do a good job to make it so that it’s relatively easy for the screen readers to get the information, but we’re still leavin’ the cognitive load on the user, on the visually impaired, to be able to do that work. Voice technology changes that all on its head because now they can just ask for what they want and get it. We’re moving that cognitive load into the compute space. And it also does the other thing. I actually was in a conference earlier this year, and there was somebody that actually did a presentation, and she wasn’t able to speak, but she was able to type. And so what she did is that she put her whole presentation in a written form and then used voice technology to turn that written form into audio so that we could all listen to what she was trying to communicate, and with this new technology and the different tools with SSML and stuff like that, it’s actually making it so that she can actually bring a lot of life into what she’s communicating. And so I see this voice technology kind of happening in both sides of it and really helping those with accessibility needs to be able to–it’s now their world that we’re playing in as opposed to them havin’ to play in the sighted world or those of us who don’t have those needs.

David: That was really–it struck–it stood out for me as you were playing those Alexa examples how different and more purpose-built the content sounded than what you would hear from a screen reader, reading a web page. So my next question is, you know, how should people think about creating their content for voice? Should it be specific? I know you kind of showed the example of someone, just, kind of, feeding the blog through, but I’m guessing you’re thinking about the context of the content related to, you know, voice, specifically, when you’re leveraging it. Is that true, or how do you think of that?

Chip: That’s actually a really good point, and actually, a really big area to talk about because there’s two sides to that. One of ’em is “How can I make sure my content is in a form that represents my brand, and when it gets converted into audio when people listen to it, how can it represent my brand well? How do I write well, how do I make sure my heading tags–” because I can make something look good on my website that doesn’t turn into audio very well at all. But the other side of that is, lots of times, in our websites, we think of monolithic text in long form, and we’re expecting especially with somebody using a screen reading to have to jump through all that to find what they’re looking for, and when we think about actually preparing stuff for voice assistants, we now need to think of how do I put this content in a capsulized form so that people can ask for the piece that they want as opposed to entire, long-form piece of it and have them listen to the whole thing to be able to figure out what they want? And so it does change how you actually think about putting your content together and where you store it and how you store it and stuff like that, so, yes.

David: Awesome. Thank you.

Chip: Good stuff to think about.

David: Yeah, you showed some examples of Alexa reading the content and different accents with different genders. I know certainly a lot of people here at Accessibility Today strive to be inclusive of those that represent their brand. How do you think about the choice of voice? Do brands typically choose a voice, or will they vary it based on the author? Or I don’t know if you’ve given much thought to diversity as it relates to the voice that you choose for your content?

Chip: So that’s a good question, and from a brand perspective, there’s kind of–there’s a wide range of that because you’ve got from the simple of “I’m just using the default reader,” whatever that is, and in some cases, like, I think, Google is pretty good at letting the user choose what voice they want to be able to hear their content in. So there’s–that’s a good thing. But when you think about the ability to use those voice tags and be able to, kind of, add some differentiation in your content, so there’s some opportunities there, and as you’re–what I tried to do is saying, okay, “Here, we’re gonna read back and forth, and we’re gonna use different ethnicities to be able to read content, to be able to add some additional diversity and an interest into a blog post,” but then, from a branding perspective, you can actually even go as far as–I think it was KFC, that they actually recorded their own voice, Colonel Sanders’s voice, and they have a whole set of specific for their brand, their voice models, and now they can do the same thing. They can put in their text, and it gets converted into the Colonel Sanders’s voice, using that voice model, and it could be very brand specific. So there’s a wide range but definitely something to think about as you’re looking at diversity of making sure that you’re not just saying, “Hey, I want this US male to read all of my content.” It’s something that you can think about ’cause there’s multiple US male voices and female voices and other English voices, and then other language voices as well. I mean, there’s lots of opportunities there to be able to demonstrate diversity in your content.

David: Yeah, I’m sure it gets tricky when you start thinking about the voice representing the author as well.

Chip: Right.

David: Thank you for that. All right, next question, “What types of smart-speaker automations will most benefit the Ally community that you can share with us?” So what is, you know, most exciting for you, for how it will support the Ally community accessibility?

Chip: So, for me, the biggest excitement in this space is this idea of design-thinking shifts because a lot of us, when we think of UI/UX, we’re really thinking about “How can I build this for a sighted person on my site to be able to navigate my site well?” And lots of times, it’s a secondary thought of, “Oh, wait a minute. What if–how can I support somebody that’s visually impaired of some way?” And, “Okay, how much effort am I willing to go into, to be able to accommodate that?” Because my sighted design is really important to me. I like my sliding windows and all that kind of stuff that sometimes give grief to, you know, those who are visually impaired, but it’s–and so it’s a balance of “Which do I want more?” I think that the opportunities in the voice space though kind of turns that on its head from the perspective of “I’m designing for all of my audience the same now because, if I have to build this system that nobody is seeing, the sighted part is secondary, and all of it is audio up front. How can I accommodate everybody, not just a sighted person?” Matter of fact, the first time I did one of my talks, somebody came up to me afterwards, and he said, “You just did this fancy new technology, smart-speaker world talk, but really, it was a diversity talk in disguise, wasn’t it?” Because we talked about this idea of “How do I present my information in such a way that everybody is gonna get the same experience out of it?”

David: I think that’s a great observation, that paradigm shift towards voice and kind of being assistive in that sense of getting brands on board with accessibility. Next question–

Chip: Now, just one more comment.

David: Oh, yeah, please.

Chip: Now, and I– want to say it again–is voice technology doesn’t solve all accessibility issues. It does solve some accessibility issues, and it makes us think about how we can deliver our content or engage with our audience in a way that supports accessibility, but it’s not–it doesn’t solve all of our problems. It’s just a tool, a platform that helps us get out of some of our mind-set of “I’m supporting this set of people, and now, wait a minute, I should also help these people too. How can I do that without messing up my cool stuff?” It makes it so that, no, you’re building cool stuff that happens to be for everybody, not just by sighted people.

David: That’s a great point of distinction. Thank you so much. Next question is from Amber Hinds. Hey, Amber. I know you from around the way. “How do voice tags impact the experience for users on screen readers like NVDA, JAWS, and VoiceOver? Do they read those tags or just ignore them?”

Chip: So I don’t know the answer to that question. I do know that those voice tags and some of the other SSML tags, they’re a set standard, so it’s not like, “Oh, this is only done for smart speakers.” It’s a set of standard tags, and there’s actually quite a few tags that you can do a lot of different things with. So my assumption is that a good, well-rounded screen reader would use those tags in a way.

I do know that the voice assistants use the–accommodate the–some or a lot of the SSML tags and in–to varying degrees. Like, Amazon, I did the Amazon examples on purpose because Amazon supports almost all of the SSML tags, and so I was able to do the voice switching and stuff like that. Google doesn’t support the voice tag yet, so they’re still building out that tag, but they support most of the other SSML tags. So my assumption is yes, they would either ignore it, and/or they would be able to handle them, but I don’t know enough. I haven’t experimented with them to be able to say for sure.

David: Thank you, thank you; if you know the answer, maybe you can post it in a YouTube chat and–

Chip: There you go. That’d be good.

David: List an answer there. Chip, I think you probably spurred a invocation name, like, rush, like, the domain rushes when they would release the new TLDs, and, like, everyone would go register all these domains. I feel like that last slide of yours really probably got some people off their rear and were, you know, Googling how to figure that out. Have you experienced–you mentioned how not a lot of people that are leveraging the invocation names, but have you experienced yet when a brand has an invocation name that’s already claimed, that’s, like, their brand and that kind of fight that we see over the domain name space?

Chip: So, I–how do I answer that right? So what I can say is that to be able to get an invocation name, you have to build a voice app and have it certified by the respective party, either Amazon or Google or Samsung or–and in that certification process is when they say, “Okay, yes, your voice app is certified, and that invocation name works for your voice app.” And in Google’s case, it’s like, “Okay, you now own that invocation name.”

What I have seen is–matter of fact, I had one of my clients call me up the other day, and he’s a podcaster, and when people were asking for his podcast, which is “What’s your Excuse”–there’s a multiple “What’s Your Excuse” podcasts out there, and Amazon was choosing somebody else’s “What’s Your Excuse” podcast by default. And so he said, “Hey, what can we do about that?” Well, we can build a voice app, and we can use the invocation name of “What’s Your Excuse” and so now when people say, “Play ‘What’s Your Excuse,'” Amazon says, “Oh, hey, there’s a voice app out there with the invocation name, ‘What’s Your Excuse.’ We’ll use that to decide what content should be delivered.” And so now, when you say, “Play ‘What’s Your Excuse'” on the Amazon devices, his podcast gets played instead of Amazon getting to decide who–whatever one they wanna play.

So the answer is yes, the invocation name is gonna kind of change thing on its head. Very, very few people know that this invocation name is gonna be a really big deal in the voice assistant space. And so that’s usually at the end of my talk. That’s one of the big things, it’s like, “Okay, wait a minute, so what do I do? Because I got a brand, and I wanna manage that,” so–

David: It doesn’t sound like SEO is dying, Chip.

Chip: No, no.

David: Feel like SEO is here to stay. Well, this was amazing. I learned so much from this presentation, thank you so much.

Chip: You’re absolutely welcome. Thank you for havin’ me. This was–it was great to talk, and good questions. I appreciate ’em.

David: Yeah, thank you, thank you, I have a little history of voice, so I had wanted to nerd all out on it, but I wish we had more time, but thank you all for attending this session with Chip Edwards and myself.