Transcript for Implementing Accessible Workplace Tech: Website Images

Introduction

I want to welcome everyone to this particular webinar, "Implementing Accessible Workplace Tech: Website Images," which is a webinar by PEAT, the Partnership on Employment and Acceptable Technology. My name is Josh Christianson. I'm the Project Director for PEAT. I'll be introducing today's talk and moderating the question and answer later, leaving the middle and more difficult part up to Gian.

Before we get started, I'm going to quickly review a little logistics. We will have time for question and answer, so please enter your questions into the Chat window. You can also use the Chat window if you're having any technical difficulties; we'll do our best to resolve the issues there. We have a couple of team members monitoring there, so use the Chat window as you can.

Just as a backup if folks are having problems viewing the PowerPoint, you can download the presentation from our website, which is www.PEATworks.org, P-E-A-T-w-o-r-k-s-dot-o-r-g. We will also have an archived recording, which will be posted online following today's event.

We will be live Tweeting today's event, so we'll be using from our account, @PEATworks, with an ampersand there; so feel free to join us, and follow along using the hashtag: #PEATworks, P-E-A-T-w-o-r-k-s.

So let's talk about the topic at hand today. As the digital gateway to any company or organization, your company's website is an ideal place to start when implementing accessible technology practices. There are many, many types of images used for different functions on websites; and each requires a different approach for accessibility. Today, we'll be looking at that issue and demonstrating how to ensure that your images are both accessible and usable to a wide range of people with disabilities. 

Our resident expert and presenter for today is Gian Wild. She is the CEO of AccessibilityOz, way across the globe in Australia. She has worked in the accessibility industry since 1998. Gian spent six years contributing to WCAG 2.0 and spoke at the United Nations Conference of State Parties on the Importance of Web Accessibility. Gian has traveled a bunch and given countless well-received webinars and talks on a variety of accessibility issues, and we are glad to have her come back and speak with us today about images and give us some real hands-on best practices for how to make websites more accessible.

I'm going to finish by saying please use the Chat window for questions and answers. We will hold a session at the end. But without further ado, I'm going to turn it over to Gian for our presentation.

Gian?

Hello, (audio break). My name is Gian Wild. 

Presentation

Thank you, Josh, for the excellent introduction.

I'm here to talk about images. We're sorry about the audio on Adobe, so I hope you all called in. Please do mute your phone line when you do call in. Dial "6" to mute and hash six "#6" to unmute if you desperately need to tell us something. But you can actually send in questions throughout the session. Just type them into the Chat, and we'll get to them at the end.

Now, I just want to let you know that there is an associated Blog Post and a Fact Sheet with regard to this topic, images. We also ran a webinar previously on cable, and we'll be running another webinar on video and another one on PBS. So please keep an eye out for that.

I also want to apologize for not making it last week. I had eight weeks in the U.S., so I've spend half my life in the U.S. and half my life in Australia. I got back from the U.S. and promptly got sick, and I lost my voice; so that wouldn't have been a very interesting webinar for anyone. So thank you for joining us today instead.

Firstly, I want to start with the five different types of images used in the Web. Then we're going to go through each one of these and talk about how you would make them accessible.

The first one is basically simple, content-related images. You can see here there's a reference to PEAT Talks about things using TalentWorks, and there's an image of Josh Christianson in case you wanted to see what he looks like. That basically is related to the content around it, and it's just a simple image.

The next type of image that we're going to look at are complex content-related images, and we seem to have lost the image there. But basically, we're talking about things like infographics or graphs or charts. So I'll make sure that's in the Fact Sheet in the Blog Post for the example there. 

Then here No. 3 is presentational images. Basically, these images don't convey any information as such; there just there to enhance the presentation of the page. They're also known as ornamental images, and so they don't actually convey any information. They don't have a meaning. If they were removed from the page, it wouldn't affect anything at all.

Just checking with the captioner – sorry, just letting the captioner catch up. I understand that my accent can sometimes be a problem. I actually have done a presentation for Michigan State University on accessibility images. Someone came up to me afterward and said, "Oh, loved your presentation. Didn't listen to a word you said, but I love your accent." So hopefully, you are actually getting some information from this talk; but I do apologize for the accent, and I hope that you can all understand me and that I'm talking slow enough.

The fourth type of image are logos. You can see here in the top left, this is the logo for the Partnership on Employment and Accessible Technology. It has the name of the organization — that's just part of the logo — and a little icon as well.

Then the fifth and last type of image are image gallery images. This is where you have a set of images that all relate to one topic. So here we've got WildlifeWin images, and we've got a picture of a couple of foxes playing with each other.

So let's talk about image accessibility. ALT attributes are one of the biggest things that you can do to make images accessible. These are read aloud by screen readers, and they're read aloud by screen readers as the user can't see the image. So screen readers are used by people who are blind or vision impaired, and obviously the screen reader can't describe the image, whereas they could read aloud text and things like that. So that's why the actual person who builds the website needs to add the ALT attributes. So it's meant to be a description of the image, and that's how you use an ALT attribute. It means that it's basically the attributes of the image element. But for most of you, you won't need to worry about the actual code. You'll see initials and things that will allow you or give you an option to add the ALT attribute when you add the image.

The other thing that you can do to make images more accessible are text descriptions. Text descriptions are basically used when there's too much information to be added to an ALT attribute, and you really shouldn't have more than 100 characters in your ALT attributes. So anything that's going to take you over 100 characters, you really need to think about adding a text description or a long description. 

Long descriptions are actual visible text on the page. When you use a long description, they must be referenced in the ALT attributes. So for example, if you had a flowchart, you would say, "A flowchart of PEAT responsibilities, refer to long description for more information," and that entire sentence would be the ALT attribute.

Now, just for those people who know a little bit of code on the call, when I talk about long descriptions, I do not mean the long desk elements. The long desk element is deprecated, and it shouldn't be used. Now, if you don't know anything about code, just completely forget that I said anything there; but, yes, long descriptions are always texts. They aren't actually code. 

Then there are color requirements. There are two types of color requirements that you need to be aware of. Certain types of images — not all five types but certain types, we'll talk about which ones – need to meet color contrast requirements. So you can actually use different color contrast analyzers. There are some excellent ones out there, and these are just two. 

There's the Paciello Group Color Contrast Analyzer, which has a little eye dropper that allows you to choose a color from a screenshot of the foreground and the background; and it will tell you if it passes or not. Then there's Juicy Studio Luminosity Color Contrast Ratio Analyzer, and that allows you add text to decimal values and different colors; and it will tell you if it passes or not.

Now, just when it comes to color contrast, it's important that you know the difference between normal text and large text. So there are different color contrast requirements for normal text and large text. Large text is something above about 14 points. So if you have text in your images, then you need to be aware of that.

The other thing that you need to be aware of is you can't use color alone to convey information in an image. For example, you can't say, "The streets marked in green have cyclist lanes. The streets marked in blue do not." Or if you've got a chart or a graph or something like that, you can't indicate the different options or the different lines by color alone. You can use color, but you have to use something else as well; and we'll talk about that in a moment.

Then the other thing you need to think about is what you do when images are used as links. Now, as ALT attributes are mostly used by screen readers, or basically only used by screen readers, they're used by the screen reader to announce what the image looks like or what it does. Now, if the images are linked, then what it does is it links the user to another page. Now, that means that basically where the user is going to trumps the description of the image. So it's much more important for a screen reader user to know what happens when they activate that image than what the image looks like.

So you can think about this in terms of, say, having different little globe icons on a website. So if you're a toy manufacturer, then having a little globe icon that links up to something might be about buying a world globe. If you have a little globe icon on a travel website, for example, and it's a link, it might link up to, say, your international fares. So it's much more important to describe where the link goes to than what the actual link looks like.

There is one exception, and that is where the image conveys more information than is presented just by the name of the link. The example that I used for this is say for a TV show, and so the link is basically the top 20 TV shows of the last 20 years. And the link goes off to that page; but the actual image is an image of, say, the TV show The Wire. So you need to actually add the ALT attribute, The Wire; and the ALT would be The Wire, one of the top 20 TV shows of the last 20 years.

These are all the requirements; we'll go through these one by one. Basically, simple content-related images require an ALT attribute. They require meeting color requirements, and they can be used as links; and they don't require a text description on the page. 

Complex content-related images require ALT attributes, and they require text descriptions on the page. They need to meet color requirements, and they can be used with links.

With presentational images, the ALT attribute is empty; and I'll talk about how to do that. There shouldn't be a text description on the page. You don't need to meet color requirements, and they cannot be used as links.

With logo images, they do need an ALT attribute. They don't need a text description on the page; they don't need to meet color requirements; and they can be used as links.

Image gallery images do require an ALT attribute. They don't require a text description on the page; they don't need to meet color requirements; and they can be used as links.

So let's start with simple content-related images. As I said before, there are four requirements for simple content-related images. They must have an ALT attribute; they must meet color requirements; and they must be used as links. They do not need a text description on the page. 

Here are some examples of simple content-related images. You've got a mosquito with a red cross through it; and underneath the image is, "Test your Zika knowledge. CDC has answers to your questions about Zika. Learn more." 

On the right is a red propeller airplane with the text underneath, which is actually a link called "Explore Our Collections."

This third example is an old book called "Gospel Hymns No. 2." It's obviously been printed in the – well, several hundred years ago, and it's an example from a museum about slavery and freedom. 

This here is the page, "Steps to Improve Lab Safety." There's some text on the left about progress on laboratory safety, and on the right is an image of a guy in a hazard suit wearing protective gloves and using a vial and things like that.

Then this last one is just an image of a key; and underneath it is the text, "Unlock the Web, online and off. Send Firefox to your Android device, and view cached pages even when not connected."

So ALT attributes, when it comes to simple content-related images, need to be descriptive; they need to be precise, so they need to be under 100 characters; and if the image is the link, you need to indicate the target of the link — as I mentioned, much more important than describing the image. ALT attributes should not be longer than 100 characters; they should not contain any HTMLs; they shouldn't repeat any text on the page. So if you have an image and then you have a caption underneath it, the ALT attribute cannot be that caption.

You shouldn't use the filename of the file, so an ALT attribute should definitely not be mosquitos (inaudible). And don't use words such as "click" – you know, click to activate a larger image or something like that. You shouldn't use the word "click." As I said, ALT attributes are used by screen readers; and screen readers announce to the user that they're coming across a graphic. They also announce to the user when there are links. So they'll know that the image can be activated; you don't need to tell them that in the ALT attribute.

ALT attributes should not contain words such as "image," "graphic," or "photo," unless it is an accurate description of the image; for example, "1977 photo of the inauguration of Jimmy Carter." Other examples are things like a cover of the graphic novel "From Hell" or a strange sentence of the (inaudible) image. But you shouldn't say "image of John Smith" or "photo of CEO standing with Board members." You don't need to use those words.

You also cannot contain any information in the ALT attribute that's not actually visible in the image. So you can't have things like figure or copyright or author information in the ALT attribute. 

If we look at those images again, these are some correct ALT attributes. One of the things to know also with ALT attributes is that there's no same right answer. So you get 10 different people writing ALT attributes, and you'll come up with 10 different ALT attributes. It doesn't mean that any of them are necessarily wrong, although some of them might be. There are a whole lot of different ways that you can make ALT attribute requirements, and certainly that is the same across people with disabilities as well. There are some people with disabilities who are visually impaired who want incredibly detailed ALT attributes, and then there are some that just want one word. So it's really a matter of preference. All I can say is that when you are writing ALT attributes for your organization or website that you are consistent and that you have some kind of policy or procedure so that everyone writes the same type of ALT attributes.

This first one, the ALT attribute is the mosquito with a cross through it; it's very descriptive. The second one is, "Small red propeller aeroplane, one of the collections you can explore." That actually indicates that that's one of the items in the museum. The gospel hymns is, "19th century Gospel Hymns, Number 2, book cover." You could go into a little bit more detail and talk about how it's very old and maybe more text that's on the cover, but that is (inaudible) as well. Then the guy that's working in the lab, the ALT attribute is "CDC scientist with orange biohazard suit carefully conducting an experiment." But as I said, you could go into more detail about how to use vials and things like that; it's really up to you.

The last one, which is the key, is, "View cached pages when offline on your Android device." The reason why that's more detailed is because it actually is quite a kind of complex idea. So you could also have that and say that that is an ornamental image; it's really up to you. Sometimes one person might choose one image as the content-related image, and another person might say that's ornamental. So the actual page would read, "Image, view cached pages when offline on your Android device. Unlock the Web, online and off. Send Firefox to your Android device and view cached pages even when not connected."

Now we'll move on to complex content-related images. These are complex, and they actually have all the requirements. They must have an ALT attribute, and that ALT attribute must refer to the text description. They must have a text description; they must meet color requirements; and they can be used as links, but they should only be used as links to open to a larger version of the image. So especially on mobile devices, often a complex content-related image can't actually be deciphered on a mobile device because it's so small; and so a lot of the time when you activate that linked image, it will open a larger version that the user can scroll through and read the content properly. That's the only time that complex content-related images should be used as links.

Let's talk about an example. This is the example that was missing from the first part of the presentation. This was a PEATworks infographic of the 2015 eRecruiting and Accessible Technology Survey; and it talks about TalentWorks, job applications, technical assistance, top eRecruiting accessibility issues, pre-employment testing, et cetera; and there's a whole lot of stuff. There's a whole lot of information in this infographic, and it certainly wouldn't be added to the ALT attribute in under 100 characters.

This is another complex image. This is a map showing the regional offices of the Office of Intergovernmental and External Affairs, which has 10 regional offices. It shows a map of the U.S.; it's color-coded, and various different sections of the map have different office numbers in it. Now, this does use color to convey information. For example, the area in Boston is blue; the area around New York City is brown; the area around D.C. is light brown, et cetera. 

However, the addition of the numbers to indicate the sections means that it doesn't use color alone. So the Boston area is named 1; the New York City area is named 2; the D.C. area is named 3; Atlanta is named 4, et cetera, et cetera. That way, if you saw this image in black and white, then you would still know where all the offices were. So that's one way to really think about color, the use of color alone, is if you saw the image in black and white, would you still be able to understand the actual image information.

This is the 2010 Census of the District of Columbia, Population by Sex and Age. So this is basically a side bar graph. I'm sure there's an official term for it, but I don't know it. On the left it has the population of males, and on the right it has the population of females. Once again, male is in blue; and female is in pink. That's okay because at the bottom you've got descriptors, male and female, as well. So once again, if you saw this in black and white, it would still make sense. Once again, this is the kind of content that you wouldn't be able to put in an ALT attribute under 100 characters.

When we're talking about ALT attributes, you need to include the name of the complex image. Then you need to refer to the location of the text description. If the image is a link, you should indicate that activating the link opens a larger version. ALT attributes, just like the simple content-related ALT attributes, shouldn't be longer than 100 characters, shouldn't contain any HTMLs, shouldn't repeat any text on the page, shouldn't include the filename of the file, and shouldn't include words such as "click." They also shouldn't use words such as "image," "graphic," or "photo," and not contain any information that's not actually visible in the image – so exactly the same requirements for the content of simple content-related images.

As I said before, the complex context-related images should not use the LONGDESC element. For charts and graphs, the best thing to do is provide a table as a text description. So maps, when it comes to writing a text description, you need to include the relevant visual data. Now, making charts and graphs and maps accessible is a really big topic; so we're going to just cover it very briefly here. It's a whole webinar in itself. 

This ALT attribute here, we have called it — the ALT attribute is "PEAT infographic on 2015 eRecruiting and Accessible Technology Survey, long description provided within this article." Now, in this particular case, all the content in that infographic is actually within the article. So it says here that 40% of people do this and 50% of people do that and 23% of people do something else; that's actually in the article itself. So the article itself acts as a long description, so you don’t' need to actually write a specific long description for the image because the infographic is basically an image version of the article.

This map of the USA, the ALT attribute is, "Map of the USA indicating the number of offices in each region," — and I just realized it's not the number of offices indicating the office number in each region – "long description immediately follows image." So your long description would be Office No. 1 in Boston, Office No. 2 in New York City, Office No. 3 in D.C., Office No. 4 in Atlanta, Office No. 5 in Chicago, Office No. 6 in Dallas, et cetera, et cetera. 

Now, in terms of if the actual outline, if the border indicates what the offices are responsible for, then you would need to put that in the long description as well. For example, the 10th office is in Seattle; and so you would say that the Seattle Office is responsible for Washington, Oregon – and I'm so sorry, I don't know the name of the state to the right of Oregon and Washington – and Alaska. So that way you can say that's both of the regions that those offices are responsible for.

Here, this is actually the long description. So here you can see Region 10 at the bottom. Region 10 – Seattle, Alaska, Idaho, Oregon and Washington. So that is basically the long description for the previous image.

This graph here, the ALT attribute is, "2010 census District of Columbia Profile, Population by Sex and Age, long description on the District of Columbia Interactive Population Search page." So you actually have the ability to download an Excel file. We'll get a really complicated table of results, and that acts as the long description. So here you've got it basically in a table. With male you've got 284,222 people; female, you've got 317,501 people; under 18, 100, 815 people, and on and on. 

Now we're going to move on to presentational images. These are really easy; we'll bang through this really quickly. Basically with presentational images, they need to have an empty ALT attribute. They don't need a text description on the page; they don't need to meet color requirements; and they don't need to be used with links. 

Here is an example of presentational images. Here the first one is, "General Eligibility Requirements: Check-in is available starting 24 hours before your scheduled departure." The image that is presentational is the little bullet point. Now, really, this is quite bad coding. This should actually be coded as a bullet list; but in this case, what they've done is they've just added an image, and so that image should have an empty ALT attribute.

The next image is basically the end of a navigation item, so it's just basically wrapped quotes. Once again, this is something that should be done with style trace, and therefore you wouldn't need to worry about ALT attributes and things like that; but in this case, the image doesn't convey any information. It just improves the look of the slide, and so it should have an empty ALT attribute.

Then the last one is an icon of people shaking hands, and this is from the TalentWorks site. That's basically the icon for TalentWorks, and that's once again just adding some visual information; and that should have an empty ALT attribute as well.

So when we say, "empty," we mean ALT equals quote/unquote. Now, most of your CMSs should allow you to have the ALT attribute; but sometimes when you upload an image, it asks for an ALT attribute and won't allow you to add the image unless you add one. So what you can do in that case is just add a space – I mean, the space bar. Then it will recognize that there's an ALT attribute there that will basically still be ignored by the screen reader.

No. 4, logo images – I'm just going to wait for the captioner to catch up. 

So when we're talking about logo images, they must have an ALT attribute. They do not need text description on the page; they do not need to meet color requirements; and they can be used as links, but you must note the target location in the ALT attribute because the logo text is often not enough. 

So here are some logos. This is the U.S. Department of Defense logo with an eagle and the text, "United States of America" underneath it. Then there's the PEAT logo that we talked about before; and then the Smithsonian logo, which is basically I think a sun on a blue background. 

The ALT attributes can include the word "logo," but they don't have to. They can include the text on the logo; but, once again, they don't have to. If the image is a link, they must indicate the target location of the link. 

So for example, here's the U.S. Department of Defense logo. If it's not a link, then the ALT attribute could be, "Department of Defense logo." If it is a link and it goes to the Home Page, you should call it the "Department of Defense Home Page." 

For the PEAT logo, if it's not a link, then it can be, "PEAT Partnership on Employment & Accessible Technology logo." If it is a link, then "PEATworks Home Page."

Smithsonian, if it's not a link, then "Smithsonian logo." If it is a link, "Smithsonian Home Page."

No. 5, image gallery images – these are my favorite images. They must have an ALT attribute. They do not need a text description on the page; they do not need to meet color requirements; and they can be used as links but only to open a larger version of the image. 

This here is a photo gallery of a memorial event marking the 15th anniversary of September 11th. The main image that's being shown is a woman, Attorney General Loretta Lynch, watching some soldiers holding the U.S. flag. The caption underneath is: "Attorney General Loretta E. Lynch attended the New York City Fire Department's 15th Anniversary Memorial Mass at St. Patrick's Cathedral."

This here is a Wildlife image gallery. It's called, "8 Years of Amazing #WildlifeWin stories." There's one fox playing with another fox; and the text says, "The island foxes were first listed under the Endangered Species Act in 2004. The removal of three subspecies of island fox, which are native to California's Channel Islands, is the fastest successful recovery for a mammal in the history of the Act. Spread out over the Channel Islands, each island has its own unique subspecies, showing the fox's rich evolutionary history." 

Here, this is image gallery that says, "San Antonio Independent School District," night of July 2015. The image is of a black girl wearing a pink headdress and red dress that says something about segregation being knocked out in New York. 

So in terms of the ALT attributes, they should be very descriptive of the content – so the colors, that kind of stuff, much more descriptive than a content-related image. They should be concise. You really should still try and meet the 100-character limit. If you go over, it's not the end of the world; and if the image isn't linked, then indicate activating the link opens a larger version of the image.

So ALT attributes should not be longer than 100 characters; but really, if you go over maybe to 150 on the image gallery images, it's not a problem. Just like all the other content-related images, the ALT attributes should not contain any HTMLs; they should not repeat any text on the page; they should not include the filename of the file; and they shouldn't include words such as "click." They should not use words such as "image," "graphic," or "photo," unless these are accurate descriptions of the actual links for it. If you have an image gallery that needs an old photo, then you want to actually say that in the ALT attribute and also not contain any information that's not visible in the image such as figure, copyright or author information.

Here, this is the photo gallery of the memorial event marking the 15th anniversary of September 11th. The ALT attribute here is, "Attorney General Loretta E. Lynch looks on at a row of New York City Fire Department firefighters in uniform, holding US flags." That makes sense in the context of caption, which is, "Attorney General Loretta E. Lynch attends the New York City Fire Department's 15th Anniversary Memorial Mass at St. Patrick's Cathedral." And it's not repeating the caption.

The Wildlife, the two foxes, the ALT attribute here is something like "Two island foxes sitting in the grass, one nuzzling the other." Then of course the text under that was all about how those foxes were listed under the Endangered Species Act and how then improved or recovered.

Then the one that says "San Antonio Independent School District," the ALT attribute could be something like, "Young black girl in a bright red dress holds up an old newspaper with the words, 'Black segregation is knocked out.'"

So those are the five types of images and how you would make them accessible. As I said, there is an associated Blog Post and Fact Sheet, which Corrin or Josh can add to the Chat so you can access that. There will be a transcript and recording of this webinar that you can access later, so please feel free to share it with other people. As I said, there will be two more webinars coming up, one on videos and one on PDFs; so please do keep an eye out for them.

Now I'd like to answer any questions.

Gian, I see one came through that was talking about what group defines the accessibility requirements. Are you able to address that one?

Excellent, thank you.

These accessibility requirements come from the W3C Web Content Accessibility Guidelines, Version 3. I spent six years with the working group of WCAG 2.0, contributing to WCAG 2.0. There's a whole lot of stuff about images and ALT attributes spread around WCAG 2.0, but mostly under Success Criterion 1.1.1. Now, WCAG 2.0 can sometimes be a little bit complex; and so basically I've recategorized the WCAG 2.0 requirements into these five groups. So you won't see these five groups referenced in WCAG 2.0; but if you really down to WCAG 2.0, you will see these requirements in various different places.

I'll just add to Alyssa, who would like to ask: "Regarding presentational images, where there is an advantage to getting them in empty ALT attributes versus hiding them from AT altogether?"

Good question – excellent question. Alyssa, if you're on the line, can you unmute yourself with hash 6 and explain to me how you would hid them from AT? Are you talking about using CSS, or are you talking (inaudible) or are you talking about something else?

Gian, I don't know if Alyssa – she probably doesn't have that capability. 

Alyssa, could you maybe add—

Without the leader code, they may not be able to speak online. I don't know, maybe Alyssa can elaborate and answer your question in the Chat box?

[Pause for response] 

I just see Todd's question: "What did Gian call infographics and charts?"

I called them complex content-related images.

Thank you. I'm going to go on to another question we had, and we'll see if Alyssa can jump in the Chat. But do you know, just generally speaking about the various images you've discussed, are there tools online? Obviously, we've put together a tip sheet that focused on PEATworks.org. Are there other tools related to images online – whether it's color contrast, resources that you could direct people to kind of test their images and make sure they're meeting their accessibility guidelines?

Yes, there are certain things; it depends on what you want to do. If you just want to look at one particular Web page, then the best thing that I can recommend is the Firefox Web Developer Toolbar by Chris Pederick, and I'll put that in the Chat. Basically that allows you to display the ALT attributes of all the images on the page. That way, you can look at the image and actually compare it to the ALT attribute and see if it makes sense. 

The other great tool is WAVE from WebAIM, where you put in a URL; and it will also show you the ALT attribute for every image. There are also tools that will pull out all the images in your site and show them next to their ALT attribute. I'm not sure about the other automated testing tools that are available, but I do know that our automated testing tool, OzART, does do that; and I'm sure that there are other automated testing tools that do that as well. So, yes, those are the best ones to look at.

Thank you for sharing, and I'd encourage other folks if you're online and can use the Chat box to share resources. That's great. 

Gian, Alyssa has chimed in the Chat box; so maybe you can address there.

Yes, excellent – so Alyssa said she's been using "aria-hidden=true," for example, to hide icons posted in (inaudible) where the (inaudible) which icon is displayed. 

So firstly, Alyssa, just be very careful that that icon isn't conveying any information – so Web testing aside at the moment, where they use a little exclamation mark icon to say that something hasn't been filled out correctly and a little question mark to say that you're not sure and things like that. Those things might actually be content-related images; but if they're not, yes, you can definitely use aria-hidden=true. However, you will technically fail the HTML validity requirements if you don’t' have an ALT attribute. Once again, the technically correct way to code an image is to always use the ALT attribute. So when there is no information, you basically don't want an ALT attribute there at all. That's why we have this workaround, which is the quote/unquote. 

So in answer to your question, yes, you can use aria-hidden=true; however, you still need to use (inaudible) quote/unquote. The other reason that is, is because not all other technologies respond to ALT equals quote/unquote (ALT=“”). 

The other reason that is, is because not all assistive technologies respond to all interpret aria properly yet; and there are some older screen readers that when they come across an image without an ALT attribute will actually read the source – so the SRC code. So if you've got an image that's, say, maybe about numbers, then it will leave that out if it comes across an image without an ALT attribute. 

So, yes, you really should always have that ALT=quote/unquote for images on your site. If you really want an image that is basically not available to AT at all, to assistive technology at all, then I would suggest that you put it in the theater. So basically, screen readers read aloud the content of the page for the disabled. However, they do ignore things like "display none" and "visibility hidden." But if you apply an icon or an image through (inaudible), then that will be ignored by screen readers and other assistive technology.

Does anyone have any last questions?

Yeah, any last questions to put in the Chat box? 

I would always encourage folks to connect with PEAT; you can find us at info@PEATworks.org if you do end up having some questions. It looks like someone is chatting now. I'll go ahead and talk about Next Steps; and if we need to circle back to a question, we'll do that.

Conclusion

First of all, I want to thank everyone for joining us. I want to thank Gian again for providing this information. I want to plug, as Gian mentioned, we have another webinar next month on January 26th, also at 2:00 p.m., where Gian will focus on Accessible Videos – so making videos accessible on your website. She will provide a demonstration about how to make these videos on your website, which are increasingly obviously popular in use across the board, and how to make them and your website acceptable to all people and people with disabilities. So please join us for that on January 26th and spread the word.

Additionally, we have our monthly PEAT Talks that are coming up. These are held on the third Thursday of each month, except for December. Our next one is in January – Thursday, January 19th, at 2:00 p.m. Our guest will be Rachel Kerrigan, who is the Community Resource Manager at the Perkins School for the Blind. She is going to discuss how the Perkins Business Partnership Initiative and the Harvard University Extension School have partnered together to provide a free online course around inclusive talent acquisition. 

We worked with them too, and it really is about some accessibility of online recruiting and how if you're going to have the most inclusive talent HR plan to get good talent and people with visibility into your organization, how you need to go about that. So maybe a slightly different audience, more for our HR folks, but please spread the word for anyone looking to broaden and maybe make accessible their talent acquisition practices.

You can register for both of those on www.PEATworls.org, our website; or look for an e-mail that will follow with some more information.

I'd like to give a special thanks again to Gian who is at some ungodly hour in the morning in Australia, and really appreciate you working with our audience and our webinar time. 

Thanks to everyone who took the time to join us being patient with our technical difficulties. We apologize for the audio bridge not working via Adobe, and we'll look to get that fixed. Otherwise, please sign up for other webinars; and we look forward to having you again in the future.

Thank you all.

Thanks again, Gian.

Thanks, Josh. I just unmuted myself. Thanks again, and I hope to see you all January 26th. January 26th is actually Australia Day, so it will be a party webinar. 

Anyway, thank you very much and thank you to Josh for hosting. And please have a look at that Blog Post and Fact Sheet.

Yes, check out the Blog Post and Fact Sheet.

Gian, get some sleep. Goodbye and good night.

Good night, bye.