Accessible Web Content Creation

00:05 - This is the second in our accessible technology webinar series.

00:10 - Sheryl Burgstahler kicked us off last month with a universal design talk.

00:16 - And today we want to explore the basics of web accessibility.

00:20 - We do a lot of activities and events throughout every month where we do more of a deep dive into web accessibility and look at some of your projects and applications and websites under development and look at some of the more challenging aspects.

00:38 - And how do you make these challenging features accessible? But sometimes it’s helpful just to get back to basics and talk about the foundation of web accessibility.

00:49 - What exactly do we mean when we talk about web accessibility? So that’s our intention here with this presentation– is to get back to basics.

00:58 - So I’m going to offer a little bit in the way of a PowerPoint overview.

01:06 - And then I’m going to hand it off to my colleague Anna Marie Golden, who will do part 2.

01:15 - I am Terrill Thompson. I’m the manager of the IT Accessibility team.

01:18 - So we’re part of Accessible Technology Services, which is a department within UW-IT.

01:25 - And we promote technology accessibility throughout the entire University.

01:30 - So we’re here to help with all sorts of things related to IT accessibility, including websites, digital documents, videos, software, you name it.

01:41 - If it has a user interface, then it has accessibility implications.

01:45 - And we are here to help ensure that those user interfaces are something that everybody can use.

01:52 - So focusing today on website accessibility, we, of course, need to ask, what exactly is that? What do we mean when we say “accessible websites”? Well, if you think about how people access computers or how people access information, digital information, then it tends to be an input-output model, where you’ve got some means of providing input into the computer– it might be a keyboard, might be a mouse, might be some other device– and then receiving output.

02:29 - There’s some means of receiving output from the computer, which traditionally has been a monitor.

02:33 - So this is a very traditional model, keyboard and monitor.

02:38 - And the mouse came actually a little bit later than the keyboard.

02:41 - But those three work in combination to provide users with access.

02:47 - That’s been the historic model. But it’s getting to be a little bit old school.

02:52 - Nowadays we have people accessing content on a lot of different devices.

02:58 - On the slide here, we have a variety of cell phones.

03:03 - This is an older slide, so these are a little bit older models.

03:06 - But the variety still exists. You got a lot of different shapes and sizes and platforms.

03:12 - And the choice of platform is going to influence how a person perceives the content.

03:19 - And it’s going to be very different than what sort an old-school person has traditionally received using a keyboard, mouse, and a monitor.

03:29 - And then you’ve got tablets as well, again, a wide variety of shapes and sizes and platforms.

03:35 - You’ve got some people who aren’t accessing content visually, but they’re doing so audibly.

03:42 - So when we talk about disabilities and accessibility, we typically talk about somebody who’s using a screen reader.

03:49 - So that might be somebody who’s blind, somebody who’s low vision, somebody who has dyslexia.

03:55 - And they’re using a tool to read content audibly while they look at it.

03:58 - So you get that multi-sensory input. But a lot of people access content audibly rather than just visually.

04:07 - And that actually is expanding all the time because people are using hands-free interfaces on a lot of these devices.

04:14 - And so listening content becomes a way to consume content, not just accessing it visually.

04:22 - Also, for input, we have different modalities where, rather than using a keyboard or a mouse, maybe somebody is using speech input.

04:31 - A lot more people are doing that these days, again, because of our hands-free environment and because different devices now support speech input.

04:40 - But traditionally, that’s been the domain of people with disabilities, somebody who, for example, can’t use a keyboard or mouse due to physical limitations or, more commonly, somebody with carpal tunnel syndrome or repetitive stress injuries.

04:57 - Maybe they’re using speech input for everything.

05:00 - Being able to operate the device, click links, click buttons, move sliders, do all those sorts of things with speech input becomes important.

05:11 - We also have people who operate by touch. So what we see here on the screen is a refreshable braille device.

05:19 - So this particular model allows somebody to use the braille buttons as an alternative keyboard for input.

05:28 - But also, there’s a row of dots that refreshes as the person explores the content.

05:35 - And therefore they’re able to read the content of websites and other computer information using braille.

05:45 - And so I ran out of slide space, otherwise I could go on and on and on about different ways that people access technology and access the web.

05:52 - And the bottom line is it’s a very diverse landscape.

05:55 - There are so many different ways, different configurations, different tools, different devices, different platforms that what you see on your computer is not the same thing that somebody else sees.

06:07 - You can almost guarantee that. Even if somebody is old school and accessing content visually through a monitor, they have a lot of options.

06:18 - This is on my MacBook Pro. I’ve got resolutions from 640 by 480 to 1680 by 1050 and all points in between, stretched and not stretched.

06:29 - And within my browser, I’ve got font sizes from 9 to 72.

06:34 - 16 is default, but a lot of people will mostly beef that up.

06:40 - I don’t know how many people go down in size.

06:42 - But maybe some people can do that. But a lot of people will set their browser’s font size to a larger size just because they need that as we have aging eyes and we see things a little bit bigger.

06:54 - So a lot of flexibility, and again, depending on what settings we use, it’s going to be a very different experience for us accessing your website.

07:04 - So I wanted to introduce you just to a few individuals.

07:08 - These are all students that we worked with over the years.

07:11 - And the reason I do that is because it’s easy as we’re talking about web accessibility to talk about standards and the technical issues of how you code for accessibility and so forth.

07:23 - But it’s important to keep in mind that what we’re really talking about are people.

07:28 - This is a human interface issue. We want humans, we want students, we want employees, we want visitors to be able to access our content.

07:39 - Otherwise we wouldn’t create the content. And so it’s important that we understand that there’s diversity within our audience.

07:49 - And so this is Jennifer. Last time I knew, she had been a public relations major.

07:55 - And she ended up going to work for a nonprofit group that responds to unmet needs of local adults with disabilities.

08:03 - But she has a mobility impairment. And so she’s not able to use a mouse.

08:08 - It’s one big issue in terms of her interface– is that she just physically cannot manipulate a mouse.

08:16 - But she can use a keyboard. But what she has here is an IntelliKeys keyboard, which has larger targets than a traditional keyboard.

08:25 - And she’s using a stick that she’s holding in her right hand and has enough dexterity to hit the keys on this larger keyboard with that stick.

08:35 - So her navigation through websites and so forth is through a keyboard interface using the Tab key to move from focusable element to focusable element and other keys that makes sense.

08:51 - This is Courtney. She has a bachelor’s degree in communications from the UW.

08:57 - And she works for Rooted in Rights, which is a program that creates media centered around disability rights.

09:03 - She’s a very active blogger and was kind of out there in terms of her presence online and so forth.

09:12 - She uses a screen reader. And she gets her output both audibly, listening to content, as well as through a braille device.

09:20 - And so what you see here is her using her braille device.

09:24 - And she’s got headphones in, too. So she might be listening as well.

09:28 - But a lot of times, people who are blind will switch back and forth.

09:32 - If they have no braille, maybe they’ll use braille in addition to listening to content.

09:38 - Some people who are deaf blind will just be using braille exclusively.

09:42 - But again, you’ve got a lot of variety. Here’s Courtney again, this time shown with Conrad, who earned a law degree from the UW.

09:51 - And he has done extensive work with that law degree.

09:55 - He interned in Washington, DC, three different times with different organizations.

09:59 - He’s received numerous awards for his scholarship and civic engagement.

10:05 - And he is now a leading disability rights attorney in Seattle and is a member of the Washington State Governor’s Committee on Disability Issues and Employment.

10:13 - And he’s not able to use keyboard and mouse.

10:18 - And so he uses other means of controlling the computer and accessing information.

10:25 - Among other things, he does use Dragon Naturally Speaking.

10:28 - So he’s one of those speech input users. But he uses a lot of other things, too, just using switches and various things to find his way around on websites and to access content.

10:45 - And here’s Hannah. She has low vision.

10:48 - And so she’s leaning into her laptop here. But she also has Zoom text running, which enlarges everything on the screen, makes everything a little bit bigger.

10:57 - She’s looking at some program code there. And she, in fact, was a computer science major and a physics and math minor.

11:04 - [INAUDIBLE] tons of awards that she received while she was at the UW.

11:08 - She interned at Facebook and software development when she was at the UW and now works for Facebook.

11:15 - So I introduce all of these students just because they are so diverse in the technologies that they’re using.

11:23 - They all have done a really outstanding job in their academic careers.

11:27 - But they did so through a very different interface than a traditional interface.

11:32 - So this is really what web accessibility is about– is making sure that everybody, including regardless of where they fall on this continuum of ability to see or hear or walk or read print and so forth– web needs to be accessible to everyone.

11:52 - And if you look at this continuum, it’s not really a binary thing.

11:56 - It’s not people with disabilities, people without disabilities.

11:59 - It is, depending on what you’re measuring exactly, some people are very high on their ability to do that thing.

12:06 - Some people are very low on their ability. And so, for example, to be able to see– some people have ²⁰⁄₂₀ vision.

12:14 - Some people have no eyesight. But most of us fall somewhere in between.

12:20 - And if we were to plot all of these variables on this continuum, you would get dots all over the place.

12:31 - We just, as humans, are very diverse. And so that is what web accessibility is all about.

12:37 - It is creating a website that works for all users.

12:42 - And it also is about creating a website that complies with accessibility standards.

12:47 - And so let’s do talk just briefly about standards because that is an important piece.

12:52 - As I’ve been talking about all these different users and all the different devices and configurations they have, it might seem kind of overwhelming to think, oh my gosh.

13:03 - How am I going to test with all these possibilities? And how can I possibly understand all the hundreds of ways that people can access the web? Well, you don’t have to do that, fortunately.

13:15 - You just have to know web accessibility standards.

13:18 - And the assistive technologies that people are using and their web browsers and operating systems all also support those standards.

13:27 - And so that’s where communication happens– is at the standard level.

13:31 - So the standards are the glue that kind of binds all these things together and makes communication happen.

13:39 - So the source of standards is the World Wide Web Consortium, or W3C.

13:44 - That’s the same group that owns the HTML specification and cascading style sheets, CSS, and lots of other specifications and standards related to the web.

13:58 - They also, very early on in the infancy of the web in the early ‘90s, began working on the Web Content Accessibility Guidelines.

14:07 - Because they wanted to be sure that this vision for the web of being information at your fingertips for the entire world was realized and that the web did not create barriers.

14:20 - It made information more accessible for everyone.

14:24 - And so the W3C was aware of this early on of the potential for barriers.

14:30 - And so they created the Web Content Accessibility Guidelines, otherwise known as WCAG.

14:35 - And we’ll talk more about that. But also, they have more recently created a specification called ARIA, which we talk about quite a bit in web accessibility discussions, particularly when we get into deeper dives.

14:51 - Accessible Rich Internet Applications, or ARIA, is a way of adding code to HTML that helps it to communicate dynamic, rich, interactive applications that happen on the web– communicate those effectively to assistive technologies.

15:10 - So at this point, probably, in a basic class, it’s important just to know that ARIA exists and that it does serve that purpose of making dynamic web pages more accessible.

15:22 - But that’s a topic probably for another day.

15:25 - In terms of WCAG, though, the current version is version 2. 1.

15:32 - And that’s broken into four broad concepts.

15:37 - Web content, in order to be accessible, needs to be perceivable, operable, understandable, and robust.

15:44 - And I could go into detail about what each of those means.

15:48 - But we’ll save that for another time as well.

15:52 - There is an image here on this slide of coffee being poured into a mug.

15:58 - And the keyword there is “pour. ” You can remember these with that acronym “pour,” P-O-U-R– Perceivable, Operable, Understandable, and Robust.

16:08 - But what does that actually mean? Well, as you drill into each of those four concepts, you get to, ultimately, the lowest level within WCAG, or what are called success criteria, which are sort of like checkpoints.

16:22 - These are the specific things you need to do in order to make web content accessible.

16:26 - And there are 78 of them in WCAG 2. 1. And each one is identified with a level, either A, AA, or AAA, that is kind of a balance between priority, how critical is this issue, and difficulty, how reasonable is it for most web designers and developers to be able to do this.

16:51 - And so early on, when WCAG 2. 0 was first published, there were questions about, well, how accessible is accessible enough? 78 success criteria is a lot.

17:06 - And some of them are really difficult. But those all fall under level AAA.

17:12 - And so the ones that are believed to be attainable and that are pretty critical all fall under either level A or level AA.

17:21 - And so that has kind of emerged– very clearly emerged, actually– through legal action and through policies that have emerged in response to legal action and so forth.

17:33 - It has become clear that the expectation is that we be able to meet WCAG 2. 1 level AA.

17:41 - So again, what does that mean, exactly? Well, that’s what we’re going to cover in part 2 of this presentation.

17:49 - So I just want to mention the Washington State Policy 188.

17:52 - This is state policy that requires all state agencies to have accessible information technology.

17:59 - And we’re covered under that at the University of Washington.

18:02 - So it does specifically state that it includes higher education institutions.

18:08 - And the minimum accessibility standard that’s specified by that policy is WCAG 2. 1 level AA.

18:16 - So just like everybody else, we are needing to meet that level of accessibility with our websites.

18:26 - So I want to wrap up just with how to learn more.

18:28 - And then I’m going to hand it off to Anna Marie to cover some details.

18:32 - But our website, UW Accessible Technology– this is at uw. edu/accessibility.

18:40 - This is where we cover a lot of information about web accessibility and document accessibility and video accessibility and so on and so forth, a lot of information there on our website.

18:51 - So I encourage you to check that out. And also, events– we have a number of events, some on a monthly basis, like our Web Accessibility and Usability Meetup.

19:05 - We do that once a month on the second Thursday of every month.

19:08 - We have office hours on the first Thursday of every month.

19:12 - And often in a given month, we’ll have some special events, trainings and workshops, and other events related to accessibility.

19:19 - So I encourage you to check out our Events page at uw. edu/accessibility/events.

19:27 - Otherwise, just stick around because, like I say, Anna Marie has all the details.

19:33 - So I’ve been talking kind of in the abstract about what all this means.

19:37 - But she’s going to talk about what it means at a detailed level as you’re actually producing web content.

19:45 - So I’ll stop sharing here and hand it off to you, Anna Marie.

19:51 - ANNA MARIE GOLDEN: It doesn’t appear that I have the ability to share at the moment.

19:58 - All right, here we go. Hi. I’m Anna Marie Golden.

20:09 - I’m also an IT accessibility specialist with the IT Accessibility team with Accessible Technology Services, a part of UW-IT.

20:23 - Today, this webinar will cover heading structure, images, links, lists, color, tables, and forms.

20:34 - So to start off, an accessible web is a semantic web.

20:39 - Many people with disabilities use assistive technologies to access the web.

20:43 - And these assistive technologies rely on a web page’s markup in order to relay that content to users.

20:50 - So they’re reading the HTML code, not the screen.

20:54 - So even though one of the assistive technologies is called a screen reader, it’s actually reading that underlying code.

21:01 - And that’s why it’s so important to use HTML elements semantically.

21:05 - In other words, use the correct element for the job and not solely for its appearance.

21:11 - That’s because each element has its own set of properties, behaviors, and interaction model.

21:17 - And assistive technologies are confused when elements are used for their appearance and not for their purpose.

21:26 - One way we can do that is with an accessible heading structure.

21:30 - With a heading structure, visual headings should be marked up as HTML headings.

21:37 - They need to be in order without skipping levels.

21:40 - And we have levels H1 through H6 to work with.

21:44 - Only one H1 heading per web page. Again, not used for its visual appearance, but for its meaning because this outlines the content of your page.

21:56 - Much like if you’re doing a research paper, and you start with your outline and then fill in the content, your headings are going to do that same thing for your web page.

22:07 - And search engines, really beneficially, use and index content and structure of web pages.

22:14 - So if you’re using a heading structure in a correct manner, it could increase your search engine results.

22:22 - On the right side of my slide here, I have an image of what that should look like.

22:27 - So with the first heading 1 with only one heading, that’s your page title and main content.

22:33 - And then heading 2 is under that four major section headings and then H3 headings under that, which would be subsections of heading 2, and so on in the heading structure.

22:47 - So I have an animation to show how that’s done in the Wordpress environment.

22:52 - We use a lot of Wordpress here at the University of Washington.

22:58 - So first, I need to add some text to it. And then once I do that, I’m going to click this toolbar toggle because that gives me some more options in my toolbar.

23:13 - And then I’m going to select the text that I want for my heading.

23:18 - So in this case, I want that to be a heading 2.

23:22 - And then underneath the heading 2 will be heading 3.

23:27 - So I’m going to mark all of those appropriately on this page.

23:34 - And then when that’s done, I can show you what that code would look like behind that.

23:41 - So it starts with my H2 here. We have H3, some text, H3, and so on.

23:52 - Any questions about heading structure? AUDIENCE: I have a question.

24:00 - ANNA MARIE GOLDEN: OK. AUDIENCE: I noticed in Wordpress and Canvas and other places there’s no option to put in a heading 1.

24:11 - And so the headings always start with heading 2.

24:13 - How do I use headings properly when creating content using a tool like that? ANNA MARIE GOLDEN: Oh, thank you for that question.

24:20 - Very important. I didn’t cover that here.

24:24 - So note in my code here, it starts with the H2.

24:27 - So where is that H1? The H1 is actually going to be the title of the page.

24:33 - So when you enter the title of the page in Wordpress, it’s going to use that as your H1 heading.

24:39 - So it doesn’t show here. But if I were to view this web page in my browser, I would have a heading 1 above this.

24:47 - AUDIENCE: Great. Thank you. ANNA MARIE GOLDEN: OK.

24:52 - Great. So let’s talk about accessible images.

24:58 - It’s really important to use alt text for all images that convey meaning.

25:03 - Now, alt text looks like this, alt=, and then in quotes a brief textual equivalent of the image’s purpose.

25:12 - It’s not necessary in this alt text to say “photo of” unless that is the context because the assistive technologies will announce to users that it is a graphic.

25:22 - And I would like to add it’s really important to limit your alt text to 140 characters or less.

25:29 - And there’s a couple of reasons for this. One of them has to do with the way assistive technologies chunk up that data to relay that alt text to users.

25:41 - So another aspect is with assistive technologies and text, users usually have the ability to traverse through that text, either word by word or character by character.

25:56 - So they can review through to more clearly understand it.

26:01 - With alt text, they don’t have the ability to do that.

26:05 - So you want to keep it short so that they can remember what you’re talking about as you’re doing it.

26:11 - And then assistive technologies relay this alt text to users.

26:15 - And it’s really important to omit information that’s not available to all users.

26:20 - So if I put something in alt text, then it’s going to be available to assistive technology users.

26:26 - But as a visual user, when I go to that page, I may not have access to that information.

26:32 - However, I will note that if an image fails to load for some reason, I will get that alt text.

26:40 - And sometimes we have decorative images just to make our pages look pretty or to fill space.

26:47 - They don’t really add to our content of the page.

26:50 - So in those cases, use null alt text. And that’s basically just alt=“”.

26:57 - And use these for decorative images only, purely decorative that do not convey meaning, because this allows assistive technology to ignore that image.

27:11 - So on this slide on the right– or excuse me, the left side, I have a picture of strawberries.

27:19 - And on the right side, I have my interface in the WordPress environment.

27:27 - And I’m going to add this image of strawberries to my web page.

27:34 - So first, I’m going to click this Add Media button.

27:38 - And it brings up an interface. And in that interface, I have a text box for alt text.

27:45 - So I’m just going to put my alt text in this text box.

27:48 - And for this image, it’s strawberries. And in the code at the bottom of the page, I have the image marked up there that shows what this would look like in your editor.

28:04 - Do we have any questions about images? AUDIENCE: I have a question.

28:11 - When talking with instructional designers, they are usually challenged to provide meaningful alt text for the graphics that they are receiving from the professors who is building the course or building the content.

28:34 - I’m usually suggesting that the person who needs to provide the alt text is the person who is altering the content.

28:44 - I was wondering, can you elaborate a little bit on that? Who is the right person to come up with this alt text? ANNA MARIE GOLDEN: I think you hit it right on the nail head, Hadi.

28:59 - In my experience, I go back to the person and ask for the alt text also if I’m creating something like this because I need to make sure I understand what the purpose of that image is.

29:13 - Because my inclination may be just to describe the image.

29:17 - But maybe that’s not the purpose that they’re trying to get across by using that image.

29:23 - Does that make sense? AUDIENCE: Oh, yes.

29:25 - In other words, you are also suggesting that in the professional field, if you are not familiar with the purpose of an image, we need to get back to the author and then ask him or her to provide the proper alt text, correct? ANNA MARIE GOLDEN: Yes, yes.

29:48 - AUDIENCE: Thank you. ANNA MARIE GOLDEN: You’re welcome.

29:50 - TERRILL THOMPSON: Just to build on that, this image of strawberries that we’ve been looking at may– in fact, “strawberries” may be good alt text in some contexts.

30:00 - But if this is a biology class, and there’s something very specific about these strawberries that this image is trying to convey, then “strawberries” is not going to be good alt text.

30:11 - And so only the professor who knows what this image is attempting to convey would be able to add alt text properly to this image.

30:20 - So I think that’s a really good example of what you guys are talking about.

30:26 - ANNA MARIE GOLDEN: Great. Thanks for adding that.

30:33 - AUDIENCE: I have a question to add on to that.

30:36 - ANNA MARIE GOLDEN: OK. AUDIENCE: What if I’m given information about the photo, and then I’ve been asked to make sure that I have the right alt text? And I have been given a work of art or a performance photo.

30:51 - And they’ve told me about the artist or the photographer.

30:55 - Or they’ve identified the performers in the photo.

31:02 - So would I put that in the alt text? I remember you saying something about assistive technology users will read the alt text, but other users won’t.

31:15 - ANNA MARIE GOLDEN: Correct. So it’s really important not to include anything in the alt text that wouldn’t be available to other users.

31:24 - For example, a visual user who goes to this page may not access that alt text because they don’t need to use it.

31:32 - So it’s really important to make sure that the information you provide in alt text is information that’s available to all users by viewing that image.

31:45 - Does that make sense? AUDIENCE: Great, thank you.

31:51 - ANNA MARIE GOLDEN: OK. Next we have accessible links.

31:58 - The big thing we notice about a link is its link text.

32:04 - So it’s important to use really meaningful link text because this provides context to users.

32:10 - It’s really important that the link text makes sense out of context with no Click Here or Read More link text.

32:19 - The reason that’s important is assistive technology users have this whole other way of navigating a web page to help them quickly find things on the web page.

32:29 - So through a keyboard shortcut, for example, a screen reader user can bring up a list of just the links on the page.

32:37 - So when they bring up a list of links on the page, and it’s populated with phrases like Click Here and Read More, they have no idea what those links are for unless they follow and then go there.

32:49 - And how many times have you followed a link and went, oh, wait, that’s not what I’m looking for.

32:54 - So then they have to go back where they started from again.

32:57 - So make sure that link text gives users an idea of what to expect when they click that link.

33:06 - Omit the use of target attributes in most cases.

33:09 - So that’s the target=”_blank” attribute. The reason I say don’t use this in most cases is because it removes control over the interface users are interacting with.

33:23 - And sometimes it can turn into a bad user experience for users who may not know that a new tab has opened.

33:29 - And so what happens when you hit the Back button when you go to a new tab? Nothing happens because your history doesn’t follow you.

33:38 - So it may make it more difficult for them to get back where they started from.

33:42 - So for most applications, I say let the user decide where links will open.

33:46 - And I say “most. ” There are a few exceptions.

33:49 - And the big example I like to use is, for example, if you’re doing online shopping with eBay.

33:56 - And to complete that purchase, you have to pay for it.

34:00 - And so if you’re paying through PayPal, it’ll open up the PayPal window.

34:04 - But you don’t want the eBay window to close because you’re still working on that transaction.

34:11 - And so once you enter the stuff in PayPal, it sends you back to eBay to complete that transaction.

34:19 - So in that case, it’s a good use of a target attribute.

34:23 - But for most things, I would say let the user decide.

34:27 - If the purpose of using this target attribute is to keep users on your website, that may not be a good enough reason in itself.

34:37 - And underline links. I know this is the latest fad to make links a different color.

34:43 - But ever since the beginning of the web, links were underlined.

34:49 - And users know when you see underlined text on a website that it’s clickable.

35:03 - Links should look like links, not buttons. So this is not just differences in semantics, but also behavior.

35:11 - Links navigate to content which is activated with an Enter key.

35:16 - Buttons perform actions, and they’re activated with the Space key.

35:20 - And often there’s a mismatch when communicating with assistive technology users.

35:25 - And an example that I always think about when I’m talking about this is one of my colleagues who is totally blind talked about a scenario where he was on tech support.

35:36 - And they were telling him to click this or look for this button on the page.

35:40 - And he’s like, I don’t see a button on the page, because it was a link that was styled to look like a button.

35:48 - When you’re using link images, your alt text should relay what the link’s purpose is and not necessarily describe what’s in the image.

35:57 - And with document links, it’s important to alert users that a document will open.

36:03 - This can be done several different ways. But the most common ways are use an icon with alt text.

36:09 - So if I have a PDF document, maybe I use a PDF icon that says PDF Document.

36:17 - Or make it part of the link text. You can say, opens PDF document.

36:23 - Those are not the only ways you can do it, but just two of the most common easy ways to do it.

36:29 - So I have another animation here that shows how to create accessible links in the WordPress environment.

36:39 - And there’s this nice little Link button that I click in the toolbar menu.

36:44 - And it gives me this interface. I have two text boxes, one for the URL and one for the link text.

36:53 - So let’s do a link to the Google homepage. So I have google. com as my URL.

37:01 - In my link text, I’m just going to say, Google it.

37:05 - And then click the Add Link button. And that adds the link to my page.

37:10 - Now, note that this link is not underlined.

37:13 - And you’re going, wait, you just said we should underline our links.

37:16 - So this is in my interface for the editor. It doesn’t show.

37:21 - But if this were rendered on the actual web page, this link would have an underline on it.

37:30 - And this is what that link looks like in the browser using the [INAUDIBLE].

37:39 - Do we have any questions about links? AUDIENCE: I do.

37:46 - We see that a lot of developers there, they use links versus button or button versus the– you already used them interchangeably.

37:59 - Can you elaborate a little bit about the semantic behind these two type of elements? ANNA MARIE GOLDEN: Yeah.

38:08 - Let me go back a couple of slide– or back a slide here.

38:12 - TERRILL THOMPSON: Can I interrupt, Anna Marie? ANNA MARIE GOLDEN: Yes.

38:16 - TERRILL THOMPSON: I actually have, for another meeting after the webinar here, I’ve got an accordion pulled up, which is a really common widget or feature that appears on a lot of UW websites.

38:29 - And I think it illustrates this issue really well, buttons versus links.

38:37 - Basically, there’s an item that you click on.

38:40 - It’s used a lot for frequently asked questions.

38:42 - So you get the question, and the answer is collapsed.

38:46 - So it’s not shown by default. And the user clicks on the question.

38:51 - And then the answer appears beneath the question.

38:55 - So you got a whole stack of questions. And you can just go through and click on those.

39:02 - So that’s a case where, in this particular case, this accordion is coded as links.

39:10 - And so each one of the questions is a link.

39:13 - And you click on it. And the user will expect that they’re going to go to a new page because that’s what links do.

39:21 - And a screen reader is going to say, link, before it announces the link text.

39:26 - And so the screen reader is led to believe, then, OK, if I click on this, I’m going to find the answer on a new page.

39:31 - That’s what they’re prepared to happen. And instead, it just shows content on the current page.

39:38 - So showing content on the current page is actually a button function because buttons change content on the current page.

39:46 - Or they perform some function. That’s the main distinction between a link and a button.

39:51 - So it’s important to them. In addition to the visual difference, as you pointed out here, it’s important to code them properly based on their function so that a screen reader user understands and has certain expectations about what’s going to happen if I click on this thing.

40:10 - So I thought since that just happened to be up on my browser, I would share that.

40:14 - ANNA MARIE GOLDEN: Thank you. That’s a very good example.

40:23 - So next up we have lists. It’s important to make sure lists are marked up as HTML lists.

40:30 - We don’t want just paragraphs preceded by dash, a dot, an icon, et cetera because this provides context.

40:38 - Assistive technologies– when they hit a list, they will announce that it’s a list.

40:43 - They provide the number of items in the list.

40:46 - And then if users don’t want to hear the whole list, they can skip over the rest of it if they wish.

40:53 - In HTML, there are three types of lists– ordered lists.

40:56 - That’s your numbered. Unordered lists.

40:59 - Those are bulleted lists. And definition lists.

41:02 - We won’t talk about those today. But those are basically used for glossary type, definition type of things.

41:16 - So ordered lists– use an ordered list, which is numbered, when the item order matters.

41:22 - So on the left side of my screen here, I have a list markup with the OL tag for the ordered list.

41:29 - And I have my list items in between those ordered list tags.

41:35 - And on the right side of my screen, this is how the browser would render this code.

41:43 - So I have two items, cat and dog. And I have 1 and 2 in front of the items.

41:49 - And of course, cat is number 1. So in the WordPress environment, I’m going to enter my text here for my list.

42:01 - I select the text. And then I click this Numbered List button in the toolbar.

42:07 - And it turns my list into a numbered list with each item preceded by a number in order.

42:22 - And that’s what it looks like in my editor for the markup, just like I had just showed on the previous slide with the OL tag.

42:35 - Next, we have unordered lists. Use an unordered list, bulleted list, when the item order does not matter.

42:42 - So on the left side of my screen, I have the markup for an unordered list.

42:48 - And note the only real difference here is that my OL tag changes to a UL tag for an unordered list.

42:58 - And my list items live in between those tags.

43:01 - So on the right side of my screen, this shows how it’s rendered in the browser.

43:06 - I have “cat” and “dog. ” And each item has a bullet in front of it instead of a number, as in the last example.

43:17 - So it’s going to be very similar how to create an ordered list in the WordPress environment.

43:24 - Again, I enter my text. I select it.

43:27 - But this time, I click the Bulleted List button.

43:31 - And then that gives me my bulleted list. I have “cat” and “dog,” each preceded by a bullet.

43:40 - And then in my editor, it shows here the UL tag instead of the OL tag.

43:52 - Next up we have color. Color includes two areas, meaning and contrast.

44:00 - So when we talk about meaning, it’s important to avoid conveying meaning through color alone because we may not perceive color in the same way that others do.

44:12 - So not that it’s wrong to provide meaning with color, but if you do, you should provide a backup so that that could be understood by all types of users.

44:21 - And some ways to do that is links can be underlined.

44:25 - Remember, we just talked about that. And carousel lentils can be numeric.

44:31 - So on the right side of my screen here, at the top I have two examples of a sentence with a link in it.

44:38 - In the top one, note that my link here is just a different color.

44:43 - But if I have a visual impairment, I may not be able to see the difference between these colors to know that it’s a link.

44:50 - But in the second example, my link is underlined.

44:54 - So it’s clear that that is a link when it’s in the middle of my text.

45:00 - The next example here, I have a set of carousel lentils.

45:04 - In the first one, I have just a set of dots.

45:07 - And the only way I can tell which slide is in view is because that one is the one that’s a different color.

45:14 - But again, if I can’t perceive color the way that most folks do, I may not be able to see the difference between this yellow dot and this white dot, especially since yellow and white are so close together.

45:30 - But in the second one, I still use color to show the difference.

45:35 - But it’s not the only way that I show that.

45:38 - Note how my border around this one is a different shape.

45:43 - So it stands out from the other two. And then I really like this other example.

45:50 - However, it does show really poor contrast around the item that is selected.

45:56 - If this had better contrast, this would be a really good example.

46:01 - Note how I know which one is in view because it has a circle around it.

46:08 - And in this case, unfortunately, the circle is filled in.

46:11 - So it’s hard to see the two. But contextually, you can tell because you can see the one and the three that are on either side of it rather clearly.

46:22 - So just some examples there on how you can use backups for color meanings.

46:28 - And the other thing is contrast. Contrast has to do with having an adequate contrast between foreground color and the background color, again, because some visual users cannot consume content with poor contrast.

46:44 - So I have two examples on the right here. In the top one, I have a set of tabs, like navigation tabs from a web page.

46:54 - And the text on them is really washed out. And so it’s really hard to see.

46:59 - So if I had low vision, I may not be able to consume this.

47:02 - I may not be able to read that text at all.

47:05 - Over on the bottom example, I have those same tabs again.

47:10 - But in this example, the text is bolded, and it’s black.

47:15 - And it really stands out from the background.

47:18 - So it’s a lot easier to read than in the first example.

47:25 - So how do you figure out what the color contrast is? So there is a formula.

47:31 - But seriously, there is an easier way. There are many free color checkers out there that you can use.

47:37 - And I’m going to show you two of them today.

47:40 - One of them is the Color Contrast Analyzer by The Paciello Group.

47:44 - And the other one is the Color Contrast Checker by WebAIM.

47:51 - So first up, we have the Color Contrast Analyzer from The Paciello Group.

47:56 - And the really cool thing about this one is it has eye droppers that allow you to grab any color from anywhere on your screen so that you can easily test them.

48:10 - So if I select this eyedropper and move it over and select the foreground color, it will populate the color text box with a hex number.

48:23 - And I do the same with the background. And note how the interface told me immediately the result that this color combination passes.

48:33 - This black with white passes easily. But what if it doesn’t pass? So I know this other color combination has really poor contrast.

48:45 - Let’s see what that looks like. And I select the foreground color.

48:50 - And it immediately tells me that this color combination fails.

48:54 - Now, I’m using the same background color. So I don’t really need to test the background in this case.

49:06 - And the next one is the Color Contrast Checker.

49:11 - Oh, let me just say something about the previous one real quick.

49:15 - This one is downloadable. And it creates a little EXE file.

49:23 - So this is actually really helpful. You could use it on print documents to check the contrast as well.

49:30 - The Color Contrast Checker that we’re going to look at now is a web-based tool by WebAIM.

49:36 - And so there’s a web page that you need to go to to use this one.

49:41 - And the special feature of this one is it has these little scrubbers here for each color that allow me to choose a color combination that passes the color contrast test.

49:54 - So I put a color in here. And I know this one fails.

49:59 - It tells me right away. It shows me that it fails for both normal and large text.

50:07 - And I move this scrubber, and I keep moving it.

50:10 - And notice these balloons start popping up and tell me that this color combination finally passes the color contrast test.

50:19 - So it’s just a matter of moving either the background or foreground scrubbers until you find a contrast ratio that passes.

50:29 - Do we have any questions about color contrast? AUDIENCE: Yeah.

50:34 - I have a question for you, Anna Marie. ANNA MARIE GOLDEN: Yes.

50:38 - AUDIENCE: When using color contrast checkers, I notice that they all provide separate pass/fail ratings for regular text versus large text.

50:48 - How do I know whether my text is large? ANNA MARIE GOLDEN: Oh, good question.

50:52 - So large text is generally defined as 18-point text or 14-point text if it’s bolded.

51:01 - And this is in the WCAG guidelines. AUDIENCE: Great.

51:11 - Thank you. ANNA MARIE GOLDEN: This is in the WCAG guidelines that Terrill talked about earlier.

51:18 - AUDIENCE: Great. ANNA MARIE GOLDEN: Next up we have tables.

51:30 - So it’s really important with tables that you’re using them for tabular data and not for formatting.

51:38 - Think about the way a table is read. You read a table from left to right.

51:43 - So that makes sense when you’re reading tabular data.

51:47 - But if you’re laying out a web page, you’re formatting, this content may not make sense when read from left to right, cell by cell in this way.

51:56 - It’s really important to use table headings.

51:59 - So when I’m creating my table headings in HTML, I’m going to use the thead element instead of the tbody.

52:06 - And I want to enclose each one in a TH element instead of a TD element.

52:12 - And I also want to use scope. The scope attribute relates table headings to their corresponding table cells.

52:20 - So if I have column headings, I’m going to use scope=“col”.

52:25 - if I have row headings, I’m going to use scope=“row”.

52:29 - And I have some examples on what that looks like here on the next slide.

52:34 - So on the left side of my screen, I have a table markup example.

52:41 - So note here that my table headings are using this thead element.

52:46 - And each heading itself is enclosed in a TH element.

52:51 - And note here that because I have column headings that I’ve used the col scope attribute to note that.

53:00 - So on the right side here, I have how that table looks.

53:06 - So it’s just this two-column table. And I want you to know that I added a little CSS to this table.

53:14 - But it is not going to just render like this automatically from that HTML.

53:18 - But I added a little CSS to it so it would make it a little bit easier to see on the slide.

53:25 - So I often get asked how a screen reader would read this table.

53:32 - So let’s check it out. [VIDEO PLAYBACK] - Column one, first name.

53:39 - Column two, last name. Row two, first name, column one, Cliff.

53:42 - Last name, column two, Hanger. Row three, first name, column one, Al.

53:46 - Last name, column two, Dente. Row four, first name, column one, Phil.

53:50 - Last name, column two, Harmonic. Column two, last name.

53:56 - Row two, first name, column one– [END PLAYBACK] ANNA MARIE GOLDEN: So note how as it went through and read the table, it read the table headings along with that cell data.

54:06 - And that helps users understand how this content is related if they can’t see it.

54:14 - Do we have any questions about tables? AUDIENCE: I have a quick question.

54:22 - I know you’re not supposed to use tables for layout.

54:24 - But what if there’s no other way to get the content positioned side by side? You’re using a rich text editor in a content management system.

54:33 - Is it OK then? ANNA MARIE GOLDEN: I would not.

54:39 - As I said, it’s going to affect the way that content is relayed to users.

54:44 - And it may not make sense when it’s read in that order.

54:49 - AUDIENCE: OK, thank you. ANNA MARIE GOLDEN: So I would keep digging into your CSS to find a better solution for that.

54:56 - AUDIENCE: Sounds good. Thank you. TERRILL THOMPSON: I was just going to say, you kind of just stole my advice, Anna Marie.

55:01 - But I was just going to say, tables are kind of an easy button.

55:05 - So people feel like, well, I know how to do this with a table.

55:10 - But there’s always a better way. And probably, there’s a way within the content management system.

55:15 - But yeah, you just need to look around or ask around.

55:18 - Somebody that knows that that system well would be able to help you figure out how to position things side by side because there probably is a way.

55:28 - AUDIENCE: Great. Thank you. ANNA MARIE GOLDEN: OK.

55:37 - Let’s talk about forms. It’s important to use explicit labels for form inputs.

55:44 - This is using the matching “for” and “ID” values in the label and input.

55:50 - So I’ve got an image here that shows a label markup, an input markup with its label.

55:57 - And note in my label, my for attribute equals name.

56:01 - And in my input, the ID also equals name. When this for and ID attribute are equal to the same thing, it relates that label to that input.

56:15 - So when an assistive technology user lands on this input, they’re going to know what’s expected in that input because it’s going to read the label to them.

56:25 - It’s important to include any kind of special instructions in label elements, too.

56:31 - Because when assistive technologies– a screen reader, for example– hits a form, it’s only going to read form elements to users.

56:43 - So if you have instructions dispersed throughout a form that’s using paragraph elements, the user’s likely not going to get those instructions.

56:53 - So if you include those instructions in the label elements, they will certainly get it.

56:59 - I strongly suggest using fieldset and legend elements to group elements such as radio buttons and check boxes and also when a description is necessary.

57:10 - So on this next slide here, I have an example of that.

57:15 - On the top here, I’ve used my fieldset and legend example in this markup.

57:20 - So note how the whole thing is wrapped in the fieldset.

57:24 - That’s going to give me this box around my input.

57:29 - And my legend says, is it your birthday? So note here in the bottom example, it says, is it your birthday? That acts as a label for this input.

57:41 - Does anyone have questions about forms? AUDIENCE: Yeah, I do.

57:49 - I’m curious about the various tools that are in use.

57:53 - There’s so many different ways to make forms other than the standard web-based form.

58:00 - Microsoft has things. Google has forms.

58:05 - SurveyMonkey is a real common tool. How good are the forms produced by those sort of outside tools? TERRILL THOMPSON: Can I answer that one, Anna Marie? ANNA MARIE GOLDEN: They all do things a little bit differently.

58:19 - And Terrill has actually done some work on this.

58:22 - So I think he’d be great to answer this one.

58:24 - TERRILL THOMPSON: Yeah. We actually are in the process– our team, IT Accessibility team, is in the process of doing a comparison.

58:35 - We’ve done this in the past, but it’s kind of old information.

58:38 - And so we’re looking at actually some of the same tools that you just mentioned– SurveyGizmo, SurveyMonkey, Qualtrics, Catalyst, Microsoft Forms, Google Forms.

58:48 - There might be a couple others thrown in there, too– but looking at how accessible their output is.

58:54 - And so stay tuned, actually. But we’ll have some up-to-date information.

58:59 - And we’ll publish that somewhere on the Accessible Technology website.

59:03 - And probably there will be a blog post on the Accessible Technology website about that.

59:08 - So really good timing, that question, because it is something that we’re actively working on right now.

59:13 - But just to give you some kind of answer, they all create kind of accessible forms.

59:20 - But none of them are perfect. They all have some issues.

59:24 - And we’re hoping to figure out, just catalog what exactly are those issues, and maybe in the end come up with a, well, this one is better than the others, or these two are better than the others, or something to that effect so you can make educated decisions.

59:43 - AUDIENCE: Great. Thanks. I’ll look forward to that.

59:46 - ANNA MARIE GOLDEN: So do I. OK. So that’s the end of the content I have for you.

59:53 - I would like to let you know our next webinar is about video accessibility.

59:58 - So look for that coming up March 25 at 3:00 PM.

60:06 - TERRILL THOMPSON: Awesome. Well, thanks, Anna Marie.

60:08 - And thanks, everybody, for being here today.

60:10 - This was really great. And even though it’s basic web accessibility, I feel like even I picked up a few key things that I had forgotten about or needed a refresher on.

60:20 - So awesome. So yeah, I hope to catch many of you at the next webinar in the series. .