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).
So says Virginia
Why don’t you set up a chipped in donation widget for this young man? I’d be happy to donate a few bucks toward getting him a computer of his own.
Added April 29, 2009 at 4:07 pm
So says Matt Obee
Impressive! I imagine the real challenge will come when he’s dealing with deeply nested markup, particularly with attributes thrown in. Something as simple as indentation and syntax highlighting to indicate hierarchy and tag pairs would probably be lost on Harry. He’ll need to keep a really good mental model in his head all the time.
Added April 29, 2009 at 4:24 pm
So says Ian W
This sounds really encouraging and I bet you could learn a lot from the way he creates pages that suit him.
If you are willing, get him a cheep netbook, install JAWS & Apache so he can edit and view pages via local host and he will be able to learn on his own time.
Added April 29, 2009 at 4:32 pm
So says Tim Chase
I don’t know if you’re a Linux guy (or he’s willing to learn Linux), but the Vinux distribution[1] is freely available for download, and boots/runs off the CD. It comes with its own screen-reader built-in, so there’s no additional cost for things like JAWS or Window Eyes. It also talks to external synths and Braille terminals if he prefers. While it’s not 100% of the way to getting him more time on a computer, you might be able to acquire an older-but-adequate PC that a local business is discarding.
-Tim
[1] http://vinux.org.uk/index.php
Added April 29, 2009 at 8:02 pm
So says adrian higginbotham
if he qualifies for free school meals then he’ll be able to get a machine at home with appropriate assistive technology uner the universal home access programme which goes live nationally toward the end of the year. just claim then spend his voucher with any participating supplier
Added April 29, 2009 at 11:02 pm
So says Laura
Please… set up somekind of donation widget!
Added May 16, 2009 at 12:47 pm
So says Ian
To Laura, and anyone else suggesting donation widget, I just need to be a bit careful on this. I am going to speak to his helpers at school and find out if this is going to be welcomed. Not entirely sure how they (parents) will react. Social issues to consider. I have not forgotten this - and it may be that the company I work for might be able to help financially anyway (just have to ask our charitable donations people to see what’s involved/required). Fingers crossed.
Added May 16, 2009 at 7:10 pm
So says Monika
Hi papoo-cms.com this is an accessibility cms - maybe he would like to give him a try
I’m not the coderof this nor is this my site, but I use this cms since many years for handicapted customers
regards
ans thanks a lot for all your *goodies* here on this site
Added May 23, 2009 at 3:51 pm
So says Rafa Garcia
Great article, so necessary.
Added June 9, 2009 at 11:59 am
So says thomas
thanks for this help.
Added August 5, 2009 at 6:58 pm
So says dod
Well described with further help, thank you.
Added August 7, 2009 at 6:42 pm
So says Girokonto
Thanks for this help full article. It helps me by work.
Added August 10, 2009 at 6:26 pm
So says alquiler yates
thanks for this article, it was very helpfull.
Added August 12, 2009 at 11:09 am
So says Mark
Thnx for posting this article!
It was very helpfull.
Added August 19, 2009 at 9:06 am
So says Webdesign München
Thanks for the article! Very nice…
Added August 25, 2009 at 3:44 pm
So says Honeymoon Packages Kerala
simple in language nevertheless very understandable…
Added August 29, 2009 at 10:59 am
So says Frank
Very cool story - too bad noone makes an effort to support people like him.
Added October 27, 2009 at 8:05 am
So says Dosenwurst
Lets get him some funds to continue his development!
Added October 27, 2009 at 8:08 am
So says ニコン カメラ
Some dreadful facts regarding your wonderful japan illusion.
Added December 9, 2013 at 11:16 am