How to Build a Completely Inaccessible Website - Scott Davis

This talk focuses on the importance of web accessibility and the Web Content Accessibility Guidelines (WCAG). The speaker discusses how developers often create websites that cater only to their personal preferences, overlooking the diverse needs of users with different devices and abilities. They introduce the POUR principles: Perceivable, Operable, Understandable, and Robust, which are essential for creating accessible content. The talk emphasizes the significance of providing text alternatives for non-text content, making sure navigation is keyboard accessible, and ensuring that websites are adaptable to various devices. The speaker highlights common accessibility errors and encourages developers to strive for inclusivity in their web designs.

And that's what this session is about as well. When we're developing the web, it's very easy for us to develop for ourselves. If you're on a Windows laptop, you'll just assume that all of your users are on Windows laptops. If you're on a desktop computer with 101 keys and a mouse, you assume all of your users are using 101 keys and a mouse. Until perhaps someone approaches

you with an iPhone bug or an Android bug, AND YOU SAID, "AH, I SHOULD HAVE THOUGHT OF THAT, RIGHT?" SO, this is the I should have thought of that presentation for the day. Yeah? I have been talking about simpleaccess.io. So, I'm going to pull up a QR code for this. And I'd encourage everyone to pull out your phone right now, if you would, and join me at

simpleaccess.io. You can certainly do it on an Android. You can do it on an iPhone. If you have a laptop, you're more than welcome to do this on your laptop, as well. Specifically, what we're going to talk about today are the WCAG principles. So, along the top of the screen, you'll see WCAG, and you'll see Sensory Lab. is the Web Content Accessibility Guidelines. And we're going to

go through those because if you're going to build a truly inaccessible website, and we all understand the joke, right? Please don't take the title of my talk literally. Yes? Um but if you want to write an inaccessible website, you should know what an accessible website looks like so you can do the opposite. So, we're going to take you through the web content accessibility guidelines and teach you

what not to do if you want to have an inaccessible website. But then we'll also go into the sensory lab here, where you'll see many examples accessible HTML and inaccessible HTML side by side. That way if you decide maybe you'd like to write accessible websites instead of the inaccessible kind, you'll have an example of both. You'll have an example of what good looks like, and you'll have

an example of what challenging looks like. to begin before we get into source code and all manner of things like that, I'd like to share just a short video with you from Apple. And this video is going to give you an amazing variety of accessibility features that are built into the hardware you probably are using right now. The examples you're going to see in this video aren't

the deaf version of the iPhone or the blind version of the iPad. They're just the hardware you already own. >> [screaming] >> Sorry. This is too is sweet. That's what I'm trying to say it is. >> [music] >> I'm a coffee. >> Do I have to be remarkable? [singing] I'm just having a try. I'm not fragile or indestructible. [music] Like everyone, I sometimes cry. And I'm not

like the rest, but then the rest of you are not the rest either. >> I'm not a saint. I'm not a I'm not a winner. >> I'm not your AVERAGE HUMAN BEING. >> [cheering] >> I'M NOT REMARKABLE. AND NEITHER ARE YOU. I'M NOT REMARKABLE. [music] I'M NOT A SAINT. I take [music] pictures. I need stuff. And you need stuff. [music] And all our stuff is not THE

SAME. AND WE WANT TO BE >> ISN'T THAT FUN? And what that video was really trying to demonstrate is you don't have just one kind of user. You have a variety of users that will be using your website in a variety of different ways. And you might think, "Well, of course, I'll have both kinds of Windows, Windows users and Apple users, right?" And that's all we need

to think about. And okay, well, yes, that is one way to split up your demographic. But, have you ever listened to your website before? I guarantee you that the way you develop is that you write some code and then you refresh and look at it on the screen. And then you write a little bit more and And write a little bit more and look at it and

look at it and look at it. When do you listen to it? When do you feel it? There are braille monitors. There are monitors that have tiny metal pins that pop in and out dynamically to demonstrate what there is. There are braille keyboards that right above the line above your function keys, there's a little metal another line of metal pins that you can drag your finger along

and you can feel your website. So, what we want to talk about today and speaking of accessibility, Hey Siri, please set a 40-minute timer. That will make sure I don't run long. But did you notice how I just did that? If you were an Apple Watch developer, would you only focus on the touch aspects of getting into that and ignore the voice completely? Would you only speak

to your watch and never tap on the icons on your screen? This is multi-sensory architecture. This is thinking about ways that your applications will delight all the senses, not just We're so good at making sure our websites look good visually, so I don't want you to lose it. I want you to continue to focus on that aspect of the development process, and also the other senses as

well. coming back once again to simple access IO, when we say the web is sight, sound, and touch, we're saying some of your users are going to look at your website, some of your users are going to hear your physically going to feel your website as well. So, let's explore these ideas. Let's explore these ideas. I'm going to start in the WCAG section, and what a ridiculous

acronym that is, right? Who likes the sound of WCAG-ic? it's a very powerful idea. WCAG are the This is published by the W3C, the World Wide Web Consortium, the same organization that publishes the HTML spec, CSS spec, yeah, they publish the Web Content Accessibility Guidelines as well. And what's nice with CAD gives you a whole number of success criteria. That's how it explains itself. It's if you

want to be successful in this aspect, you should do that. If you want to be that. It's a very positive document and we'll be able to go in and take a look at that. But the way with CAD is organized is under this principle, the POUR principle. P O U R short for perceivable, operable, understandable, and robust. So, when you start thinking about the Web through these

four lenses, you start saying, "Ah, okay." So, for instance, perceivable means the information on your screen can't be invisible to one of those senses we discussed. If you have a video that has a soundtrack on it, that's wonderful. You can hear it. But what if you can't hear it? You could be a deaf user, but you could also be sitting in the library, a quiet environment where

you can't play a video with the sound on. You might also be in a very noisy public area like the output that like the the the the you know, the the the conference, the the main conference hall and and the area like that, you might be trying to listen to this video, but it's so noisy that you can't hear it. So, closed captions aren't just for deaf

users. And it's really a common mistake to associate one particular software feature with one particular demographic. We don't want that. is crucial for some, but useful for all of us. Did you know that over 80% of all social media, TikTok, Insta, Facebook, Meta, right? All of those kinds of things. 80% of videos on social media are watched with the sound off and closed captions on. Couple of

you are nodding. Does that Did I Did I just recognize you? I'm not Michael Carducci. I'm not here doing a magic trick, right? I'm saying statistically, congratulations. You're right where you should be. My son's just getting ready to graduate from university, Colorado State University. He has simply grown up watching videos with closed captions on all the time. He doesn't know any different. This is just a feature.

And you ask college students, why do you watch videos with closed captions on? They say, "Oh, well, if I have ADHD, it helps me focus on the video." If the video's just kind of playing, it's easy for me to get distracted and look away and think everywhere else, but if you have closed captions, something constantly moving on the screen, it gives you something to focus on, it

gives you something to pay attention to. It engages you with the material. But if you don't have ADHD, if you see something and you hear something, you're getting it from two different communication channels. Those communication channels reinforce the message and makes it stickier, it makes you remember it more. That's why it's very common for instructors to say, "We're talking about and operable and understandable." And do you

see what you're doing? You're hearing me say the words, you're seeing the words on the screen. That is locking those ideas in. So, these accessibility features are not targeted at any one particular impairment, not at targeted at any one particular user type. That's why we say we've got to delight all the senses for whatever reason you happen to choose. So, let's dig into that perceivable idea for

a little bit. Can you see or hear the content? Can we Oh, no. Did we just lose Wi-Fi? Let's see. There we go. All right. You were worried. I wasn't worried at all. I knew this was going to work the whole time, right? I also have this entire website loaded locally on my laptop for just such a contingency, right? So, I have a plan B as well.

If we lose the internet, all hope is not lost. We'll just go visit localhost instead of visiting simpleaxess.io. Okay. So, when we say that digital accessibility is sight, sound, and touch, perceivable is saying, "This is the sensory foundation on the web. We need to ensure that our information isn't invisible to any one of the senses." But, the easiest way to think about this is just plus one

your senses. If you're delighting one sense, think about another sense and decide if that's helping you as well. If you have a video with a soundtrack and you can hear the soundtrack, can you read the soundtrack as well? If you have a podcast, you can hear the podcast, but can you read the transcript Because Google can't hear your podcast, but it can index your transcripts to make

sure that your podcast is discoverable. YouTube can't watch your YouTube video. That was circular, wasn't it? Google cannot watch your YouTube video, but it can read the transcripts and index based on that. One of the ways I think about it is Google is one of our largest, most frequent blind and deaf user, which is why providing that information in text is the way that you get search

engine optimization, is the way you get page rank, is the way you get discovered Yeah. So, this core principle is broken down into a number of guidelines. And each one of these are in fact linked. Is this the game we're going to be playing? I threatened localhost. Don't make me follow through on that threat. All So, every one of these senses are linked to the actual W3C

Worldwide Web Consortium set of success criteria. I will tell you this can be a little bit dry to read, it's very comprehensive. if you don't want to read all of this, perhaps you could use AI to summarize it for you. Entirely valid. Yeah? four guidelines for us. Guideline number one of perceivable is text alternatives. Please provide text alternatives for any non-text content so they can be changed

into other forms, such as Braille, such as speech, plus warning your senses. Yeah? This is the alt text success criteria. And alt text is the number one thing listed as success criteria for making your website accessible. Yeah? It's the number one thing. There's a website called the Web Aim Million. The Web Aim Million goes out every year and surveys the top, wait for it, 1 million websites.

Yes, it's right there in the name. And so, it surveys the top 1 million websites and it talks about the errors that it finds. We'll talk about color contrast. That's the number one error. Out of the million pages they surveyed, 84% of them had color contrast issues. But, the number two error is missing alt text for images. Over half of the web pages in the Web are

lacking alt text. So, you're delighting one sense and depriving another. You're depriving the hearing. You're depriving Google from helping you with page rank and by adding alt text, you could be solving over 50% of the statistically likely problems in the website you're working on right now. I had a first-hand experience with this. One of my clients was getting to roll out getting to roll out a new

catalog. They said, "We have 20,000 new items we're rolling out in the catalog and didn't have a strategy for alt text." I said, "Well, think about your user for a moment. If your user was interested in saying buy a green baseball hat with a yellow tractor on it, how do you suppose they're going to find your particular on it so they can give you their credit card

number and buy it?" They're probably going to go to a search engine and type in green baseball hat yellow tractor. Does that sound like alt text to you? Does that sound like a textural equivalent of what the image is there for? And now you can say, "Oh, wonderful. Now, not only can I sell green baseball hats with yellow tractors to my blind and low vision users, I

can also serve it up to all the other users as well. Since chances are they're going to go to a web engine and type in those words, you're making sure that all of your users are going to be able to get at it." So, that's what we're looking at here. Just different ways to think about this. Now, time-based media, videos, right? The same thing we just talked

about here is that provide alternatives for time-based media, including synchronized captions for video. Now, when it comes to captions, we have a number of options. We have closed captions and we have open captions. >> [snorts] >> Closed captions are captions that you can, wait for it, close, turn off. Yeah? Open captions are sometimes called burned-in captions. Have you ever been to a video and the words on

the screen are are just there. You play the video and your captions are right there. The upside to open captions is the captions are already there. They're always there. The downside of open captions is that the captions are already there. And suppose the captions are in English and you want to display them in Hindi. Or the captions are in Hindi and you want to display them in

Tamil. So, open captions are a safe solution in certain scenarios, but it also lacks some functionality. [snorts] Captions are quite literally what you're hearing from the video with your ears should appear as text. And it should be synchronized as well. If I were up here talking and the captions were lagging two or three seconds behind, that would be incredibly distracting, wouldn't it? Yeah. So, they need to

be synchronized. Subtitles are very specifically when what you're hearing with your ears needs to be displayed in a different language. So, even though subtitles and closed captions look like they're exactly the same. They appear the same place on your screen. They use the same technical specifications. The only difference between closed captions and subtitles are closed captions are echoing in writing what you're hearing with your ears and

subtitles are echoing what you're hearing in your ears in a different written language. adaptable, Who here is heard of responsive web design before? Of course, it's an old concept. The very first iPhone was released in 2007. The very first Android was released in 2008. Well, it's 20 years ago, right? And we've recognized that your experience on an iPhone or a Android is different than your experience on

a laptop. With laptops, you have 101 keys and a mouse or a trackpad. On your phone, what do you have? A slab of glass. So, your website needs to be adaptable. One of the easiest ways that I have to do that kind of thing is just going to my developer tools. Just going to my developer tools and there's an icon right up here that says, "How would

you like to view this? Would you like to view this as a laptop user?" Yes, please. Or would you prefer to view that as a smartphone user? That makes sense? Yeah. So, can you create content that's done in a variety of different ways? The way you do that is you use semantic HTML. Semantic, oh, one of my favorite words. Makes my heart go pitter-patter. Semantic is meaning.

Think about that for a moment. Your job as a web developer is to bring meaning into the world. And you do that by using the paragraph tag for paragraphs and the header tag for headers and the link tag for links and the button tag for buttons and so on and so on. Are you familiar with an alternate way of doing web development? It's called div-driven development. Have

you heard of such a thing? When all you use are divs and spans, you don't use any of the built-in things. I wouldn't ever use a button element when I could use a div element and style it to look like a button. Doesn't that make more sense? That's madness. It's madness. And as a matter of fact, if we go to MDN, to MDN, the Mozilla Developer Network,

and I search for the div element, I found Siri just told me she found it on the web, so she was searching on my watch as well. Thank you, ma'am. The div element is the generic container. It has no effect on content or layout until it's styled. It has no semantics. The div element doesn't mean anything. Why would we use a div element when we've got a

perfectly good paragraph? Why would you use a div element when you've got a perfectly good button? Why got a perfectly good dot dot dot? If we go and and look for the span it says it even more specifically. It says the span HTML element is a generic inline container, which does not inherently represent anything. It should be used only when no other element is appropriate. When I

look at web developers who rely exclusively on JavaScript based web frameworks that typically speak exclusively the language of div and span. What you're asking for is an perceivable. The last element here is distinguishable. Can you actually read what's on the And this is where color contrast comes in. Now, when I come to a organization and I say, "Hey, we need to talk about the color contrast issues

you're having." They're saying, "Are you calling my baby ugly? Are you saying you don't like my brand colors?" I'm saying, "No, no, no. I'm saying they are inaccessible brand colors. And this is the number one problem on the web." Have you ever visited a website that has very light gray text on a white background? Very hard to see, especially in the sun? Can't see it. Perhaps in

the dark? I can't I can't see it. You don't have to have low vision in order to suffer from poor color contrast. And one of the easiest ways to think of that is through this website called colorblindawareness.org. They say, "This is neurotypical vision right here, and you can see the different colors of the colored pencils over there. If you have red-green color blindness, which affects about 8%

of the population, you'll see that the reds and the green pencils are visually indistinguishable from each other. Have you ever wondered why we define colors in HTML and CSS as RGB, red, green, blue? It's because your eyes have exactly three receptors. I'll give you three guesses as what your eyes can see, red, green, blue. why Facebook's brand colors are blue? Mark Zuckerberg Mark Zuckerberg is red-green color

blind. We can say that he has color vision deficiency, but he says, "I see blue and I see all the richness of all the blues. I I I can't literally can't see red and green." And just to prove that point, I've got a fun little plugin for Chrome. It's called LET'S GET BLIND. YEAH, let's get color blind. And this is a way that I can very quickly

and instantly just simulate what Mark Zuckerberg sees. Do those look identical to you? Yeah. And then if I come back here to normal, we can see. But what we didn't experience there is information actually disappearing. If we go to Wikipedia and look for the color blindness, this is a very common test for red-green color blindness. There's a red circle with a bunch of little dots all inside

of it, and just through changing the color to green dots, there's a number here seven four. It's kind of hard to see, but if you squint, you can see, all right, yeah, all right, I get this, all right. And then, My magic tricks aren't nearly as good as Michael Carducci's, right? But I'm trying, all right, I'm learning, I'm doing the best I can here. So, when we

see that the information literally disappears, the information is not perceivable. What if I had a webpage that listed all of the poisonous mushrooms in Colorado? They say, whenever you're visiting Colorado, we encourage you to go out into the woods and and pluck whatever you find on the ground, just pop it into your mouth, okay? But, I'm going to give you a list of all the mushrooms, the

green mushrooms are the safe ones, and the red mushrooms are the poisonous ones. Good luck. So, this doesn't mean we can't ever use color again, what it means is we can't only use color. If I listed my list of mushrooms, and I said the green ones are the safe ones to eat, they've got a checkbox next to them, the red ones are the ones that are poisonous,

they've got a red X next to them. Do you see what we've done there? We've communicated visually, but we've also communicated symbolically as well. You're delighting more than one sense, more than one communication channel, just by representing that information in a couple of different ways. And then, at the bottom of all this, it gives you what we're what just what we're doing here. So, this is why

I wanted you to be the simpleaccess.io because you'll have this information with you when you leave, right here. we've discussed the perceivable idea. You got to be able to see what's on the screen. Operable means we've got to be able to navigate the websites as well. We got to be able to navigate our So, what does operable mean? Number one says your website needs to be keyboard

accessible. And when I say that to developers, they're like, "What are you talking about? Of course my website is keyboard accessible." I go, "Only keyboard accessible." My developers and I, we would always have no mouse Mondays. Can you imagine going through an entire development day with you not touching your mouse? Sometimes we would literally unplug it, you know, so that you don't even reach automatically. For keyboard

access, the way you would navigate your website is using the tab key. And what's amazing is the tab key is the cheapest and easiest way for you to assess the accessibility of your website from an operable perspective. Because what your tab is going to do is it's going to allow you to walk through all the selectable elements. It'll land on every one of your links. It'll land

in form fields. It'll land on buttons just by tabbing your way through. So, if we look at Microsoft, and I can embiggen the font here a little bit. You're saying, "Well, yeah, those navigation links up there, that's easy. I'm just going to use my mouse and click on them. And down here you got a button. It's like, that's easy. I'm just going to use my mouse and

click on it. But if we use our tab key to navigate, you're going to see it's going to land on every one of the links and buttons and form fields that you can. So you go to Microsoft and you hit the tab key and you say, oh. Beg pardon. Do you see what happened there? Skip to main content. Now the reason that skip link is there is

because, well, if I continue hitting tab, can you see where I'm at? You can see it because we have a good visual indication. Some designers say, we need to remove that visual selection indicator. It ruins my glorious design. But if you remove that, you can't tell which link you're on. So your tab navigation means you've got to clearly indicate which focusable element you're on at any given

moment. So you can see I'm tabbing my way through. And then, oh, I could skip something else if I wanted to. No, thank you. I want to get into the pause button and the next button and the previous button and on and on and By simply using the tab key, you can ensure that all of the elements are selectable by your keyboard only. You can tell by

the focus indicator that it's visually letting you know what element you're on. But that skip link, once again, if I hit refresh, imagine if every time I visited this website, I would have to say, okay, here we go. Microsoft, Microsoft 360, Azure, Copilot, Windows, Surface, Surface, and have to go through those navigation elements every single time. The skip link is there as a convenience. It's a courtesy

to your screen reader users, your blind users, cuz you're not making them forced to go through all those navigation elements. They will always be able to, but most likely by the second page they visited, they don't need to be reminded of all these products up here cuz they're not interested in that. So, the skip link allows you to skip the navigation links and head directly to the

main. It's really interesting when you go to a website and just press tab and see what happens, like GitHub. Skipped content. Microsoft, skipped content. It's like a secret handshake. If you go to a website and you hit tab and a skip link comes up, you've got an idea that they've been paying attention to digital accessibility. It's the easiest way for you to test by going to a

website and simply hitting tab. If you have carousels on your screen that move constantly, you need to be able to pause the carousel. This is important for people with anxiety. This is important for people with ADHD. This is important for an older population that would take more time to read it. It's important for a younger population that might need to need it. It's important for a population

where perhaps English isn't their primary language and they'll need more time to read and think and comprehend. Yeah. So, carousels are fine. Carousels that you can't pause, less fine. Flashing images on your screen. You shouldn't flash anything more than three times a second. If you think about it, nothing should need to be going Unless you're building a website for I don't know, Las Vegas or an amusement

park or something like that. But even then, you don't want your customers having seizures. So, the flashing is something you want to be cognizant of. And navigable. This is the interesting. They say we would like you to just be consistent if you would, please. Since a blind user is hearing your website, not seeing your website, what it means is you want to provide consistent navigation elements every

single time. So, every new page they go to, they don't have to reorient themselves. Oh, and input modalities as well. Yeah. Through keyboard, through mouse, through touchscreen, through voice. Just make sure those things are there. And at the bottom of each one of these pages, we get of a callout, and there's where we talk about the keyboard test once again. It's my favorite trick. New client sit

down, hit the tab key, say you're missing a skip link. Or that's wonderful that you have a skip link. What else do you have? All right. So, we're fairly certain that we can perceive our website, and we can operate our website. What about understandable? What about understandable? Can you make sense of it? You need to make sure things are readable and understandable, and that means you start

with the document You want to know one of my favorite jokes? What do you call someone who speaks more than one language? You call them multilingual or bilingual or something like that. What do you call someone who only speaks one language? American. Because so often the developers I work with are saying, "This makes perfect sense. Why would you have a problem with this?" And then you say,

"No hablo inglés. Lo siento." >> [laughter] >> But this is really interesting because when I first was coming to Bengaluru, I was trying to look up the train schedule and so I went to the website and it was all in Hindi, um which was fine because it said, "Oh, normally you speak English. Would you like to view this website in English?" I said, "Oh, yes, please. Thank

you." And so it translated all the text on the screen from Hindi to English. But all of the JPEGs that had Hindi pixel by pixel, not letter by letter or word by word, they did not translate. So it wasn't understandable to me. These subtle things you may not think about up front, but once you learn about it, it's unlearnable. You won't ever be able to forget it.

Isn't it? Predictability. Links are meant to take you to a different page. Anyone who finds a hyperlink is expecting that when you click this, you're going to navigate to a new page. I've worked on websites where the designer said, "Oh, I'm going to provide a bold link and an italic link." And so as you're typing along, you just hit the bold link and you hit the italic

link and it does what you want and it's like, "Wow." You want to know how that particular designer had people navigate from page to page? Buttons. Buttons are meant for actions on the same page. Links are meant for navigating between the page. And just because you have JavaScript and just because you have CSS, yes, just because you can make a div masquerade as a link and you

can have a div masquerade as a button, please don't. Please don't. Not a good idea. Input assistance. of course, we want to make sure that people can correct mistakes. So, if they inadvertently type something in a form, you'll validate it, you'll say something's wrong here. Have you ever typed in a form that has 22 fields on it and then you click submit and it says, "There was

a problem with this field." And it erases all the Yeah. Yeah. So, these are the kinds of things that we think about and we ought not do ourselves. But this intuition, this idea, well, I'm the designer of this website, I'm the developer on this website. I know that when I click on this, it's really going to take me here. And I know when I do this, it's

going to do this. And when I do this, I'm going yeah. Um what you think is intuitive might not be intuitive to your developers, uh to your end users as well. So, the last standard here is robust. And basically that means that your users are going to view your website on their and their laptop and a smart TV in a conference room and by listening to it

through a smart speaker and by feeling it under their fingertips using braille. Right? So, robustness means you need to support all of the ways your folks are going to visit your I like saying there's one web, many screens. One web, many screens. When I went to purchase my airline ticket to get here from Colorado, I didn't do it on my iPhone. I sat down on my computer,

I had a big screen, and I could get multiple windows up, and I could compare, and I could plan, and I could do all things like that. But when I went to the airport and tried to walk through the check-in line, I didn't pull out my laptop and open it up and try to scan it on the photo right there. Yeah, you know? So, the way you

use different devices is very context-specific. I'm going to do research on my laptop, but when I'm out in the field, I'm going to use my phone. I'm going to write up my shopping list on my computer at home, but when I get to the store, I'm going to tick items off my list on my phone. Or I'm going to say, "Hey Siri, complete." "Hey Siri, next." Yeah?

So, what we have now is a lovely way for us to begin thinking about how you could build an inaccessible website. Make sure it's not perceivable. Make sure it's not operable. Make sure it's not understandable. Make sure it's not robust. Make sure it says, "Best viewed in Internet Explorer." Right? And if you've done that, congratulations. You've done a wonderful job of making your website inaccessible. You should

feel very proud. Or ashamed. I don't know. One of the other. Yeah? One of the other? we're almost at the end of our time here. It was important that we get the concepts in place. But if you go to the sensory lab, you'll see examples of each one of these elements. You'll see examples side by side of what accessible looks like and what inaccessible looks like. And

this is where we get back to the fix the six once again. And if you recall, the fix the six was in that WebAIM Million report. These are the six. Low contrast text, missing alt text for images, missing labels for input, empty links or links that say click here, click here, click here, click here, more info, more info, more info. Yeah, empty buttons, and missing a document

language. Simply saying this document is in Hindi, this document is in Tamil, this English or Spanish or German or French. So, if we solved these, let me scroll that up so you can read 96% of all accessibility errors fall under those six categories. If you were able to eliminate those six elements, those six errors, those six barriers from your website, statistically speaking, you would be removing 96%

of the errors in your website. And I love this because they've been running this test for years. We see data from 2019, 20, all the way through 2026. We can see these have remained remarkably consistent over all the years they've run these surveys. So, if you're able to fix the six, you're in pretty good shape. Let me leave you with one final example here. I call it

a tale of two bread recipes. And what we have here semantic Oh, by the way, my timer is going off. I'm just going to double tap in midair right now. I'm just going to tap tap with a finger. And it turns off my alarm. I could have tapped on the glass, of course, but I can double tap in the air. That's an accessibility feature right If you're

blind, I can't see the screen in order to figure out how to stop my timer. So, I can use my voice or I can use a gesture. So, in this bread recipe right here, we'll see we're doing all of those things. We're using headers, so we can navigate the headers. We've got alt text on our images. We've got all these kinds of things, and all you have

to do is come in and experience the bread recipe, but then also experience the bread recipe. Sir, may I have sound? May I have sound from the computer? Mike, can I have sound on my computer? I'm I'm doing a screen reader right now, and I need to be able to hear the audio. Thank you very much. Inside of a group, local local web content, voice over off.

Let me try that one more time again. So, you're visually looking at this website If you wanted to listen to it, you simply pull up your screen reader, and let's listen. Voice over on Chrome. Simply exercise or sensory lab bread accessible Google Chrome window. Localhost 8000/accessibility/ memory usage 112 MB tab. Group. You are currently on a tab. Group. Inside of a group. To select this option, press

control option space. To exit this group, press control, option, shift, up arrow. So, do you see how it described everything that was on the screen? Now, a swipe right to move through >> Simply exercise sensory understanding success criteria schedule tab. Browsing the web with your eyes closed web aim, the web aim million, the 2026 report on the accessibility of the top 1 million home pages tab group.

You are currently on a tab group inside control, option, space. Another key of life is control, which mutes the screen reader as well. But, you are visually seeing what's going on here. Now, remember we're on the web aim tab and we're going to go through a couple of GIDS tabs and work our way back to those tabs, but you're a sighted user watching what's going on here.

I'm going to use a three-finger triple tap. Screen curtain on. Let's get blind, huh? And now I'm going to navigate once again with my screen reader. Browsing the web with your eyes closed vertical line gets 2026 tab group schedule tab group understanding success criterion 1.1.1 simply exercise sensory lab bread access localhost 8000/accessibility/memory screen curtain off. Poor Siri, she keeps pronouncing localhost is local Um, but we can

confirm that that is actually where I am on the screen. So, let me show you one more thing real >> Simply understanding success criteria We have 5 minutes left, is that correct? Are we at time or do we have 5 minutes? Yeah, okay. I'm going to start down here in VoiceOver simple as that. Web content. Web content. Right first we to open jw.org marks web content. You

are currently on the web content inside of the group. To enter the web area, press control option shift down arrow. To exit the All right, control option shift down arrow you say? That's a lot of keys. But I'm in. I'm going to continue to swipe now. No kneading required. Four simple ingredients baked in a Dutch oven. The result is simple perfection. Hands down the best bread you'll

ever eat. You are currently on a selectable tab. What do you think I'm going to get when I get to an image? A loaf of no knead bread dusted in flour with artistic cuts in the crust. Image. You are currently on an image inside of web content. To begin interacting with the contents of this image, press control option shift down arrow. To the simplicity of this no

knead bread is what I love the most and the fact that your entire house will smell of fresh bread as you bake this. This bread could not get any easier. It's even easier than the artisan bread. Heading level two. Ingredients. List four items. Bullet three cups all purpose flour. One of four. Bullet 1 3/4 tsp salt. Two of four. Bullet 1/2 tsp active dry yeast. Three of

Bullet 1 1/2 cups water room temperature. So, you can see where we're in a list, it's saying you're in a list. When you're looking at image, it says you're looking at an image. When you're at a list, it says you're on item four of four, three of four, two of four, one I'm going to give you a three-finger triple click once again and we'll work our way

back up through the ingredients. 3 of 1 / 2 tsp active dry yeast, 3 of 4. 1 3 / 4 tsp salt, 2 of 4. 3 cups all-purpose flour, 1 of 4. You are currently on a screen curtain Yes. So, at simpleaccess.io >> 3 cups all-purpose flour, voice over At simpleaccess.io We've got an entire section on screen readers. To give you exactly what you need on on

Mac, on Android, on iOS. And so, it gives you the keystrokes you need to go in and say, "All right, to launch Narrator, this is the magic keystrokes you use. To mute, silence, use the control key. To screen curtain, use this kind of thing." So, you have that available to you in all the places we've just been. come back real quickly because what I wanted to show

you to wrap up is we just went through the semantic version that had navigable headers and contextual images and all that. Let me pull it up one more time just to remind you what it looks like. This is the accessible recipe. Now, if we pull up the div driven recipe, it retires and tires relies entirely on divs. It doesn't use headers. It doesn't use paragraphs. Doesn't use

unordered list. It doesn't use list items. It doesn't use ordered list and list items. It's just divs. And so, you may look at it and say, "Yeah, know, all right. That looks similar, right? The styling is a little bit different, but how bad could it be?" Let's listen. Let's go into our screen reader. VoiceOver on on the scroll web content. What color is the first meter open

jet tool by web content? area, press control, option, shift, down arrow. Got it. Control, shift, option, What do we get now? No kneading in a Dutch oven. Okay, not too bad. What do we get when we get to the image? bread.jpeg image You are currently on an image inside No kneading required. bread.jpeg image You are currently on an image Screen curtain on. No kneading required. Four Hands

down the best bread you will ever eat. bread.jpeg image You are currently on an image inside How do you feel about bread.jpeg? Is that helpful? Let's continue listening. >> The simplicity of this no knead Star 3 cups all purpose flour. Star 1 3/4 tsp salt. Star 1/2 tsp active dry yeast. Star 1 1/2 cups water room temperature. You are currently on the text out If we don't

use list items, star this, star that, star the other, and we don't hear list item one of four, two of four, three of four. If I continue to navigate, Instructions You are one. In a big bowl, mix the flour, salt, and yeast together. Pour water into the bowl and using a spatula or a wooden spoon, mix it until well incorporated. Two, cover the bowl with plastic wrap

and let it sit on your counter for 12 to 18 hours. Three, preheat oven to 450 F degree. Do you see what's been happening there? Because I'm not using list items, it's not pausing at the end of every list item. So, it's just saying, "Do this and then do this and then do this and then by the way do this as well and don't do this." And

so, you can see that it is hurt the navigability of the website. It's hurt the understandability It's hurt the perceivability Screen curtain off. Voice over off. I want to leave you with is this. You now have a vocabulary to describe what we're talking about. We need to be able to delight all the senses, not just one. If I can see it, can I hear it? If I

can hear it, can I read it? Can I feel it under my fingertips? Perceivable. Can I get around with my mouse? Can I get around without my mouse? Can I get around with only the tab key? Can I get around by swiping on the glass? Is it operable across all the different ways I want to navigate? Is it understandable? Can it be translated from Hindi to Is

it robust? Does your website not only delight all the senses, but it does it also delight all the devices that your customers are going to use to visit you? And if you are able to speak to the poor principle and visit the sensory lab and of accessible and inaccessible, I hope on Monday morning you'll be inspired to take some of this and begin applying it. Have you

enjoyed yourself? I have as well. Thank you so much for your time and attention.