Webinar - Accessibility in Digital Spaces with Maria Lamardo
Welcome everyone. My name is Jessyca Holland. My pronouns are she her. I am the director of Organization Community Initiatives here at South Arts. Thank you for joining us for this workshop today. Just a few notes before I turn it over to Maria. If you look at your menu screen, you should
have the option to either disable your captions, or you can keep them on. They are enabled. We will be recording this session. It is actively recording. The reason we're recording is so we can share it later with others who may not have been able to be here, or you can use it as a reference later on which I think you'll want to. The content's great, and when we do that, we will download it, and then have it professionally captioned, because we know sometimes that these AI captioning services don't get everything correctly in the first go. So we'll have it professionally captioned, and then reupload it to the site with those captions
and we'll be doing that as soon as possible, and my dog says hello in the background, as they do. So I'm gonna just real quick, we are monitoring questions. We decided to do this as a meeting and not a webinar. So there could be a little bit more interaction. You are welcome to use emojis and or ask questions in the chat. We won't answer them right away, but we will pause throughout and read your questions aloud. So if we don't get to you right away, just know that it's coming. So
without any further ado, I wanna turn it over to Maria and let her introduce herself and she's so gracious enough to be here on this Friday morning to offer this content. So Maria, I'm gonna spotlight you and then just let you take over this presentation. Perfect. Thank you so much, Jessica. By the way, have we started recording yet? We have started recording. Yes. Okay, perfect. Perfect. So hey everyone. Welcome. My name is Maria Lamardo. Pronouns she, her, I am the head of Accessibility Training and Education at CVS Health. I've been at CVS for about two years and I've been really,
really passionate about accessibility for the last couple of years as I got into the tech industry. So with that, let me quickly go ahead and share my screen and let's get into today's topic. Let me quickly open up the chat here. So I have that visible as we chat. Okay so gimme one second,
trying to get access to the chat and my presentation notes over here. Okay. Here we go. All right, so getting into it today, we're gonna be talking about web accessibility and then we're gonna be touching a little bit on Google Forms. So today's audience is really targeted for designers, content creators. We're gonna talk a little bit about some technical pieces, but really it's more geared for designers. So we're gonna talk about kind of introducing web accessibility, what it is. We're gonna have a little brief overview
of the web content accessibility guideline, and some of the design considerations that we could take from that and then we're gonna be really going into creating accessible Google Forms. So let's talk about what it means to have an accessible website. So this really means that we're creating a website or an application that anyone can use. So we wanna make sure that everyone's able to access our applications, access the content, interact with the things that are meant to be interactive. So before we get too into that, I wanna talk about some stats, disabilities
around the world. So actually around one billion people worldwide have some sort of disability, and according to the World Health Organization, people with disabilities are actually the world's largest minority. So that's a big number. We also have, that counts for about 15% of the world population and then they have about $6 trillion of spending power. So when you're not creating accessible content, you're really missing out on a lot of people. So before we get into it, I wanted to talk about something that people can understand. So let's talk about accessibility of the physical spaces. So here we have a building entrance with multiple
staircases leading to the entrance, but there are no ramps. Maybe there's an elevator inside, but for now I'm not seeing a way to enter the main entrance. So we have a couple of staircases that probably lead up to three different floors, but again, no ramp. So I'm gonna go to the next example. Here we have an outdoor stairs leading to multiple floors, and there is
a winding ramp kind of zig zagging from left to right over and over. I think it does this about eight or nine times all the way up the stairs. Now, while this is visually appealing and it seems to be solving the problem, like hey, we've added ramps to our stairs, it's not very accessible. For example, somebody would need to, again, zig zag nine times to go all the way up. There are no rails going along the ramp. So that's not very safe, and the distance to
your final destination without being able to stop or take a break is way too long. So let's get into another example. So this one's a little bit more accessible. So we have a nice ramp on the side of the building. Although it's more accessible, it does require people to go through the side of the building to have that entrance instead of going to the main entrance, like almost everyone else. So we're creating kind of like a different experience. Next we have, other examples that are of accessible ramps, but then they ran into some problems. So for example, on the left hand side, we're gonna see a permanent structure blocking the ramp. So
there's a street pole just right in the middle of the ramp, blocking the path. Again, accessible ramp, and then they added a pole making it completely inaccessible. Here we have another example of a perfectly fine ramp and then they've added an oversized flower pot in the middle blocking the path yet again. So that seems pretty heavy. I can't imagine people
are gonna be able to move that very easily. So again, we've grabbed something that is accessible and was designed with accessibility in mind, and yet it's still inaccessible, and here we have a nice ramp. It leads right to the entrance of the building. There are no flower pots or poles blocking the ramp. This is pretty good, and everyone can go in. It's pretty easy. However, I wanna talk about inclusive design. Which is kind of designing things to be used for as many, many people as possible and while creating that like one experience.
So take a look at this and consider buildings that don't have any steps to get in, and everyone can have the same access to the main entrance. So this is a lot more inclusive and it creates a better and an equal experience for everyone. So this is kind of how I want you to think about the accessibility in the digital space. There are many ways to make things accessible, and then there are ways to make things accessible in a way that are great user experiences. So let's go to the next
slide. So again, we just want to make sure that you're designing your digital products in a way that's accessible for anyone and just like you wouldn't build a 10 story building without an elevator, there are a few things that you need to consider when designing digital content. So the W3C says that the web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. So when we're building accessible content, we're actually meeting this goal and meeting accessibility improves the online experiences for all users. So let's talk about understanding the digital experiences of all people.
First, I would recommend that you've familiarized yourself with different types of assistive technologies that exist. So really considering what tools people are using to navigate the web and we'll actually go over a few of them today and then think about not just what tools they're using, but how they're using those tools to navigate the web and then you should also consider how design decisions impact those experiences, and again, we're gonna go over some techniques that you could take away today to apply to your products, but not just that, remember that, that ramp of the flower pot and the pole, you don't just have to design for it, but you have to adopt best practices to build accessible content. Like implementation is just as important as designing accessible content, and then you should really be including people with disabilities as part of your process. This could mean hiring people with disabilities so that they bring that voice into your product or doing inclusive research with people with disabilities so that you get that feedback, and luckily, we're gonna learn about all of these today.
So first let's get into different types of disabilities. Let's start with motor, and let's talk about some of the assistive technologies that someone with motor skills issues might rely on. So they might rely on voice recognition software, eye tracking tools, mouth sticks, head wands, adaptive keyboards, or single switch access. So here's an example of a multiple single switch access that's
connected to a single device. So people can just use that one switch to activate certain commands. Then we have a man wearing an adjustable head stylus to interact with his device and then we have another example of a man sitting at the table using a mouth stick to interact with his device. So these are some of the technologies that you might see. Then we've got visual disabilities. So here we have, people might rely on screen magnification tools or screen readers or braille displays. Now here's what a braille display looks like. So this allows people to kind of read the content on their screen and also create content.
Then let's talk about auditory disabilities. Things that we're gonna be seeing here are things like hearing aid and people are really relying on things like sign language, captioning or transcripts, to really understand their content, and here we have, of course hearing aids and then we have technologies like phones that have little screens that will read out, that will spell out what is being said. So there are many different types of assistive technologies to help and then we've got cognitive disabilities, which people might be using cognitive aids or communication tools like this device here that has this communication tool called Protocol To Go, that allows you to kind of select this device, or depending on the tools that you're using might speak, might have like a voice speaking for you. So let's take a look at a couple of examples of people using their assistive technologies. So I'm just gonna open this up. This is Marc Sutton, from the University
of California, San Francisco's IT Web Services Department, brief tour of screen reading technology. I'm a blind person who has been using screen readers, Braille writers, scanning equipment, other adaptive technologies since my childhood. What a screen reader does is for example, I'm gonna read this, start to read this page, and what I will now do is slow down the speech rate. [Computer] 75%, 65, 60%, 55, 50%, 45,
40%. Link UCSF Medical Center. So as I was about to say, the screen reader converts what's on a computer screen into information that can be displayed through synthetic speech or braille output and it does that by allowing you to use a computer instead of a mouse. A computer keyboard, instead of a mouse. You can also use a braille display as an input device. [Computer] Navigation. And what it does is it cleverly determines what's on the screen and presents you that information in a way that would allow for efficient navigation of these pages. So for example, I could just keep reading. [Computer] Three items, Visit link, image, home. Line by line and we could be here all day, or
I could jump to the first heading on the page. [Computer] Heading level two. Search for heading level two. You are here, heading level one. Make videos accessible. So as I'm moving down through the page, I can look for the category that interests me and I'm just using commands built into the screen reader. So that's all pretty simple description of what a screen reader's all about. Now I'm gonna go over and show a few examples of how that can fall apart. So I have a couple graphics on this page. [Computer] Marc Sutton hands on
MacBook pro, image. So the first one is well described and used as an alt tag. [Computer] You are currently on. To describe what that graphic is all about. Now we go to the next graphic. [Computer] Reader zero, four, two, one, one, six. Much less useful.
So it's important to use those elements. It's also true for tables. So I'm gonna move to a table, [Computer] FDA approved medications. Table, three columns, five rows. FDA approved medications, table. The table is pretty self explanatory, and I'm gonna move into the table. [Computer] Medicine approve. Column two of three. And then if I go down into the table.
[Computer] Medicine Tolbutamide. As I move across. [Computer] Approved one, nine, seven, five. Column two of three, We're getting the labels for the column headers and row headers. So it's important when programming tables, forms and other elements on webpages to use the proper HTML codes. I'll go to the. [Computer] Table three columns.
Second table on the page. [Computer] Medicine. Row two of five, Tolbutamide. As I'm in a table, I move across it. [Computer] November 1995. I get a date, but I don't know what that date is associated with. So it's important. So I'll pause it there so you'll kind of got a
brief look on what that experience is like. So we've gotta make sure that our images are well described, that our content is built in a way that assisted technologies can interact the way that they're expecting to interact with it. Next, I'm gonna show you a brief demo on voice control. Hello, I'm going give you a quick demonstration of Dragon Naturally Speaking. Dragon Naturally Speaking is a command and control type of assisted technology. This means that I can control my
computer using only my voice and I don't need to use a mouse or keyboard. So the way this works is that I can give commands to actually have Dragon start listening to what I said. Start listening. Go to sleep. I can also have it go to sleep so that I can talk to you all without having it try to act on the words that I'm saying. Wake up. Start Internet Explorer. Click form demo. Click full name. Thomas Logan. Press 10.
Now I've saved a command for my email address so that I can easily input it into this field. Wake up. My work email address, Click radio button. One. Click check box. One. Press tab. Press tab. Go to sleep. So I'm just gonna pause this here really quick and say, he's able to say something like go to radio button, go to checkbox. How is he able
to do that? Well, the developers who built this form out thought about the semantics of it. So they used the right things to build this out. That way, assistive technologies were able to access that by simply saying, go to radio. It recognized that that was a radio option and then it went on that section of the form and then it was, he was able to interact with it.
When Dragon is in dictation mode, I am able to speak any type of text and it will try to translate as best as it can. Wake up. Please let me know when the North Carolina Tshirt becomes available. Period. Press 10. Go to sleep. Now I've given focus to a custom control. This control has been made perfectly accessible so I can easily control it with my voice, with the keyboard or with the mouse. I'll show you how all three options work. Wake up. Click next state. Click previous state. Press right. Press right. Mouse grid. Nine. One. Four. Six. Six. Click. So I'll pause it there and say what we saw there was kind of a grid. So when, when people might
not know what something is called on the page. So for example, he was able to say previous state or next state, because he knew that that's what those arrows were called. But as you can see, like that label isn't really anywhere. So unless you know that that's what it's called you might
have to rely on something like the grid to kind of start narrowing down the section of the page that you want a mouse click on. So again, when we build something that has a proper label and people know what that label is, it makes that experience a lot easier and they can interact with things a lot faster. Then when I have this one final demo, for somebody using a braille display. Vision impaired people. Today I'd like to demonstrate our brand new Braillenote Touch, which is the first Google certified braille tablet. So this is the Braillenote Touch. It's Humanware's latest generation of note takers. We've been making Braillenotes for many years, which are productivity devices, allowing people to take notes, schedule appointments, et cetera. The difference between past versions and this one is that it's a Google certified
braille tablet. So it's a note taker, but it's based on an Android platform, which allows us to use Android apps as well as our own programs. It's a unit that allows me to do braille entry with the braille keys on top and it has a braille display. So I can read the text that I'm producing or reading from other people. By doing a W, I can jump straight to the word processor. [Computer] Word processor keyword. And you'll notice it has speech as well. I press
enter, because I want the word processor. [Computer] Recover file or discard it. It's giving me a message telling me I forgot to close my other message properly and there's a discard button. I'll just do D. [Computer] Discard button. And enter. Now I'm gonna do C for create. Enter. It allows me now to write, this is a test document. Not very original. I can read that in Braille. I can play it back with speech and I can slow it down. [Computer] Very slow. So
it allows me to also use a headphone. I can write my document, my notes, my thesis, whatever I'm writing, and I can exit out this document. [Computer] Keyword. Do you want to save your document? Do I want to save it? Let's say N for no. [Computer] Keyword. What's remarkable bout this is, in
an environment where I have support from sighted people, I could lift up the screen and I've got a visual display on the tablet. So I can now work with sighted peers to collaborate with them. If I'm a student and I want the teacher to check my work, they can look in at the visual display to see what I've written, but I can also braille directly on this screen by touching the screen. I can get access to the document, access by touching the braille only. All right. So I hope that that gave you a sense of what it's like to navigate the web
with the braille display. Alright, so let's talk about what are some of the rules or how do we make our sites accessible? So the W3C actually created Web Content Accessibility Guidelines, which provide guidance to content creators to create more accessible digital content. I want to mention though, although this is a great place to start, we still have applications that meet all of the rules outlined here that could still be made more accessible. So just like
the entrances that we saw in the previous slide, where we have zig zagging ramps, compare that to the buildings that just have no steps for their entrance. So this is kind of what we're getting at. Like we create, there are multiple ways to create accessible experiences, but we really want to shoot for the best user experience possible. So to combat this, you should really work to bring in people with lived experiences. So people who have disabilities in your designing process, so that you could really understand how people are using your applications and your content and of course, I've linked the guidelines here. If you're interested in reading them,
they're really fun. Alright, but let's go into some of the like forming guiding principles of the web content accessibility guidelines, and they have the abbreviation of POUR. Now POUR stands for perceivable, which is users must be able to perceive information being presented, meaning that it cannot be invisible to their senses. Then operable which means user interfaces
and controls or navigations are operable, meaning that you must not require an interaction that a user cannot perform. Then we wanna make sure that all of our content is understandable, meaning that information and operations within that user interface are understood by everyone. And doesn't go beyond the user's understanding. Then we've got robust, meaning that users are able
to access your content as technology advances. So this is more definitely of a technical thing, but you really wanna make sure that your content remains accessible as technologies evolve. All right, so how do we get started? Again, number one, incorporate real users. Partner with your disability communities. Follow some simple design rules there. If you carefully craft and design accessible content, you should be able to improve accessibility of your content.
Then of course, accessible implementation, ensuring that you're implementing accessible code and then of course, test your products. Make sure that all your interactive elements are operable by a keyboard alone. So let's get into some of the design rules for our main principles. So POUR, perceivable, operable, understandable and robust. So getting into perceivable. First we've got text alternatives. So this is really about images. Making sure that you're providing the right alt text for nontext content. So let's get into an activity for this and I have that opened here.
So let's get into informative images. So actually let me go over some rules and then let's get into some examples. We want to make sure that we're using clear and concise language. We want to aim for the sharing an equivalent experience for everyone and we wanna make sure that we're using language that is added at around a ninth grade level of primary education. Nine years of primary education, sorry. You wanna make sure that you're
not going over 100 characters in your alt text as some assistive technologies won't be able to pick up past that amount of characters. You also want to transcribe any images of text when they cannot be avoided, but you should be always adding actual text instead of using images with text, unless it's something like a logo where you can't avoid using that image of text, and then of course avoid using redundant information or acronyms in your image descriptions, and of course, this is kind of going through that redundant information, but don't use words like picture, image of, or logo graphic in your all text, as assistive technologies already are recognizing these pieces of content as images. So it's kind of saying like image image. So let's get into some examples. So let's go over informative images. So this images will serve a purpose in your site. So let's go over that example. So here we have a couple of pictures. So we have of a little baby girl on the little blanket. Then we've got three toddlers kind of hugging each other and then at the end here, we have a basket full of little kittens in a field.
So I'm just gonna open up the floor and can you all tell me what we think would be the best alt text for the first image where we have a little girl laying down on a blanket. So let's see, you could put it in the chat or you could unmute yourself. Feel free to, feel free to participate in any way you feel comfortable. So we have a couple of things coming in. So we have young baby girl crawling on a blanket. White
baby wearing large bow lies on their stomach on a blanket outdoors. Oh, that's a nice one. How do we know it's a girl? Yep, great point. Baby girl, laying outside on a blanket with a yellow bright ribbon on their hair. Yep. Cute baby with a big bow on a blanket. Yep, perfect. All of those
would work and I would say, what is the intent of you adding this image on your website? Is the intent, like maybe you have a website for selling those big bows on this baby's head. So maybe you want to focus on describing the bow or maybe you have a quilting business, and you actually want to highlight the throw that's on the floor. So you really wanna work with your designers to understand the intent, like what are they trying to get the users to see or perceive from this image? So like, depending on the content of the page, you really wanna bring that same experience. Same thing with the little three, three kids on the right or even the kittens. Like, are
we selling, is this like an adoption agency for cats? Or is this kind of like a basket business or is this just like decorative or what is our intent for including this picture in our design? All right. Next, let's talk about, yeah, so again, the text alternative should convey the emotional and information content presented by the image. Next let's talk about decorative images. So these are images that are purely decorative on the page and they serve no other purpose. They don't serve to provide more information on the page.
Here the text alternative should be empty so that it is not picked up by assistive technology. So again, this is for purely decorative images. So here's an example, let's say this is, and it has some like Lauren Ipsum on bottom. So it's kind of like meaningless text, but let's say that I have this image and it's kind of of a brick pattern background and let's say that I have that as one of like an image behind my banner or something. It's not necessarily
something that I want my users to know. I might just have that there because it's visually appealing to me and that's part of our brand and I want to bring it in. So depending on the text that they're including in your designs. Same with images of text, as we discussed before,
you should be avoided, you should be avoiding using images of text, unless it's part of a logo, and then if you are using this text alternative should have matching, a match to the words in the image. So let's talk about that. So here I have a couple of examples. So all the way to the left, we have a sign, a picture of a sign that says weekend sale men and women, up to 70% off. In the middle image, we have save up to 50% Black Friday sale. Then all the way to the right, we have an image of a Google logo. So that just says Google. So that's an example of a logo that uses words and it's still part of an image. So when we're looking at our alt text and in fact, a way to check your alt text, you can right click on an image and inspect, and in fact, if you just use, if you're using Chrome, you could grab the little inspect tool. It's called select an element on the page and then if I even hover over them,
I can start seeing some of the images that some of the alt texts that were provided there and I'm just quickly going to go over again in Chrome under the accessibility tab, and I'll just expand this and you could see again, I just right click, inspect, went over the accessibility tab on the bottom of dev tools and then I could see right here, here's the alt text that says image. It recognizes as an image and the alt text is save up to 50% off Black Friday sale. It's time to save big, which is like that little text underneath, inside that image. So again, you wanna make sure that everything is readable and providing that alt text equivalent.
So I see a question for what is the right code to write for decorative images? So this is alt equals and then just like empty quotation marks. So that's going to allow assistive technologies to kind of skip that and allows us to recognize that as a decorative image. So let me just show you really quick. I'm seeing a question about the alt text. So you can go to inspect. When you're inspecting, it will highlight that specific element that you're on. So you should be able to hover over that little highlighted section and your image should be highlighted. If you expand on the bottom, again, I'm using Chrome. So this is where I'm
seeing this and there's this tab called styles. Go all the way to the right if you're not seeing it. You might have to expand the options there, but there is a tab called accessibility where if you're highlighting that image, you should be able to see that alt text. Alrighty, so now let's talk about time based media alternatives. So these are how we create media content that is accessible. I'm just gonna play this very briefly. [Narrator] Hundreds of animals gather at
the bottom of Pride Rock, a tall flat ledge that towers over the rest of the Savannah. Zazu, a small blue bird with a large beak flaps to the ledge. He bows to Mufasa, a powerful dignified lion with a thick red mane. All right. So we saw that this is kind of a clip of Lion King. I recommend you watch all of it, 'cause it's really nice, but you could see that it started describing what was happening. It was very descriptive and it gave you that emotion that you're feeling as you're watching this. So like
you're kind of creating that similar experience as you're watching this by creating like really nice audio descriptions. So for media content, you really should be providing captions and text transcripts where possible, provide sign language and interpretation of audio content, again were possible. Provide audio description of important video details as we saw in this example, and then do not automatically play your videos on any of your sites. Allow users to
play that for themselves and have control over any media content on the page, and again, yeah, provide control, media controls for anything longer than five seconds. All right, and next let's talk about creating adaptable content. Meaning that your content should be, should work. If people are like changing orientation of their device are able to access tables correctly. Like access all of your content correctly and of course we wanna make sure that our content is easy for everybody to see or hear. One of those things that I want to show you is our color contrast activity.
So here we have an example of some content, some of the color contrast on this page isn't great. Like for example, here is a sentence that says the color contrast is too low and it's really, really hard to see. It's like this almost baby green color against the white background and then this one is a regular blue color against the white background. So like that's strong and dark and I can see it clearly on the page. So actually if you, there are a couple of tools that we can use to make sure that our content has the right color contrast and I'll show you that in a second. So let's talk about some of the considerations for this first. So you make sure that you're not using color alone to convey any information. So avoid things like,
go to the highlighted blue text for the answer or click on the red link for the answer, 'cause some people might not even be able to recognize what the red link is, or they might miss it all together. Make sure that your content, when you're using color, that you're meeting color contrast. That your images of text should be avoided and then here we have a little rule, a little cheat sheet of rules from the WCAG. So this is the web content accessibility guidelines gives us this color contrast rules that we should follow. So I know this is a lot of numbers,
but they recommend that for normal text, you should be at a 4.5 to one contrast. For large text three to one and then for user interfaces three to one, let's talk a little bit about what that means. So I'm gonna open up this color tool, which is one of my favorite tools to use when deciding colors for my application and in this page, they allow you to choose two colors, one for the top, the kind of your content. So like, as you see, if I update this color, I'm gonna change it to something different like red. We could see this color updating on the examples that they have underneath here. So that's for the foreground color. You can also change the background color,
and as you see, as I'm updating these colors, I'm seeing some of these texts change. So I'm seeing some fail messages across different things. So I'm seeing that maybe this doesn't have a good color contrast ratio, 'cause it also gives me this contrast value here. So looking at our table,
we know that that color contrast is way too low to meet any of our outlined guidance. So as I start like improving this color, so let's say that I make it white against a black background, we see that everything passes. We see that this little table now shows a very, very high contrast ratio. So that tells me that this is a lot better than what we started with, and again, you can kind of play around with these colors. Check out your brand colors. I definitely recommend you using this tool to test out what type of colors work best for you and your site, and on the bottom here, it also tests for user interface. So like if you have little icons or contrast around your input fields, it will also check for that. All right, let's go to, this is an example
of a color wheel and I use this tool called Color Oracle to kind of create these different types of interpretations of this same color wheel through different color blindness. So we've got some color blindness that you can see, they won't pick up any of the reds or any of the greens. Then we have some that won't pick up that everything is kind of on a hue or pink reddish color and then we even have some that are completely gray scale. So this is what I mean when
I say, do not use color alone to signify anything important on your page, because this is going, this might be the experience of some of your users and they might completely miss out on what you're trying to convey. All right, so I'll take a little pause here and see if we have any questions. Thank you so much, Maria. This is Conrhonda from South Arts. Just wanna jump in with a question from the chat. A viewer today said, I create free events on behalf of my nonprofit organization. Does AWS allow for this type of integration?
And she relies on tech grants to offset related costs. So let's see. I'm not sure what type of integration you are speaking about, but I will say that, yeah, and I don't know if the person who asked this question wants to kind of jump on and clarify, but I will say that you should be able to apply any of the things that I've went through today in any of your applications and it should be supported. Hi. Yes, my name is Demetra Reyes. I actually asked that question. I
apologize if it wasn't clear, but because I am a nonprofit, I do utilize tech grants to help with offsetting costs related to different things that we need to do for the organization and this is definitely an important one, but financially, are there ways to incorporate the integration with little or no funds? I guess that's the best way I can think about it. Yeah, I would say that there are a lot of accessibility resources online that are available for free, that you can definitely use to train your team on. So that way you don't have to bring any more or outside help with it. Definitely check out some free resources. There is an amazing kind
of series on YouTube called A11yCast and I'll type it in the chat here. So it's like an A, 11, Y Cast and they they're really great about going through some of the components, and especially if you're working with a development team, how to test for some of these, how to use some assistive technology. So definitely check it out, and of course, look at my presentation has some links to the W3C, Web Content Accessibility Guidelines, and some guides that I'll be sharing to help your development teams on your design teams kind of make the right decisions for you.
Thank you so much. I appreciate it. Let's see. Do we have any other questions? Yeah. Just I have more of a comment slash request. Just wanna reiterate a couple people were talking about the demos that you provided for Dragon and braille readers and the screen reader. So those were demonstrations of what that experience would be like for another user and a reminder that all of these links are accessible in the presentation. I'm gonna drop Maria's response to that back in the chat in a moment so that you can access the presentation and click those links again if you want to incorporate it into your own trainings at your institution, I'm gonna pause and open it up to the room. If anyone wants to come off of their mic and ask a verbal question.
Perfect. All right. Thank you so much. If not, let's keep going. All right, so next let's get into the operable. So again, this is part of the POUR abbreviation. This is letter O. So operable, really makes sure that our user interface are interactive
and everyone can access them. So we wanna make sure that everything is keyboard accessible. So make all the functionalities available to your keyboards by testing like this, you're gonna kind of ensure that assistive technologies are also able to access that same content. So I'm actually going to open up this link here for ARIA Authoring Practices Guide. So now this is a site that is created by the W3C. So they create a lot of guidelines for the web, and they talk about some patterns and resources that you could use to design accessible content, how to use RLA landmarks, and I'll go over that in a little bit, but really talks about what are some things that you could do to create accessible content and if we start looking at some of the patterns, they go over things like, how do you create accessible accordions or alerts or dialogues? Breadcrumbs, buttons. So you can see that they have a very extensive list here and they will talk about, so let's go into one. Let's look at check boxes. They'll talk about some of the things that you should consider for design. They'll show you some
examples and they'll also very importantly talk about what are the keyboard interactions that are expected from this type of component. So like whether it's a button or accordion, like we saw, they really outlined this here. So like, as you're creating this content, really go check out what are the keyboard interactions that are expected for this type of component and once your application is ready, go ahead and test it out. Make sure that these are aligned and that everything works as it's supposed to and then of course, they really talk to some development teams. So definitely have your development teams check this resource out. All right. So next up, you also wanna make sure that you're providing enough time
for your users to interact and use your content and making sure that you're not designing, that you're not using design practices that are known to cause seizures or physical reactions. Let's talk a little bit about what that means. So you wanna make sure that your page doesn't contain anything that flashes more than three times in one second, unless the flash is below this threshold, which I linked to that definition here, but really just avoid any flashing content on your site. I would say that that's pretty safe and also be careful with motion animation. So motion animation triggered by interaction should be able to be disabled unless the animation is essential to your functionality or information, but really try to avoid any moving animation that cannot be stopped on your site. As it can be very distracting for somebody with cognitive disabilities.
All right, next up. Let's make sure that your content is navigable. So we've talked about keyboard access, enough time, seizures. Now we're at navigable. So this is really making sure that you're providing multiple ways for users to be able to navigate through your content, find your content or determine where they are within your content. So I'm going to open up this landmark
semantics structure guide that talks about this a little bit, and I'll just open it up really, and then we'll come back to this. This talks about some of the things that you can use to start kind of sectioning your website so that users can navigate through the sections of your site. So you can do things like an aside, a footer, a header, a main section of your site, any of your navigational sections, and then other regions that you want to create within your page. So let's go back to my presentation and let's look through some of this kind of structure that you can create within your pages. So, number one, I would say really, really, really, pay close attention to your heading structure. So headings give structure to the page as heading levels are used to create
kind of a hierarchical order onto your page. So looking at this heading structure, you want to make sure that you're nesting headings by their ranks and that you're ranking h1, which is the most important heading all the way down to h6, which is the least important heading and then that you're not skipping any content. So for example, let's go to this landmark page really quick. So in this page, I would say that this would be my h1, my most important header, my header one, and then that kind of encapsules a couple of other sections of information. So like that, all of the subsections in here speak to that landmark region. So all of these might be h2,
h2. So like this kind of section off from that section and then if we had let's say other categories within there, so for example, this one talks about landmark roles, this would be an h2, and within that section, there are some smaller subsections. So this would be an h3. So we're kind of nesting headers within different sections to create that order. Next up, we can also start structuring our content with the use of landmarks. Like we've been talking about. So landmarks act as sections that help structure your content. So a lot of pages kind of follow the structure that we see here, where we have a header. Somewhere here that holds all
of our, like our logo, our page name. We might have a navigation bar where users can interact to navigate through different parts of our site. We have our main content that holds like the most important piece of information of our content and then our footer, and then sometimes we have on aside that talks about like relevant thing, things that are relevant to the main content that can stand kind of on their own and then I created a little cheat sheet that talks about, the intended use for this R. Going back to the guide that I kind of shared before
they do talk about some simple steps that will help you decide what landmark is the best for you, or the appropriate landmark for the type of content that you're trying to create. So definitely check out that resource. So let's talk about some of the considerations. We want to make sure also that your link purpose can be determined by the link text alone. So for example, we want to avoid phrases like click here or learn more because assistive technologies might be able to pull a list of links that are available on the page, and if all the links, if they just get a list of links that say, click here, click here, learn more, they might not know what that content relates to. Like where are they headed if they do interact with that link? So you want to make sure, like, instead of learn more, read more about accessibility. Read more about web content accessibility guidelines, like that's a
much better, more meaningful link text. Provide descriptive headings and labels for your forms, provide any bypass blocks, such as a skip to main content link, which some of you have might have seen if you try to tap in a page and the first thing you see is skip to main content where users can just navigate to the main content without having to go through all of the navigational items in the top of your page, then you wanna make sure that you're having descriptive and informative page titles, and that the focus order is logical and follows the page structure and providing a focus visible indicator. So let's talk a little bit about focus and what that means. I'm gonna start at the top of the page here, so I'm just gonna click and then I'm gonna start tabbing through. So the first tab that I see is skip to main content. That's
up here all the way to the left. If I tab again, we do see this kind of white border around as I kind of go through, I see this focus moving, and I can follow it and it is following the same structure that I see on the page. It's following that same flow to the page. So it is the correct order and I'm able to follow it because it has the visual focus indicator. So that's kind of what we
are trying to get at and make sure that your focus visible indicators meet the color contrast also. Alright, so then we've got info modalities. So making sure that your users can operate this type of functionality to various keyboards or inputs. So let's talk about import functionality. Let's go over here. So this is another great resource to share with your development teams. This article talks about creating accessible forms. So it talks about different types of form elements like text input, radio boxes, check boxes, buttons, interactive images, and they talk about how, how you build it, and they provide the code and they provide an example. So today I just
kinda wanna briefly go over the example and I'm gonna do so by turning on my screen reader. So I am on a Mac. If you are on a Mac, you already have this already installed on your computer, but if you hit command F five, you are going to get. [Computer] To a banner blank. And I'm just gonna pause really quick, but you are going to get voiceover to come up. If it's the first time that you turn it on, you are going to get a little tutorial on how to use this tool, but definitely check it out once you get a chance. Again, that's command F five. If
you wanna turn it off, you can also turn it off by command F five. So it will be the same thing, but I do want to show you what the experience is like to, I'm gonna try to fill out this name field here. So I'm just gonna click here. [Computer] Input's unselected. And I'm gonna tap to it. [Computer] Name, edit text.
So you see that it says name, edit text. So I know I'm in the text field, 'cause it says edit text and the label for that is name. So I'm gonna say Maria. [Computer] Okay, Maria. Enter your address. Edit text. So I just hit tab again and it landed me onto the next focusable element, which was this question. Well, this was this text field that says, enter your address, and it told me edit text field, enter your address. So I know that I'm on a text field and I can start entering my address. So we can start seeing how assisted technology really interacts with this type of elements, and translate it to what I need to know. [Computer] Ham uncheck, checkbox. Select
your pizza toppings group. You are current. So it even told me ham, select. Select your pizza topping. So it was able to read the description. It read the label that this specific check box had and it asked the question up on top. I'll just turn it off for now, but I wanted you to get a
sense of what this experience was like and making you see that building these things correctly, providing this semantics really translate this really nicely for assistive technology. So make sure this is a great resource for your engineers to check out. Alright, so let's talk about some considerations for this. You, as a designer, you wanna make sure that all of your labels, so those text boxes above input fields are visible. So you're not hiding any text. Make sure that you're matching this to be the actual accessible name for that field, because some developers will kind of give it a name and then hijack the name with something that's not visible. So make sure that your development team isn't doing that. As you're kind of testing, make sure that the label
that you can read visibly is the same label that's being read by assistive technologies. Again, avoid using hidden text and give accessible names to icons that match their functionality. So for example, some forms will have a little trash can to delete something. Make sure that that trash can is not called trashcan, but delete, 'cause that's the functionality that it will have, and of course, make sure that all of your items that are interactive have at least a 44 by 44 CSS pixel in size. So that it's easy to click. No one's gonna miss it. If they're for example, on their mobile device, trying to click on something they'll have easy access to do so.
Alrighty. Any questions so far? I'll take a pause here. Welcome back. Thank you so much, Maria. I just wanna call out our users who are speaking to each other in the chat. Someone said that their audio cut out and they missed what you said about click here and another user responded that you said to use text that would describe that link out of context, such as click here to learn more about accessibility instead of just click here. So we had a question and it got answered. There's another question asking you may be addressing this
later, but curiosity about apps and tools like User Way and whether or not they actually work. I'm not familiar with User Way. Does somebody want to come off mute and explain and elaborate a little bit? Yeah. Maria, this is Jessyca with South Arts. That was actually a question that I had about User Way. It's an app that you can add to your website. I've seen it pop up with some other nonprofit organizations and either in, and also some commercial organizations.
Yeah. So thank you, Jen Williams, who dropped the link in the chat. Basically this particular app gives you options as a user to manipulate things like the contrast or even the language within the, with what you're looking at online and so I'm sort of curious as to whether those things are shortcuts or do they actually work or they just sort of get in the way of the accessibility work that needs to be done on the back end? Yeah, no, that's a great point. So I'm looking through their site now. I don't know too, too much about this specific tool, but I'll talk about
more general sense of like what it's like to include things like this. So I'm gonna just say right off the bat, that when people are using assistive technologies they have their own settings that they will use to improve their experience. So if I'm a super experienced, for example, screen magnification user, I'm going to have maybe some color contrast settings for myself so that I can really see the content the way that I need to see it. I might have some settings that maybe provide dark mode or enlarge my text sizing. So I want to say that we want to always, always, always allow people to customize their own settings. We want to make sure that we're not adding anything to our website, and I, again, I'm not speaking to this specifically, just generally, but we want to make sure that we're not adding anything on our websites that will block people from being able to do that with their own assistive technologies.
Now we're providing another additional way for them to do that on our site. That's fantastic. I would say that you should still be able, you should still pay attention to creating accessible content from the beginning. So for example, I don't, I would say that I would advise against doing something like let's not worry about color contrast, because then we're gonna just add a tool within our site that allows people to just change the color anyway. So we wanna make sure that we're
designing for accessible content, we're providing accessible content, and yes, we can extend that functionality of that app to meet additional needs by providing tools like this, but we wanna make sure that our original content is accessible by itself and then I do see a raised hand. Hi there. So under operable, we talked about keyboard accessible, seizures, making sure things aren't blinking. You mentioned enough time, providing users enough time to read and use content. We mostly been talking about sort of static webpages that are engaged with on the user's time to begin with. What would be an example of something where you should have a consideration around time, some kind of time based thing? I'm just struggling to imagine. What is that?
Yeah. So a couple of things like that could be about media content, but I'll focus on this example. What about timeouts? Let's say that you have an authenticated experience and then you're timing out your users after 30 minutes. So you have to make sure that you're giving them plenty of warning. Are you allowing them to extend their session if needed? Are you allowing them to read
through the content or have enough time with that warning to be able to interact? So like, you want to make sure that you're giving them plenty of time to interact with your content. Like if you're having, sometimes you'll have like a little notification that says like, oh, like something, there's an error on your page. We're going to like, you're gonna lose all your content, and then it just refreshes for you. You didn't even have time
to even acknowledge that warning. So that's kind of what that means and if you, yeah, go ahead. Oh, oh no, just that. Are, there specific guidelines around, well, for this kind of timeout, it should be X amount of time or this kind, et cetera, et cetera? Yeah, I recommend that you look at the web content accessibility guidelines. Let me just quickly run. It's on there? Yeah, it's all on there. I would say, it is, they won't necessarily provide you exactly with what you need to do. That's definitely like a consideration that you and your design team should
really talk about. They do provide some kind of start off examples of what you should do, like provide at least like two minutes for people to interact with your content. Or I think they call out 20 seconds, but other resource session, the two minutes is kind of the sweet spot. Thank you. But yeah. Check it out, check it out. Feel free to
reach out to me if you have questions about what you find out and then I see another raised hand. Oh, I think you're on mute. I can't hear you. Let's see. Is it just me? Can anyone else hear her? Okay. Oh, I'm so sorry. We can't hear you. Okay, perfect. She'll type.
Awesome, and Maria, if I may, while she's typing, we had another question in the chat and accolades for the information so far. The user is trying to see what the best way or sort of simple option is to get started doing, and adding some of these pieces. They use GoDaddy and they have some concerns or questions about what types of web providers, may be more receptive to these additions or not. So any insight you can share there. Yeah, I mean, I'll say that as long as you're writing your development team and design team to create accessible content, they should be able to use this across many different platforms.
There are some kind of tools like WordPress or tools like that that might have some limitations as to what they can do. So I would really work with your development team to test out the functionalities that it has, and really testing out to make sure that as you're implementing some of the things that are available there, that they're also meeting the expected kind of recommendations from the web content accessibility guidelines and all the keyboard interactions that they recommend and all of that, that should match. Some of these tools aren't 100% accessible and not all of the content that they create can be accessible. So I would definitely consider that and really have your development teams test out that keyboard functionality section. Yeah, that's so great. So I wanna ask in the event that someone is a solo shop, and they don't necessarily have access to a robust development team, do you have any guidance there? Yeah, I would definitely say check out the resources I provided on the presentation and they should walk you through how to test for all of these even with
2022-12-10 16:13
