Webinar on Section 508 for EERE Web sites (Text Version)
Below is the text version of the Webinar on Section 508 for EERE Web sites, presented on May 10, 2007.
Sarah Kirchen: ...there's information you would like to get from us, and the subject of Section 508/Accessibility Compliance was the highest thing that was rated and I'm very, very glad to know that people are interested in this.
We put together this webinar to give you the basics on 508 Compliance and, of course, Shauna Fjeld is always available to you if you've got additional questions. Shauna is our expert on 508 and the technical lead for our communication standards and Kevin Eber, who is joining her in this presentation, is the editor of our EERE Network News and has extensive experience with writing alt text. In fact, I use him as my exemplar of effective alt text writing in the EERE Web site portfolio. Also, I'd like to introduce Leslie Gardner, who is the EERE template coordinator and that, you know, that doesn't begin to encompass all the things that Leslie does for the EERE Web sites; but it is the title that we came up with a few years back and, as many of you know, she is always there to guide you through any of the guidelines and to help you otherwise with any graphic considerations or technical considerations you have with your Web site. So, without further adieu, I'd like to turn the meeting over to Leslie and she will cover the logistics.
Leslie Gardner: Thank you, Sarah. We know that there's gonna be questions and it looks like since it's a smaller group, that we're gonna have, you know, plenty of time for questions, so what I'd like to suggest is that we go through the alt text part of this webinar and then we'll stop for questions and then we'll finish up the presentation and have questions at the end. Okay, so, I think we'll go ahead and get started.
Well, you know, well I was gonna ask you guys to put on mute, but we're not hearing any background noise. But if you are gonna multitask and shuffle paper or type, you might want to go ahead and put, you know, your phone on mute.
Okay, Shauna!
<Slide for Overview>
Shauna Fjeld: Okay, everybody. Thanks, Leslie. Thanks for joining us. I'll just give you an overview of what we're going to go over today. We're gonna talk about why we should care about accessibility; we're gonna give you a screen reader demonstration; we'll go over the Section 508 standards, particularly the ones that will affect you most of the time; and Leslie mentioned, we'll go ahead and have time for questions.
<Slide for Why Should I make My Sites Accessible?>
So, why should we make our sites accessible? The biggest answer is because disabilities affect a lot more people than you'd think. One in five people in the U.S. has some kind of disability. In 2001, 7.7 million people were blind or visually impaired. The Web really has significant benefits for folks with disabilities.
<Slide for Why Should I Make my Sites Accessible?>
So, for government Web sites, making sites accessible is the right thing to do and it's the law.
<Slide for Section 508>
Well, Section 508 as part of the Rehabilitation Act and it requires that federal agencies make their Web sites accessible to people with disabilities, and the disabled person's experience must be comparable to the access available to others.
<Slide for Section 508 Guidelines>
Section 508 has twelve requirements. Today, we're going to go over the ones that are most likely to affect you which are alternative text for graphics and multimedia, using color to convey content, using tables of data, providing web content that requires plugins and applets, and electronic forms.
<Slide for Alternative Text for Graphics>
So, the first requirement of Section 508 and the one that we're gonna spend the most time on today, is alternative text for graphics. Alt text is read by screen readers in place of images and if you don't know what a screen reader is, we're gonna show you in just a couple of seconds. Basically, it's just a piece of software that reads the contents of the screen reader aloud to a user.
<Slide for Screen Reader Demonstration>
So, we're gonna give you a screen reader demonstration and some of you may have heard of screen reader before, but for those who haven't, it can really be an eye-opening experience and I guess, pun intended on that.
[Laughter]
Alt—let's see—okay, what I'm gonna do is I'm gonna bring up a page that I actually borrowed from the ENERGY STAR Web site and I wanna give you some context around this page because, for those of you who have not heard of screen reader, it can be really difficult to process the information.
The page I'm gonna pull up includes a pie chart that tells you where your money goes when you pay your energy bill. For example, what part goes to heating and cooling, what part goes to lighting, and things like that. So, listen to the screen reader and try to listen for that information.
Now, if you'll bear with me technically, we'll try to get this up.
You're gonna see just a blank screen and that's because I've actually hidden the graphics.
Can you turn my speaker on please? Crank it all the way.
Screen Reader: On 40 minute mode.
Where does my money go? Coal and ENERGY STAR-Microsoft Internet Explorer. Where does my money go? With ENERGY STAR, page has 2 headings and no links. Where does my money go? ENERGY STAR, Heading Level 1: Where does my money go? Heading Level 3: Annual energy bill for a typical single family home is approximately $1,900.00. Graphic pie—chart: Where does my money go? Source: Residential energy consumption survey 2001.
Shauna Fjeld: Can you turn that off for me, Kevin?
Okay, so I'm guessing you probably don't have a much better idea of where your money goes than you did about a minute ago.
[Laughter]
Female: Yeah, I think you're right.
[Laughter]
<Screenshot of "Where Does my Money Go?" from the ENERGY STAR Web site>
Shauna Fjeld: Well, how 'bout now?
This is really a classic case of poor alt text. If I mouse over this graphic, you can see what the alt text for it is and it says "Pie chart: Where does my money go?" It doesn't include any of these categories or the percentages that go along with them; so obviously, this is a really good example of the page that's not compliant with Section 508 standards. Even though it does have alt text, it's really poor alt text. So, let's listen to it one more time with Jaws and maybe that'll kind of help put into context what Jaws is actually doing.
Can you go ahead?
Kevin Eber: Ready?
Shauna Fjeld: Mmmm Hmmm. Yeah.
Screen Reader: Page has two headings and no links. Where does my money go? Coal and ENERGY STAR. Heading Level 1: Where does my money go? Heading Level 3: Annual energy bill for a typical single family home with approximately $1,900.00. Graphic pie-chart: where does my money go? Source: Residential energy consumption survey 2001.
Shauna Fjeld: Okay, go ahead and shut that off.
So, hopefully, through this demonstration, you can understand how important it is to have good alt text and I'm gonna go ahead and shut Jaws down because it's really hard to listen to and turn it over to Kevin Eber, who's going to take over and talk about good alt text.
<Slide for Why Alt Text is Cool>
Kevin Eber: Okay, I want to start actually before launching into this, just to preface by saying there really aren't any hard and fast rules for alt text and actually we've come up with what we think is the right approach and you might find some sources on the web that take a slightly different approach; but, what we really focus on is that the non-sighted user should have the same experience and basically get the same content that you're trying to provide to the sighted reader. So, that said, let's get into this and one thing that I want to emphasize is I think alt text is cool.
[Laughter]
It's actually fun. As a writer, it can be a fun thing to have to do alt text, you know, at times. Sometimes it's a pain, but it can be fun, especially with photos because it's a chance to be descriptive. We're not often, you know, we don't talk about the, you know, we don't describe our programs very descriptively usually, so, here's a chance to be descriptive. Here's a chance to write a fair amount of text without making a Web page any longer, visibly at least, and what I like about it too is when you're writing alt text and you're thinking about your captions and your photos, it makes you think about why you're choosing that image and sometimes it maybe makes you change your mind about what you're using. So, those are 3 great reasons to use alt text.
<Slide for Captions and Alt Text>
So, I had mentioned captions and the question with captions is—well, the important thing is that they should not duplicate the alt text. As you saw with the reader, the reader's gonna read the alt text, it's also gonna read the caption. If they duplicate each other, you're just basically boring the non-sighted reader. So when you do captions—alright, I'm struggling a little bit here—basically, when you're doing the alt text, if you think that the information you're writing in the alt text would actually benefit the sighted user, you should probably move that information into the caption. The caption should just help put the image in context, but not necessarily describe the image.
<Slide for Simple Decorate Images>
Okay, now we're going through some simple cases. There's a lot of images that really are put on a Web site just to add design, but they don't really have a purpose, such as a color bar or something like that. For those, there's no reason to put in an alt text. There's also images that are really put in just for the heck of it—an illustration of a house—there's no reason describing in detail what this house looks like—it's just put in to add some design to the site.
<Slide for Linked Images>
Of course, a lot of our images are actually links and for that, what you should do is put the where you are linking to. You don't need to say anything like link to or anything in your alt text because the screen reader takes care of that for you.
<Slide for Graphical Text>
Graphical text, such as this wind energy example here, you'd just repeat the text in your alt text. It's best if there's ampersands, to actually spell it out as A-N-D in the alt text. That actually helps with searchability.
<Slide for Complex Photos and Illustrations>
For complex photos and illustrations, again, we're getting to this idea of the non-sighted user gets that same experience on the web that the sighted user gets. So, a good example, a good exercise, is think about describing this Web page that you're putting up or email or whatever. Think about how you would describe it over the telephone and how you would explain what you're trying to convey in that image.
<Slide for Examples>
So now, we're going to get into some examples. I wanna start with one of the most popular news sites in the world.
[Laughter]
One thing I gotta say—we used screen shots for this for simplicity; otherwise, we'd have to be jumping around with browsers and things. The screen shots don't necessarily come across really great in this format, but you will be able to get the point and, you know, please ignore any weird kind of color, shaping or whatever here.
<Screenshot of the New York Times with alt text>
So here's one of the greatest—one of the most popular news sites out there, <em>The New York Times</em>, and as you can see, they don't describe—in their alt text, they don't describe the image at all; and basically they repeat the heading that's underneath the photo. So, the lesson learned here is even some of the best people in the world are doing it wrong, so don't feel bad if you're doing it wrong.
[Laughter]
<Screenshot from the NREL Web site with alt text>
Now, I'm moving on to— this is from an NREL Web site, I think. This is what I consider sort of a mid-range example here. It's a photo of the large conduction calorimeter and they do at least describe what's happening in this photo. It is a photo of a researcher testing a battery in the calorimeter; but I would argue, what I get out of this photo looking at it as a sighted user is, I get some idea of what this thing actually looks like. It's, you know, several larger boxes with these big cable wires and a computer terminal—and you're not getting that in the alt text, so I would argue this is not a good enough description of what's going on in that photo so that the non-sighted user gets the same impression from it that the sighted user gets.
<Screenshot from EERE Network News, "White House Budget Boosts Funding for Hydrogen," with alt text>
Here's an example that I pulled from a really excellent newsletter that's out there...
[Laughter]
...on a Web site. This is, as you can see, a rather complex image and the reason for the image really, when you think about it, it's to show that, yeah, Ford Motor Company really does have workers building fuel cell vehicles. So, it's important to sort of describe what's going on there; that it is a worker assembling a fuel cell vehicle. There's these, you know, wires and technology and that gets put across in this alt tag here.
<Screenshot from EERE Network News, "Lexus Hybrid SUV Aims for 30 mpg in City Driving," with alt text>
Now here's an example of a Lexus hybrid vehicle. The thing here is it basically looks like a car, I mean an SUV, and there's not really any description I could provide that would really help the non-sighted user get a better idea of what it looks like, 'cause it's pretty average looking. So, for this case, I would just say, you know, a photo of the Lexus and leave it at that. There's no reason to say, you know, it has 4 wheels—people know what the car looks like or what makes up a car.
<Screenshot from EERE Network News, "DOE Funds Five Research Projects to Boost Mining Efficiency," with alt text>
Now here's a photo that basically was included to say a couple of things. There's miners working, but also, you know, there's technology involved. Look, there's technology involved in mining, there's this big heavy metal thing. For the sighted user, there's no real reason to go into detail in that caption. The photo's getting that across, but for the alt text, you really want to get into what it looks like. You know, there is this big cylindrical metal device with cutting tools. It gets the idea across that there's some technology involved in the process.
<Screenshot from EERE Network News, "Ormat Breaks Ground on New Geothermal Plant in California," with alt text>
Now here's another example. Now, I mean, when you look at a geothermal plant, there's a whole lot of components there. You could spend a lot of time trying to describe that to your reader, but what I try to focus on is what's the overall impression? To me, it's a complex network of pipes and equipment. That gets it across for me; and for some people, you know, actually if you have an engineering bent, you might be tempted to get even more detailed. Oh, there's pumps in the foreground and there's a heat exchanger, but that's not something that your average user would get out of looking at that photo, so there's no reason to get carried away and put too much in there.
<Screenshot from EERE Network News, "First Wind-Integrated High-Rise Under Construction in Bahrain," with alt text>
Here's another example and you may be having trouble seeing this, but it's a building with 3 wind turbines installed and a bridge between the 2 buildings; and actually for sighted users who have trouble seeing it, the alt text could come in handy because it helps to point out to them where the wind turbines are installed. Now whether that's a good idea or not, we'll not talk about right now.
[Laughter]
<Screenshot from EERE Network News, "Biodisel-Fueled Boat Takes to Sea in Circumnavigation Attempt," with alt text>
Now this is kind of opposite of the Lexus example. Now here's a boat, but it's not a typical looking boat—far from the typical looking boat. So, here it makes sense to try to describe it to the non-sighted reader so that they get some of the feeling for, you know, this is really not your typical looking craft here.
<Screenshot from PBS's Independent Lens Web site with alt text>
Then finally, an example of someone else is doing it really good. This is from a PBS Web site called Independent Lens—a great show by the way. They do a wonderful job of not only describing their photos, but in this case, it's also another good example because the text in this photo is part of the image, so the reader wouldn't normally catch it, so they actually go to the trouble of describing the text too, which is really nice. Great Web site, worth checking out.
<Slide for Special Cases>
So, now we're gonna talk about a number of special cases that come up. That would be technical illustrations, org charts, flowcharts, graphs and complex maps and another no-end images.
<Slide for Technical Illustrations>
For technical illustrations—the main lesson here is don't be afraid to really go into detail. There's a lot going on in this illustration and the sighted user is getting a lot of information from that and the non-sighted user should also get quite a detailed explanation of what's going on, and it could be hard describing these things. This was a hard one to write, but very useful to the non-sighted user.
<Slide for Org Charts>
For org charts, you want to provide a text version of the graphics.
<Screenshot of the Department of Justice Org chart and its text version>
So, here's an example of a Department of Justice org chart and they also provide a text version.
<Slide for Flow Charts>
Flowcharts—let me take a sip of water here. For flowcharts, you could either describe it in your alt text or you could provide a description of the flow text in the actual text of your Web site, which I'll show in just a second here.
<Screenshot from EERE's Ethanol Production Process Diagram>
Here's a—I think it's an ethanol process diagram—and, if you look below the diagram, you'll see that we didn't show the whole Web page, but the Web page starts step by step to describe all the different process steps. So that being given in the Web page where the reader will see it, there's no reason to go into a whole lot of description in the alt text. All the alt text does is say, hey, we're gonna describe the diagram in the text that follows.
<Slide for Charts and Graphs>
Charts and graphs—it can be painful, but you need to provide a detailed description of what's going on. You could supply or—yeah—well, there's 3 approaches. You could provide a detailed description; you could supply the data separately in HTML table or you could describe the trend, especially for a graph—a line graph—you can just describe the trend that's happening in the graph, so we'll just look at some examples of those.
<Screenshot from the EERE Web site of a bar chart>
Now here's the bar chart and really there's no easy way to get around describing this except to give all the information in your alt text. So you see, this is a rather complex alt text, but it does convey the same information that the sighted user gets.
<Screenshot from the EERE Web site of a bar chart with an HTML table below>
Now in this case, instead of trying to pile all that in to the alt text, we provide this HTML table below and the alt text just points the users to the HTML table. One thing I should point out about this is it's also useful to your sighted user. A lot of times, I'm looking up bar charts—yeah, it's nice to look at 'em 'cause you get an overall impression, but sometimes I really wanna know, what's that number of used vehicles, you know, in 2005? And I could actually look at the table and get the precise numbers, so it's a useful thing for both sighted and non-sighted users.
<Screenshot of a table titled, "CSP Cost of Energy.">
Now sometimes you'll have trends like this and basically it's, you know, it's a little—it's a gray area, exactly how you describe this chart. It helps to say where the starting point is, of course, and just kind of give a general trend and give some idea of some milestones along the way, so that, hopefully that non-sighted user can visualize—well, not visualize—but get some concept of what this looks like in their head. Basically, try to get across what the sighted user gets and the sighted user isn't looking at every data point, they're looking at an overall trend.
<Slide for Complex Maps and GIS Images>
Finally, there's complex map and images that just—you're not gonna be able to describe in alt text and we'll show an example right here.
<Screenshot of the EERE Web site's Wind Resource Map>
Here's a wind resource map, you know, a great example. There's no way you're gonna describe that. So for this, you include this line at the bottom that say, "Please contact our webmaster". You know, that is functional 'cause if they have specific questions about, say what are the wind resources in one area, you can actually tell them and usually get at those kind of questions that would be very hard to answer in an alt text.
<Slide for Alt Text Style>
So, a few things about style. If you're writing a sentence, you use the sentence case, if it's a title, you use the title case. So, in other words, you know, capitalize it.
<Slide for Use Descriptive Terms>
Try to use descriptive terms such as photo of, illustration of, diagram of.
<Slide for Don't Use Non-descriptive Terms>
Don't use non-descriptive terms like image.
<Slide for Questions>
We're ready for questions. Any questions?
Male: Hi, this is John. Yeah, Kevin, you just mentioned that—you just gave a line chart and it said the numbers per—you gave the numbers where it said 24 cents of kilowatt hour or something like that...
Kevin Eber: Yeah.
Male: My question is who provides the photo in order to do the alt text from? For example, and I'm going back to Shauna just provided us with a Q.A. for one of the Web sites and it said the alt text wasn't descriptive enough. Now if I go back to the developer, is it the developer that selects those photos or comes up and develops the charts that would know that those numbers there—like you said, it's helpful to know what the number of vehicles was that you gave in that one example...
Kevin Eber: Right.
Male: ...but afterwards, it gave solar prices. I couldn't tell from looking at the chart, what those numbers were and if the numbers were in the alt text, where did the numbers come from? You know, is it DOE that provides that, is it the developer that does that? Because, you know, I couldn't do it myself.
Kevin Eber: Well, of course, I think that's very dependent on the graph or the chart. Some will come—you'll have all the data and others you might have just this trend chart that you have to look at. For that trend chart, I did what any user would do—I mean I wrote that one, that alt text—and, you know, I just looked at it and eyeballed it as best I could and put down numbers as best I could based on what I was looking at.
Male: Yeah, so you estimated?
Kevin Eber: I estimated.
Male: You didn't have something that said specifically 24 cents? You just eyeballed it and said, "Well, this looks like this was, you know, just under 25 cents"?
Kevin Eber: Right.
Male: Okay.
Kevin Eber: So, I mean, that's appropriate to do if you don't have the source information. If you have the source information, of course, use it. So, it's—do you guys have anything to add to that?
Shauna Fjeld: You know, what we do at NREL is typically we do feel that it's the content provider's role to provide alt text for our images. So, sometimes if you can't find that person or they left or you don't know who it was, then you just gotta take your best guess.
Kevin Eber: And Shauna makes a good point. The content provider, hopefully, you know, the writer or whatever, hopefully also knows why those images are being put in there and has some idea in his or her head about why that's being done. So, that's the best person to provide the alt text that explains the image.
Male: Okay, thanks.
Female: This is Renee. Does the Jaws reader always read the alt text first?
Shauna Fjeld: What do you mean the alt text first?
Female: Well, in some of those cases you had something along the lines of please see—or the caption will further describe this image.
Shauna Fjeld: The Jaws reader will read things in the order that they are coded on the page.
Female: Okay.
Shauna Fjeld: And the alt text is before the content, so it reads that first
Female: Okay.
Shauna Fjeld: Does that make sense?
Female: Yeah.
Shauna Fjeld: Okay.
Kevin Eber: That's usually the case, right?
Shauna Fjeld: Yeah.
Male: Shauna and Kevin?
Shauna: Yes.
Male: We've run across a couple of problems like tables in which the information was provided by a checkmark. You know, there'd be a column and some cells would be checked and some wouldn't. What's the best way of approaching that? Because it's a different way of thinking. You know, the way we think is we just go for the box that's checked and say, okay, this characteristic has this, this, this, the ones that are checked and the ones that aren't checked, the mind just, you know, ignores it. But I assume that it's not gonna work that way with the speech reader, is that correct?
Shauna Fjeld: Are they images or are they HTML?
Male: No, it's a table and it will say, you know, there'll be columns, rows and then just some of the cells are checked to say, like say, you know, let's just say example, there are years where solar was used and, you know, it'll say PV, it'll say concentrating solar thermal and then it'll say the years; and one column is 2007 and it might say check and check; 2006, one might be a check, one might be blank.
Shauna Fjeld: I gotcha, but are the—is the table—is it just pure HTML text or is it a graphic?
Male: No, it's just pure HTML.
Shauna Fjeld: Okay. So, that's kind of covered by the tables portion which we'll get to in a little bit, not so much by alt text.
Male: Okay, I'm sorry.
Shauna Fjeld: No, that's okay. Maybe we can talk about that then because that has to do with table rows and headers and things like that.
Male: Okay, I'm sorry. I'm jumping ahead.
Shauna Fjeld: Oh, no problem. We'll get there.
Leslie Gardner: So, any other—Thank you, John, any other questions before we turn this back over to Shauna?
Male: Yes, this is Morris. I have a question. The example that you showed with the speech reader—it didn't have any links on that particular page.
Shauna Fjeld: True.
Male: If there is—say that the image has a link, but it also needs some sort of description, how does the screen reader handle that?
Shauna Fjeld: If the screen reader sees a link, it will say "link" and if it's around a graphic, it'll say "link graphic" and it'll read the alt text, so that's why graphics that are links, you always wanna make the alt text descriptive of wherever the link is going.
Male: I see.
Shauna Fjeld: So, like if it's the Department of Energy logo, the alt text wouldn't be Department of Energy logo, it would be Department of Energy. So the screen reader would say "link graphic Department of Energy". Does that make sense?
Male: Yes.
Shauna Fjeld: Okay.
Leslie Gardner: Shauna, can you explain how they can download the Jaws for a few minutes?
Shauna Fjeld: Sure. Jaws is made by a company called Freedom Scientific and if you Google that, you'll find it. Jaws is pretty expensive, but you can download a demonstration version for free that will run for 40 minutes and then it'll conk out and then eventually, you know, they'll tell you you should buy it. It's really useful if there's a situation where you're really not sure what to do and that's what I do—is I'll pull it up in Jaws and listen to it and see what I think then.
Female: What was that again—what link was that on Google?
Shauna Fjeld: It's free. The company's name is Freedom Scientific, but you could probably also just Google Jaws screen reader. Jaws is the most commonly used screen reader. There's also one called Window Wise that's pretty commonly used.
Kevin Eber: J-A-W-S?
Shauna Fjeld: J-A-W-S, like the shark...
[Laughter]
...and that's their logo.
[Laughter]
Leslie Gardner: Okay, well we will wrap this up and, just so you know, we will post this presentation on the Standards site, so all of these great examples that Kevin has put together will be up there for you for future reference, okay?
Alright, well thanks so much Kevin.
So, Shauna, why don't you go into the more technical parts of 508?
<Slide for Multimeda – Video and Flash>
Shauna Fjeld: Okay, so I'm just gonna go over—I'm not going to go into these very deeply but, hopefully I will provide some resources for you to get more information if you need it. These are just the other standards in Section 508 that we run across quite a bit.
The first one is making multimedia accessible—video, audio, animation—things like that. So for video and animations that have sound, the first choice is synchronized captions. Basically that means if, you know, if you go home and you mute your television and across the bottom you get what the person's saying on the screen and it's going along at the same time that the person is saying it, that's what it means to have synchronized captions.
Of course, a lot of times we get video from, you know, from other sources and we don't have the capability to edit it, so as a second choice you can provide a text script and I'll give you an example of that in just a second.
For audio tracks, then you—either a text script or captions is fine.
<Screenshot from the EERE Web site of the Wind Power Animation – Text Version>
So this is an example of a text version of a Flash wind power animation that we have up on EERE; and, as you can see, up at the top, it not only gives what the people are saying, but it actually kind of describes the action that's going in the background. Again, we're trying to give a comparable experience to somebody using a screen reader.
<Slide for Color>
The next requirement is color and Section 508 says that color should not be used solely to convey important information; and where we run across this a lot is in graphs—charts and graphs. This is primarily for people that are color blind. If you can't see colors, then you're gonna have a difficult time knowing which one of these legends goes with which one of these pieces of pie here. So there's some things you can do. One option would be to put the label out directly next to the piece of pie so that, you know, you can associate it that way. Another option would be to use some other kind of visual cue like cross-hatching or dots or something like that.
<Slide for Simple Data Tables>
Okay, now we're kind of moving on to data tables which is what John's question about was, just a little bit ago. A screen reader will come in and read a data table like this and when I say a data table, I mean something with rows and columns and headers like you'd see in an Excel spreadsheet or something; but a screen reader will start in the top left hand corner and it'll go across, so a screen reader would read this drinkers, coffee, cups per day, John, Maxwell House, 3, Pete, Folgers, 6. So you can see how, you know, if you have a fairly extensive table, then it would be really easy to get confused about what these individual fields mean. So what you can do with some markup and a simple table like this where you just have like a header row or left side headers, you can use the TH tag. Right here you can see that there's THs around these headers, so drinkers, coffee, that identifies those as headers to the screen reader and if get to this 6, you know, I can press a command in Jaws and it'll say, Pete, cups per day, 6, so that that data is associated with the individual headers.
<Slide for Complex Data Tables>
Okay, then you get into complex data tables and that's when you have a couple of header rows. Like, for example, here's information that's just about San Jose and then down here's information about Seattle, which really gets complex and the markup gets complex too.
<Browsing through the EERE Communication Standards, Technical Standards site on Simple and Complex Tables>
I'm gonna jump off to the EERE Standards site for a second and you can see on here we have some information about how to make these kinds of tables compliant. Here's the simple tables here and then down to the complex tables here. I'll just real quickly take a look at the code. What you have to do is give each of those headers an ID and then, you know, of course, we'll take a look at this table again. Obviously, this number 421.25 has several headers associated with it. We're talking about trip totals. We're talking about Seattle and we're talking about subtotals here. So what you have to do is go find that cell, if I can find it. Well, we'll use something similar—that wasn't it. Anyway, with this headers tag, we say, associate that particular data cell with these headers. So, it's very complex, but that's how a screen reader can interpret that data for somebody using it.
One comment that we need to make—the RedDot contact management system does not render complex data tables markup so that it's accessible to screen readers. What it does is it does put the quotes around those headers when you have several of them, so it just reads the first one. So what we need to do—and if you're doing complex data tables in RedDot is add a little accessibility disclaimer down here at the bottom. So, "If you have difficulty accessing the information on this table, due to a disability, please contact the webmaster" and add a link to that.
John, did you want to jump in with your question here or does that make sense?
Male: Well, yeah, this is complex except that it's got data there. It's actual data.
Shauna Fjeld: Uh-huh.
Male: Whereas what I was saying was...
Shauna Fjeld: If you had a little checkmark?
Male: If you had a checkmark, sometimes it's a checkmark, sometimes it's a star, sometimes it's, you know, to show whether or not that one is true or false.
Shauna Fjeld: It's a really good question and it might be, you know, better, you know, to think of—one, it might be a good idea to listen to it in Jaws and see what you think, how it comes out. Number two, you know, maybe a more descriptive, you know, word would be better like, "yes", for example so that, you know, that that meaning is conveyed to somebody that's using a screen reader.
Male: Well, if I were doing it—like if I were developing the table, I wouldn't do it like that. I would say, "The following people drink coffee", "The following people do not drink coffee", you know, something like that, but...
Shauna Fjeld: I mean if there's a way to present the information in another way, then that's a great route to pick.
Male: Yeah. It's easily conveyed for a sighted person, but to convey that type of information to a non-sighted person, means a totally different way of presenting the information.
Shauna Fjeld: For sure.
Male: And, you know, we don't, you know us Shauna—we don't develop a table, so do we go back to the developer and say, "Well, sorry this isn't, you know, acceptable, go rethink the whole thing" and...
Shauna Fjeld: No. Honestly, I would just go ahead and follow the standards with IDs and headers...
Male: Uh-huh.
Shauna Fjeld: ...and get it as accessible as you can and let it go.
Male: Okay.
Shauna Fjeld: Yeah.
<Slide for Complex Data Tables>
Okay, I also want to point out that there's a link to a tutorial on here from Webaim and Webaim is a non-profit that does a ton of work with accessibility. They're pretty much where I get all of my information and they're a really good resource and with lots of tutorials and stuff.
<Slide for Using Scripting to Display Content>
Okay, the next 508 guideline is that pages using scripting languages to display content make that same content accessible. The biggest example of this is like mouse over menus—Javascript, pop-ups, stuff like that. You know, anytime that you need to use a mouse to make something happen on your Web site, it's inherently inaccessible because, obviously, a person that cannot see the screen isn't going to be able to use a mouse to make things happen. So, you either need to find a way to make it work with the keyboard or you need to provide an alternative.
<Slide for Applets and Plugins>
Next thing is applets and plugins and web pages that require an applet or a plugin to see the content, you must include a link to download it. The biggest example of this is, obviously, PDFs, so all over the EERE site anytime you see a PDF, you'll see a link to download Adobe Reader or at least you should. I'm also just including a link on here—the communications standards about PDFs. There's a lot of good information about there and link requirements and things like that.
Other kinds of programs that use applets and plugins are like Quicktime, RealPlayer—you should have a link that says download Quicktime or download RealPlayer. In Flash, we actually do not require that because when you're embedding the Flash object, it already has a link built in to detect if you have Flash and download it if you need it.
<Slide for Electronic Forms>
Then we have electronic forms. Why this is important is that somebody using a screen reader, you know, they're gonna hear a name and a box. When they get down to this radio button right here, they may have no idea what they're checking so with some markup, you can associate these text labels with the form fields that go with them. And that's by using this label markup. So I'm gonna say, you know, here's my text label name and I'm gonna put label for name around it and then in the actual form field, I'm gonna say, ID=name, and that connects the two; and so a screen reader can interpret that and tell the user which form field they're actually filling in. Another way to do it is just to put label around the entire thing, the text and the input fields.
Again, Webaim has a great tutorial on how to do this. Where people I see often get confused is like with radio buttons and checkboxes. The radio button goes with this label, not with the question above it; and same with the checkboxes.
<Slide for Other 508 Standards>
Okay, so there's some other 508 standards that we didn't cover. You don't tend to run into these very often or they're handled by the template, but just wanna make you aware that they're out there. They deal with style sheets, image maps, frames, flickering images—you don't wanna make 'em flicker too fast because they can cause some people to have epileptic seizures—anchor links to skip over repetitive navigation and timed tasks.
<Slide for Resources>
So, I just want to give you guys a list of resources that we have today's presentation. It's up on the Communications Standards Web site as well as the EERE alt text standards. I wanna, like real quick, look at the EERE QA checklist.
<Screenshot of the EERE Web site's Communication Standards site, on the QA Checklist Web site>
If you're not familiar with this, you really should be. These are all of the standards that need to be met before a page or a site goes live. If you look at this, you'll see that the items that are 508 related, have a little box over here that says 508 and you can get more information on that particular item by clicking the "i" and you'll see 508 skipping repetitive navigation links and it'll go into more detail.
<Slide for Resources>
We have a link to Section508.gov, which is the government's Section 508 site; to Webaim—Webaim has a really great 508 checklist that's handy to go through. It just has all of the standards, it tells you, you know, how to tell if your site's meeting it or not meeting it; and lastly, a really great resource called Guidelines for Accessible and Useable Web sites, Observing Users Who Work with Screen Readers. This was really fascinating to me to really find out how people that use screen readers use Web sites; and they use 'em and they use them heavily, so it really reinforces why we need to make our sites 508 compliant.
<Slide for Questions?>
So, that's the end of my bit. Is there any more questions?
I must have explained it all perfectly.
[Laughter]
Leslie Gardner: No questions from the gallery? Okay, well, thank you so much. We will send out an email giving a link for an evaluation of this webinar; and I think, Sarah, the other one that we've got planned for this fiscal year is on web content and we plan to do that in August.
Sarah Kirchen: Correct.
Leslie Gardner: Some time. We don't have a date set on that one yet and if you guys need any help with any of this, you know, we are really here to help you guys be successful, so just let us know if you've got questions and we're happy to work through those details with you.
Sarah Kirchen: Thank you, Leslie. Thank you, Shauna and Kevin and thank you, all of you who have participated in this and I hope you have found the presentation to be helpful. I certainly found it to be informative, but I'm not in your shoes, I'm not a developer of a Web site, so you all are the critical audience for this and we'll look forward to getting your feedback.
Male: Thanks so much.
Shauna Fjeld: Thank you.
Female: Thanks to all of you.
Male: Good job, guys.
Female: Thank you.
Male: Thanks.
Sarah Kirchen: Bye bye.
Female: Bye.
[End of Audio]
