[music]
Announcer: Welcome to Web Axe, practical web accessibility tips.
Dennis Lembree: Welcome to Web Axe episode 32, testing for web accessibility. This is your host Dennis.
Ross Johnson: And I'm Ross Johnson.
Dennis: How're you doing tonight Ross?
Ross: Ah, not too bad. Just a late night of working. How about you?
Dennis: I'm just trying to get stuff done. [laughs]
Yeah, so tonight we're going to add to the agenda a little bit. Before we get into the main topic of testing for web accessibility we'll be going through some different things, talking about a lot of tools. We have couple news items and announcements to make.
Ross: The first one of note; IE seven is finally released. Which is a bit of a relief because it is better but it does add one more browser to test for at this point.
Dennis: Right. It takes care of a lot of the issues that people were aware of, especially as developers, with standards compliance and CSS bugs and everything. It's still not fully standard compliant and everything. I found on the web, it took less than 24 hours to find some sort of security issue in IE 7.
Ross: [laughs]
Dennis: But they were saying it was connected with Outlook or something and I'm not sure exactly what the issue was. But it doesn't matter. If it's through Outlook, Windows and IE seven it's like, come on Microsoft. Maybe that's why you shouldn't be tying all those things together.
Ross: Yeah, it's creating a lot of potential for problems.
Dennis: But the interface, I like. It's got the newer look. It's redone. On the other side of the coin, some novice users might not like it at first because they're not used to the format. Microsoft broke some conventions with the interface.
Ross: Yeah, actually I talked to someone today who just upgraded. She was saying she had to go on and relearn everything. But it had some nice features. The open search when it's adopted will be pretty cool. And the zoom-ability is a nice idea.
Dennis: Yeah. But, of course, you still can't run multiple versions of it. But you said you're going to download that stand alone IE 7?
Ross: Yeah, somebody already...
Dennis: You've installed the previous version of that?
Ross: Yeah, I had one for the beta version but somebody already came out with a stand alone for the full version. Actually they've got standalone for everything from IE four on. If you're really adamant about testing then I'll find the link and we'll post it on the blog.
Dennis: That's pretty wild you can do that.
Ross: Yeah, I don't know that you would want to.
Dennis: Yeah.
Ross: May be trickier than it looks.
Dennis: Yeah. I just got IE seven installed on my laptop and I just left it at that. A couple other real good features of it that Firefox has too, or it's going to have; the RSS features are enhanced a lot and it has anti-phishing features.
Ross: Good stuff.
Dennis: Good for websites and stuff, yeah. Firefox is going to have that. Firefox 2, which is supposed to come out anytime now, is also going to have the anti-phishing features.
All right, well enough about that. We'll mention there is a blog post on the Web Axe website about Target and the National Federation of Blind lawsuit because their website was completely inaccessible. It looks like they won. A federal judge sustained discrimination claims against Target.
Ross: That's pretty major. Target is a huge company but it is, from a legal standpoint, something you do have to look at.
Dennis: Yeah, it's a good win and precedent. That term was thrown around in a couple articles. What's cool is that it's not just all about section 508, United State Federal. There's a lot more to it than that. I admit I haven't talked about it as much as I should have with the ADA and the states that have different civil rights acts that are cited in this lawsuit. Some kind of California disabled persons act or civil rights act was cited in that case.
There's a lot more to it than state section 508.
Ross: Yeah, the more you can learn about it the better.
Dennis: That's right.
Ross: The other thing that I wanted to mention, I read this today, over on Monday By Noon blog, which you can find at mondaybynoon.com, the author there came up with a new idea for image replacement. It's pretty clever. The best that I've seen. It seems like most techniques thus far either you're pushing text out of the frame with text indent which breaks if people are browsing with CSS on but images off. Or you have to have an extra span element, which is unnecessary code.
Dennis: Right, I was doing that method for a while. Just putting the extra span and then pushing out the text.
Ross: Yeah, that's the way I've done it for a long time. It seemed like the best compromise.
Dennis: Can you give a quick summary of what the technique is briefly?
Ross: Yeah, it's pretty cool. What he does is he sets the actual background of the heading to be a really high contrast color like black. And then puts an image over it but at the top of the image he leaves a little bit of space that's the same color as the background of his whole page. And then the text fits in that little bit of space as well but it's the same color as the background also.
So it's masked by the image itself, if that makes sense. However, if the images are turned off, the only thing that shows is the black background color. So he's got a gray background and all his graphical headers have a little bit of extra gray at the top and the text is gray also. But if you the turn images off, it's that light gray on black background. It seems to work pretty well.
Dennis: Interesting. I'll have to check that out.
Ross: Yeah, it's worth a look.
Dennis: Another method that I've seen lately that really is very, very simple and I'm not sure how good this is for SEO, if it actually works or not or for accessibility, but this is the deal. Some highly professional people that I know of, they use an h1 tag and they just put the image regular, like with an img tag. They just stick that image right in between the h1 tag and put in the alt attribute and that's it.
Ross: Huh.
Dennis: So, you've got your open h1, your image and then your close h1. And with your alt tags. That's all they do, and I haven't seen a whole lot of talk about this, but I have seen that in a couple credible websites and apparently the argument there is the text in the alt parameter is treated as h1 tags by search engines or by screen reader or by whatever.
Ross: Interesting.
Dennis: So that's just something else to throw out there. If anybody else has any opinions about that, check out our blog and leave us a comment. You can also call the phone number too. I may as well mention that now: 206-203-0585 and give us your feedback. Should we go ahead?
Ross: Yeah, why don't we?
Dennis: Were you going to say something else?
Ross: Well, the only thing that I've heard as far as alt text is that search engines will only really look at that if it's a link. So it won't really necessarily treat that as an h1 tag in a search engine point of view unless the h1 is also a link. But for screen readers it seems like that would work perfectly.
Dennis: OK, well, one final announcement... I know this news and announcements thing that won't be this long in the future, but there International Usability Day coming up in a few weeks. Tuesday, November 14 and Michigan State University is having a big event that day. Every year they have a usability and accessibility conference so Ross and I will be going to that.
Ross: So if anybody's there... come up and say hi.
Dennis: Yeah, if anybody else wants to check that out, we'll put a link on the blog and it's in East Lansing, Michigan, of course, on the campus of Michigan State. All right, so lets get into our main topic. Testing a web accessibility and we're going to go through a bunch of tools and automated software that you can use to test but before we start that I wanted to talk about some general things to think about and general methods you can use other than the automated tools, because as everyone should know, you need to test more than just with these automated tools. So, first I just wanted to say, follow the guidelines as best you can for the WACAG, the Web and Content Accessibility Guideline, as you know, and Web Aim, Accessify, and the pointers on this podcast, of course. And remember, of course, to follow any guidelines required by law, Section 508 possibly, ADA (American Disabilities Act) and a bunch of other countries have laws, the United Kingdom, the DDA and so on and so forth.
Ross: You also want to ensure that your multimedia and PDFs are accessible. I mean really best practice, any content on your page you want to make accessible, so that definitely includes PDFs and that goes for captioning too on video or audio and use web standards, of course.
Dennis: And what cannot be tested by most automated tools are color contrast and there are a couple tools out there that can help out with that, but that's something to keep in mind. That that's a difficult one to test by automated software. And then, the guideline of using simple language. That's a tough one too so most likely a human's going to have to figure that one out. And then also, I'm not so sure about this one, but the tab order... yeah, I guess I'm sure about that... I've made an argument in the past that using tab index doesn't really have to be required because if you're using standards and CSS your layout should already be in the proper order... yada, yada, yada... What do you think about that one?
Ross: Oh, yeah. I agree. I mean, if you're using standards you can move stuff around visually that will still tab correctly so...
Dennis: Do you know of any automated tools that check tab order?
Ross: No, I've never heard of one. I think if you're going to check tab order I think your best bet is just to tab through yourself.
Dennis: Yeah. All right, well that leads us into the different methods of testing, besides using the tools and one of them is, like you said, just go through the site that you're reviewing with the keyboard only. Just unplug your mouse and see if you can navigate it with your keyboard only and if you have a screen reader available then go through your site with a screen reader.
Another really, really good thing to do if you have the resources is, or if you know someone, is to have an impaired user go through your site and have somebody that has issues to get into the content of sites to got to your site and see if he or she can do it. And, as always, use headings appropriately. OK, so let's start going through the tools. What's the first one, Ross?
Ross: This is, Cynthia Says, so it returns long tables, listed by checkpoint, if a web page passed that checkpoint or not. So this sounds like...
Dennis: Yeah, that's my notes he's reading. [laughs]
Ross: Yeah, so it sounds like...
Dennis: Well, when you run it, it gives you back a big table and it lists all the checkpoints and it tells you if it's passed, yes/ no, or not applicable or something.
Ross: So, basically, it looks at the WACAG guidelines or Section 508 and compares and makes sure that you pass whatever test it can check for?
Dennis: Exactly, it looks at all the... it's a pretty long table and it'll tell you... just scroll down through the table and look for any no's in there. If you have any no's then that's bad and you need to go and fix that. Any yeses or not applicable, means either you have done it right or you have done like some serious standards and it doesn't even apply. [laughs] So, yeah, it's pretty cool. You can access this tool, Cynthia Says, in different ways. The website is contentquality.com. It's by Hisoftware and it is actually included in the Firefox Developer Bar. If you run, if you go to, let's see where is it? If you go to tools and then validate Section 508 or validate WAI, I think it brings up the Cynthia report.
Ross: Oh cool.
Dennis: There we go.
Ross: I actually never noticed that before.
Dennis: Yeah, cool. I just ran the Webaxe.blogspot.com site off blogger and that looks pretty good.
Ross: Excellent.
Dennis: Let's see. I do see one no on there. [laughter] I will have to look into that but I'm sure they're wrong. [laugher]
Ross: I think so. This site is so accessible that it can't even comprehend it.
Dennis. Well, yeah.
Ross: [laugh] OK, so the next one A-Prompt, do you want to go over that one?
Dennis: Sure. A-Prompt is a standalone application that you install on your computer. It's Windows only. I first used it, I haven't used it extensively but I have used it several years ago with a co-worker and it was pretty good. You select different WCAG levels of Section 508 and it goes and gives you a report. You can also have it automatically repair the problems. I'm a hands-on guy so I wouldn't really suggest that, at least not for myself, but it's a pretty neat tool. You can find it at aprompt.ca, meaning Canada because it is brought to you by the Adaptive Technology Resource Center at the University of Toronto. All right, so next is Watchfire WebXACT a.k.a Bobby.
Ross: This is what I usually go to which it is probably just a personal preference. All these tools are pretty good.
Dennis: Do my notes look right to you? I mean this is the tool right, that used to be known as Bobby. I didn't see the Bobby icon on there when I went to it this time. I don't know if they have done away with that completely yet or what.
Ross: Yeah I think they have just taken it off their page. I'm pretty sure I used to use it when it was called Bobby.
Dennis: You can find that at webxact.watchfire.com.
Ross: It has got few cool other features like page download size and broken links, browser compatibility.
Dennis: Oh yeah, it gives you a metadata summary and stuff.
Ross: It gives your more information that you can go through and look at.
Dennis: That's good for the broken links because it seems a lot of checkers these days don't confirm your outside links like that one does.
Ross: Yeah.
Dennis: OK then of course there is the Firefox Web Developer Tool Bar that I mentioned a few minutes ago. So if you don't have that installed in your Firefox, go and install it.
Ross: Yeah, it's great. I couldn't live without it.
Dennis: Every developer should definitely have it. It does tons of things. Besides like I mentioned before, there is a tools drop down and you can validate CSS, validate your html like I said before, the validate section 508 and WAI, that goes to the Cynthia Says. It has tons of other things that you can do on it. You can resize your browser like 800, 600 real easily and toggle your java script down on and off, toggle your images and alt tags. What else does it do?
Ross: Even beyond the accessibility kind of testing stuff, I mean just for debugging, it's huge. You can outline digs and outline whatever dig you are hovering over currently.
Dennis: You know what you can do with it that I didn't know until a couple of months ago? Under CSS where you can turn it on and off and some other stuff, you can edit CSS for the current web page that you are on.
Ross: Oh really?
Dennis: Have you done that?
Ross: No. I haven't tried.
Dennis: It is awesome to debug. You hit CSS then edit CSS or control shift E and then it brings up the other CSS files on that page and you can go in there and change it. And it like, of course, it doesn't change it on the service. it just changes it on the client side.
Ross: Yes.
Dennis: And then you can just mess with it and it is good for bug fixes.
Ross: So wow. When you make changes it does like real time updates that sort of thing?
Dennis: Yeah. Yeah.
Ross: Wow. Yeah I am surprised I have never heard of that before. That's pretty big.
Dennis: That's pretty cool. Well we better move on.
Ross: OK.
Dennis: WebAim, as most of you know if you are a long time listener, it is one of my favorite accessibility websites. Our friend, Jared Smith, is an important person there. They have a tool called WAVE. You can find that at Wave.webaim.org and it's another good accessibility checker. One thing cool about WAVE is you can run it from four different methods. One way is to submit your URL on the web page. You can also upload an HTML page or you can install like one of those little tool bar thing, what do you call it, a booklet, install a WAVE, looks like a favorite in your browser and when you click on it, it's like a java script and it runs a check.
Ross: Oh OK.
Dennis: It's like a shortcut button. Bookmark, that's what they call it. The other thing is an actual wave tool bar on the browser. I don't think, I don't know if I installed that one. Basically you run that one. It's more of a visual thing. Of course the visual icons have alt and title tags on it. [laughter] You know with different colors it marks, with different symbols and colors and title tags, it marks all the, most of the elements on your page. If they are real good, maybe a warning, and a red marker means bad that you have got to fix that.
Ross: That would be an easy way to evaluate a page.
Dennis: Yeah, a good, easy quick way to do it. If you don't see any red or yellows go on your way then. I usually find a couple of yellows on my pages, usually it is just like maybe a small java script snippet either just giving you a little warning, make sure that, that content is accessible if the Javascript is turned off which it always is of course.
Ross: Yeah.
Dennis: Right [laughs]
Ross: All right. What's next on the list?
Dennis: Linx viewer, which is a tool where you can go to and type in a URL and it'll display your pages if is being looked at through Linx, which is a popular text browser. It comes on Linux and Unix operating systems. So that way you can go through and take a look if you know anybody's on a text browser you can see... access all your content and is it hard to navigate? That sort of thing.
Ross: Yeah, it really is very interesting to see the results.
Dennis: Yeah.
Ross: And, yeah, it's a real eye opener.
Dennis: Yeah. That'll kind of teach you a lot about the importance of "Tab" and "Next" and I find also the "Skip to Content," "Skip to Navigation" type links are really helpful in these situations because you basically have to tab for everything, so if you can skip to navigation real quick then it makes things easier.
Ross: Right, and yeah, we could go on about that but it's really cool to put a link up there on the Web Axe blog because the URL stream is too long to read. You could also, besides just putting in the URL to test, you could also download and install a Linx application. Does that mean the full Linx text browser?
Dennis: Yeah, I'm pretty sure. I think it's just an open source thing. It's a pretty small program.
Ross: Yeah, I haven't downloaded that, but maybe I'll check that out.
Dennis: all right, the next thing I listed was Opera... the Opera web browser, which has been pretty well known for the "most accessible" browser for a while, and it has a couple neat features. You can easily turn off images and screen sizing. Like you could have... like I guess IE seven has the screen magnification...
Ross: Yeah.
Dennis: But it has something called user mode in Opera. I don' t know if you've messed with this, Ross, but...
Ross: I think I've turned it on once, but I haven't really had a chance to play with it, but it seemed interesting.
Dennis: It's pretty weird. It's cool. You put it in user mode and it selects all these different modes or whatever, but the one there... it's kind of like the links text browser... there's like a text browser emulator.
Ross: Oh, OK.
Dennis: So that's an alternative to using Linx, but its got some other pretty strange things so check it out. OK, Firefox Speech Browser Extensions.
Ross: Yeah, these are pretty cool. I've played with a few of them. Basically, it almost makes your browser like a speech browser through a Firefox plug-in.
Dennis: So you install this Firefox extension or plug-n and then you basically have a screen reader.
Ross: Yeah. I'm not sure exactly how accurate it is as to the popular screen reading software out there, but it's interesting to kind of hear it to get an idea if you're not very familiar with screen readers, like myself. The two I found... there's one called Foxy Voice, which hasn't been updated in a while, so I couldn't find one that would install in the latest release of Firefox. But from the descriptions it sounds like it's attempting to do away with the kind of monotone voice and I almost got the impression it's supposed to be some woman talking to you. The web page is supposed to... but that could be wrong. Maybe I'm reading into it.
Dennis: That's cool.
Ross: The other one... this one I actually did get to use and it works quite well. It's called FireVox, and we'll have a link on the blog, but it installs really easy, and you just restart Firefox and it'll start talking to you and there are shortcuts to start reading a page, so I went through and listened to a few pages. Like, I listened to my own and, yeah, it'll read off just like it was a screen reader.
Dennis: Cool. Yeah. I tried that out and like any screen reader it takes a little bit of a learning curve, right?
Ross: Yeah.
Dennis: But, yeah, I ran it a couple times and it was easy to install and it seemed worth buying. I really like the Fangs emulator and what that is, is... it doesn't read... it's not a screen reader, but what it does is if you go to a web page and you hit the Fangs button it pops open a window and gives you a text rendering of what a screen reader would read. So, basically instead of it reading out loud, audio or whatever, it just... you can read the text of what the reader would say. Does that make sense?
Ross: Yeah. I think that's probably a little more practical. Just because, what I notice with FireVox is... I mean, to read a page would take five minutes and you can't really adjust the speed so if you're trying to go through and check accessibility, it's much easier to read it and a little less embarrassing than if people hear you.
Dennis: And we'll put a link up to that on the blog also, but it's http://sourceforge.net/projects/fangs. That's pretty much it. We did want to mention a couple mobile web emulators. I did hear that Nokia emulator. I used it a couple times in the past, Ross, at http://forum.nokia.com/.
Ross: Yeah, I've used that too. It seems to work pretty well.
Dennis: And you found a couple other ones?
Ross: Yeah, there's one at http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/... I guess they have like a phone emulator and I haven't tried that but apparently that's really popular and Microsoft released an emulator for their pocket PC mobile devices(http://msdn.microsoft.com/windowsmobile/downloads/tools/default.aspx), so if you think you might have mobile users, it might be worth just loading it up and checking it out just to make sure it's at least navigable.
Dennis: Yeah, that's cool. Excellent. I'm glad you found that. OK, well, that's it for Web Axe Podcast number 32. The Web Axe blog and podcast is located at webaxe.blogspot.com. email Web Axe atwebaxe@gmail.com.
[END]