The SpoolCast: Ajax Aids Accessibility? (with Derek Featherstone)
A UIE SpoolCast — Jared Spool interviews Derek Featherstone on whether Ajax can aid accessibility.
This is a preserved copy of a UIE SpoolCast episode — Jared Spool interviewing Derek Featherstone. User Interface Engineering's sites (uie.com / uie.fm) are no longer online, so I've preserved the recording — the audio is hosted at the Internet Archive and the transcript is below.
Transcript note: auto-transcribed (ElevenLabs Scribe); speakers named from the episode's own introductions.
Listen
Full transcript
Brian Christianson (UIE producer): Derek Featherstone interviewed by Jared Spool, December 2008. (instrumental music plays) Welcome. I'm Brian
Brian Christianson (UIE producer): Christianson, producer of UIA Podcasts. In this week's episode, Jared speaks with Derek Featherstone, founder of Further Ahead and internationally renowned authority on accessibility and web development from Ottawa, Canada. Derek will be presenting his talk, Designing Great Interactive Experiences For Everyone, implementing AJAX and Accessibility at our Web App Summit this April 19th through 22nd, Newport Beach, California. You won't wanna miss it. And now, here's Jared.
(music)
Jared Spool: Welcome everyone to another episode of the SpoolCast. I am very excited today. We have Derek Featherstone from Further Ahead. He's coming to us from Ottawa. Welcome, Derek.
Derek Featherstone: Hi, Jared. Thanks for having me. (laughs)
Jared Spool: Uh, thanks for being here. And, uh, you're gonna be speaking at the Web App Summit in April. You're gonna be giving, uh, a presentation that I'm very excited about called Designing Great Interactive Experiences For Everyone, implementing AJAX and Accessibility. Last year, you, uh, talked about moving beyond compliance, uh, with, uh, at the Web App Summit, and it was one of our highest rated sessions, and, and you're one of the people I know who gets a standing ovation on occasion for,
Jared Spool: for the stuff that you talk about. It's, it... People, people just love listening to you. And so I thought it would be a great chance for us to talk today about, uh, some stuff that's been on my mind. And, and in particular, what I thought we could talk about is this AJAX thing sort of came on really fast, and there's a lot of us who, who've been designing for a long time, but we haven't done a lot with AJAX. And, and, you know, stuff on the web tends to be restrictive and, and has all these weird edge conditions and border cases,
Jared Spool: and you get a lot of, you know, "Yeah, you can't do that," type responses when you come up with ideas. But AJAX changes the ball game a little. And maybe you could talk about if someone doesn't know... isn't a programmer, doesn't know a lot, should they be afraid of AJAX? You know, does it, does, does this thing need to scare them, or, or, or is it easy to sort of figure out what to do and, and how to, how to take advantage of this, this great new way of interacting, uh, y- on web pages?
Derek Featherstone: Yeah, well, I think it's, um... You know, I mean, it's, it's an interesting conundrum because it's, it's a very typical reaction when we, when we don't know, uh, the details of something or we d- we're not familiar with it. We tend to, to, to look at it with a, a little bit of reservation. And, and I think in some ways, that's actually quite healthy. We should, uh, look at any, any technology or any techniques with, with a bit of, uh, healthy skepticism to be sure that, you know, this is actually something that we wanna do. What I, what I do think that happens with, uh, with AJAX
Derek Featherstone: is that a lot of people do dismiss it out of hand and just say, "Well, we can't do that," or, "That's too complicated." Um, and, and I think, you know, even, even though some of the technical side of it is complicated, fundamentally, what, what AJAX does for us is really quite straightforward to, to understand. Once you grasp the core central concept of w- what's happening, uh, knowing how that works, uh, enables you to, to look at your applications and your pages in a, in a new way
Derek Featherstone: and say, "Okay, well, th- there's some, there's some great opportunities for, for innovation here and for improving our applications." So I think, uh, you know, while, while there is, there is room for it, it's healthy to have a bit of that, of that reservation and skepticism. Once you're, you're exposed to it and you understand how... the basics of how it works, it, it changes the way that you look at things.
Jared Spool: So is mastering AJAX really about understanding the, the underlying code or is there, is there sort of a, a way to think about, uh, the design techniques so that, you know, once you get the hang of it, you're not asking to do s- you know, impossible things or you're not saying, you know, sentences that, that just don't make sense? Uh, how do you, how do you sort of get your head around that? What do you think the process is for doing that?
Derek Featherstone: Uh, I think, you know, one of the, one of the things that's, that's really useful for, for designers is, is to just think of... you know, is to, is to understand AJAX within the, uh, the framework with which you already have. So most designers, for example, work with, work with a, a set of tools and, and they, they do similar things, whether it's you're using Microsoft Office and you're embedding a spreadsheet into a Word document or you're working in, in Dreamweaver and Fireworks and, and the two are connected together.
Derek Featherstone: Uh, you might be working on a, on a design, uh, or a, uh, or, or a, an HTML-based prototype in Dreamweaver, and you might use, uh, the tool within Dreamweaver to say, "Okay, I wanna edit this graphic," which will then go and take you off to Fireworks where you edit the graphic in Fireworks, and then you say you're done, and then you come back and you continue on working in, in Dreamweaver. Uh, the same, same thing applies in most of our office suites with embedding spreadsheet data
Derek Featherstone: in a, um, in a, in a Word document or other types of data. Essentially, what you're doing is you're working in one environment and you go off to, to do some other little piece of work, and then you come right back to where you were. That's, that's kind of the way that AJAX works, uh, in that you're working in, in a web page, you've got a-
Derek Featherstone: ... page that's rendered on the screen and you click on something or you interact with something and say, "Okay, well, go off and do this other, other piece of work on the server and then come tell me when you're done." So you, you get to maintain that context. You, you're able to, as a designer, you can work in Dreamweaver and go off and do something, uh, directly from Dreamweaver, build in that request from Dreamweaver to go off and do something in Firefox and then come back. The same kinda thing works on the web. You're, you're working in one existing page.
Derek Featherstone: You get to maintain context. You go off to your other tool, which happens to be your, your server in this case, it performs a little bit of logic, and it comes back and you're, you're right where you were, uh, and you haven't lost context. You're still working on the same, on, on the same page and, and working with the same, uh, you know, the, the same rendering of, of where you were without having to completely switch contexts over to the other tool.
Jared Spool: Mm-hmm.
Derek Featherstone: So that, that, you know, once, once you understand that and understand a little bit about how that, that type of technology works, we can really take, uh, a new look at our applications and, and designs and, and see opportunities for, for AJAX everywhere that, that, uh, that, you know, whether it's something like reducing errors, the, the number of errors that occur or improving the overall flow of an application, um, or, or even just performance. Maintaining that context is, uh, a critical port- portion
Derek Featherstone: of, of, of implementing AJAX in a design, and it's, it's part of what helps us build efficient, uh, applications and, and, uh, whether it's an application or a page, uh, we, we improve that efficiency significantly.
Jared Spool: Now, there are all these different toolkits that folks can use. Um, do they make it easier for the designer to, to be able to, uh, talk to the developer about what they'd like to... you know, the vision they have for, for, uh, their design?
Derek Featherstone: Yeah, there, there are a lot of toolkits that, um, that implement AJAX-type technology and, and, you know, one of the, one of the most significant benefits around a lot of the toolkits right now, things like, uh, you know, Yahoo!'s User Interface Library, the YUI Library or jQuery or Dojo, uh, they're- these are all names of, of libraries that are out there that help you with scripting and, and interaction and, and assist with AJAX. What, what these libraries, uh, can do
Derek Featherstone: for you and it... is they let you do certain things without, um, knowing all the detailed technical implementations. You don't need to know all of the exact, uh, the exact best, best methods for, for implementing something. What, what they allow you to do is actually communicate better with (clears throat) excuse me, communicate better with developers. One of the things that, that, uh, a lot of the tools do is they just have built-in methodologies for, uh, different types of
Derek Featherstone: transactions on a site. So you might have, uh, a site or a- an application where you use progressive disclosure to show and hide different parts of a form depending on, on the user's choices as they've gone through a f- as they go through the form. Well, what a, what a designer can do with some of these libraries is show some of those show and hide transitions to more effectively communicate that in a, in a, at a prototype level to, uh, the developer who actually ends up implementing things. Uh, so the, the toolkits,
Derek Featherstone: um, they're, they're certainly not the solution to every problem, but they certainly help with rapid prototyping and they certainly help with designers being able to effectively communicate what they mean. Uh, we, we used to rely on flat two-dimensional artifacts to communicate our designs to developers so that they could go and implement them. And, and now, in this, uh, in this, uh, interactive space where we are now, where applications are changing in the- in terms of the, the interaction that's
Derek Featherstone: there, where we're no longer dealing with a linear model from one page to the next to the next, and we've got these AJAX interactions happening-
Jared Spool: (exhales).
Derek Featherstone: ... we need a, a better, uh, a, a, a better way of communicating and, and the best way, in my opinion to, to do that right now is, is not just by not just giving something to a developer that tells them what to do, if we can give developers something that shows them what are- the intent of our design is, then, then that's a much more effective, uh, uh, design tool.
Jared Spool: Now, um, there are lots of, uh, sort of myths out there that, that peop- you know, misconceptions people have about AJAX, um, what it can do, what it can't do. Uh, are there some common ones that you, that you've run into?
Derek Featherstone: Well, I think one of the, uh, one of the most common, common misconceptions is that, uh, is that AJAX should be used for everything. Um, w- we see that quite often where people start thinking, before they've even investigated a solution, uh, they start thinking, "Well, we wanna do this with AJAX," when, when, in fact, that may not be the best, uh, the best interaction for the particular problem that you're trying to solve. So, that, that's certainly one of them. Uh, ano- another that, uh, that
Derek Featherstone: we see quite often is that, uh, is that AJAX is really, you know, is, is really hard and, uh, while I, while I won't say that it's, uh, uh, easy, it, it's certainly, I think, easier than it's made out to be. Uh, once, again, once you understand what it's good at, once you, once you understand what AJAX is good for, then we can use it in, in ways that are, are really, uh, really quite useful. Um, one
Derek Featherstone: of the, one of the other misconceptions is that, um, we've, we've seen this in- with clients that we've worked with where they've had people working on an application for them where they said, "Well..." ... this, uh, this application that we're building has to use AJAX for everything, and so people will build entire, entire applications with AJAX when, when that's not necessarily the best way to, to do things. And you'll quite often see AJAX-based applications where
Derek Featherstone: you'll have a long load time. Uh, so you'll, you'll click on something, the entire screen will go blank, but there'll be a, a loading, um, uh, a progress indicator saying, "Loading, loading, loading." And you'll be sitting there and waiting and waiting and waiting, and in some cases, what ends up happening is you end up waiting longer than if you were working in a traditional model where you go from one page to the next, uh, with a full-page refresh. And quite often, that happens because people turn everything into AJAX. So that's, that's another, um, e- e- you know,
Derek Featherstone: I'm not sure it's a misconception, but I think it's, in some cases, a, a misuse of AJAX, where, where in e- e- to be honest, I think in some cases, if we misuse AJAX, we actually make the user experience worse. Um, so that, that's, that's some of them. I know the, the one that we see a lot is, uh, the misconception or, or the feeling that, um, AJAX and accessibility do not work well together. And, and if you want to use AJAX, um, and, and in some cases,
Derek Featherstone: people even believe right back to, to AJAX's foundations, uh, JavaScript. A lot of people still believe that you can't use JavaScript and have it be accessible, um, to people with disabilities, and that's, that's just not the case anymore. There are, there are certainly challenges, um, (clears throat) accessibility challenges when we're implementing AJAX, uh, but the, it's certainly not impossible. There, there are ways to work with AJAX that, that, that ensure that we're providing an accessible experience for people with
Derek Featherstone: disabilities. And, and in some cases, I would argue that, uh, AJAX actually enhances the use of, the proper use of AJAX actually enhances the experience for people with disabilities, because it, it makes it that much easier for them to use.
Jared Spool: Oh, can you say a little bit more about that?
Derek Featherstone: Sure. Well, one of the, one of the things that, that we found, um, in, in the work that we've done, uh, again, with, with a number of clients is that quite often, a, a small barrier, um, a, a, a small barrier for, for a, a non-disabled person, um, you know, whether it's, it's something that happens with, with a, a website or an application, a, a small barrier to completion can actually become a, a significant barrier to completion and that much more s- more severe
Derek Featherstone: for a person with, uh, with a disability. And what we've, we've started to find is that, um, you can, you can easily flip that around the other way, so something that provides a small enhancement, a small usability enhancement for, uh, say a fully sighted person, using AJAX to provide them a small enhancement can actually provide a significant enhancement for somebody that's, uh, that's, uh, not sighted and is using screen reading technology or, or is relying
Derek Featherstone: on the keyboard. Um, so, uh, just one example is, is, uh, managing a number of records, uh, in a web application. So let's say you have a set of search results and you want to perform an action on each one of those, the records that comes back. The, the traditional model is you click and make a change on one record, that goes off and makes the change on a new page, and then you reload your initial page that shows the status change for,
Derek Featherstone: for that particular record. Uh, with AJAX, we can improve that process by allowing people to manage multiple records at the same time and updating each record individually. One of the things that we can do with, with, uh, with that is, is maintain context, and maintaining context is something that's really important to, to somebody who can't see, for example. So the fact that we do all these actions on one page, only reloading a little bit with AJAX each time we, we make a change for a record,
Derek Featherstone: that has a significant impact on the overall time that it takes to complete the, the managing of multiple records for somebody that, that is, uh, that is visually impaired or, or maybe just is, is using, uh, the keyboard, keyboard-only interaction.
Jared Spool: Mm-hmm. So coming up in April, uh, this is some of the stuff you're gonna be talking about in your session at the Web App Summit, right?
Derek Featherstone: Yes. Yes.
Jared Spool: Uh-
Derek Featherstone: Definitely going to be looking at, uh, at examples and, and, and just setting up some of that, that fundamental knowledge that people, that people will need to, to understand, uh, some principles of designing with AJAX a little better.
Jared Spool: So why don't you walk us a little bit through that day what people are gonna get out of that?
Derek Featherstone: Sure. We, um, you know, we've, there's a number of things that we want to, want to accomplish that day, and, and one of them is just ensuring that, that everybody that leaves that room that day has a, a good understanding of, of the, the vocabulary that we're, that we're using in, uh, in, in today's day and age when we're designing with AJAX. Um, and, and part of that really is just to give people, uh, that maybe don't have any experience with AJAX a little bit more confidence in, in understanding what, what
Derek Featherstone: it is that, that developers are talking about when they're talking about, uh, you know, it's, uh, I mean, the internet is famous for, for all of its acronyms. Um, so this is, this is something that we'll, we'll be looking at in the, in the session, just making sure that people have that, that core fundamental knowledge of what, what AJAX is, examining a bit of how it works, looking at some tools that people can use to, uh, to understand the, the interaction a little bit better, uh, and, and, you know, help
Derek Featherstone: people recognize AJAX when they see it, and then also help them recognize when, when they should be using it. So we'll move from, from those, that foundational, uh, that foundational knowledge of, of what. ... what AJAX actually is and what technologies it uses into, uh, looking for those opportunities. So once we recognize it and see it in a, in a web application, we, we wanna take a critical look at, at whether or not we should even be using AJAX there in the first
Derek Featherstone: place. Um, there, there's, as we said before, there's a, a number of examples, uh, or applications out there where everything seems to be done with AJAX, and, and that's not necessarily the best way. So we want, we want to help, uh, anybody that comes to the workshop, uh, understand what AJAX is really good for and how, how we can identify opportunities in our applications to use AJAX in a, in a useful way. Uh, so we'll, we'll take a look at,
Derek Featherstone: uh, at that. We'll, we'll move from the technical to looking at those opportunities, and we'll also look at, uh, some of the, the challenges that we're faced with, uh, when we're, when we're looking at, at implementing AJAX in our, uh, in our, in our applications. So one of the things that happens is when we start doing things with AJAX, we need to take responsibility for few, uh, a few other things that happen in the, in an application. And one of the things we have already talked about today is the
Derek Featherstone: idea of a, a, a, some indication of pro- of progress. Uh, yes, something is happening on the screen. And part of the reason that we do that, uh, traditionally in a, in a browser, if you click on a link and you're going to another page, we see a status bar at the bottom of the page that says, "Hey, something's happening here." When we move to an AJAX model where every click doesn't equal a full refresh of the, of the page of the browser, that status bar e- essentially doesn't function the
Derek Featherstone: way that we think it should. So what we need to do, i- is part of our responsibility as designers, is provide a replacement. So thinking about it, anytime we take something away that's normally there, we need to replace it with something equally as good or better. Uh, so we'll, we'll look at some of those, uh, some of those issues as well and the things that we need to, to take into account there. Uh, once we, once we've done that, we'll actually start getting into, uh, some, some work on the accessibility and the usability
Derek Featherstone: side of, of these types of interactions. Um, and when we do that, we'll get a little bit more into, um, what, what accessibility is and how, how it has an impact on, uh, on what we do with AJAX and, and help us, uh, make sure that when we're implementing our AJAX-based solutions, um, that, that we can do so following best practices and taking into account, uh, the needs of everyone, including people with disabilities.
Jared Spool: Cool. I think it's gonna be a, a really fun day. I think, uh, it's a great way to get in and really understand what this AJAX thing is about and how to implement it, and also to make sure that you're, you're creating experiences that, that people with disabilities can use, uh, along with everybody else.
Derek Featherstone: Exactly.
Jared Spool: That sounds really awesome. I wanna thank you today for taking the time to talk to us. This has been really a lot of fun, and I'm looking forward to seeing you in April in, in Newport Beach.
Derek Featherstone: Yeah, looking, uh, very much looking forward to it as well. I think it, uh, will be an exciting day and really looking forward to, uh, catching some of the, the weather down there 'cause I know it certainly won't be as nice here in Ottawa at that time.
Jared Spool: (laughs) Yeah. Well, do they still, uh, uh, skate on the channels in the winter in Ottawa?
Derek Featherstone: We absolutely do. The world's longest skating rink.
Jared Spool: Yeah. (laughs) Oh man, I, I, I, I love that. So that, that is, that is one thing I miss about Ottawa. But, uh, Newport Beach does not have that.
Derek Featherstone: And, and I think, I'll be honest with you, I'm okay with that.
Jared Spool: (laughs) Okay, cool. Well, Derek, we'll see you there. I wanna thank everyone for listening today, and thank you for encouraging our behavior yet once again, and we'll catch you next time. Take care.
Derek Featherstone: Don't forget, if you'd like to hear more of Jared Featherstone, be sure to catch him at our WebApp Summit, April 19 through 22nd, 2009 in sunny Newport Beach, California. Learn more at webappsummit.com. That's all for now. Thanks for listening. Goodbye.