Latest Accessibility News on Accessify

The blind leading the non-blind

In my previous post I mentioned that I was after a few tips about how I might approach the task of teaching HTML to a 15-year-old blind lad, Harry, who’s at my place of work on work experience. The tips were very handy but I will confess that the day had crept up on me so I did not have as much preparation time as I might have liked. That said, it’s been a very interesting and productive day, so I thought I’d share my thoughts.

As suggested in the comments on my previous post, avoiding any kind of IDE and sticking with Notepad seemed to be the order of the day. However, before even trying to build a page from the ground up, I did a ‘before’ version to compare with our ‘after’.

Excel – Save As Web Page

For the first task I got Harry to put some content in a programme that he was reasonably comfortable with. He had used Excel recently, so we started with that, and I asked him to type in a main heading in the first cell, then a sub-heading followed by some content in the following cell, then one more sub-heading and content. We saved this, then added a touch of formatting – bold for headings, different font sizes, then finally saved as a web page. Finally, we checked the page in a browser. As expected (or rather, as ‘engineered’!) the page looked fine but had no information about structure, no headings found on the page. At this point I emphasised that this is typical of the kind of result when pages are created in this way using ‘Save as Web Page’ and that often the fault of unintelligible web sites was not JAWS itself but rather the developer who put the page together poorly.

First web page

I next guided Harry towards Notepad and I began with a simple structure, explaining that pages are wrapped inside <html></html> and then split between <head> and <body>. I deliberately skipped mention of doctypes on the basis that if this is the first thing that a blind 15-year-old encounters and has to get their head around, that’s a big hurdle! Likewise, I omitted all non-essential html element attributes. Keep it clean, keep it simple.

What I tried to do was follow the same approach as I cover in my beginners book, on the basis that Harry’s helpers could later refer back to the free chapters that are available on SitePoint and be able to make sense of what he learned on the day.

Very quickly I’d explained about the importance of proper headings and paragraphs and Harry was soon recreating his page from scratch using <h1> and <p>, each time creating the opening and closing tag and then back-tracking with the arrow keys until he was in the right place to type. I was surprised at how easily he could navigate around the plain text document to precisely where he needed to be.

Once he’d got the page together with a <title>, an <h1> and the pair of <h2> and <p> content, we tried that in the browser and the result was immediately clear. He could instantly tell the difference in meaning and wasn’t bothered at all that it had taken longer for him to produce that; in fact he seemed to be itching to learn more. So that’s what we did …

Adding lists

Next up I mentioned lists and asked him to hazard a guess at how you’d mark up an unordered list. He said ul almost before I finished my sentence and also predicted that an ordered list would be an ol. Never mind me leading him, in this case the blind was leading the non-blind in places! Soon, we had some lists on the page which he could here as bulleted list items or numbered.

Creating a web site

Finally, to make this really feel like a web page, we then copied the pages a few times then edited them such that the first page was an index page linking to the other two pages (in which we had edited out content so that each page represented a write-up of his first two days’ work experience)

What about the visuals?

What about them? I didn’t even think about the CSS, as it really was not relevant at this stage. I did explain to Harry and to his helper that the document could be styled afterwards, but the key thing was to create something that made sense, first and foremost, and used the right markup.

So, how did he do?

Well, I have to say that I am super-impressed with the progress. In just over three hours and with my guidance, Harry had created a 3-page web site having never written a single HTML tag. He could really appreciate the benefit of doing this as he listened back to what he created (and we also noted that his clean markup was almost exactly a 10th of the size of the far less useful markup that Excel had generated when saving as a web page!). Despite the intentional omission of the doctype, he had documents that were valid XHTML and despite not being able to see the markup, his tidy use of carriage return after each tag made the markup massively better and easier to read than that of coders I know who’ve been doing it for years!

All-in-all, I was thoroughly impressed with the speed that he picked this up, although I could also tell that he was starting to get a bit tired by the end of it with all the mental code juggling he’d be doing. This lad has real promise, but unfortunately has no computer at home with which to continue learning, and therefore no copy of JAWS (as the family is poor); at school, his exposure to IT means the most he gets at one time is an hour. So, I’d really love to find a way to be able to help him out in some way, to make sure that this promising start doesn’t come to a sudden end. Fingers crossed on that front (and once again, all ideas are greatly appreciated).

Filed under: Accessibility
Comments (19) Posted by Ian on Wednesday, April 29, 2009

Teaching a Blind Person HTML?

I’m after some ideas on something here. Tomorrow I will be sitting down with a lad who’s here on work experience who is completely blind. He’s been doing some assessment of various web sites over the last couple of days but tomorrow I have got to try to teach him a bit about building web pages.

I aim to do this very simply but in all honestly, despite having written a book for the absolute beginner on this very topic, I’ve never thought about how I explain such concepts to a blind user. Sure, I understand the issue for blind people consuming this information, but not creating it.

Do I just use Notepad?

Is DreamWeaver a good idea?

Really, this is an open question (admittedly with little time for replies!) but I would appreciate any thoughts people have.

Thanks

Filed under: Accessibility
Comments (9) Posted by Ian on Tuesday, April 28, 2009

Interview with Accessible Twitter creator Dennis Lembree

Accessify recently spoke to founder of Accessible Twitter Dennis Lembree, who is also behind Web Overhauls and web accessibility podcast Web Axe. We wanted to find out more about the background to Accessible Twitter, what prompted it and where it might go next. Here’s what Dennis had to say:

Accessify: Dennis, congratulations on Accessible Twitter:

Dennis: Thank you. It’s a fun and challenging project.

A: I wanted to ask a few questions about the site/service, largely because of a comment I read from Doug Bowman about the site a little while back, namely "Why a whole new design for this?". When I read that I thought two things: 1) Doug has a point and conversely 2) Why knock it? There’s room for all sorts of UI styles. This got me thinking what it was that you originally wanted to achieve with the site. So perhaps that’s the best place to start:

D: My original idea was to keep it similar to Twitter’s architecture, but the more I developed, the more I realized that it wasn’t going to work. I encountered, in my opinion, many usability and accessibility issues, the biggest being inconsistent navigation. There are also many links that are hidden and/or require JavaScript to even reach them. Since these issues relate directly to layout and design, I decided to break out and just do what I felt was easiest for the user.*

A: What were (or still are) the biggest hurdles faced by people trying to use Twitter? What types of people is it affecting?

D: Web accessibility is for everyone, not only for the 10% or so of folks with some type of disability, but also for those with technical limitations such as low-band connections, a broken mouse, and blocked JavaScript. That said, the most obvious are the visually impaired, especially blind users. It very difficult for screen reader when a page lacks proper headings, semantic mark-up, and **contains a lot of Ajax.

A: Were you asked to do this by anyone? Or was it, perhaps, inspired by the work that anyone else has done for similar services?

D: An ex-coworker (and friend) of mine actually suggested that I do it. I really enjoy web development and using the web. And my specialty is web standards and accessibility, so this was a perfect project for me. My wife and kids were out of town for a couple weeks at the time, back in January, so that gave me the time to do all the groundwork.

A: Given that Twitter is such a simple service, in terms of functionality/purpose, does it surprise you that it has accessibility issues?

D: Not at all. Unfortunately, the majority of web sites and web applications are still not web accessible, especially in the U.S., where in general, we are behind countries like Australia and many European countries. Overall, I think there’s a misconception that a "Web 2.0" site or app can’t be cool or fun and be accessible at the same time. On the contrary, I find that it’s quite possible. It’s mostly a matter of planning it from the beginning, and implementing progressive enhancement.

A: And what does the fact that Twitter can’t get it perfect say about the wider state of web apps?

D: It says they’re pretty poor quality, frankly. Twitter.com is extremely off-course as far as web accessibility goes. Basic things such as proper use of headings and keyboard access are not implemented. I received an email from a blind user who really enjoys Accessible Twitter. He even asked, I think jokingly, if I could make an accessible Facebook, which is also terribly inaccessible.

A: What’s the best bit of feedback that you have received about Accessible Twitter since launching it? I’m thinking of the kind of comment that makes you think "Yep, those late nights and long protracted periods of shunning conversation and socialising (real, not virtual) were all worth it"?

D: I’ve received tremendous feedback from both users and fellow developers and accessibility advocates. Check out the Accessible Twitter homepage for quotes, mostly from Tweets. But I’d say the best, and most personal, was the following messsage from a blind user:

"Wow! You have really made my day, and I am smiling once again. I am so excited that I found your Accessible Twitter. Now I feel that I can be in the cutting edge of everything that is happening in the Twitter Universe."

A: How did you find working with the Twitter API? Did it present any issues regarding accessibility itself? For example, data that you might dearly want to make use of that was not exposed/available to use?

D: For the most part, it’s been pretty good, and they’re still working hard on it. This year the now separate search API is suppose to be updated to work more like the main API. By far he biggest problem I’ve experienced with the API is the of the speed and consistency of the data being served up; most of us know that it can very often times be extremely slow.

A: What’s the state of play with Twitter clients out there? Are any of those readily accessible, or even slightly?

D: I’m not aware of any other web-based Twitter clients, not to mention accessible ones. @SarahM is writing a book about Twitter and actually called me for input on Twitter and web accessibility and will be referencing to Accessible Twitter. She couldn’t find any other resources, at least not quickly enough. As most of us know, there are many desktop and mobile Twitter applications, but I can’t speak to the accessibility of those. Actually, I did try one desktop Twitter client, and it is totally not keyboard accessible.

A: Out of interest, what clients do you use (when you are not ‘eating your own dog food‘ as it were)?

D: Ha ha, they used to say that phrase at Quicken Loans. Anyway, I haven’t tried any other Twitter clients until very recently. I’ve started checking out TweetDeck. The groups feature is great, and you can import your Facebook feed. And yes, this is the app that not keyboard accessible.

A: Going back to Doug’s comment, did you consider effectively ‘cloning’ Twitter then accessifying it? Or was it a conscious decision not to because of possible legal reasons (copying, plagiarism, perhaps because it might seem to be a fake web site, even)?

D: I never had intention to "clone" the site. To reiterate from an earlier question, I first tried to stay with the main layout of the Twitter site, but gave up on that pretty quickly, mostly because of the navigation issues. In addition, web site design and functionality can change so quickly, it’s probably best to do what you think is right, and stick with that, and that’s what I did.

A: Have you spoken/chatted with Doug about this since? I ask this because he has since announced that he is going to work for Twitter and perhaps this constitutes as ‘official blessing’ to do what he suggested?

D: I have not spoken to him. I don’t feel that I need any approvals because I’m confident that I’m as qualified as anyone to do the site, well, nearly anyone. Like most things, the only real issue is time.

A: What if Twitter changed its site and addressed all of your accessibility concerns, fixed the lot and effectively negated the need for Accessible Twitter. Would you feel annoyed that you’d done the work for nothing or would you feel happy that the work had perhaps caused them to sort their own site out?

D: I highly doubt that would happen, at least not anytime soon. The realm of web accessibility has so many complexities and layers, it can be pretty tricky to address all of them. This is especially true when you have to retro-fit a rapidly growing application. If Twitter was able to do it, I would be quite impressed and hope their site could be an example of "the right way" to build a web app .

A: Going back to the previous question, if they did sort out their issues, would you rebrand/repurpose your own to some other means or simply leave as-is for those who may have gotten used to that version as ‘their Twitter’?

D: I don’t think I’d change it much. Just continue doing what I’m doing. The main goal will always be making basic Twitter functionality accessible. But in addition, there are several additional features that users may like to use and more to come.

A: What’s the coolest feature of Accessible Twitter?

D: Good lead in, ha ha. A few come to mind, such as the retweet, but I’d have to say the audio signals, or earcons, when entering a tweet are the most fun and valuable. When a user hits 30, 15, and 5 characters left, audio place announcing the number left. Like @v tweeted, he "likes it when the computer talks to him".

A: Finally, has doing this made you think of other similar sites/ ideas that you might want to have a go at accessifying in a similar way?If so, can you share any of this with us?

D: Facebook. Anyone want to form a start-up to do that?!

A: Thanks for your time, Dennis, and for the work that you put in on Accessible Twitter.

D: You’re welcome. Thank you for inviting me.

You can find Accessible Twitter on the web here or follow Accessible Twitter on Twitter itself - via accessible Twitter if you like! Boy, that was a confusing closing statement. Dennis is also on Twitter as himself in the guise of dennisl.

Filed under: Accessibility
Comments (6) Posted by Ian on Thursday, April 23, 2009