Webinar - Accessibility in Digital Spaces with Maria Lamardo

Webinar - Accessibility in Digital Spaces with Maria Lamardo

Show Video

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

Show Video

Other news