Building Accessible Web Applications

Editor's Note: Welcome to .NET Rocks Conversations, excerpts from the .NET Rocks! weekly Internet audio talk show. This month's excerpt is from show 761, with Jeroen Hulscher, a Microsoft accessibility evangelist, who discusses issues involved in making the design of websites more logical so that they are accessible to users of all abilities.

Carl Franklin: Welcome, Jeroen Hulscher. Jeroen is an accessibility evangelist at Microsoft in the Netherlands, and a passionate code purist and interaction nerd. (His words, not mine.) At Microsoft, he works hard to inspire and activate both the BDM audience (i.e., business decision makers) and the developer community to bring better websites to the world and better web applications.

Jeroen Hulscher: Well, hi to you all.

CF: So, you are an accessibility evangelist. You're all about making websites accessible to all -- is that what you're talking about?

JH: Yeah. What I do is training people to build more accessible websites and spread the word about accessibility.

CF: Is it about fonts and colors, or speech -- that kind of accessibility? What does accessibility mean to you?

JH: Well, I guess it means the more logical way of building websites. For example, if you put a photo slider on top of your page, which includes the most important content on your page, and let's say that slider is written in Silverlight or Flash, that will never make it easy for anyone. Not for you or me but neither for search engines or people with some kind of disability.

CF: Or even mobile phones, for that matter, because you are using Flash.

JH: Yeah. You have to keep it clean and simple and build on top of that. So every piece of data should be available to anyone. It's fine with me if you build in Silverlight or Flash or JavaScript, whatever, but it has to be clean and simple, and it has to stay that way.

Richard Campbell: So, I mean, I still want to use my Silverlight control because it looks really nice. Do I need to build some kind of alternative as well for when it's not available?

JH: Well, for example, XAML is pretty easy to write in a different way as well, instead of Silverlight, and be shown in some normal data later or in just plain content, as long as it's available to screen readers and search engines. It's not really for some blind people and someone with an injured leg or something.

RC: Right.

JH: There are about 650 million people around the world with some kind of disability. Let's say that we might reach out to about one percent of them. It still might be a pretty good business opportunity.

RC: So can you answer this question, then? How does a blind person use the Internet, period?

JH: That's a good question. A couple of years ago I ran into someone who was blind from his teenage years, I think. I always thought that blind people didn't use JavaScript or whatever plug-ins are available on the Internet, but he was actually using all of them. It didn't really matter to him whether it was written in JavaScript, Silverlight, Flash, or whatever. The main thing he needed was some level of logic in the code. So it needed to make sense in the direction of reading. He really wanted to have the most important content on top of the page, and that gave me a lot of insights because it's not about using JavaScript or not, it's about using some deeper level of logic.

CF: I had a guy working for me once who was colorblind, and he said that there are a lot of colorblind people out there, so there are certain colors you want to avoid using as signals, I guess. One of the things that I learned was that colorblind people typically confuse green and red. Isn't that interesting?

JH: Yeah, that's a cool feature, right, because a lot of web shops use either red or green lights to tell people whether products are available. Those colors make sense as long as they are in the line at the traffic light, but it doesn't make sense on their own. You know, one in 8 men is colorblind, so there are actually a lot of people out there.

RC: Interesting.

CF: Have you published a guideline of things you should avoid (do or not do) if you want your web apps to be accessible?

JH: Yeah, well obviously I'm from the Netherlands, and our government published the Dutch Web Guidelines back in 2001, if I'm correct, and they recently updated those, which are based on the WCAG 2.0 [Web Content Accessibility Guidelines 2.0] provided by the W3C. That's the main outline for building accessible platforms and websites.

CF: That's a good place to start, then.

JH: Yeah, that's the real place to start, but the difficult thing about that document is that it's pretty hard to read between the lines.

RC: Yeah, it's a W3C doc, so there are a lot of words.

JH: [laughter] Yeah, exactly. So, what we've done at the Microsoft here in the Netherlands is [we] rewrote those articles to make them more accessible to people. We narrowed it down to about 10 principles. It will not cover the complete document by the W3C, but it might be a good start to make those first baby steps.

CF: Yeah.

JH: You know, it's really difficult to build a 100 percent accessible website. So if you want to comply with all those rules, it might wear you down. We've seen that a lot here in the Netherlands because those guidelines that were provided by the Dutch government are mandatory for all governmental websites here in the Netherlands, which are about 700 to 800 [websites], and there are about 25 that comply with those rules. The rest of them ignore them. So, you know, accessibility is just not a sexy subject. I think it should be because it actually helps us to make better websites.

RC: I pulled up a copy of version 2 of the WCAG (this is the W3C doc), and I appreciate that, as much as we just made fun of how W3C docs are hard to read, they've really pulled out key points. There is all the fine text, but then they have blown up sort of key principles like: "Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive." That's a very clear, specific statement without actually explaining anything.

JH: Yeah. Well, the explanations come further deep down in the document.

RC: Right.

JH: So, for example, if you would like to add video to your website, you need to add a sign interpreter to explain the spoken words. Obviously, that's quite an expensive feature to add.

RC: Isn't closed captioning enough?

JH: No, not [per] the highest levels of the new documents.

RC: OK.

JH: They're still not sure what the new standard is going to be, at least not here in the Netherlands, but there are three levels in the documents. So it's level A, AA, or AAA. What's probably going to be the standard will be level AA, and that sign interpreter is a level AAA.

RC: AAA being the best?

JH: Yeah, but that will come for most governmental websites or stuff like that. That's going to be a really expensive feature to add.

RC: Hey, you're now videotaping another person doing the sign of the text of a conversation on a video. That's not a trivial thing.

JH: No, and it doesn't really make sense to me, because for me, personally, an alternative text that explains what other people see in a video is pretty much the same to me.

RC: Right.

JH: The experience doesn't have to be the same for everyone, but it has to mean the same to everyone.

RC: Yeah, that's a good point -- that you're trying to convey the meaning successfully, but it doesn't have to be identical experiences.

JH: No.

RC: Although, I like that they've broken this out into levels, and I see that the W3C doc is broken out too, marking approaches: This is a Level A approach, this is a Level AA approach, this is the AAA approach.

JH: Yeah, exactly. It should make more sense that way, instead of just telling people, "These are rules, and you have to comply with them," and that's the whole story. Eventually it's all about logic and serving people in the best way you can and having your content make sense for everyone.

RC: I guess that brings up the question, Does this make sense to layer into the same the same page, or do we really want to build an alternate page for accessibility?

JH: I think the latest thoughts on that are that it just doesn't make sense to build two websites, to have a separate, accessible version of your website. I think it can be all the same for most websites. For example, if on www.forbes.com, the main content is going to be (I checked it a couple of weeks ago), I think it's on line 470, where you can read the main title of the page. The whole part before that is all about social or banners or navigations that don't make sense [being] on that place, so you have to think more about what's most important to the user and keep the rest out of it.

RC: So, Jeroen, I pushed up www.microsoft.com/enable, and that's the Microsoft Accessibility Technology for Everyone site. One of the things I noticed on this site right away in the top left corner is a link that says Mobile/Text Only. I think it's really interesting because it is what you would want in a mobile site, but I guess it's also for folks that want to strip down the art and just focus on the text.

JH: Exactly. There are actually a lot of plug-ins that do the same in several browsers now. I think the reason that they built in this link is that it might sometimes be more useful for people to have the real raw content. Some people, for example, if you have ADD or, you know, sometimes all those flashy images might…

CF: …be distracting.

RC: So that's text mode. And they even reference, I mean in the normal page the big banner at the top has a rotating series of images of different people with various accessibility limitations, and they've replaced it in the text version with text that says "Image: Animated series of photos of computer users including a man, woman, and a young student." So it really has sort of distilled the essence of the site down.

JH: Yeah, exactly. I think it's also pretty good to look at your own websites in that way because when I talked about logic early on in the show, that's what it's all about. It might be useful to strip [from] your website CSS and JavaScript and images and look at the naked core of your product.

We actually did a project here in the Netherlands. It's a Dutch website, but [translated] it's Microsoft Undress Your Website. What that application does, it's like a bookmarklet, and you can load it on every website. There are a few switches you can use -- for example, Undress -- and it strips out all the CSS, all the JavaScript, all the Flash, all the Silverlight, and all the images. What stays is like the naked core of your website. It really helps people to understand what the problem is with their website.

RC: Yeah. I want to see what somebody visually impaired sees of my website.

CF: So, do you have any websites that you can point us to, besides the corporate Microsoft site, which are good examples of accessible sites?

JH: Yeah, there are a couple of tools that are out there. Like, for example, if you use the web developer toolbar in Firefox, or if you use JSLint to fix your JavaScript, well, those tools are the best way to enhance your website in a more accessible way. So, I mean it's not rocket science. Accessibility is not a [university] subject; it's just mainly logical thinking. Perhaps even the best tool is just to remove your own mouse and try and navigate through your website with just your keyboard.

CF: Right.

RC: There are some toolbars for IE specifically for sight-impaired folks to be able to strip things off the site they don't want to see.

JH: Indeed, there are some tools that make it easier for developers to build accessible websites. Most of those tools are pretty much the same. It's all about removing CSS or images or showing all text, and I think that's the level where most people should just go. Because when I talk to developers, most of them are not aware of what they are already doing on the subject of accessibility. I think we should just get our act together and move all those pieces toward each other to have that real tool to really make accessible websites.