From time to time people interested in web development ask me to explain HTML and how it works. I generally begin, as probably most of you do in that situation, with the markup for the most basic, simple page possible. One with nothing in it, so they can see the basic structure of the html, head and body elements. Then I add one or two lines of text content and carry on from there. Thousands of articles and tutorials on the internet do a similar thing, generally starting with a "Hello World" page.
A few days ago I was asked the question once again, but this time I stopped to think for a moment about my approach. It occurred to me that this apparently innocuous explanation is already sending potential future developers off in the wrong direction - down the road of non-accessibility! At some future date they will have to learn accessible techniques, then backtrack to insert that new knowledge, belatedly, into the understanding they were first given and that they have been building on ever since.
Unfortunately, most developers never leave that wrong road they were misdirected down initially, and spend the rest of their careers producing inaccessible web pages. Even college and commercial web development courses may not introduce accessibility until well into the course. They treat it as an add-on, one of many such, rather than something that should be baked in from the word go.
This has to be the wrong approach. Accessibility is just as important as the HTML itself - we should not teach the mechanics in isolation. We need to teach the student that the World Wide Web is, above all, about reaching people.
The Accessible Way
So for their first ever web development lesson why not give the beginner, not the most basic page, but the most basic
accessible page? Start them off as they need to go on! With this in mind I have worked out such a page, and here it is. It contains just a few HTML elements, and everything needed to make those items accessible:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Simplest web page</title>
</head>
<body style="font-size: medium">
<h1>A simple accessible web page</h1>
<p>The Web is about reaching all people.</p>
</body>
</html>
To explain this markup to our student we are now forced to explain the accessibility features along with the standard HTML. We must explain:
- what the lang attribute is there for. That involves mentioning screen readers, straightaway letting the novice know websites are not just for sighted people.
- what the title is and how it must describe the page - now we mention Braille readers for the deaf-blind, as well as screen reader users again.
- how to correctly make text enlargeable for people with poor sight, including the many elderly people who also use the internet.
- how the h1 element is the top one of a set of heading elements that must follow a natural hierarchy.
- that text should not be just entered direct into the page, but must be in paragraph or other semantic elements for screen reader clarity.
- And we can round off by mentioning a few other groups of disabled people, such as keyboard-only users and deaf people, who will need attention as the HTML gets more complex later, so encouraging our student to keep accessibility in mind all the way.
Of course, this does cheat a little by setting the text size in the HTML script rather than the CSS file for ease of demonstration. And we can say as much to our student, thus letting them know about CSS at the same time. But it serves to bring in two more groups of disabled people, those with impaired vision and the elderly.
Two in One
By doing these things we will start the interested person off with a basic introduction to accessibility along with the simple HTML we are giving them! The script only has six HTML elements and five accessibility features, but we have already linked the two matters firmly together in the person's mind.
And all in their first lesson! Now the newbie developer has an accessible foundation to build on.
If we provide a follow-up lesson, that can add in more accessibility features. Include an image, one which requires a good descriptive alt text, and we don't even mention that tired old nonsense about it being for when images can't be shown due to low bandwidth and all that unimportant sob stuff; they will get that soon enough from other sources. We proudly tell them what the alt text is truly for, for blind people. Lesson 3 can be a simple input form, giving us the chance to explain about keyboard-only users. We can show them how to do labels correctly (thus already teaching them more than the average developer seems to know judging by many of the audits that land on my desk each week!) We can show them radio buttons and checkboxes already accessibly placed in fieldsets with legends. And so on.
So next time you are asked to introduce someone to HTML, why not start with something like the above code to acquaint them with Accessibility right from the start!