Accessible Websites Benefit Everyone

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.