 Oh, welcome to Web Accessibility, the next installment of the Accessible Technology webinar series. Thanks for joining us today. I ask that you stay muted unless you are asked to unmute. If you have questions as we go, please put them in the chat and I'll do my best to answer them at the end. I'm Anna Marie Golden, first name Anna Marie, and I'm an IT Accessibility Specialist with UWIT's Accessible Technology Services. This is my job to provide support and outreach to our campus web community to help make websites more accessible to students, faculty, staff, and visitors with disabilities. Today I'm going to talk about the five things you can do to make web content more accessible, including headings, links, images, lists, and color. But first some general guidelines, a few things to know. Assistive technologies use webpage markup to relay content to users. They read the underlying markup in the HTML code to render web pages. They don't actually read the screen even though some assistive technologies are specifically called screen readers. So that's why it's really important to use HTML elements semantically. In other words, use the correct element for the job and not for its appearance. When HTML elements are used for visual appearance, it confuses assistive technologies, and content may not make sense when it's rendered in that way. So I suggest always using CSS for formatting and minimizing the use of inline styles, especially font sizes and image sizes, because it can disable the ability for users to zoom to larger sizes for better visibility. This is very important for users who have low vision and are unable to consume content at what visual users would consider default sizes. I want to let you know though upfront, depending on how your CMS is set up or your access level, it is possible that you may not have access to your site style sheets. Okay, to begin our count of five things. Number one is to create an accessible heading structure because structure matters, especially for assistive technology users. So how do we do that? Well, first make sure visual headings are marked up as actual headings and not just style like headings with different fonts, different colors or larger text size. Headings should be in order, H1 through H6 without skipping levels. They provide an outline of the page's content. Ensure that you are only using one H1 per web page. Originally the HTML5 specifications said it was okay to have more than one H1 per page, and the idea was that each section of the page would have its own heading structure beginning with H1. But the problem is there are no user agents that have implemented this algorithm, so experts are saying wait, go back to what we were saying all along and just use one H1 per web page. And because headings are structural elements, it's important that they're not used for their visual appearance. One thing to note, proper heading structures on your web pages actually could increase your search engine optimization because they help search engines to index the content and structure of pages. So what does an accessible heading structure look like? As I said, headings outline content. On the right side of the slide, I have an example of what a heading structure might look like. The heading one provides the page title. It describes the main content on the page. And then heading two is a subsection of heading one. Heading three is a subsection of heading two, and so on through heading level six. Now sometimes there is more than one subsection of the same heading level, like I have here with the H3 headings under the second H2 heading, and that's okay, just repeat the heading level again. In HTML, there are six heading levels, so I advise not going beyond that because you may get undesirable behavior when technologies don't know how to render headings beyond level six. So if you need to go beyond a level six, you might consider breaking up content over more than one page depending on your situation. So how do I create accessible headings? For example, if I'm using WordPress, I add text to the page. I click the toolbar toggle to reveal more tools in the toolbar if they aren't already exposed. And then I select text, and I use the dropdown to assign the heading level. And I'm going to repeat this process for each heading on the page. And you may wonder why I didn't designate the first heading as the H1 heading. And that's because when I created the page title, WordPress automatically used it for the H1 on this page. And here is what that looks like in the underlying markup. I can see I have a proper heading structure. The two thing you can do to make web content more accessible is to create accessible links. What's the purpose of the link? So here link text is key. It's important to provide meaningful link text that provides context to users so they know the purpose of a link before following it. The text needs to make sense out of context. And you may wonder why is that? Well, assistive technologies users have this whole other way of navigating web pages. The visual users may not be aware of, and that is they navigate through keyboard shortcuts. So by using keyboard shortcuts, they can quickly navigate to elements on the page they are looking for, such as links. And assistive technology users can bring up a list of just the links on the page. And when they do, it's presented as a list of the link text used on the page. So if the link text doesn't provide enough context, users won't know what these links are for. So we don't want to use link text such as click here or more because assistive technology users just won't know what these links are for without following them. So there's a following links? There's something else you can do to help the flow for users, and that is to emit the use of target attributes wherever possible. Target attributes control where links will open such as target equals underscore blank. Using that blank target forces the link to open in a new tab. And while this is useful for some folks, it's not for everyone. It can become a bad user experience very quickly when a user may not know a new tab is open, and then finds it difficult to get back to where they started, because the back button doesn't work. The history doesn't follow users into a new tab so it essentially breaks the back button for these users. Another thing you can do for more accessible links is to underline them. This is the very first specification of the web. Links were underlined. Users know underlined links are clickable. So how usable are your links? It's popular to make links look like buttons because folks really want them to stand out. However, there is a problem with this. The differences in semantics between links and buttons mean each element has its own set of attributes and behaviors. The interaction models are different. Links navigate to content and they are activated on the keyboard using the enter key. Buttons perform actions and they are activated on the keyboard using the space key. When links look like buttons, it can create confusion for some users. For example, one of my colleagues is totally blind. I recall him giving a presentation once where he was talking about being on the phone with tech support. They were telling him to click a button on the page. He said, I don't see a button on the page. So because this link was styled to look like a button, it created a mismatch in what the two were experiencing on the very same web page. With image links, alt text needs to describe the link's purpose, not the actual image itself. And then there are document links. These work a little differently because instead of navigating to new content, they open a document. So it's very important to let users know a document will open when the link is clicked to prevent a disorienting experience. And there are a lot of ways you can do this, but there are two really easy ways that I can recommend. Do it in the link text. If it's a PDF document, note it is a PDF document in the link text. Or you can use an icon with alt text. Use the PDF icon using alt text PDF document. So how do I create accessible links? Remember, describe the link's purpose. Using WordPress in the toolbar, I click the link icon to open the Insert Edit dialog box. And when the dialog opens, I insert the URL into the URL text box. Then I click enter the link text into the link text box. And then I click Add Link. Note that I did not click the box to open link in a new window. I'm leaving that unchecked. And then when I click the Add Link button to add the link on the page, there it is. My link is created. And this is what it looks like in the underlying code. Now you might be thinking, Anna Marie, you said to make sure our links are underlined. Why isn't your link underlined? While it is indeed not underlined in the editor, if I were to render the actual page in my browser, the link would be underlined. And this has to do with the way WordPress and the UW theme work together. Note that if you're using a hosted site with university marketing and communications and your links are not currently underlined, you can ask them to fix that for you. The number three thing you can do now to make web content more accessible is add images to your pages accessibly. First off, there's a reason that image is there, right? It's either there because it adds meaning to content or it provides decoration for a more visually appealing appearance. So if an image conveys meaning, it needs alt text. Alt text provides a brief textual equivalent for an image or its purpose. Assistive technologies relay alt text to users so they can understand why the image is there. If you omit alt text altogether, assistive technologies will likely read the path and file name to users. And that may not make sense. And users may be left to wonder what they are missing from that image their assistive technology announced for them. Limit alt text to 140 characters or less. There are a couple reasons for this. One is that assistive technology users are not able to review alt text in the same way they can with other text on the page. Line by line word by word character by character in order to gain a better understanding. So if alt text gets too long, it gets difficult to remember. And another reason has to do with the way assistive technologies chunk up the data. They often relay text in chunks with long pauses between the chunks. And sometimes users miss content because they think it's done when there is actually more there. And since assistive technology users may be the only users who see alt text, it's important to omit information that's not available to all users. All of your site's audiences should be getting the same information. So keep your alt text as equitable as possible. Okay, so what if my images there because it helps provide a more visually pleasing page, but it doesn't really add anything. These are decorative images, and the proper way to handle them is to use no alt text. So that is alt equals quote quote. So while we aren't putting text between those quotes, adding the quote still means there is alt text there, but it is empty. So it allows assistive technologies to skip over decorative images. Never do this with an image that conveys meaning. So how do I add images to my page accessibly? Remember, describe the images meaning. So using WordPress, it's simple. I click this add media button, and it brings up the attachment details tile log, and I simply enter my alt text into the alt text text box. And when my image renders in the browser, it has the image markup as displayed at the bottom of this slide. Note the alt equals strawberries after the source URL. The number four thing you can do to make web content more accessible is to create accessible lists. We use lists when items are related. It's important that they are actual lists in the HTML code because that provides the structure that creates the relationship. So if we use paragraphs that are preceded by dash, dot, icon, etc. to create a list, it doesn't really work. It looks like a list to a visual user, but the structure is broken. List provide context. Assistive technologies announce a list. They provide the number of items in the list. And as visual users, if we're done reading a list, we just move on, right? We aren't stuck in that list. Having a proper list structure allows assistive technology users to skip the rest of a list when they're done reading it. There are three types of HTML lists. Ordered list, this is a numbered list. Unordered list, this is a bulleted list. Definition list. Well, these won't be covered today, but what I will say about them is if you're using them, think about why you are using them. Are you using them correctly to display a list of terms? Or are you using them for their visual appearance? So the first list we have is an ordered list. We use an ordered list when item order matters. On the left side of my slide, I have a list of pets, cat, and dog. Note how I have used the OL tag to define my list. This is what tells the browser to create a numbered list. On the right side of the slide, this is how this list would render in my browser. Note that I have two items preceded by their item number in the list. So how do I create ordered list? Remember an ordered list is a numbered list. So to create an accessible list, I'm going to first add text to my page. And then select the text and simply click the numbered list button in the editor's toolbar. It displays as a numbered list when rendered in the browser. And this is what the underlying markup looks like. The second list we have is an unordered list. We use an unordered list when the item order doesn't matter. On the left side of my slide again, I have a list of pets, cat, and dog. And note this time I have used the OL tag to define my list. This is what tells the browser to create a bulleted list. On the right side of the slide, this is how this list would render in my browser. Note that I have two items preceded by bullets in the list. So how do I create an unordered list? Remember an unordered list is a bulleted list. So to create an accessible unordered list, I first add text to my page. And again, I select the text and this time I click the bulleted list button in the editor's toolbar. It displays as a bulleted list when rendered in the browser. And then this is what the underlying markup looks like. Fifth and final thing I'll talk about today is color. The first thing I'll talk about regarding color is contrast. It's your content readable to a variety of users because colors were used to provide an adequate contrast between foreground and background. So this is really important because some users with visual impairments cannot consume content with poor contrast. So on the right side of my slide, I have two examples of a set of tabs. Note how in that top one, the text in the tabs looks very washed out. It is much harder to read than in the second set of tabs. And even for users with strong visual acumen, the difference is notable. The second set of tabs is much easier to read on the light background when darker text is used. So how can I make sure color contrast is adequate? The formula divides the relative luminance of the lighter color by the relative luminance of the darker color, but seriously, there is an easier way. There are many, many free color checkers out there and I'm going to provide two examples today. The first one is going to be the color contrast analyzer by TPGI and it has eyedroppers that make it easy to grab color from anywhere on the screen. The second one, the color contrast checker by WebAIM has scrubbers to lighten and darken colors to find an accessible color combination. So on this slide, I have some examples of text on a back background and I want to test them for adequate contrast. So to use the TPGI color contrast analyzer, I simply click the eyedropper for the foreground and drag it to the foreground color I want to test. And then I do the same for the background color and then the checker tells me right away that this color combination passes. So in the second example, I'm only going to test the foreground color because the background color is the same. And I can see right away that this one fails, that there is not adequate contrast for that color combination. Nope, I want you to know this is an older simplified version of this tool. They do have an updated version that that's more robust and it has more features. So the next one here is the contrast checker by WebAIM. To use the WebAIM color contrast checker, I started by adding hex numbers for the foreground and background colors in the appropriate text boxes. And the tool told me right away that this passed the color contrast test. Now if it doesn't pass the test, what I can do is I can grab the scrubbers then and move it until I get a more accessible color combination and I know that because it tells me right away in the different categories when that passes. So this is especially helpful if perhaps the colors in your theme aren't passing the contrast test, but maybe they're pretty close and it may be possible to move a scrubber a little bit to find a more accessible color combination without an obvious change to your theme. And the second thing I'll talk about regarding color is meaning. Are you conveying meaning through color on your website? If so, this can be an issue for folks who may not perceive color in the same way others do. Note that it's not wrong to provide meaning through color, but if you do, please provide a backup so everyone gets the same meaning. I have a couple of examples on the right side of my slide. In the first example, I have a set of links embedded in a sentence. The first link is noted by color alone and the second link is noted by color, but it's also underlined. So in the first example, users who have low vision or who perceive color differently may have difficulty perceiving the links from the surrounding text. For some folks that blue and black can appear very close together and it may be hard to distinguish a part, so they may not know a link is there without hovering over the page to find it. In the second example, there's a backup. The link is underlined. So even if I cannot perceive color, I know the underlined text is a link. And in the second example, I have a set of carousel lentils. Does everyone know what I mean by lentils? These are often displayed in dots below an image slider to let users know which slide is in view at the time. In the first set of carousel lentils, I know which slide is in view only because the first dot is a different color. But the yellow dot is a color very close to the white dot, so some users with visual impairments may have difficulty distinguishing one color from the other. In the second set of carousel lentils, I have a backup. Not only is the lentil a different color than the rest, it's also a different shape. And note that these lentils are also numbered. This can be very helpful in providing context for users, especially if there are numbers that extend beyond what is displayed. The third example provides the most context for users, but it has a big problem, doesn't it? It's really hard to read the number two because it's black and it has a dark field circle around it creating really poor contrast. Now, if they had used an unfilled circle, it would provide context while also providing adequate contrast for visually impaired users. This set of lentils also includes a set of buttons that allow us to move through the slides, so that's helpful too. So, for recapitulation, there are five things you can do now to make web content more accessible. One, make sure headings are in order without skipping levels. Two, underline links and provide link text that provides context to users about the purpose of the link. Three, add images with alt text to describe them. Four, use lists for items that are related. Five, and we also have great information on the accessible technology website. And I've got a link here and my colleague is going to put the links for those in the chat for you. Okay, so that's what I have for you today. Do folks have questions? Do we have questions in the chat, Andrea? There was one question. Towards the beginning. When you were talking about using links and describing the links instead of click here. So Dan has a question. Instead of click here. Is it okay to say click here to register? For example, in Veronica also had an input. She said, yeah, for register now is another good option. Yeah, yeah, so use register as part of your link text. That's a great idea. Thanks Veronica. Awesome suggestion. I agree. And Emily has a question. This might be too specific, but any advice on alt text for maps? For maps. Yeah, that's a great question. That sounds like this huge thing, right? So what you can do when you have an image that is too complex to describe in 140 characters or less. Please still provide a brief alt text description of a brief overview of what that is. And then you can state in your alt text that more there's more described in the surrounding text so that they know to go there to look for it. So you're still using alt text, even though you can't do it all in 140 characters, but you're still giving them a place where they can in that alt text where they can get additional information. Okay, and then another alt tip question. Do you have any tips in writing concise alt text? Oh, yeah, that's a good one. The thing about alt text is there's really sort of an art to it rather than a science, right? Because, you know, the thing is you want to make sure that you're first and foremost getting the meaning of that image out there. Could you repeat the question again, please? Yeah, any tips in writing concise alt text? So yeah, try to make it short and sweet as possible. Yeah, and then if you can't, again, if you can't do it in 140 characters or less, you can direct users to surrounding text for that. Because sometimes it can be really hard to make it that concise. And so maybe it's, you know, this image is an overview of blah, blah, blah, please see surrounding text for more information. Yeah, Steph has added something into the chat. Ask yourself what aspects of the image are relevant and what isn't. Yes, that's really good advice. I totally agree with that. Thank you. And then Rebecca has her hand up. So maybe Rebecca, you can unmute and ask your question. And then we'll go back to the questions in the chat. I was thinking about something you said right at the beginning to use CSS for formatting, but for, you know, without using inline styles for fonts and image sizes. And like there was the comment that our CMS may disable access to file sheets, which is the case that I have found for my site. So I was wondering if you have any other strategies for changing font sizes without using inline HTML. Yeah, it does get pretty tricky doesn't it when you're trying to do that. One thing I wonder if it's something that you're doing a lot. Maybe it would be a good idea to work with the folks who developed the site and ask them if they could add a few more styles for you. Yeah, definitely that is kind of where I was thinking also, but it's curious if there are any other kind of sneaky work around, but that's a good suggestion. Thanks. Yeah, if anyone here has them, please feel free to bring them forth because I'm drawing a blank at the moment. So what was the question again. Basically, if there's any other ways of changing font size without having an inline HTML like line in there, if we don't have it in the CMS currently. I know one thing that might be helpful is if you. Oh, if you if you use like the relative kind of relative sizing options for CMS where you're using like, you know, small and large. So, those kind of relative things will will scale a little better than if you set a specific font size like if you're saying, you know, 16 point or something. Yeah, thanks. Thanks, Rebecca. We have a couple other questions. See, we'll go back to. I think it's L brown or a brown. Could you share information about the best practices for HTML tables. I can. We're not really discussing tables here today, but if you want to reach out to me personally I'm happy to help you with that. You can reach me at am golden at UW.edu. Awesome. So, Veronica said this was great. We'd love to share it with new content editors will the recording be available anywhere later. Yeah, the same question. Yes, well, provided there are no problems with the actual recording. We'll be getting it sent off for captioning and then once it's captioned, excuse me, captioned, then I will post it to our webinar archives page. And that usually wait up to about two weeks for that because it just depends on the timing about how we when we get the captions back how long it takes them to do that. That's a big question to this just because I'm new to these but I was trying to find the most recent ones because I had some marked on my calendar and like there's one from like December 15 or 14 that still hasn't come online. So I'm curious like if those ones are just like the recording is lost or if those are possibly just like in the delayed time frame captioning. I believe we didn't record that one. Yeah, so if you if you find that there's one missing, take a look at previous ones, because it means often that there's a previous webinar on the same topic. And if we don't record it, it means that the presenter has told us that the content has not changed very much from the last time they presented. I see. Yeah, and if you're having trouble with that, feel free to reach out to me. I'm happy to help. And once you're done going through have some other questions if you have a little bit of time later on, but I'll just leave my hand. Okay, and then we have a question from Sarah in the color contrast checker. Are we aiming to meet double a or triple a level. And you might want to explain a little bit about that too. Okay, good. Good question. So at the UW we strive for level double a in accessibility. This was part of my question to it's not just strive wouldn't legally sense of the section 508 refresh in 2018. Wouldn't that mean that technically it's illegal gray area whether not universities are bound to that since their federal contractors. So that in the university. So section 508 right as well would entail and then also the UW IT's policy to use what kind of conformance that section at level a is technically the law right and all the IT they procure. So I think there's a little bit of confusion here. So with the with the IT that's procured. That is a state policy 188. Yeah, that says that all of the technology that we buy and use in state agencies must be accessible. So that's a state policy. Now at UW we have the UW IT accessibility policy so that's section 508. So you dumb policy and just for you dumb and in that policy we state that we strive for level to a. So it's not it's not like the law but that's our policy. But what about section 508 of the rehabilitation act of 1976. Yes, that applies to us to as a federally funded agency. So then you guys are bound to federal law as well. Yes. Okay, that was my question. Yes, I'm sorry I think I misunderstood what you were saying. All right, and I'm just going to put some links in here and we'll look at more chat questions. See, and gave me feel free to chime in if you see one. So we have one from L another alt text question. I put profile images for different speakers and professors on event pages. Most of the time people don't have alt text or use something like avatar. What would be the best way to handle these images. They are to provide visual information. And yet I'm not sure how informative they would be for people with visual impairment is something like professor X profile picture suitable and and L you're welcome to unmute if you'd like to add anything more to that. Yeah, that's a really good question. So in that case, you know if you're if you're just showing like a headshot of professor X. The text might read professor X, because that's the meaning of that image right he's the meaning of that image you're you're showing him to the world. Awesome. See, we've got a couple comments. I think about in the chat about. I'm going to ask a meeting to help me out here. The style style at the top of the body. Yeah, I think there's a. I'm not good enough. I'm not skilled enough to know Veronica mentions ask your developers to set up a couple classes for you. And I think that was when we were talking about the CMS and font sizes. And L respond also wrote in the chat you can use style run slash style at the top of the body. And so going to have to have Anna Marie or gave you check the chat on that one from L. I love how you guys are having a discussion in chat to have a question from Jeff question about alt text using the strawberries image as an example. Would it be appropriate or not appropriate to add more details such as a bowl of more than 12 strawberries with stems or better to leave very simple strawberries. Thanks. It depends on the actual meaning. So in the context you're using it in. So, you know, if the context you're using it in is requires more than just a general description. Yeah, then you then you would give a little bit more information about it. But in my case, you know, it's just from, for example, my example, it just meant strawberries. But maybe I want to point out that they're fresh strawberries, for example, because that's the context I'm using them in. So, yeah, even the same image. The alt text can change depending on what context you're using it in right. Yeah, I like that how if it's fresh strawberries, then you'd have to talk to them if you're using it in in a math problem, and you want to note that it's more than 12 strawberries. That might also be important if you're working with elementary school age or something like that. Exactly. Okay. Let's see. I think that's all the questions. I have a question about automated tools. So how do you feel about automated tools such as sort site. And my question on that is their accuracy. So the federal government, that's the one they mostly use and it checks whether you're compliant with look at 2.1 currently and it will 2.2 when that's released later this year. But it for example, like, if the UW IT policy page says like, they're supposed to use conformance level a, and then like you can put UW IT policy page into that. And UW IT's policy page breaks federal law. Who do you talk to about that? And it's also kind of more of a networking question. Like, how do we work together to find solutions? Um, I can't comment on site sort because I have not used that tool. So what about, okay, so just understanding like that a lot of UW IT pages do break the law. How do you, who do we talk to like work their solutions. I guess you could reach out to Bre Callahan if you're having a problem with the website and you've, you've already reached out to the website owner and they're not being responsive. Who owns the websites for the most part? Is it the individualized? It's not just UW? I guess it might be. Yeah, there's no central thing for UW websites. Each agency and department just sets up their own. There's no central place where people go, oh, we want a UW website now. That's a really good starting point. There are some websites that are hosted through university marketing and communications for some of, you know, the main UW websites. So the lack of conformance to the law is probably with those you should reach out to university marketing and communication. That makes sense. So like, because it's not as centralized as it could be, that's probably why some of these downfalls happen, because there's no like centralized. Yeah, and that's why we're here doing our outreach because, you know, unless somebody, unless you've been informed, you just don't know. You don't know about accessibility. Yeah, that makes sense. I'm just trying to find the best place to like spend my time because like I'm still a student and I'm trying like, you know, that's my second year. And because of some of these problems I've been having with accessibility, it's probably going to be one of many years. If you're a student, I strongly suggest reaching out to the disability resources for students. Oh, I've already done that. Don't worry. Okay, good. Because that's your team. Yeah, they're greatly underfunded. It's quite sad. They definitely need more funding. Besides that, I guess, like in terms of like networking to like help, you know, improve some of these problems, I've definitely gone that avenue already. I know that avenues just not the most effective avenue. I do think like they would be if they had the funding to do what they need to do. But I'm just trying to find other avenues. Because I'm very knowledgeable in this stuff, but I just need to talk to the right people to make the right conversations happen. Yeah, so I suggest reaching out to the folks that I've already mentioned for those. Is the main one. Okay. Well, if anyone else is interested in this stuff and wants to network, I'm going to put my email in here. Okay, do we have any more questions? Hey, thanks for joining us today, folks. Like I said, within a couple weeks, this video will be posted on our archives page of the accessible technology website. Have a great rest of your day.