Slides & links from the presentation are available.
Transcript
[00:00:00.250]
All right, introduction to accessibility. All right, first question that I always get is where are slides and links? So here’s where slides and links are. The overview for what we’re going to talk about in today’s presentation. First we will start off with some definitions and laws. Then we will get into how I ended up in accessibility.
[00:00:22.690]
Then we’ll talk about what accessibility is and how does it affect you and your clients. Who does accessibility apply to? Why can’t you just use an automated system and do everything for you, and then how do you test for it and how do you get started with it? So first up is definitions and laws. This is usually the boring part.
[00:00:48.030]
First thing that you’re going to find when you talk about website accessibility is something called WCAG. That’s WCAG for web content accessibility guidelines. And these are maintained by W3C or the Worldwide Web Wonsortium. And these are the same people who create the standards for CSS and HTML and lots of other web standards. And just like CSS and HTML, they are versioned.
[00:01:19.690]
Unlike CSS and HTML, they have levels, and the level basically means how many requirements? So there’s kind of the easy, there’s the medium, and then there’s the hard. So level A is the easiest, and that’s generally considered the bare minimum. If you’re not doing that, you’re really failing. Level AA is generally considered the standard. In almost every single lawsuit, when there is a judgment against the website, they say you must meet level AA.
[00:01:56.470]
And level AAA is really considered above and beyond. Some of those items are pretty simple. For example, in level AAA, your text to background contrast needs to be a seven for the contrast ratio. And honestly, that’s pretty easy to do and a good practice. But there are other elements of AAA, such as having ASL interpretation, which are a significant expense to add.
[00:02:28.350]
So most websites will ignore most of AAA. A11y or A eleven Y is frequently pronounced ally or ally, and I kind of like it because it means friend. An ally is a friend of yours. It’s someone that you are trying to align with and be cooperative with. And I think that is a great idea for accessibility, being friendly to people who have challenges.
[00:03:02.970]
The abbreviation comes from Twitter, and what happened was they removed eleven letters between A and Y. Just like for internationalization, they remove 18 letters between I and N. Last up is overlay widget. This is a technology that sits between the website and the user. It normally comes through javascript and it modifies the final website before it gets presented to the user.
[00:03:39.460]
Now on to a couple laws in the United States. The ADA, or Americans with Disability Act was passed in 1990 and it applied to places of public accommodation. So where the public congregated. The problem was in 1990, Internet was not widely publicly accessible. It just didn’t exist for most people. 1995 is when the Internet really took off in the US.
[00:04:12.880]
So the ADA doesn’t really say anything about web accessibility because when it was passed, it didn’t exist. So the Department of Justice is the one who makes these specific rules regarding the ADA. And for physical places, they have written out very specific pass-fail criteria. Unfortunately, they have not written this for the Internet. But they have said that the ADA does in fact apply to websites, but they just have been really vague about that. I do have an article which is in the links and info for the slides which will talk a little more about that.
[00:05:05.440]
A little note is that the Department of Justice has started to apply the ADA in what’s called title two, which is state and local governments. State and local governments. They currently have draft rules for those which they have opened a public comment and closed, and they are now working on finalizing those rules. So hopefully in the near future, and that’s government time, there will be actual rules for ADA title two. And these will hopefully at some point pave the way for ADA title three, which is private businesses.
[00:05:49.980]
There is section 508, and this applies to federal websites. So for example, the DOJ’s own website is a federal website, so it applies to their website. And that uses most of the rules from WCAG 2.0 level AA.
[00:06:15.780]
Finally, a short note about New York and New York City laws. Websites, especially those for e-commerce, are being sued all over the United States, coming out of New York City. This means companies in Iowa, California, Texas, Oklahoma, all over the country, are being sued by plaintiffs in New York City. And these are primarily going after what’s called an easy target. The lawyers are literally putting together a list of hundreds of websites and giving them over to someone who is legally blind.
[00:06:57.140]
Now, legally blind doesn’t mean totally blind. It means that your vision is 2200 or worse. There are lots of legally blind people who function perfectly fine in society, but there are also people who have much worse vision and really need extra assistance. So those people, they go through the list, they try the website with screen readers and keyboard navigation, and they pick out which ones are easy targets and which ones are not easy targets. And they do this very quickly.
[00:07:34.060]
And then the ones that are easy targets, they then put together and actually do some work to audit the site and come up with a specific list of problems that it has.
[00:07:46.900]
So now we are going to talk about how I ended up in accessibility. So in about 2019, I came across this thing called web accessibility from a couple of people that I know, Amber and Colleen, and they were talking about it. So I was like, okay, well, I want to know more. So I went down the rabbit hole and I started learning more about accessibility from them. And then, of course, 2020 happened, and web accessibility started getting super important to a lot of people because going to a store was now a huge production, even for people who were physically able, it was a big deal.
[00:08:36.890]
So I got even more into web accessibility. In 2021, I started to do meetup presentations and was one of the first members of the WordPress accessibility group on Facebook, where I continued to be quite active. Then May 2023 is when I kept getting questions from people, how do I get started? How do I get started? How do I get started?
[00:09:06.060]
And the short answer of just go read WCAG was kind of like asking them to scale a vertical cliff freehand with no support or assistance. It was a big challenge for them. So I started EasyA11Y Guide to try and make this easier for people. And also in 2023, I spoke at WordCamp us on accessibility.
[00:09:34.900]
So what is it? The short answer is, web accessibility is about allowing all people to use the Internet and conduct their business, regardless of their abilities. And this really hinges on the biggest complaint when it comes to using a website. It doesn’t meet expectations. How many of us have gone to a website and it just doesn’t work the way we expect it to.
[00:10:05.440]
We expect something to be clickable and nothing happens. We hover our mouse on something and, oh, it interacts. Okay, I can click it. Nothing is happening. How do I get this to work?
[00:10:21.860]
And that is really the problem that a lot of people with challenges experience when it comes to websites. The thing just doesn’t work. They can’t use it.
[00:10:35.720]
So what are some of the common user expectations? Well, they expect text to be legible, those really fancy cursive fonts with all the little flourishes and whatnot. I took calligraphy. I grew up writing cursive. I can’t read half of those.
[00:10:56.480]
They’re all sorts of trying to be unique with their typography, and it ends up being illegible. Another one is links. People want to know what a link is and what a link isn’t. People expect links to be blue. If they see blue text, they expect it to be clickable.
[00:11:18.210]
This is the expectation when a website gives us something that doesn’t meet our expectations. It doesn’t work for us and that’s a problem. Videos that have captions, the ability to stop moving content. I can’t tell you how many times I have seen an animated gif on a website and I couldn’t stop it and I couldn’t even read the page because it was just bouncing all over the place. It was awful.
[00:11:47.420]
And I just closed the website because I’m not going to deal with that. I leave when I can’t use something. They expect their website to work on their phone. Lots of people use phones. Some websites, more than half their traffic is from mobile phones.
[00:12:04.180]
We expect the website to have a logical order. We want to be able to find contact information. We want buttons to be consistent. We want to be able to easily recognize what is a button on your website. On some sites I’ve seen the headings and the buttons.
[00:12:24.530]
They look the same. I have no idea what I can and can’t click. We want menus that we can actually navigate. I have tested numerous, numerous websites and one of the problems is if I don’t use a mouse, I literally can’t navigate the website’s menu. I can’t open it, I can’t close it, I can’t find anything.
[00:12:49.220]
We expect form fields to have labels. I get interrupted. It happens. I’m partway through filling out a form, I get interrupted, have to go get a package from the door, come back and I have no idea what I was doing. And if everything’s not clearly in front of me then I have no idea what’s going on.
[00:13:11.820]
I expect clear error messages if the form didn’t submit. You need to tell me what I did wrong and how to fix it. And we expect logical colors. So here’s a couple of examples of things that fail. On the right we have the original look for the WordPress turns 20 website and on this all of the text is blue.
[00:13:38.820]
It is the blue that is most commonly used for hyperlinks. Every single piece of text on the entire page is blue. I have no idea where links are and I’m getting anxiety because I don’t have any idea where I can and can’t click. I think I can click everywhere, but most places don’t work. Very stressful.
[00:14:01.940]
They fortunately did change this after receiving quite a bit of feedback from the WordPress accessibility group. On the left I have an example of a payment due date and today’s payment. So in this one the payment is due in July and I’m making a payment today which is June okay? That’s all fine. I would expect this text to be maybe green, maybe just plain black to tell me that everything is fine.
[00:14:36.840]
Instead, they have used the colors orange and red to indicate these two dates, which tells me, oh, my God, there’s a problem. Orange and red are used for error messages. They are used for caution notices. This is ingrained in us all over the place. Errors and cautions are orange and red.
[00:15:00.270]
So by using these colors, they introduce a whole bunch of anxiety that they didn’t need to do.
[00:15:08.320]
Another expectation is that a website does not make you physically ill. Most people in their lives will encounter something that makes them motion sick. This could be a neck injury, a concussion, a bad flu, ear infections. Our balance and our sense of up, down, left, right is connected to our inner ear. So if you have an ear infection, you are really, really susceptible to motion sickness.
[00:15:41.180]
Different medications, certain chemicals, especially those with a strong odor. So if you just cleaned your bathroom and you’ve now got a whole bunch of chemical smell in your nose. And of course, the most common one, using a mobile phone while riding in a vehicle. I’ve had to literally pull over the car before because I was driving and my husband was trying to find a restaurant on the phone, but it was a twisty, windy road, and because of that, we had to completely stop the vehicle so that my husband didn’t get car sick trying to find us somewhere to eat.
[00:16:20.360]
People who have to live with vestibular disorders. People have all different challenges in their lives, and some people do have vestibular problems. This can be an almost nonstop vertigo. It can also be really easy for motion sickness. And this can be triggered by sliders, carousels, animations, and parallax. Parallax is one of the biggest triggers with vestibular disorders.
[00:16:51.160]
And that is where one part of the page moves at a slow speed and another part of the page moves at a fast speed. And that difference between the two speeds is a huge issue for people who have vertigo or motion sickness. So it’s important if you do have any kind of movement on your website, that one, it’s easily stoppable, and two, it obeys the prefers reduced motion. Types of disabilities. There’s three main types of disabilities. The first one is temporary.
[00:17:29.250]
Everyone is going to be experiencing a temporary disability. This could be something like you fell and sprained your wrist. This happens to people all the time. It could be a headache. You just had a stressful day and you have a headache, or you forgot to eat lunch and you have a headache.
[00:17:49.450]
Side effects of medication, all sorts of medical procedures, various different substances that people may consume, such as alcohol. Alcohol can give you a temporary disability. There’s a reason why you’re not allowed to drink and drive. So people are experiencing temporary disabilities all the time. Most people will experience them at least monthly, and many people will experience them on a weekly or even daily basis.
[00:18:22.210]
The second one is situational. This means that you are in a situation which causes you to be unable to do certain normal things. For example, let’s say you’re pushing a shopping cart. Well, you can’t jump off a four curve comfortably. It’s not going to go well for the eggs that you just bought at the grocery store.
[00:18:47.210]
It could be sitting in a loud cafe, you can’t hear a darn thing, and people are not going to be happy if your tablet suddenly starts blaring music. You could be outside in a beautiful day. So you went out in the back patio with your laptop to just enjoy and get some fresh air. And it could be in a moving vehicle. Commuters. So people are experiencing these situational disabilities all the time.
[00:19:18.710]
And the last one is permanent disabilities. And this has kind of two categories. One are disabilities that are counted and one is not counted. And this falls under the financial model of disability. What normally is counted in the US is disabilities that the CDC recognizes, and that’s the center for Disease Control.
[00:19:43.890]
And these are issues that impact your ability to make money. So examples would be being legally blind. This, for many people, would significantly impact their ability to make money. But someone who is, say, colorblind, well, there are certain careers that are not open to them. They can’t do those jobs because those jobs require you to have full color vision.
[00:20:14.310]
But the CDC doesn’t count you as disabled. This impacts you on a daily basis all over the place. But you can still do many jobs, you can still earn a living. So the CDC does not count you as disabled. So we have a huge difference between the counted and the not counted numbers.
[00:20:41.330]
So speaking of these people, 2.6% of adults in the US have vision difficulty. That’s what’s counted. Now, let’s talk about people who aren’t counted. 8% of men are colorblind. It is more common in caucasian men.
[00:21:02.390]
They are not counted. Just because you’re colorblind doesn’t mean you can’t do many jobs, but it does mean you can’t do some jobs and it definitely affects you in your everyday life. Dyslexia. Dyslexia is quite common. The estimate is about 20% of people have some level of dyslexia, and like most things, it’s a gradient.
[00:21:28.830]
Some people, and most people will have a mild form of dyslexia that through training and work and learning specific coping mechanisms, they can function in normal everyday life. And then about 3% of people have severe dyslexia. But again, they aren’t generally counted in the CDC numbers because they can still do some jobs.
[00:21:58.010]
Then we have people who have Erlin’s syndrome. This is similar and sometimes confused with dyslexia. Erlin syndrome is fortunately a little easier to treat for most people who experience it. For many people, it means that their text moves or bounces, or it can flash grow bigger, it can do all sorts of different things. But for many of these people, using a filter, a color filter can actually significantly reduce it.
[00:22:35.830]
So they may have colored glasses and those glasses may help them significantly. People with synesthesia. This is a condition where basically your senses get crossed. So people may experience reading words and numbers, and they may actually experience colors and tastes associated with that. I have a friend who has synesthesia and it only affects her with numbers. And math is pretty much a nightmare for her because she literally gets tastes with numbers.
[00:23:17.970]
So it’s not a big deal if she’s just reading a speed limit sign, just glance at it and done. But if she tries to spend an hour doing math, she is literally vomiting because it’s so bad. And that significantly impacts what she can and can’t do as a career. And in the US, 79% of us adults need some sort of vision correction, which also means that they are probably going to look at your website when they get home at night and they’ve taken off their glasses because they’re tired or they’ve taken out their contacts, which means their vision isn’t perfect. The vast majority of people coming to your website don’t see perfectly, so we want to design our websites for the vast majority, which are imperfect people.
[00:24:13.670]
So here are some examples of different people who might need accessibility. Someone who has had a few beers and is trying to order a pizza during a loud football game, so he’s got a situational disability with the loud football game going on, and he has a temporary disability because he’s already had a few beers, and if he can’t use his phone and order that pizza from your website, he’s going somewhere else. You have lost that visitor.
[00:24:48.110]
Next up, Susan, who’s got a headache and a screaming toddler who has an ear infection and she just needs to know when the pharmacy is open. And if she can’t get that contact information, she’s going to scream because she’s just already past her limit. Commuters. Commuters who are commuting every day, well, they’re trying to utilize that commute time and do various tasks, do some of their online shopping, look things up, and if your website isn’t easy to use on the phone and doesn’t quickly get them the information, they’re gone. They’re going somewhere else.
[00:25:29.790]
Someone who’s trying to work while their dog is having fun at the dog park, well, they’re distracted because their dog’s at the dog park. They are out in bright sunlight, so they can barely read their phone screen. And they really need to solve a problem because their package didn’t arrive. And of course, someone who has what’s called a permanent counted disability and there’s someone who wants to get married, they’re blind, they’re using a screen reader and they want to shop for a wedding venue. Just because they’re legally blind doesn’t mean they can’t see anything.
[00:26:11.850]
They still want to see what the venue looks like, they have some vision. And if they can’t navigate and get around to that website, they’re going to a different wedding venue. And that’s thousands of dollars lost. So everyone can benefit from accessibility. Clear, easy to read fonts and colors, that benefits everyone.
[00:26:37.110]
It makes it easier for everyone. And when things are easier, customers are happier and tend to buy more.
[00:26:46.470]
There’s also a number of SEO improvements that come from good accessibility because the number one screen reader in the world is named Google. Google is basically a screen reader going through your website.
[00:27:02.900]
Now we’re going to talk a little bit about implementing this accessibility and how a website becomes inaccessible. So accessibility is about removing barriers from people who are using your website. A plain HTML website out of the box is already accessible. There’s already everything provided by the browser. The operating systems already provide things.
[00:27:28.830]
You don’t have to do anything. It starts out accessible. Accessibility is not about trying to create a solution for someone. The solutions already exist. People are already using these solutions on lots of other websites and they definitely don’t want you to try and give them a new solution or do anything that breaks their existing solutions.
[00:27:57.620]
So how websites become inaccessible is from people who don’t have knowledge and don’t test their sites. They don’t know what they don’t know and therefore they make decisions which cause problems for other people. Generally, those decisions are adding CSS and JavaScript to the website. For example, someone decides that when they’re in their dark office at home, the pastel pink text on a white background looks great. Well, unfortunately that is completely washed out and unreadable on the mobile phone outdoors in bright sunlight.
[00:28:38.740]
It’s just people who make choices based on their circumstances and don’t consider accessibility.
[00:28:53.430]
So why isn’t there some sort of an AI or automated solution that will solve all of this for us? That would be great. There are some automated testing tools, and some of them are even powered by some AI systems. Some of the popular ones are webAIM, which is known for the wave tool and the Axe tool from Deque. Google, if you’ve used their lighthouse tool that is powered by Axe, so that’s actually a subset of Axe.
[00:29:30.860]
So what can these automated tools do? The current standard is WCAG 2.2 level AA. Automated tools can partially test 25% of the criteria, partially test 25% of the total criteria. That is not a lot of testing, and the reason is quite a few of these things are just very difficult to test with an automated tool because there is so much CSS and so much javascript and so many different ways to build something as simple as a button that it’s very difficult for automated tools to be able to test every single circumstance. Of the things that they can test only six…six of the total criteria out of the 55 criteria of WCAG 2.2 level AA, they can find 50% or more of the errors.
[00:30:32.960]
Now on the plus side, one of these color contrast accounts for about 30% of all issues on websites. So automated tools can definitely do some of the work for us. They can definitely be an excellent starting point and get us going, but they are not remotely comprehensive. Just because you receive a lighthouse score saying 100 doesn’t mean your website’s accessible.
[00:31:04.600]
It means that you passed all of their tests. They partially tested 25% of the criteria, so you got 100 on partially 25%. That is a lot of criteria that has been untested, and Lighthouse has absolutely no idea whether you passed or failed that. And to get everything else, you require real trained people to test.
[00:31:36.900]
So the state of accessibility webAIM keeps track of the top 1 million homepages on the Internet and runs automated tests on them. On average, there are 50 errors per homepage. That’s detected with automated testing. So there’s a whole bunch of errors they didn’t find.
[00:32:04.560]
Most of those errors fall into these six categories. Low contrast, missing alternative text, empty links, missing form labels, empty buttons, missing document language. Most of that is low contrast text. And this is almost always a design choice. Someone thought that the light pink on white was pretty.
[00:32:29.080]
Unfortunately, the light pink on white is completely washed out. When you take your phone outside in sunlight, you can’t read a thing. Missing alt text so this is an image, and images need to have alternative text. It might be empty alt text if it’s a decorative image, or it might be useful alt text if the image conveys meaning. The next one is empty links and similarly empty buttons.
[00:33:01.220]
These account for. Over 75% of the websites have one of these problems, and that is almost always javascript.
[00:33:14.340]
Missing form labels this is people who don’t know how to properly structure a form. Forms need to have a label attribute, and they need to get assigned that label to match up with the input field. And the last one is missing document language. And honestly, that’s just poor coding. Your website should declare the document language. Now into accessibility overlays.
[00:33:44.360]
Well, just like we talked about, what can automation do, these accessibility overlays claim that with a line of javascript they can magically fix your website. Well, they’re an automated tool, and so we look at what automated tools can do, and automated tools can’t do much. They can only test for a limited number of issues. So even if these accessibility overlays worked perfectly and fixed all the issues that they found, there’s still a whole bunch of issues that they were completely unable to check for.
[00:34:25.660]
These tools also require user configuration. The user has to find it, open it and configure it in order to use the website. That’s discrimination. For example, when we go to a grocery store, as we walk towards the grocery store, we are accustomed here in the US to the doors sliding open as we approach, which is great because we have a shopping cart and we’re trying to walk out of the store so that we can get back to our car and go home. Well, imagine if instead of the doors just opening, you had to walk over to a panel on the side, open up a protective door, turn a knob and then push a button.
[00:35:13.580]
That would not be a pleasant experience. People wouldn’t want to do that. Grocery stores would lose a lot of business and they would have lawsuits filed against them because that’s just not accessible. A number of these overlays actually conflict with many existing accessibility tools. This would be like in the real world if someone was using a wheelchair and they went into the grocery store and the grocery store staff said oh no, you can’t bring your own wheelchair in.
[00:35:47.960]
You have to transfer to our special wheelchair that can only be used in this store, well, that person wouldn’t be coming back, and again, they’d be filing a lawsuit. And the last one is that they create a middle layer. And this is kind of like a game of telephone, where one thing gets set on one side and then someone in the middle hears it, and then they pass it on to the last person. And for everyone who’s ever played the game of telephone, the message gets changed between point a and point c.
[00:36:27.190]
So how do we test for accessibility, and how do we get started with accessibility? So the first thing about testing, since we just covered that automated testing only, does part of the work. We need humans with knowledge and experience to be able to actually do the testing. So what I like to do is I start with a quick audit. This is a limited scope, fast turnaround audit that I focus on the key items that come up in lawsuits, because those are the things you are most likely to be sued for.
[00:37:05.180]
So those are the things you should be addressing first. And what happens is an iterative process is one of the best, unless the website is really awful, in which case it’s a full remodel. But with the iterative process, you can identify a few issues, work on fixing those, and then you can come back and work on a few more. And this allows for nice progress moving forward without going through the effort of a comprehensive audit. Comprehensive audits frequently start at about $1,000 and can go easily to $10,000 or more.
[00:37:47.390]
These are really pricey, generally take a few weeks, and during that process you haven’t actually gotten anything but an audit done, and that’s not really great for the bottom line. We’d rather do a limited scope of testing and then actually get fixes implemented and then go back and do some more detailed testing. Because the reality is, in those large audits, you just end up writing up the exact same error over and over and over again.
[00:38:24.760]
One of the next things is explaining accessibility to clients. Clients generally don’t really know much about it. So I have a video series which you can get in the links and it talks about what is accessibility? What if you don’t have time to really learn it? How much can automated testing do?
[00:38:48.700]
It helps you with when your client says, but can’t I just use an overlay? Well, I have a whole video that talks just about overlays and why not to use them. And how much does accessibility cost?
[00:39:04.100]
Accessibility is a lot like plumbing for a house. If you consider plumbing at the very beginning of building your house, before you’ve drawn up the blueprints before you’ve done anything, you consider plumbing when you start even initially thinking about which room is going to be near which room. So for example, if you’ve noticed many houses, the kitchen is right next to the bathroom and this is so that plumbing can be colocated. This saves time during construction and also saves a lot of budget and can make the actual designing and building of the house much easier. So if we do all of this at the beginning, then the plumbing, and we consider the plumbing at each step going forward, the plumbing really doesn’t cost that much of the total house’s budget.
[00:39:56.100]
But if you were to build your whole house and then say you wanted to turn on your faucet, well, you now have an absolutely massive amount of rework because it would require ripping out huge parts of the house so that you could run all of the plumbing through. And that is pretty much what accessibility is when it comes to cost. If you consider it early and at all the stages during building the site, it can be very affordable. But if you build this whole shiny website, pretty much this whole showroom, but you didn’t run any plumbing in the back, it is going to be a massive amount of rework and a lot of times those websites need a full rebuild.
[00:40:48.260]
So something that you can start doing today to start improving accessibility is you can say, I’m going to start entering my content better. Even if you don’t necessarily have time to audit and scope and do all of that, you can start doing some basic things whenever you add content to your site. This is basically getting in good habits and this way your content will be more accessible even if you have to defer doing an actual audit and fixing some of the inherent issues in your theme or your plugins.
[00:41:31.360]
First one is no inline styles. Make sure that you’re using paste without formatting. That way you prevent a lot of the junk HTML that comes in with copy and paste, word, Google Docs, many other things you can end up with, even just emails. You can end up with a whole bunch of junk HTML brought over proper headings. Each page should have exactly one heading one.
[00:42:03.050]
After that we should go to heading twos. Heading threes should only be after heading twos when they logically fall into a table of contents with those heading twos. We should not randomly skip to heading six just because you like the styling on a heading six if you need that. What I personally do is I will generally use an h2 with a class equals h6 and in my theme that will then style that heading as an h6. Clear links. It’s very important to tell people what the link does.
[00:42:43.010]
There are tools, especially people using screen readers, that will give them all of the links on the page. And if half of your links say “learn more”, they have a list of eight links that all say “learn more” and they have no idea what those links are. But if you wrote in useful links, like “learn about our brochures” and then “learn about our note cards” and learn about our “flyers”, if you wrote out things with actual information, then when they grabbed that list of links, they’d be like oh great, I want to learn about the brochures. Go to there appropriate alt text on image alt text is contextual. That’s very important to remember.
[00:43:32.420]
The exact same image in different contexts may be decorative, it may be informative, and it may have different meanings. For example, an image of a young child and a dog. The breed of dog may be very relevant in some circumstances, whereas in other circumstances that image could be pure decoration. The age of the child might be relevant in some circumstances, in others, completely irrelevant. Proper labels on forms without proper labels, well, people filling them out who are cited and able to use keyboards may not have any idea what content they’re supposed to enter.
[00:44:20.500]
And people who aren’t using assistive technology, that technology relies on proper labels. And no, automatically playing animations or videos basically don’t have anything moving automatically. If people want things to move, they can click on it and have it start moving. Otherwise, automatically running things is very, very distracting.
[00:44:49.900]
Once you’ve started adding a little bit of your content right, you want to look at some of the easier parts of accessibility to implement. This way you get a little dopamine high from having gotten something done. The first one is add an accessibility statement. This can be done in about 10 minutes. Update your colors and fonts so that they are readable.
[00:45:14.100]
If you have a whole bunch of existing inline styling on your website, this could be a nightmare. If you have used good style sheets, you’ve let your theme dictate what is going on. This can be done in 10 minutes. On some sites it really, really depends on how well coded your website is and how well you’ve entered your content. Don’t rely on just color for indicating anything important.
[00:45:43.920]
For example, links are underlined. Things that are underlined people assume they can click on. So when you have a link, it should be underlined. Then people know they can click on it. Don’t underline anything that is not a link.
[00:46:04.980]
Next, you want to look at your website and see if it works with text size adjustments and zoom zoom on most people is just command or control and the plus sign. There are also a couple of browsers, Safari and Firefox, which have built in font zoom only. So what I normally do since Firefox is usually the most grumpy when it comes to CSS, I always test in Firefox for this and you can set in your Firefox preferences that you want your zoom to be text only and then zoom to 200% and see if your website does well or if it fails.
[00:46:53.060]
The next one is some manual work. Now this to heart tends to be a bit more manual, requiring you to actually go in and fix the content that you’ve already added to your site. It’s not generally nearly as easy to do global updates. First one is alt text for images. For this one, a lot of people will put some default alt text into their media library since a number of themes and plugins pull directly from the media library.
[00:47:27.980]
But then you’ll also want to review the content to make sure that it doesn’t need to be overridden for specific contextual situations. Make sure that your headings follow a logical order. This is important for both people and for search engines, so you want to go through your pages and determine what your heading structure is. Now the good news is there are a number of SEO tools that will actually tell you about your heading structure. Heading structure is one of the things that’s actually easy for automated systems to detect because they’re just looking for h tags.
[00:48:08.500]
They can quickly pull those h tags out and give you a table of contents based on them and tell you if you have an issue or if the h tags look good. It is good to manually review your heading tags and make sure that you aren’t using a heading for something that should really be decorative. For example, I’ve seen people use a heading for three paragraphs of a quote. Well, they wanted the quote to look pretty. That’s not what a heading is for.
[00:48:38.130]
If you want to just style text, you should use CSS classes.
[00:48:46.560]
Next thing for manual work is making sure that videos include captions and transcripts. So for captions you want to start with autocaptions and then you need to manually review and correct those captions. You should not trust autocaptions to do everything right. Depending on the speaker and how well versed they are in giving speeches, it may see things somewhere around 80% and you may see things near 100% for most of these AI captioning and transcripting tools. There are some services that will start you with a transcript, you’ll edit the transcript, and then you’ll also just be able to click and export a list of captions from the transcript that you already corrected.
[00:49:41.840]
Also, when you are including a transcript with your video, make sure your transcript isn’t hidden. I’ve seen a few websites where they included a transcript. However, they put it into an accordion that wasn’t accessible, the Javascript was poorly written, and the accordion could not be opened.
[00:50:06.860]
Then once you’ve done that stuff, you can start working on more detailed checks, making sure that all of your online forms have clear labels and errors for people, making sure that your website can be used with just a keyboard. Testing with some of the different automated tools like wave personally, I find that the Axe based tools are a little easier to understand and get through than tools that are wave based. So, for example, Google Lighthouse is based on Axe and you can also install the free Axe extension for chromium based browsers.
[00:50:48.700]
And then once you’ve gotten through kind of the basics, you’ll want to work more on getting through all of the WCAG level AA guidelines. And that is generally an iterative process because it requires cleaning up your existing content.
[00:51:08.400]
Accessibility is overall a process for everyone. Your website changes, you change content, you update plugins, you add things, you remove things. You do need to be periodically checking on your accessibility and seeing how well it is or is not doing.
[00:51:30.920]
And the more you understand people and how they use tools, the more you will understand accessibility. For example, some of the things that tools can do for people is they can pull all the headings and create a table of contents for the page. They can pull all of the links and give someone a quick link list.
[00:51:54.480]
Using your device outside in bright sunlight is almost the same as having low vision. It really is. I have looked at some websites on my phone and I’m like, no leaving website. Can’t see a thing. Many sighted people who have cognitive or learning disabilities use screen readers.
[00:52:18.640]
There are plenty of sighted screen reader users. There is a simple way you can select text on a web page, right-click, tell it to speak and your computer will read out that section of text. It’s really quick and easy. This can also help people who are reading your website in a second language.
[00:52:40.740]
Some people may understand the second language better by hearing it than they do by reading it. And of course, different people learn differently. I am an extremely visual learner. I do very poorly when I try and hear and remember content, so that won’t help me. My husband is actually very good at hearing and remembering content, so he loves to actually have it read to him.
[00:53:11.060]
And many sighted people with dexterity problems use keyboard navigation or voice navigation for their computers. Both of those are available and used. All right, slides and links and questions.