[Intro Music]
Announcer: Welcome to Web Axe, practical Web accessibility tips. Web Axe, website accessibility, Web standards.
Dennis: Welcome to Web Axe podcast number 71, Gez Lemon Interview and ARIA. This is your main host Dennis and I am going solo today. And I got a great episode though to make up for my partner or a partner and that is number one.
A new theme song. There’s a new Web Axe intro and exiting music, the theme song. It’s custom made by a great old friend, Jeff Ensign from Glafizian Arts and Entertainment out of Sacramento, California. So, thanks a lot Jeff.
I think he and his wife did a great job so I hope you’re liking it. And even better, we’re having Gez Lemon on the show, who is a Web accessibility guru and an ARIA expert. And if you’re not familiar with ARIA, you will be shortly or you should be.
It’s a W3C specification. It stands for Accessible Rich Internet Applications. And yeah, it’s really not too hard to implement. Just learning the ins and outs. There’s a little bit of a curve there but and I’m also a beginner.
But after the interview, I went into the code for Accessible Twitter and I implemented it a little bit in there and so, far it’s been a pretty painless. So, it’s pretty neat. It’s not a lot of work. And it provides a whole another layer of accessibility to your website or Web application.
So, before we get into that, I just wanted to mention just a couple of news items. And the first one is a slide deck, a slide show on slide share that I thought was very valuable to mention. It’s called the Five Layers of Web Accessibility. So, check that out. Put the link on the Web Axe post for this episode of course.
And also coming up in the couple months, July 20th and 21st is the Accessing the Future Conference in Boston, Massachusetts, USA and that’s brought to you by IBM and the IEEE.
So, without further ado, here is the interview with Gez Lemon. Enjoy.
OK. So, we have Gez Lemon on the phone. Welcome to Web Axe.
Gez Lemon: Thank you.
Dennis: You work for the Paciello Group and they’re outside London, is that correct?
Gez Lemon: Yes. The Paciello Group, the main office is based in America so it’s an American group, head by Mike Paciello. But I work for the European branch which is based in Ireland but I work in England. So, with all of us are based all over the world, we have got people in New Zealand. Steve Faulkner was in Australia but is now living in London. We got people in France and various locations in the US as well.
Dennis: OK. And you’re an accessibility consultant which is why I brought you on the show. And you’re probably familiar with his name, Jazz or Gez Lemon. He’s pretty popular on the Web. He has a blog, Juicy Studio. He’s part of the WaSP Accessibility Task Force and he’s become quite the expert in ARIA, which is one of the main reasons why I invited him to come on. He could talk to us about that a little later on. And you can follow him on Twitter of course.
So, let’s see, first question. Let’s see, so we talked a little bit about Paciello Group. And did you do any work on the, they have a Web accessibility toolbar for IE? Did you do any work on that?
Gez Lemon: The Web accessibility toolbar for IE was developed by Steve Faulkner, a colleague of mine. He developed it when he was an auditor at Vision Australia to help him with his job. And this is in fact how we ended up meeting.
I wrote a couple of services on Juicy Studio such as link analyze and readability test. And he asked if he could link to those in the toolbar. And we ended up becoming friends through that. And Steve Faulkner now works for TPG Paciello Group and so, the Web accessibility toolbar has come across to the Paciello Group.
Dennis: OK. Yeah, because I remember that toolbar when it was, I installed that on my IE 6 for a while.
Gez Lemon: It’s a fantastic toolbar. He did a brilliant job. And since he’s been at TPG, one of our developers, Cedric Trevisan, he’s based off French office. He developed a version for Opera and at the moment, Hans Helen who’s our developer based in New Zealand is creating a version for Mozilla. So, and I’m really looking forward to the Mozilla version.
Dennis: Yeah. I’ve been using the Opera more lately too actually. I usually have a Firefox browser open with a bunch of tabs. And then lately I’ve been having the Opera browser open with a bunch of other tabs. It’s pretty fast. I’m liking it. It’s pretty speedy browser.
Gez Lemon: Yeah. I tend to have all three open but my main two would be Mozilla and Opera. I think Opera is absolutely brilliant, very good.
Dennis: Yeah. Well, we could speak about that later. But you have an article on Opera’s developer site on ARIA. But before we get into that, I want to ask you about a couple of articles that you’ve posted on Juicy Studio. Just talk about a few things. And one of them is, a more recent one about, requiring the Alt attribute in HTML 5. Can you tell us, if you know what the latest word on that is and what your opinion, if it should be or shouldn’t be?
Gez Lemon: It’s relatively long. I can’t say in a short sentence exactly what the current thinking on that is. The idea of that particular article is the W3Cs Web accessibility initiative coordination group will look in proposition on whether it should be mandatory.
So, I wrote a position paper on it. And I try to create an unbiased list so that I can include in that position paper which is what that article was about. And to some extent, I think I did manage to get an unbiased list.
The caveat being that obviously I've got a strong position that a text alternative, whether it comes through your attribute or some other means is absolutely essential for something to be perceivable. And a lot of people who read my blog obviously have that same view.
But fortunately people like Henry Sivignon also commented and he’s a brilliant young developer who’s closely involved in HTML 5 and he has really good views. And so I’m glad he felt that he was comfortable enough to post. A couple people try to shut him down but I took his views through to the Way Coordination Group anyway.
And so, there’s no definite answer but the general thinking at the moment is providing that a text alternative is provided and that should be adequate. So, there could be some ARIAs where no attribute wouldn’t be required but it would need to be under certain circumstances. But as that’s still being worked on at the moment, I can’t give a definite answer about what that’s about.
Dennis: OK. Well, I know it’s still in the works everything. So, I’ll put a link of course, this podcast posting on Web Axe. So, anyone out there go ahead and read it if you’re interested.
The other thing is, you’ve developed like an accessibility ARIA toolbar for Firefox, can you tell us about that?
Gez Lemon: The reason that was developed in the first place is that we do a lot of work with auditing ARIA. People who are implementing ARIA at the moment, we have a look at what they’ve done and test how well it works. And plus also obviously in the development work that we do, we include a lot of ARIA. And rather than fire up a screen reader every time, it just become necessary that we were able to find out what ARIA attribute was set and what elements they were sent on and how well they would work.
So, I come up with this idea of just needing a toolbar that could do this kind of thing. So, I put this together and Steve Faulkner who’s behind the IE accessibility toolbar who also oversaw the Opera toolbar and the current Mozilla toolbar work has taken this over and when now, what I have at the moment is the last that’s going to be produced by me.
Is now going over to Hans Helen who will incorporate everything that I’ve done plus all of the work that was in the IE toolbar to include this on the Mozilla toolbar.
Dennis: Oh wow.
Gez Lemon: Yes. So, the Mozilla toolbar that’s coming out and also the Opera toolbar will be updated to do the same. And Steve is currently working on the IE toolbar to do the same. So, eventually, we’ll have three toolbars that do everything that the current IE what does plus also having all of these ARIA information released to people as well because it does make development and everything a lot easier.
Dennis: Yeah totally. I’m sure a lot of people, now that ARIA is getting more popular, we’ll be able to make good use of that, so thank you.
Gez Lemon: Yeah. For people who are new to ARIA and who don’t feel confident checking their work with screen readers which is quite reasonable, quite often, we come across this all the time where people who are not used to using screen readers, evaluate their website with the screen reader and come to all of these conclusions that ultimately make their website a lot worse.
If they’re just up to standard. If people generally stick to standards, you can’t really go that wrong. And so, having this toolbar will at least to show you, OK I’ve set this particular property, I know what this property does and so, this should achieve this particular outcome. So, it’s likely to work well.
And so far the feedback has been pretty good and hence Helen, not a colleague of mine, who’s going to put this together in the Mozilla toolbar is an amazing and insightful developer and so I’m very confident that the Mozilla toolbar, as well as all the others will be a great asset for everybody.
Dennis: Great. So, make sure you let me know when that comes on, to download that.
Gez Lemon: I would need some people onto it. We’re all really overwhelmed. This is the kind of stuff, this is free so we do all of this in our spare time. So, obviously we’re all on to him all the time, “Where are you? Where are you?”
[Laughter]
Dennis: He’s out doing real work right?
[Laughter]
OK let’s move on to something else that you have done. I guess it was a few months ago, you came out with the Focus Twitter grease monkey script which helps the Twitter website become more accessible by helping keyboard focus on a few different elements that normally what it appear. Is that correct? Did I explain that right?
Gez Lemon: Yes. Yeah. I, like most people, absolutely love Twitter. Considering it’s so simple, it’s unbelievable that it’s so inaccessible and a lot of my friends were unable to enjoy Twitter because of this accessibility problem.
So, I decided just to fix the biggest issues which were things, certain things which is not keyboard accessible. So, that not only knocks out people with mobility problems but people who use screen readers would never ever get to that information. So, that was the inspiration behind that particular script.
And because I’m dependent on someone else, every time they update the site, which surprisingly, I don’t know how old that script is but in the time that it’s been out, I’ve had to update it three times. It’s really, really frustrating.
So, I’ve got to say, thank you so much for what you’ve done with Accessible Twitter. It’s a great application and it’s filled the void of what I was hoping to achieve at the time. So, much better than I could have ever wanted to. And I know that a lot of my friends are now using Accessible Twitter as the way to access and enjoy Twitter in the same way that we all do.
Dennis: Great. Great. Yeah thanks. Yeah, it’s been a challenging but very fun and rewarding project. So, but actually just to tell a quick story your script was actually the was a catalyst for me doing the Accessible Twitter.
What happen was, I’m not sure if you or anybody else read a couple of the interviews of me online but you came out with that script and then I think I tweeted about it. And then, one of my friends replied to that and he said, “Well, why don’t you just use the API and create a whole, fully Accessible Twitter website?”
And then I thought about it for a second and I’m like, well, OK. And my wife and kids were away for a couple weeks, visiting family at the time. So, I had obviously then some extra time on my hands. So, I took his recommendation or suggestion and that’s how it came to be.
Gez Lemon: Oh wow. Well, I’m flattered, then thank you very much. I had read a couple of interviews by you, I just didn’t realize that that was what was the catalyst. I’m really pleased it was cause it’s a great application that’s very needed.
Dennis: Yeah. It seems to be growing in popularity pretty quickly. So, I’m happy with that as well.
Gez Lemon: In terms of users now.
Dennis: Well, the middle of the week seems like Tuesdays, Wednesdays, Thursdays are the highest. Yesterday, there was over 500 unique visitors. So, I think that’s pretty good.
On what’s it the Google, what called it’s called? Page rank, the Google page rank, it premiered at a five, I'm a 10 on there so that was pretty cool. I think that’s pretty good. Hopefully it will go higher.
Gez Lemon: Yeah. That’s quite impressive for something that’s only been out for a couple of months.
Dennis: Yeah. Yeah. All right. Well, enough about that. Let’s see, before we get into the ARIA thing, I wanted to ask you. I’ve been meaning to ask you a question because I know we email about it a little bit but I understand you play a mean guitar and some piano.
[Laughter]
So what do you do with that? You said you come a little bit from a musician background or.
Gez Lemon: I can only assume. If you’ve read anything about me and guitar, I can only assume that was probably something I said in jest. I can play the guitar and I’m quite comfortable playing the guitar. I love playing any instrument and I’m usually quite quick to pick things up. I picked up a saxophone and was able to play it relatively quickly.
But for some reason, the piano, I just can’t master. And I remember, I decided to take it quite serious. This would have been about 1993. I decided to take it really, really serious and do it properly. So, I hired a piano teacher. And so, this person came around to teach me piano and he was saying, “Oh, you should do your grades.”
I don’t know if you have the same thing in America, but in Britain, we have these things go great. Between one and eight, where one is the absolute basic and eight means you’re very professional playing that instrument. And so, I decided to do my grades and I did a great one where you have to go and be assessed by someone. And assessed by somebody, I was assessed by a vicar at a local village hall.
I turned up, by now I was 29 so maybe 30 years old and I’m with a bunch of precocious kids, aged between 6 and 12. And I went in, I was so nervous. I do get quite nervous in social environments. So, I went in and I was so nervous and I had to basically just a few exercises play scale, play a simple exercise and do it, do a couple of things.
I max it up while I was in there. But it went fine. When I came out, my girlfriend who was waiting for me on the outside, wait until we got out and she turn out and said, they could all hear what I was doing while they were waiting outside and one of the kids, who is probably aged about eight and said to their mom, “I complain much better than that one mommy.”
[Laughter]
So, this piano teacher that came around keep her on the show and they asked me to play at the show because he thought I was making really, really good progress. He brought along the sheet music for Queen Nesheeba and showed me how to play it and so I learned how to play this thing and I learned how to play this quite complex piece of music within a couple of weeks.
So, it’s really exciting thing. Wow you’re going to be brilliant. You can come and play at the show. But what didn’t take into account is as soon as he said, “All right, are you ready? Play it.” Notes to cover, and I couldn’t play it. No time could I play this piece of music.
If I could play it right through the way on my own. As soon as someone was listening, even tape recorder on, I'd muck it up because it was just the pressure. So, he decided, OK. Well, that’s just a pressure. He taught me the theme tune from Dr. Zhivago and so, I learned that and exactly the same.
That was a much, much easier piece but exactly the same. As soon as he said, “All right, play it right the way through. I’m listening.” I couldn’t.
Dennis: Then your nerves got to you huh?
Gez Lemon: Yeah. So, and he said, “Well, maybe we’re better with Queen NeSheeba.” So, he said, “Go back and play that.” And honestly couldn’t remember a note, even though I only learn one new song. So, this kind of lead me to believe I can only learn one piano piece a time.
[Laughter]
So, this is leading on. He’s got me, he’s told me that I can play at this show and it was ages before he gave me lots and lots of notice. And just before the show was about to take place, he just suddenly didn’t show up and I couldn’t contact him through phone.
Ironically his name was Dennis and he’s the only ever Dennis I’ve ever spoken to. When you didn’t turn up when I was expecting you, I was thinking, "Oh no, please don’t tell me. I’ve made, people with Dennis just run away."
Dennis: Oh, that’s funny. Yeah we had a little bit of a time zone issue but fortunately we were able to catch up with each other. So, I’m glad you came on and we caught each other. But yeah, that’s interesting story. You don’t seem to be too nervous now. So, let’s get into the ARIA portion of the show.
And sorry if you’re not familiar with that term but I should mention at the beginning that it stands for Accessible Rich Internet Applications and it’s part of the W3Cs Web accessibility initiative. And let’s see, well, why don’t you just give us a quick overview of your explanation of what it is and how it’s helpful.
Gez Lemon: I’ll try. That’s quite a wide.
Dennis: As brief as possible, an overview.
Gez Lemon: OK. In really, really simple terms, it adds accessibility information to an application the way the Web is used at the moment. It was never perceived that the Web would be used in the way it is now. So, when you see applications like gmail that have so many things in there that are updating or that you use in a way that not implicit from the markup, that there was a need for something to add that accessibility information so that assistive technology such as screen readers understood what was on the page.
I think one of the most important thing to understand about ARIA is that it is amazingly simple. If you imagine, if you would write in a Web application, the complexity and difficulty of what you’re doing is integrated with rich Internet controls that are not provided by HTML such as a slider or a tree control or even a simple menu that you see on every website.
All of these things were never ever written into HTML. And ARIA provides the technology so that you can say, “Right, this is the menu. This is a tree. This is a slider.” So that when people were using the screen reader, they’re not looking at any niche that has an accessible name thumb. I’m wondering what this means. That means, this is a slider. It’s current value is 45. It’s minimum value is 1 and its top value is 60.
Dennis: So, well that was good explanation. And what are the basics about actually implementing this? Is it, because I’m not too experienced with this yet, I’m starting to learn it and is it basically a matter of just adding these attributes onto the tag or can you kind of explain what the gist of it is?
Gez Lemon: Essentially, it’s exactly what you just said. It’s a case of just tapping attributes to existing tags to provide the accessibility information that wouldn’t normally be there.
So, for example, if you have a slider control, then you might implement that, use and input, type people’s image and provide a thumb and I’m assuming that someone would use an input type of image because it automatically has keyboard focus.
But the things is missing are, what is it, what does it do? What is it? What is the minimum value I can provide? What is the maximum value I can provide? What is the value now? How should that be pronounced in text?
And so, ARIA provides all of these things through rows which would tell you what it is, so it roll with the tree, roll with the menu item and then ARIA properties to tell you the state of that control as is in the moment. So, if it’s a slider control, for instance, you might use ARIA value min equals zero, ARIA value max equals 100, ARIA value now equals 67.
And possibly ARIA value text to explain what that 67 means. For example, 67%. So, ARIA is just a way of add in accessibility information to existing markup. And when it was first introduced, it was quite complex to provide because there was a syntax that you use if you use an XHTML and there was a syntax that you use if you were using HTML which was really quite complicated which is all just been abolished now and basically everybody just has agreed to just provide those attributes directly on the element to provide the accessibility information.
Dennis: OK. Do those attributes validate with the W3C validator?
Gez Lemon: No. That’s probably one of the biggest things. And there are a couple of things here. Number one, Steve Faulkner, a colleague of mine, wrote a DTD that does accept all of the ARIA rows and properties. So, he’s all that. And if he use this particular DTD, you can add these things and it will validate.
Dennis: Yeah. Can you send me that? Is there some kind of online resource for that? I’d like to use that and maybe put it up on the blog post.
Gez Lemon: There is. The one thing I would say to anybody that’s interested in ARIA is please look at the paciellogroup.com/blog. Near enough every article, it went well. A lot of the articles are about ARIA and Steve produces some absolutely brilliant work. He tests regularly and all of these is blogged. Any findings he find, he blogs. And this particular thing is on that blog.
I will send you the URL for this particular thing. But I would recommend that anyone interested in ARIA reads the paciellogroup.com blog because we’ve written about it quite a lot and in particular Steve Faulkner. He does a lot of great work with ARIA.
Dennis: Yeah that is a great site. It’s paciellogroup.com/blog. Great. OK that pretty much explains all the basics. The slider example, I assume is a little more complex than most of the uses.
Gez Lemon: Can I just add a couple of other things about the validation issue?
Dennis: Oh sure.
Gez Lemon: What Steve done is brilliant. And this isn’t trying to take away anything from what Steve’s done. A lot of people take validation seriously and wouldn’t consider allowing website to not validate.
Personally, although I have a really strong belief in validation, validation is about quality assurance and you should do everything you should to make sure that your website validates. But one issue in a W3C technology such as WAI ARIA, then I think it’s considering that HTML hasn’t changed for however many, over 10 years. I think it’s quite acceptable.
The one other thing, most ARIA, ARIA is concerned with making Web applications accessible so that generally involves using Javascript. The one thing people can do who want to validate, that also want to use ARIA, is you can inject these ARIA properties with script in.
I wrote an article for Opera about, it was an introduction to ARIA. And the very last point on that article was talking about this exact issue about validation. And I mention that you can just inject the ARIA property straight into the content. So that if anybody decides that this website validate because that’s what they’re going to use as the yardstick to determine the quality of this website, they get a plus.
The real issue is, is this website accessible by people with disabilities? They also get a plus to get in the accessible properties in the markup without someone having to use a specific DTD because I think what Steve has done is brilliant and will be used by people.
The majority of people aren’t going to use this specific DTD just to get validation. So, it’s probably better that they either introduce those ARIA properties with script in or just accept validation issues. But only if they only prefix with ARIA.
Dennis: Right. Great point. Yeah. That definitely goes to be said, yeah if your site doesn’t validate for certain reasons that are totally acceptable then that’s OK, such as using ARIA. And hopefully, that will be added to their DTD sometime soon but probably not.
[Laughter]
Gez Lemon: But probably not. I can’t image. Well, it definitely won’t be added to HTML 4.01 XHTML 1.X. So, that’s a lost cause. It’s maybe added to XHTML 2.X and it’s likely to be added or some ARIA is likely to be added.
But I think for something that’s important as this, and I’ve been a very, very strong advocator of validate or markup that is conformant rather than validity because you can get any to become valid. But being conformant with the specification, using how it’s meant to be, creates successful content.
And I’ve been very vocal in that in the past that the one thing I'm prepared to obviously relax my views is over something like ARIA because it’s just so important. It makes the experience for assistive technology as equivalent as who don’t use assistive technology. Without this markup, they can’t conceive the page.
Dennis: Definitely. Yeah. And I need to relax about that too because I admit I’m a validation freak. And sometimes it’s not necessary.
Gez Lemon: I’m completely with you.
Dennis: Yeah. So, let’s talk about some of the, a few of the ARIA types or techniques like, I guess the most basic is landmark roles. Can give us, what that is and give us a couple examples?
Gez Lemon: Yes. Landmark roles. If you think about a basic webpage, it’s divided into chunks that, most people, if you’re a site user, then you will perceive the page as a series of chunks such as the header, the navigation down by the side. You see a search by, you know where the main content is and you know where content associated with that is.
And so, the idea behind landmark is to mark out the page so that people can find that that information easily. So traditionally, screen reader users for example would, if they visited a website that was very well built, they would want to find out what the major heading for the website is. They might press two to go to the major headings of the website and obviously three for subheadings. Or they may use H to try and determine where they were within the website or the list of headers or list of links. And all of these things gave them information about the structures.
Landmarks provide what they were actually trying to find out, which is where is the main content? Where is the search area? Where is the navigation? These are the things that people really wanted to do. And so, landmark is a brilliant thing in ARIA and that this is something that even if you have a static website, you can add landmark roles to your website.
Juicy Studio doesn’t have any dynamic content to speak of. But I’ve marked up several things as landmarks such as where the navigation is, where the main content is and where the search is. And with certain screen reader such as JAWS 10 for example, you can use the semicolon which will take you to the next landmark. Shift plus semicolon will take you to the previous landmark and control plus insert plus semicolon will provide a list of landmarks on the page.
And people saw it providing these things, which is possible now with any website and understandable by at least JAWS 10, then it makes it so much easier for screen reader users and assistive technology to access your website. So, this is something that anybody can do right now.
Dennis: OK. But do you see any conflict with using that and then HTML 5? Because I know a big part of HTML 5 is creating those, the new tags that describe actually headers and footers and stuff or is that just working together in sync together?
Gez Lemon: Yeah. I think it’s more about becoming in sync because I definitely don’t see a conflict. I think there are things in HTML 5 that might overlap in which case, people should use the HTML 5 version of the element or otherwise things that HTML 5 provides that looks as it’s going to provide that functionality that doesn’t really, for example, there might be restriction that they may only one of those in the page. In which case, people could use the ARIA version because as brilliant as HTML 5 is, I think HTML 5, from what I’ve read about HTML 5, most of it is brilliant. There are few accessibility concerns I have.
But the fact of the matter is, is that these things, the ARIA landmark is supported by 18 now and from my point of view, I’m looking to give people using assistive technology a better experience now rather than I wonder what will happen when HTML 5 is finally released. I would encourage people to use as much as HTML 5 as they possibly can that is supported.
Dennis: Yeah, that is what I was just going to say. Both are actually being supported already but ARIA has already been an approved standard, right? And I think there’s maybe more, supported a little more widely.
Gez Lemon: Well, it’s quite surprising because considering that ARIA as a moving target is still being developed at the moment. The ARIA Best Practice document which is fantastic document is always on the move. Things have been added to it. Things have been removed to it, depend on what’s going on because this is still a technology that’s being develop. But it’s so important that surprisingly most assistive technologies already support this, MBDA, JAWS and Window-Eyes which must be the three biggest assistive technologies. All have some support for WAI ARIA.
Dennis: OK. Well, let’s talk about Live Regions. That’s another type of ARIA code I guess you could say, where would that be used? Is that, would be used for Ajax and stuff? Like ARIA gets content on the page that can change?
Gez Lemon: Yes exactly. That’s exactly when it will be uses. If something is going to change, then that’s when you choose it. And as an analogy, if you have a, say for instance, if you have a website that has a lot of portions on the website but something’s likely to change, then people currently use techniques such as the yellow fade technique, where they focus on that particular point, make it bright yellow and then it gradually fades lower to indicate that this part of the page has changed.
But unfortunately assistive technology doesn’t get any of these, that they don’t know what’s changed. So, one of the things that WAI ARIA provide is something known as a live region which provides a whole load of properties, well about three or four properties that can assist people, understand what’s happened and obviously what you would convey depends on exactly what your application is.
So, for instance, if you were developing a chat application, you would just want it to announce what somebody had just typed. Whereas if you use a stop ticker for example, you wouldn’t just want it to read out random numbers because that wouldn’t make sense on its own. So, you want it to announce the whole region of where it was.
And so, live regions provide a set of properties that allow you to do this. The most important being the ARIA live property which is off, which is default and nothing gets out. ARIA pools out that if something changes, it will tell the user as soon as they finish what they finish doing or ARIA assertive which will tell them as soon as what they finish doing but maybe earlier if they take a long time.
And originally, in the first specification, they used to be a property called 'rude' that that was dropped because they felt that the alert drawl was pretty much the same thing. If you said alert this, then that’s an immediate action that happens at that second and interrupts anything that they are doing.
[Laughter]
Other properties that are really, really useful. There’s a property called ARIA atomic and this relates to one which I just mentioned in about the chat application and the stop ticker.
So with ARIA atomic, it takes two values, true or false. And if you say true, it means that it will read everything that’s associated with this update. And if you say false, then it will only announce the update. So, the chat application, you would only want to read the new text, not the whole log. But with the stop ticker, you would want to announce not only the new value but what that value related to. So that whole thing would be atomic.
There’s an ARIA BT property which says basically, this again takes a value of true or false. If it’s set to true, it means don’t read anything because we’re in the middle of updating a lot of information. So, there could be all kinds of things. And what you wouldn’t want is the assistive technology announcing one thing when something else will still be updated which would then need to be reannounced while something else have been updated, would then need to be reannounced.
So, the ARIA BT means just hold on while we do this and when ARIA BT is set to false, that’s the key for assistive technology to announce whatever changes had happened. And finally there’s an ARIA relevant property which says what do you want to announce? Do you want if notes were added? Do you want to announce if notes were removed? Do you want to announce if text is changed?
So, you got quite a fair amount of control on over what is announced and what is isn’t.
Dennis: Yeah, it sounds like it’s been pretty well thought out.
[Laughter]
Gez Lemon: It has.
Dennis: Great.
Gez Lemon: Just, to say one other thing about this as well. So, if we take Accessible Twitter for example, one of the things that you’ve added is an intercom which is that it uses, is it Flash and something else?
Dennis: It uses Flash and Javascript yeah.
Gez Lemon: Flash and Javascript to announce if you’re under a certain amount of characters. So, one other thing that you could do is around the text that tells you how many characters, would simply be to be at the attribute ARIA live equals polite. ARIA atomic equals true just to announce whatever is within this section.
And then however many, 39 characters left so that that’s announced to the user and that’s simple as live regions are. That small, small change would make that part accessible to people who didn’t use Flash, who didn’t have Javascript for example. Assuming that you did matter with Javascript. But if you added that within markup, then it doesn’t depend on anything else and assistive technology would be able to announce.
Dennis: That’s a great example. So, now I’m going to have to go and do that right away.
[Laughter]
Gez Lemon: When I was thinking about this, I was thinking, try to get an Accessible Twitter.
[Laughter]
Dennis: Yeah, I’m sure. There’s lots of things I can do with ARIA on there. So, that’s, on the list, right on the homepage of task to do.
Gez Lemon: The big thing I hope everybody takes from this is that, the one thing about ARIA is that is amazingly simple. When you consider, because it’s generally adding some things like drag and drop items where the code behind it is really, really complex. And quite often when people show ARIA example, they show this really, really complex code. But that’s not to do with ARIA that’s to do with what did it take to drag and drop this particular item.
The ARIA is usually one very, very small property with one very, very small value and that’s it. But that one small bit makes such a difference to assistive technology.
Dennis: Cool. I did have one other question for you. What’s the difference because I was, like I said I’ve been starting to look at this and can you briefly just tell us the difference between the ARIA roles menu and navigation?
Gez Lemon: No.
[Laughter]
[Cross-talk]
Dennis: Are they really that similar? It seem like by reading some documentation, it seemed like menu was supposed to be more for like a toolbar thing and navigation was more like a regular, the more popular, just like text link navigation.
Gez Lemon: The difference is, is that navigation is a landmark role. So, basically that means, if someone wants to press semicolon, they would go to through each of the roles that were there at the moment, this is JAWS 10.
So, if you press semicolon, you go to main. Press semicolon again, you go to search, press semicolon again, you got to the navigation area. The menu item itself is a part of a menu system. So, when you try to interact with the menu, it would say, menu with six items. Then when you go to item one, it will say, menu item one, three subheadings. It’s actual information about a menu bar rather than a navigation area.
Dennis: So, navigation would be more like on a div containing your navigation elements?
Gez Lemon: Exactly.
Dennis: The menu would actually be an attribute that would go more like a UL?
Gez Lemon: Exactly. So, the menu is the usual interface whereas navigation is the part of the document that contains the menu.
Dennis: OK. That’s a solid explanation right there. it sets me straight.
[Laughter]
OK. Excellent. That was very, very helpful information and tips. So, is there anything else you wanted to add?
Gez Lemon: Nothing for me.
[Laughter]
Dennis: OK. Well, thank you very much Gez for joining me. And yeah I’m sure we’ll stay in touch online and on Twitter. Thanks again.
Gez Lemon: Thank you. And thank you for making it a good experience for my first ever podcast.
[Laughter]
Dennis: You’re welcome. Glad you enjoyed it.
Announcer: You will find the Web Axe podcast and blog at webaxe.blogspot.com.
[Ending Music]