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).