[Introduction, woman's voice over music] Welcome to Web Axe, practical web accessibility tips. Web Axe dot blogspot dot com. Web Axe. Web site accessibility. Web standards. Web Axe dot blogspot dot com.
Dennis: Welcome to Web Axe podcast number 76, web accessibility disasters.
Ross: (jokingly) Oh no!
Dennis: Oh no! (laughter) This is Dennis.
Ross: Make an accessibility disaster movie.
Dennis: (laughter) Uh, how you doing Ross?
Ross: Pretty good, pretty good. How about you?
Dennis: Pretty good. (pause) Let’s see.
Ross: So today we’re going to take a look at some web accessibility disasters.
Dennis: (angry groan)
Dennis and Ross: (laughter)
Ross: (mock alarm) What was that?
Dennis: (laughter) That was supposed to be a sigh.
Ross: Oh, OK (laughter) I thought maybe it was, like, Godzilla.
Dennis: (laughter) Say that again, ‘web accessibility disasters.’
Ross: Web accessibility disasters.
Dennis: (plays a sound effect of a crowd booing)
Ross: There we go. (laughter) Everybody hates web accessibility disasters.
Dennis: OK, enough fun. (pause)
Dennis and Ross: (laughter)
Dennis: OK, so we have some fun issues and things to discuss, what’s been going on, and some articles to talk about, and then of course our main segment. So what’s this, uh, sketchbook giveaway?
Ross: Yeah, so I think we talked about this, probably not in the podcast, but when I was in California, I said I was [working on an idea] for a product, and the idea was just like a sketchbook for when you’re coming up with, trying to brainstorm layouts or designs for the web.
Dennis: Mm-hmm.
Ross: And so I finally got to the point where I’m ready to sell it, and to kind of get people interested. You can actually win a free copy. [All] you have to do is go to the blog post where I announce it, and leave a comment. I’ll be giving away five copies for free. Right now, there’s only, like, eleven comments, so pretty good odds there.
Dennis: Cool, man. That’s awesome. [We’ll] have to try that out.
Ross: Yeah. Well after uh—yeah, I’ll send you one to check out. Remind me to get your address.
Dennis: (laughter) All right, thanks. Excellent.
Ross: No problem.
Dennis: (pause) And…
Ross: And…you presented at the Accessing Higher Ground Conference?
Dennis: That’s right. Just [a week] and a half ago. I was outside Denver, Colorado for the annual Accessing Higher Ground Conference. (pause) Let’s see, yeah it was a lot of fun. The trip went pretty well. I had fun meeting some people. Guess who I met in person for the first time?
Ross: Bill Gates.
Dennis: No, but close. (Ross laughs) Jared Smith.
Ross: Oh really?
Dennis: Yeah.
Ross: Very cool.
Dennis: So just he and I had dinner, like, the first night, and then, you know, I attended pretty much all his sessions. He gave, like, four of them or so.
Ross: Wow. Busy guy.
Dennis: Yeah. (pause) So uh, yeah it was cool, man. I met a couple of other folks, and John Folliet, my new buddy from Stanford was there. And uh, so he was schooling people on HTML5 and captioning and stuff. That’s his area of expertise, I’d say.
Ross: Very cool. And you presented about AccessibleTwittr?
Dennis: That’s right, and I presented on AccessibleTwittr. I’ll put a link to my personal post about the event [so that] you can view the slides there, or on SlideShare. And I haven’t checked it, but it should be well over 500 views already on SlideShare, which is pretty nice.
Ross: So did you get a standing ovation when you were done?
Dennis: No. (laughter)
Ross: (laughter) But you should have.
Dennis: [It was] the second time I did—well, not that presentation, but I modified the presentation that the Open Web Camp at Stanford, like, a month or two ago. But doing this presentation, I got some good ideas on how to modify it, you know, to make it even better for the next time. So, it was pretty cool. And towards the end, you know, people were asking if I could demo stuff, because I had it open on my computer and on the screen, so I was demoing some things. (pause) Yeah, it was pretty neat.
Ross: Yeah, I don’t end up doing the same presentation enough to really tweak it and refine it, so it’s kind of nice to kind of be able to do a presentation and realize, you know, ‘this is how I can improve it’ and do it again.
Dennis: Yeah.
Ross: I usually end up talking about something different for one reason or another.
Dennis: And if you’re not familiar with the Accessing Higher Ground Conference, it kind of emphasizes higher education, and web, and assistive technology. But mostly, there’s a lot of folks from colleges and universities there. And there’s a lot of vendors that [demonstrate] different types of accessible technology, like screen readers, text-to-speech software, and all this crazy stuff. So it’s pretty neat.
Ross: Did you get to demo any of it? Kind of take a look at what’s new?
Dennis: Yeah, there’s a little demo hall area, people showing off their products. Well, some things aren’t as easy to demo you know but, it was a good conference. So yeah, hopefully I can attend next year. We’ll see what topic I can come up with next year. Maybe I’ll do this one again, I don’t know.
Ross: Right. You just need to make an accessible Facebook, then they’ll bring you back.
Dennis: Right. (laughter) A couple of people have asked me that, actually.
Ross: Really! That would be tricky, I’m sure.
Dennis: Yeah, well. (pause) It crossed my mind. But you know, like, only the core functionality would really be done, at least at first.
Ross: Right. You could probably do pieces, like [become Facebook friends with] people, messaging, [writing on Facebook] walls and such.
Dennis: Yeah. It would be a good project though, then you could not put in all those crazy ads and stupid plug-in games (laughter).
Ross: Right, disable all the applications, they’re not allowed.
Dennis: (laughter)
Ross: So all you listeners, if you want an accessible Facebook, make sure to leave lots of comments or email Dennis, and maybe we’ll convince him.
Dennis: All right, well let’s move on. Let’s talk about TEDxDetroit?
Ross: Yeah. So [on] October 31, a few weeks ago….you know there’s these…have you seen the TEDx videos and heard about the presentations, and that sort of thing?
Dennis: Actually, I wasn’t too familiar, but the other day there was one[video] going around that I watched that was really cool. It was about some guy and his ideas about mixing physical objects with computers, and the Internet and stuff. It was a trip. But anyways, go ahead. (laughter)
Ross: Yeah, so they’re these big conferences called TED, and there’s, like, the core ones that are held, I think, in just a few different locations. It stands for Technology, Education, and Design. And they’re super exclusive, and they’ve got some really incredible speakers, so if you ever have, like, a day to kill, look at some of the top TED videos on Youtube, or on the TED website. And they’re super inspiring, But they’ve kind of allowed people to do their own spinoff TED events, called TEDx events.
Dennis: Oooh.
Ross: Just, you know, kind of self-organized sort of thing, just getting people involved in the idea. And they still tend to be pretty exclusive, you know, you have to apply to actually show up, and they try to get some really good speakers.
Dennis: Mm-hmm.
Ross: But they had one in Detroit, and I was lucky enough to attend, and there are some really incredible ideas. You know, very localized to the Detroit area, but, you know, alternative ways to do wind energy that’s much more efficient and not quite as intrusive and really innovative sort of approaches to things.
Dennis: That’s cool.
Ross: Yeah, [I was] kind of excited to go. I really wanted to…you have to explain what sort of big idea you’re trying to promote when you go, so I put in web accessibility, thinking that maybe there’d be some sort of venue where you set up a booth or something to talk about it, but I think they just meant, that’s what you’re going to talk to other people about when you get there.
Dennis: Mm-hmm.
Ross: So I did what I could, but it wasn’t much.
Dennis: (laughter)
Dennis: (pause) Wordpress 2.9! It’s released, right?
Ross: They’ve got the first beta out, but yeah, I’m just super excited about it. I know you use Wordpress also, but I use Wordpress pretty frequently. You know, I’ve tried lots of different content management systems, and I tend to keep coming back to Wordpress for a lot of stuff. They’ve got some really cool features in the new version. Uh, image editing, custom content types, post images. (pause) So yeah, I’m just really excited about it.
Dennis: Yeah, it’s cool. I use Wordpress, that’s my preferred CMS. I use it for my personal blog, and one or two other projects. Uh but yeah, I heard it just won an award too…some kind of award for best open CMS platform, which isn’t too much of a surprise.
Ross: Right.
Dennis: But yeah, I mean Wordpress makes best use of web standards, which is obviously good for web accessibility.
Ross: Right.
Dennis: So, I mean of course there’s been some argument going back and forth about some of its issues with accessibility, but you know, by and large, compared to all the other CMSs, it’s way better.
Ross: Absolutely.
Dennis: Can’t complain.
Ross: Yeah, it’s definitely not perfect, but if you look at, like Drupal or Joomla, you know, these other really popular ones, and (pause)…and kind of their out-of-the-box accessibility, it’s definitely ahead of the game.
Dennis: Mm-hmm. (pause) Definitely.
Ross: Of course, I’ll probably get Drupal hatemail for saying that. (Dennis laughs) But that’s OK. It’s one of those things, where any time I mention Drupal, people just lash out.
Dennis: (laughter) Really?
Ross: I think they’re just so adamant about –
Dennis: (interrupting) They’re Drupal fanatics?
Ross: Yeah, yeah. Which is cool, but you know…nothing’s perfect.
Dennis: (laughter) Right, right. Always need areas of improvement.
Ross: Right. (laughter) Right.
Dennis: (pause) So, TED, yeah I didn’t know that meant Technology, Education, and Design. I was just noting that, typing it in the notes here. I’ve got to watch more of those videos.
Ross: Yeah, yeah. I’ll send you some of the better ones. Maybe we’ll post them on the website too. There’s just some really, really great presentations. You know, you watch these videos and leave, and you feel inspired.
Dennis: Are they captioned?
Ross: (pause) That’s a good question! I don’t know…
Dennis: Are they hosted on Youtube?
Ross: I believe they’re hosted on Youtube, but they also have them hosted on the global TED website.
Dennis: Okay. (pause) All right, well, let’s move on to articles.
(sound break)
Dennis: So the first one I wanted to mention, uh, W3C has an article. (pause) Well, I don’t know if you’d call it an article, but it’s a web page. ‘Accessibility,’ I guess, is pretty much the name of it.
Dennis and Ross: (laughter)
Dennis: It’s under Standards/Web Design and Applications/Accessibility. [It is] a good article, or page, or whatever you want to call it. It just describes, you know, some of the basics for the case for web accessibility, and some examples of actually what it is and stuff, so if you’re a novice or if you want to teach [your] colleagues or your boss, or a friend, this is a good page to show that person.
Ross: Yeah, that’s exactly kind of what I thought, [that] it would be great to [use] if you have to make the case, to have somebody go there to take a look and kind of get a good idea. You know, it’s a very credible website, and it goes over a lot of the basics as far as ‘yes, you should be concerned with this.’”
Dennis: Now, what do you think about the [W3C site] redesign? (laughter)
Ross: I think aesthetically, it’s great. (pause) Yeah, I think it works really well. I know there’s kind of a handful of different things that people were upset about with it, and I forget what they were offhand. Um, but you know—
Dennis: (interrupting) Excited about, or mad about?
Ross: (pause) Uh, mad about. Did I say excited?
Dennis: Uh, I’m not sure.
Ross: Oh, okay. Yeah, I remember there were a lot of complaints, uh, I think as far as validation [is concerned]. Like, [the site] doesn’t validate, and they thought that was, um, very hypocritical.
Dennis: Yeah, yeah. You know, and I’m bringing [the W3C] site up now [in a browser], and um, let’s see, I’m not getting any warnings right now, looking at it. So maybe they fixed some of the validation issues.
Ross: Yeah, yeah. Could be. I mean, it’s been out for, like, a month or so.
Dennis: Yeah, and that…for the listeners, if you’re not sure exactly what we’re talking about, the W3C re-launched their website at w3.org, and it’s, yeah, it’s a pretty nice site. I’m looking at it now, and yeah, maybe they fixed…looks like they fixed most of those warnings. I don’t see any coming up, so that’s good.
Ross: Yeah. Although, one thing I noticed that’s kind of weird...if you look at this table of content ‘see below for’…that should be an unordered list.
Dennis: …where?
Ross: Um. (pause) Oh wait, maybe not…nevermind.
Dennis: Well, you know, I mean, I don’t wanna…
Ross: (interrupting) Oooh, okay. Yeah, on the page, the ‘why, what, how,’ that sort of thing.
Dennis: Oh, okay.
Ross: It’s kind of done in a strange way. The bullets are the character code, which is strange. But oh well.
Dennis: Yeah, that is strange.
Ross: I’m sure they have their reasons.
Dennis: I hope so.
Ross: (laughter)
Dennis: Okay, I’m just going to mention one last thing, and then later on, we can criticize other websites.
Ross: (laughter) Right, right.
Dennis: I’m tabbing through this thing [the W3C site], and my hover effect with the mouse, I’m not getting with the tab.
Ross: (pause) Oooh, okay.
Dennis: Let’s see. That same menu that you’re talking about, if you tab through it, you don’t get the dark blue underline appearing. And on the very top, like, global kind of menu, if you—oh no! I am getting it on that menu. But then on the side menu, I’m not getting it. Kind of strange.
Ross: Oh, okay.
Dennis: And then, I’m not sure why they felt that they needed to completely redo the underline. They have [the underlines] on the text links. But why did they change it? I wonder why they changed it to a bottom border rather than just using the native text underline.
Ross: I don’t know.
Dennis: Do you know that?
Ross: Maybe make it…thicker?
Dennis: (laughter)
Ross: …so it’s more obvious? I don’t know.
Dennis: Maybe! (pause) I don’t know, I just don’t see what the point of that is. They could have just used the regular underlines.
Ross: Right, right. I certainly don’t think it’s broken, but—
Dennis: (interrupting) No, it’s not broken. I guess it’s just…I don’t get it.
Ross: (pause) Yeah. (laughter)
Dennis: And then on the right menu, when you mouse and focus, like, you don’t get any kind of hover focus response.
Ross: Right.
Dennis: It’s kind of weird, where [on] the other ones, you do. So, I don’t know. Yeah. (pause) Okay! But, all in all, I guess it’s a good job. They really seem to have reorganized the content of the site, which, I think, makes sense, but it threw me off because I was so used to the old one.
Ross: Right, right. That’s kind of like the ‘XP-to-Vista’ effect, where it’s improved—
Dennis: (interrupting) Oh yeah…
Ross: (continuing) …you’re so used to it, one way or another, that—
Dennis: (interrupting) Yeah, that happened to me, too. (laughter)
Ross: (laughter) I think [it also happened to] a lot of people.
Dennis: All right, well we have some more articles to talk about, so we’ll try to get through these quickly. ‘Thoughts Around Universal Access on Mobile’ from Accessibility 2.0. (pause) So this is a good article about summing up, like, a panel on accessibility and mobile. I think it’s from a conference.
Ross: Yeah, I think Accessibility 2.0 [is a conference.]
Dennis: Yeah, yeah. And so this guy from, err, a woman, I think, from Google, somebody from the BBC Opera, and then somebody I personally know, well not personally but professionally, Greg Fields from Blackberry.
Ross: Oh, okay.
Dennis: Yeah, he’s the accessibility product manager at RIM.
Ross: Oooh, okay. So, a colleague.
Dennis: Yeah, a colleague. I’ve emailed him a few times. But yeah, he’s really good. He’s good. Every time I email him about something, he’s like ‘Oh yeah, I saw that. Thanks.’ (laughter)
Ross: (laughter)
Dennis: And I’m like (lamely) ‘Oooh, okay. Just making sure.’
Dennis and Ross: (laughter)
Dennis: But anyways, there are some points listed from Greg, actually, I think, in the article. And some of them are, you know, just warning about the color and contrast. You know, avoiding red/green combinations and using these color contrast tools to ensure a ratio of at least 4.5:1, blah blah blah. See error messages, you know, making sure you catch your errors appropriately, [provide a] prompt for a call to action. (pause) Uh, focus placement, which we just talked about. It’s very important. Consistency, grouping and chunking, keyboard access. You know, and these are just things that come up time and time again, that you need to pay attention to, that a lot of people don’t.
Ross: Yeah, it’s usually overlooked, I suppose.
Dennis: Yeah.
Ross: But it’s good to see that attention with accessibility and mobile, because mobile is getting so big, and it’s only going to get bigger. And I almost wonder if we’re going to see the same thing where people completely ignore it and then go ‘oh yeah!’
Dennis: (laughter) And hopefully, it won’t be too late this time.
Ross: Right, right.
Dennis: (laughter, followed by pause) Okay, so check out that. And there were some articles going around a while back on Kindle, and some universities not using Kindle or accepting Kindle because [Kindles] are not accessible. Kindle is the electronic book reader that—now is that produced by Amazon? Do you know?
Ross: I’m pretty sure, yeah.
Dennis: That’s an Amazon product.
Ross: It’s the Amazon Kindle, yeah.
Dennis: And there’s another one I found an article for, it’s called ‘Overdrive’?
Ross: Hmm.
Dennis: I’ve never heard of this one, but there’s an article on this too, and the Los Angeles Public Library suspended buying Overdrive e-books because they are ‘inaccessible to users with print disabilities.’
Ross: Interesting. I wonder if that’s the one that Barnes & Noble produced, because I feel like Barnes & Noble just came out with one to compete with the Kindle.
Dennis: Yeah, I’m not sure either. If you know, please comment on the blog post.
Dennis: (pause) And, okay, I just wanted to throw this one in here too because this is just a good article, but it’s too long and complex to talk about. (laughter) The Accessible Tabs in the new Yahoo Homepage. There’s a nice article talking about how they created it, using YUI3 and ARIA.
Ross: Ah, excellent.
Dennis: Yeah, it’s very cool.
Ross: Yeah, I hadn’t noticed this yet, but I’ll check it out.
Dennis: It came out just a little over a month ago. So I’ve had [the article] stored in my browser, like, tabs, so I started reading it, but you know, I haven’t completed it myself, so…
Ross: Gotcha.
Dennis: But it’s definitely a good article to look at. YUI3 is looking better and better.
Ross: Yeah, it’s such a versatile library. I’m surprised more people don’t use it, it seems like.
Dennis: Yeah. Okay, one last thing to mention, just going back to the e-books thing. Um, ‘Dolphin,’ which is one of the companies that were representing at the Accessing Higher Ground Conference came out with an announcement about making e-books accessible. (amused) What do you know? (laughter) Yeah, Dolphin is an excellent company for assistive technologies and stuff, so maybe they’ll help with this whole big problem with making e-books accessible. It sounds like they’re off to a good start.
Ross: Absolutely. There’s so much that can potentially be gained there, just because e-books are all text and should be easy to give access to the whole library of books.
Dennis: Yeah, one would think it would be easy, right?
Ross: Right.
(sound break)
Dennis: All right, let’s move on to the main segment.
Dennis and Ross: (simultaneously) Web site disasters.
Ross: We just need a sound effect of, like, a big explosion, and that’s what we can play.
Dennis: I was going to try to do another one, but I didn’t want to mess with the recording in case I goofed up.
Ross: (laughter)
Dennis: (pause) Oh yeah, here it is.
(D. plays the sound effect of an a crowd booing from earlier in the podcast)
Dennis: (laughter) That’s funny.
Ross: (laughter then pause) All right, so our first website. DigitalAccessibility.ca.
Dennis: I’m not sure, it might have been from an ad.
Ross: Oh, okay. Like a Facebook ad?
Dennis: Like a Google ad. I think, I’m not positive. I wrote this one down first. You know, it was a while ago. I don’t remember, that’s probably how I found it. Um, so, DigitalAccessibility.ca.
Ross: Looks like they’re a company based in Toronto, Ontario, which is Canadian, of course. And they say they are a team of expert AODA consultants and website developers.
Dennis: Accessibility for Ontar—how do you pronounce that?—On-tar-ians…people who live in Ontario (laughter) Ontario is the province in Canada, right?
Ross: Right.
Dennis: ‘Accessibility for Ontarians with Disabilities Act.’ AODA.
Ross: So apparently in 2005, there was an act that was passed in Ontario that said that websites should be accessible to everyone, including seniors and people with disabilities. And I think that’s a great, great law. And it looks like they are marketing themselves as consultants to ensure that websites are accessible.
Dennis: Yeah, so we’re going to put that to the test, and before we start picking apart a few websites, I just wanted to note that we’re trying to give constructive criticism, although sometimes we might get a little carried away.
Ross: Right.
Dennis: But it’s all in—well, I don’t want to say ‘fun,’ but we’re trying to just help out and give some constructive criticism. And it’s free for them, so if they want to take our advice, you know, then that’s cool.
Ross: Yeah. And you know, there’s always room to improve and we should all strive to improve.
Dennis: Yeah. Everyone. No matter what website, you’re always improving.
Ross: Right. So the first thing I noticed looking at the site, you know maybe one of the good things, is, it’s pretty much all text. And…and that’s really good. So if a screen reader or any other assistive technology would see this site, or a search engine or whatever, it would be very easy to get to the content, because it’s not Flash, it’s not captionless video, it’s all HTML text.
Dennis: Yeah. And it has some nice, clean, blocky-like design with white, black, and this funky green, which is pretty cool.
Ross: Yeah, so you know I thought ‘ok, that’s a great approach.’ You know, they’re very content-rich. It’s all HTML content. It’s not embedded in any different way. So that’s a good start.
Dennis: Indeed. (pause) And, uh, some areas to improve on?
Ross: Yup. So, looking a little further, I think one of the first things we both saw was, there’s no alt text on the logo or main banner.
Dennis: Right, that’s one of the first things I check. (laughter)
Ross: Right, right (laughter)
Dennis: It’s like—it says ‘digital accessibility,’ with the graphic, and ‘welcome.’ I think that’s one big graphic actually, that top thing.
Ross: Is it?
Dennis: Yeah. And there’s no alternative text.
Ross: Right. And that’s such an easy thing, and I could see maybe leaving out the ‘welcome,’ that’s not quite so important, but the name of the site is pretty important, and you know, the logo.
Dennis: I do see where they do have alt text though. ‘White box separates the font-selector boxes from the menu boxes.’
Ross: (pause, then laughter)
Dennis: That could totally go in Jared Smith’s presentation, the—oh, what’s it called?—the one where you overdo it?
Ross: Right. (laughter) So the banner’s not that important, don’t worry about it, but you need to know that the white box is separating—
Dennis: (interrupting) Yeah, yeah. So, they have it backwards there. You don’t need alt text on that white separator box, but you definitely do need alt text on the heading there.
Ross: Right.
Dennis: Uh, another big thing that I found, I call a ‘triple-whammy.’ It’s this font-size tool on the left. So, above the main menu on the left, there’s a font-resize tool, so you can reset, large or larger font. The first thing, in my opinion, is that it doesn’t need to be there at all. And there’s mixed opinions on that, but I feel that font resizing is the job of your user agent, the browser, and not the website.
Ross: Right.
Dennis: Now the second one, the second point, is that this feature requires Javascript, so if you don’t Javascript—and it’s not done unobtrusively—so if you don’t have Javascript enabled or available, then it still displays, but it doesn’t work.
Ross: Right.
Dennis: Now the third thing is more of a design thing. Um, I think it would be better if they added a plus or minus sign or some kind of little visual indicators just to help comprehension of what that tool is.
Ross: Right, right. For kind of cognitive reasons.
Dennis: Yeah. Design-cognitive kind of reasons. Usually they have a little plus sign if you want to increase it, or resize it or something. So if they want to stick with using it, that’s just a suggestion.
Ross: Right. Then another thing we noticed, and this is more partially a usability thing, but that also does affect accessibility, [is that] their links are not underlined, and I think we’ve all gotten to the point where we realize, you know, you should have a really good reason not to underline your links. But their headlines are underlined.
Dennis: (laughter)
Ross: So, their headlines look like links, and their links look like headlines.
Dennis: Yeah, everybody know that’s a pet peeve of mine. They’ve got it backwards, I think. So speaking of the headlines or headings, another issue with that is that they’re not marked up appropriately. So they’re not using the h2 tag or whatever to mark those up. (pause) Okay, I’m looking at [the site] right now. The headings are a paragraph with the strong [tag] and the u [tag].
Ross: Right.
Dennis: (laughter) So they’re underlined, bolded paragraphs! All you’ve got to do is just put h2 instead, and it will be, like 100 times better.
Ross: Right. But at least they’re using strong instead of the b tag.
Dennis: (groans) Oooh, yes. I guess. (laughter)
(Dennis and Ross laughter and muttering)
Dennis: Aww, that’s funny.
Ross: They’ve got a whole bunch of list items, but there’s no unordered list tag, so there are just kind of some markup problems.
Dennis: Yeah, and [we’re] pretty much looking at the homepage, but if you go to the page ‘Compliance,’ it talks about…there’s a couple of what looks like ordered lists. They’re using these little green triangles, um, for lists. But it’s not a list, it’s not marked up as a list. So that’s pretty bad. They’re going backwards again. If you want to show something as a list, first mark it up as a list, then do the design. Definitely not the other way around.
Ross: Right. Yeah, they just kind of have images and then text next to it. And the text isn’t even in a paragraph, it’s just kind of open text. So yeah, just some kind of markup issues there. I think we talked about [this], there’s quite a bit of inline and intrusive Javascript.
Dennis: Yeah and that’s kind of nice to have but obviously a better practice is to use unobtrusive Javascript and remove all your inline Javascript, and just put it in the header or an external file.
Ross: Yup.
Dennis: Well one last little thing I could mention, I found this interesting. I’m not sure if there’s any reason for this, but in the anchor tag for an email link, there’s a ‘target=“_blank”.’ So that’s kind of strange. I don’t know, maybe that’s just an oversight. (pause) It’s kind of weird.
Ross: Yeah, because that’s going to pop up an email application. Not another window, so…
Dennis: Yeah, one would hope, at least. (laughter) Depending on your browser.
Ross: Right.
Dennis: You know, I’m looking at the doc type, it says XHTML 1.1, so I mean, if you’re using XHTML, and you’re declaring yourself a web accessibility person, you should probably know that target=_blank isn’t even valid. So, I would recommend just removing that attribute.
(pause)
Dennis: All right. (claps hands once) So hopefully, they can make some improvements there, and let’s move to the next one, ‘Job Accommodation Network.’
(sound break)
Ross: So this is a service provided by the US Department of Labor’s Office of Disability Employment Policy.
Dennis: (pause) So I’m assuming their funded by the Federal…US Federal Government? Sounds like? So yeah, they should be at least, to the minimum, Section 508-compliant, although its outdated anyway.
Ross: Right. And it looks like its hosted on the West Virginia University site, though, which is kind of strange.
Dennis: Oh yeah…
Ross: I’m not exactly sure [of] the connection there.
Dennis: Yeah, that’s interesting. (pause) So, um, on the good side, they’re doing some good things. I noticed that they do have good alternative text—
Ross: (interrupting) Yeah, on the pictures.
Dennis: Yeah, on the logos at the top.
(Dennis and Ross mumbling)
Dennis: Pictures? Did you find some pictures [on the site]?
Ross: Yeah, they’ve kind of got this slideshow that goes through and (pause) you know, it’s a slideshow [of[ images of people working.
Dennis: Oh, I see.
Ross: So I guess that, you know, it’s enough—
Dennis: Oh yeah, I found some. There’s a photo of a person on the “For Individuals” page, so they’ve got some alt text there. ‘Employee using a wheelchair.’
Ross: Yup.
Dennis: So that’s good enough for me.
Ross: That’s good.
Dennis: (laughs)
Ross: Yeah, yeah. And, you know, I think they did a fairly good job on keeping the navigation as actual text. It’s marked up as an ordered list. And it’s a dropdown, so that’s kind of at least…you know, a screen reader could read all of that.
Dennis: Yeah.
Ross: So that was good.
Dennis: So they did a pretty good job with that, and I’m tabbing through it, and it even highlights on the tab (sound of typing on a keyboard). You don’t get the dropdowns but at least [they’ve] got the hover going on in addition to the mouse-over effect.
Ross: Right.
Dennis: You know, and there’s a nice gradient background for aesthetic value. But of course, if you don’t get the dropdowns, then if you click on the link, the dropdown list, you know, should appear (laughter) on the page that you go to, because [otherwise] you wouldn’t be able to access those subpages anywhere. So if you click on, like ‘For Individuals’…uhm…’Employers, Job Seekers, and Entrepreneurs’ under the menu, they have the links on the main page, so…
Ross: Yeah, so that’s good. You know, at least you can get to it, if for some reason you can’t use the dropdown navigation.
Dennis: Right. So let’s talk about some improvements now.
Ross: So, some of the things they could probably think about …um…they don’t have any heading tags. And some of them are just marked up with the b tag. So this is a situation where our friends at Digital Accessibility maybe have one up on them. They at least used the strong tag.
Dennis: (laughter) Yeah. And, um. (pause) Yeah. I’m looking at the code, and it’s inside a layout table with a div, with a span, with a bullet.
Ross: Yeah.
Dennis: So it’s… Yeah. It’s kind of crazy. So it says ‘About JN,’ which really should be the h1 or h2 heading. That’s all you need. But it’s a bold, inside a span, inside a div, inside a td, inside a tr, inside a table, blah blah blah.
Ross: Right, and this definitely looks like from the source code, that it’s kind of a Dreamweaver-built site.
Dennis: Oh yeah?
Ross: So it just might be that the people who had [coded] it, don’t know any better, but you know, if you’re making a site—
Dennis: (interrupting) Oh yeah? Well—
Ross: (interrupting) It’s funded by the government, you need to know that sort of thing.
Dennis: Yeah. (stuttering) Don’t knock Dreamweaver, now.
Ross: (pause then laughter) Nothing wrong with Dreamweaver, but kind of the—
Dennis: (interrupting) It’s like, there’s nothing wrong with guns unless you take the gun and shoot somebody, right? (laughter) But yeah, it’s got the ‘style2’ and dot ‘style3,’ that looks like Dreamweaver.
Ross: Right, kind of Dreamweaver-generated style names. You can see the—
Dennis: Oh yeah, hey, they’re using a template too, a DWT template, so yeah.
Ross: Ah, right. So uh, rather than kind of doing the code editor, which is probably the better way to go, it looks like it was kind of created using the WYSIWYG.
Dennis: So. Yeah. Learn the code.
Dennis and Ross: (mock sternness) Learn the code.
(Dennis and Ross laugh)
Ross: That could be another [unintelligible] that you put in the [unintelligible].
Dennis: (laughter) Yeah. Oh man. Okay, so um. (pause) What was I going to say? Oh yeah, so with newer technologies like ARIA, you know landmark roles and all this stuff, like, you know, in the future, ‘skip nav’ might not be so necessary. But [in] today’s world, I think you should still be using it, especially if you have a longer menu at the beginning of the page, and you’re not using ARIA and stuff, and you’re not using proper headings, then you definitely need a skip nav [link], so that’s why, for sure, I wrote down on this, that they need a skip nav [link].
Ross: Yeah, and it’s a table-based layout too. So you can imagine, to kind of go through this without a skip nav would be very cumbersome, because I can see like three or four tables even before you get to the navigation.
Dennis: They’re using an onload attribute in the body which, I guess, if you’ve only got one function firing up on the load, then it’s not too bad, but it’s better, you know, to keep it unobtrusive and then you can always add other events and stuff more easily.
Ross: Yeah. And it’s such a simple thing to do, you know, a simple fix.
Dennis: Yes.
Ross: Something they can take care of pretty easily. (pause) Let’s see, they don’t define a language, that’s another easy fix.
Dennis: Yeah.
Ross: It’s always a good idea to define a language. Now, some people say you only really need to do that if the language changes but, you know, I think it’s just a good practice.
Dennis: Yeah. And the same could be said, probably for the other two sites, and a lot of sites. (clears throat) Actually, the third site does it. But it’s a practice, yeah, that a lot of people don’t do. You know, if this is Section 508 compliant, I think they have to do that.
Ross: Oh, do they?
Dennis: Let’s see, I’m trying to remember from years ago (laughter) when I concentrated on Section 508 rather than WCAG 1, but (R. laughs) anyways…yeah, so [you] should always declare your language in the top of your document
Ross: Yup. And, uh, you’ve got [written down] here, ‘summary on the layout table.’
Dennis: Oh yeah. That’s a double whammy. (laughter)
Ross: (laughter)
Dennis and Ross: Double whammy!
Dennis: First of all, it’s a layout table, so that’s one whammy. Second of all…there’s a whole debate about whether the summary attribute should even exist in HTML5 right now. But me and a couple others are leaning toward that it should be kept in there. And the summary attribute describes the table, generally a data table, what it’s going to be about, and summarizes the data, to help [a screen reader] use your…you know…be prepared for what’s coming. And so if you have a layout table, you don’t need a summary.
Ross: Right. You certainly don’t need one that says ‘table that holds content of JAN’s website.’
Dennis: Exactly. So you definitely do not use that. You do not need that. You only need it if it’s a data table, then I suggest using that. (pause) And I found a fun little code snippet that can definitely be removed…the ‘non-breaking space, non-breaking space, non-breaking space, non-breaking space, non-breaking space.’
Ross: Yeah. They’re kind of using the space bar to space stuff out rather than CSS, that sort of thing.
Dennis: Right. And for screen reader users, I hope (laughter) [that] it doesn’t read ‘space, space, space, space, space.’ I assume that’s what it does. I’m not sure.
Ross: It probably depends on which one.
Dennis: Yeah. Maybe the settings. If anybody knows, please leave a comment.
Ross: Right. (pause) So, yeah, they’ve got some things, you know, definitely that they did pretty well. They’ve got some minor things they can fix, and some more complicated ones. But overall, they could probably, beyond the table-based layout, I think they could make it pretty accessible, uh, without much work.
Dennis: Yeah.
Ross: Put in some headings, take out that summary table, add a skip nav, take out the non-breaking spaces. They’re doing pretty well.
Dennis: Yeah, that’s a good point. It’s a lot of just little fine-tuning, you know, that would take a minimal amount of work.
(sound break)
Dennis: So let’s move on, the Rose Project, Rose Project.org.
Ross: They say ‘Our mission is to provide maternal and child healthcare to the economically poor people of—Malawi? (attempts a few pronunciations of ‘Malawi’)…with particular reference to HIV treatment and care. So it seems like a very good project, and for a good cause.
Dennis: Totally. And the only reason I chose these people is because somebody had tweeted about this website being on the list of most accessible websites on the Irish Web Awards.
Ross: Interesting.
Dennis: So—here, let me bring this thing up—all the categories have about, let’s see, 9 winners or something listed? For the ‘Most Accessible Websites,’ the Rose Project was listed third. I don’t know if the order matters or anything in the Irish Web Awards. That’s at http://awards.ie/webawards.
Ross: Ah. So that kind of caught your attention? You wanted to check it out?
Dennis: Yeah, so somebody, like, tweeted about that, saying, you know, I think they even questioned it or something, so, I’m like…of course that peaked by curiosity. (laughter) So that’s how I got on this list. Um (pause) so let’s take a look at this. Aesthetically, it looks pretty nice. I see one glaring error, [which] is the background color in the upper left, the logo? It’s white, when I think they meant it to be this grayish color like the rest of the site.
Ross: Yeah, yeah, it seems like—
Dennis: (interrupting) I’m guessing—
Ross: (interrupting) I don’t know why that is.
Dennis: And maybe they’re looking at it on…I don’t know what browser…
Ross: (pause) IE, maybe?
Dennis: Um, in IE6 or IE7, possibly.
Ross: Could be. Maybe it’s just an oversight.
Ross: Yeah, it’s kind of weird, aesthetically…
Dennis: (while Ross is speaking) But anyways, aesthetically it looks nice, right?
Ross: (pause) Yeah, yeah. And I think, you know, first pass at it, um, you know, they’re doing some things pretty well.
Dennis: Yeah, I mean, the first thing I noticed is that the markup is pretty semantic. It’s pretty good.
Ross: Yeah. It looks like, you know, pretty clean code. You know, they’re using headings where necessary. There’s not, you know…they don’t have ‘div-itis’ or any of that sort of thing.
Dennis: (laughter)
Ross: Uh, I see they’re even using a definition list, which is not even that common to do, so it shows that they at least know that exists.
Dennis: And they added the language.
Ross: (impressed) Yeah, yeah. So this is the only site we came across that did have the language specified.
Dennis: And that is, um, in the HTML tag at the top, it’s where you specify the language.
Ross: Yeah. They have this little Flash application, and I noticed they embedded that in an unobtrusive way. You know, the old method of using ‘embed’ and ‘object’ tags doesn’t validate, so they did use a Javascript to kind of get that embedded, which is good.
Dennis: Yeah. I have a point about that later, but yeah.
(Dennis and Ross laugh)
Dennis: And they’re using, like we mentioned, they’re using pretty good, clean code. It’s XHTML Strict, which I like, so well done in that area.
Ross: On a side note, are you doing HTML5 now, or are you still sticking with XHTML Strict?
Dennis: Um, well, I’m still mostly XHTML Strict. Um, my personal homepage, DennisLembree.com, is HTML5. Um, you know, and I’m thinking about maybe some other sites I could change it over [to], but nothing at this moment. You?
Ross: Okay. Yeah, I’m still doing XHTML Strict. I’ve played around with HTML5 and I like it. But, until I find a compelling reason to, it’s kind of more just for fun.
Dennis: Yeah, yeah. Until, I mean, it’s got a bunch of great additions and enhancements and everything, and we could talk for hours about that, but yeah, until other browsers…you know, until the spec is a little more stabilized and enough browsers support it more, ‘cause there’s a lot of older browsers that are…you know…I mean, you could make it degrade pretty gracefully but, you know…why? (laughter) It’s the question. You don’t need to!
Ross: (laughter) Right, right.
Dennis: So anyways…ok, some improvements.
(Dennis and Ross banter, unintelligible)
Dennis: (laughter) Improvements.
Ross: So the Rose Project, yeah, they do quite a few things good, I think overall fairly accessible. Um, there’s some pretty interesting oversights though. Um, and I will let you begin with your list.
Dennis: Yeah, the first one is what I was going to mention about the Flash embedding, and that is all good, except they made a little gaff. When you turn off Javascript, there is an image, you know, replacement image when Flash or Javascript is not supported. But the image, I don’t think, is the image they want. It’s, like, the ‘for position only’ image or something. It had Latin text, and it has buttons on it that don’t work and things like that.
Ross: Right, so it looks like something you can interact with, but…yeah, it’s got ‘play’ buttons and arrows, and none of them work! It’s just an image.
Dennis: Right.
Ross: So…
Dennis: Right, and the ‘alt’ text obviously isn’t gonna work either.
Ross: Right.
Dennis: So, um, yeah. So they need to work on just fixing that up.
Ross: Yeah. Yeah, I mean, even…I mean, it seems like they could fairly easily make an HTML alternative of this sort of thing. Click on an image to go to a different page, that sort of thing.
Dennis: Mmm. Yeah or just, you know, just have the images with ‘alt’ text, yeah and when you click it, you go to, like, the video page or wherever this stuff is, whatever this stuff is.
Ross: Right.
Dennis: Err, the stories. It says ‘View all the stories,’ but there’s no link. So I guess it would go to the main stories page.
Ross: Right. (pause) And then you noticed the, uh, ‘skip’ link doesn’t work.
Dennis: Yeah, did you try that?
Ross: Yeah, on the homepage it does take me down to the ‘Positive Stories.’
Dennis: Oh, it does?
Ross: Yeah.
Dennis: Okay.
Ross: But maybe there’s other pages where it doesn’t.
Dennis: I don’t know.
Ross: Do you remember…?
Dennis: I just…it didn’t work for me. (laughter) And I tried those three browsers I mentioned earlier, and um…so there is a ‘skip’ link. Um, so I don’t know, that’s good or bad, depending on whether it works or not.
Ross: Right. Well, if it’s not working in some situation, that’s definitely a problem. (laughter)
Dennis: Yeah, yeah. Um but that’s good, at least, that they’re aware of it, and trying to make it work. If it does or doesn’t, that at least is good.
Ross: Right.
Dennis: So, um, that’s half the battle, right?
Ross: Right. The GI Joe thing, ‘knowledge is half the battle.’
(Dennis laughs)
Dennis: (pause) All right, uh, the logo [is] missing ‘alt’ text. Uh oh. (pause) We have another one of those? Let’s try it. (pause, sound of computer mouse button clicking) Oh, I know what it is. It’s this, uh…the image says, ‘The Rose Project…AIDS in Africa, living and dying with dignity.’ So that’s the part that’s missing.
Ross: Yeah, and that’s significant, you know, I mean, that kind of tagline really describes what the page is about.
Dennis: Yeah, that’s the tagline of the whole organization, so…
Ross: Right, and if you pay a lot of attention to usability, you’ll know how important the tagline is on a website.
Dennis: Mm-hmm.
Ross: So, to completely lose that, is not good.
Dennis: Yeah, and SEO, and blah blah blah.
Ross: Right. (Dennis laughs) And that’s another really easy fix, you know.
Dennis: Well, pretty easy, depending on which way you want to do it. ‘Cause you could just add in the ‘alt’ text or you could change it to, like, an h2 tag or something.
Ross: Right, do image replacement.
Dennis: Yeah. (pause) Um, what else we got? (clicks tongue, then resumes speaking) Headings, h1s should be h2s, such as—oh yeah, okay. So they have a lot of headings and some subheadings on the page. Like the main mission statement, latest news, featured project, and those all sound like h2s to me. Um, but they’re all marked up as h1s.
Ross: Right. So yeah, just kind of their hierarchy of information could be better defined.
Dennis: (pause) And then, the linking…sub-links that should be underlined are not. It’s kind of…um, let’s see…it’s kind of inconsistent, I don’t know.
Ross: Yeah, and I think this is another kind of easy sort of thing. For example, they’v got like a listing of international partners, Irish Aide, and it’s, like, a headline with some text underneath it. And I think it’s okay in these situations to kind of leave the headlines unlinked, err, un-underlined even though they’re links, if you have a ‘read more’ [link] that is underlined.
Dennis: Yeah, yeah. They did a good job with that, ‘cause those are long headlines, and they’re in a blue color, which is significantly different from the black.
Ross: Right.
Dennis: So I actually don’t mind that they’re not underlined.
Ross: Yeah
Dennis: And like you said, they have the ‘read more’ link underneath, in addition.
Ross: Yeah, they do a good job under ‘Latest News,’ where they have those components, you know, the headline is a link but not underlined. They do underline ‘read more.’ If you go further down the page, they have a section that doesn’t do that...um, ‘International Partners,’ ‘Business and Media.’ You know, there’s, uh, headlines that links you would never know are links.
Dennis: (pause, then laughs) Yeah, under ‘International Partners’?
Ross: Yeah.
Dennis: Yeah, and then next to it, under ‘Business and Media,’ it says ‘Bill Clinton’ in that same [text style] but it’s not linked.
Ross: Right, right.
Dennis: Yeah, so that’s not good.
Ross: Yeah, and ‘more on International Partners,’ and ‘more on Business and Media,’ these are kind of like ‘more’ links, but these aren’t underlined.
Dennis: Yeah.
Ross: So…
Dennis: So they should do the same treatment there, and then, but also, one thing they definitely need to add is, just add the simple ‘focus’ pseudo—(Dennis stumbles on his words, recalling the term for ‘pseudo selector)…help me? Pseudo…
Ross: Pseudo- selector?
Dennis: Yeah, because when you tab through, none of those hover effects appear in the focus.
Ross: Right.
Dennis: So, that’s an easy fix too, on the links.
Ross: Right. And I noticed there’s a few places that they use the ‘small’ tag, and I know maybe this is getting a little picker, but you know, that’s kind of a very, uh, mark up for display rather than markup for semantics sort of thing.
Dennis: Good point. (pause) And, oh yeah, I just wanted to add about the links… (laughter) …sorry…(more laughter)
(R laughs)
Ross: Links are important, you know. It’s what you do online. Fill out forms, and you click links.
Dennis: The links are important, yeah, yeah.
Ross: Links are very important.
Dennis: I did notice that, um—and I copied a snippet of the CSS in my notes here—they actually, in the CSS, the focus is completely removed. The outline style is ‘none,’ outline width is ‘0.’ So that’s totally bad, but I think I have an idea of how that happened. [My] guess is that they used a CSS reset.
Ross: Oooh, okay.
Dennis: The code at the top of the CSS file, if you look at it? And they just neglected to put the focus back.
Ross: Gotcha, gotcha. And that’s, I think, that’s an easy problem to make, um, but if you kind of have your boilerplate HTML/CSS template and it has ‘reset,’ at least what I do is, there’s certain things I know automatically to put back in right after the reset, because I’ll at least want something there, and focus would be one of them.
Dennis: Definitely. All in all, pretty good job. Lots of little things, and again, it could be vastly improved.
Ross: Yup. Maybe they could get higher up on that ‘Most Accessible Irish Website’ list or something…
Dennis: Yeah.
Ross: …if they fix some of these things.
Dennis: Definitely. Great! (pause) Well, thank you for joining me in the analysis and constructive criticism, Ross.
Ross: My pleasure.
Dennis: Yeah, that was fun.
Ross: Yeah, it was, so…
Dennis: Yeah, and Happy Thanksgiving.
Ross: Yes, you too, and to all our listeners who are going to have some turkey and stuffing on Thursday.
Dennis: And to everybody else, who doesn’t know what the hell we’re talking about… (laughter)
Ross: Right, right. Have some anyway.
Dennis: Thanksgiving…that’s just an American holiday, isn’t it?
Ross: Yeah, yeah, yeah.
(Dennis laughs)
Ross: If you’re not in America, and you want an excuse to have some turkey, and have some stuffing, then…because Web Axe said you could.
Dennis: (laughter) And mashed potatoes with gravy, and cranberry sauce. And rolls.
Ross: Yeah, rolls…
Dennis: And wine.
Ross: And wine.
Dennis: Although I hear they did serve popcorn at the very first Thanksgiving meal, back in—what 1600 something.
Ross: Did they?
Dennis: That’s what I hear, yeah, seriously.
Ross: Huh. Maybe I’ll make some popcorn. That’s easy to do.
Dennis: When the Pilgrims came over from England, from the motherland…
(Ross laughs)
Dennis: …and the Indians, the American Natives, shared a feast with [them.]
Ross: Yup. (Dennis laughs) Right, which included all those great foods we just described.
Dennis: Yeah.
Ross: And popcorn, which will be my contribution.
Dennis: So, um, yeah. I’m doubting that we’re going to do a December podcast, so, um, Happy Holidays to everybody. I’ll probably do some kind of review blog or something, ‘year in review’ like I usually do. (pause) And, that’s it. Okay, Ross. Uh (pause)…talk to you next year!
(Dennis and Ross laugh)
Ross: Yeah, have a good rest of the year.
Dennis: Okay, you too.
[END]