Heroes of the web embrace accessibility. They are its shining knights, sworn protectors of all things digital. Their swords are forged from semantic HTML. Their armour from Web standards. Their shield is progressive enhancement. Their helmet, a blue beanie.
They teach, share and spread their knowledge without fear. They laugh heartily in the face of invalid code. Their calling is to defend the holy grail of the web; accessibility.
We could be “Heroes”
The great thing is you don’t have to risk life nor limb to follow in their bold footsteps. You too could be a hero, like David Bowie, who we sadly said goodbye to exactly one month ago today.
In the days following David Bowie’s death, “Heroes” was streamed more than any other of his songs. The song is about two lovers separated by the Berlin Wall who risked it all, for love. The German Foreign Office paid homage to Bowie for “helping to bring down the wall.”
I, I can remember (I remember)
Standing, by the wall (by the wall)
And the guns, shot above our heads (over our heads)
And we kissed, as though nothing could fall (nothing could fall)
And the shame, was on the other side
Oh we can beat them, forever and ever
Then we could be heroes, just for one day
~ David Bowie – “Heroes” video
A web without walls
The demolition of the Berlin Wall officially began in June 1990.
Six months later, Tim Berners-Lee switched on the world wide web. Built on a profound concept: that any person could share information with anyone else, anywhere.
The web evolved into a powerful, ubiquitous tool because it was built on egalitarian principles.
~ Tim Berners-Lee
But you don’t need to behave like a “git”, even if you use Git every day. You too could be a web design hero. All you have do is help create a web without walls, an open and accessible forum without limits.
What is a hero?
The word hero is certainly in common usage. But what exactly does it mean?
The Greek word Hērōs “is akin to” the Latin seruāre, meaning to safeguard. The basic sense of both Hera and hero would therefore be ‘protector’.”
~ Eric Partridge in Origins Wikipedia
So, you’ve practiced your HTML skills, your strength in PHP is legendary. You just need to develop one more thing to be a true hero; compassion.
For thousands of years, the Greeks perfected the three pillars of the heroic arts—paidea (skill), arete (strength), and xenia (compassion).
~ Christopher McDougall, No heroes aren’t born they’re built and how you become one
Accessibility is compassion.
Web accessibility is love. It is the ultimate path of the web warrior.
I had lost my mind and fallen into my heart.
― Dan Millman, Way of the Peaceful Warrior
We need to be more Samurai than Ninja.
Ninja is often bounded around in web design circles. A cliched favourite of CVs and job advertisements in the web world. In reality, a Ninja is more like a terrorist than a protector. The Samurai didn’t respect them because the Samurai had strict rules about honor and combat.
The Samurai felt that the path of the warrior was one of honor, emphasizing duty to one’s master, and loyalty unto death
~ Samurai on Wikipedia
Samurai were fiercely loyal to their masters.
Who is your master?
You’re gonna have to serve somebody, who’s it going to be?:
Well, it may be the devil or it may be the Lord
But you’re gonna have to serve somebody.
~ Bob Dylan – Gotta Serve Somebody video
So, just who are we building websites for? Who are we serving? It’s not the Google bot. It’s people. We serve people. The better we serve people, the better our websites.
Our masters are real human beings. Each one as individual and special as you, or me. Some of them may well be rock stars, Ninjas, Samurai or perhaps even heroes.
People-friendly web design
People are your masters. To truly put people first, you need to think inclusive. Embrace accessibility and put people first.
We are geeks. We love a framework or an API. We can find tutorials, create a pull-request, or copy, paste and hack. This is what we do. Accessibility is not an API. It is not a check box, or a statement you pin on your site.
We want to make the most easy to use, accessible government website there has ever been. Merely ticking a box marked ‘accessible’ isn’t enough.
Accessibility is not a plugin you can bolt on at the end of a project. It begins and ends with your content.
WCAG 2.0 success is measured holistically on the structure of your content, semantics of your HTML and style of your CSS. Accessibility is an approach, it is greater than the sum of all the technologies. It is a mind set.
Technologies are concrete, demonstrable things, whereas approaches, mindsets, and processes are far more nebulous in comparison.
The most important facet of building a robust, resilient website is how you approach building it rather than what you build it with.
~ Jeremy Keith – Where to start?
Heroic web design
The Greeks didn’t just sit around hoping for heroes to appear—they built their own. They believed heroism was an art, not an accident, so they developed skills that were passed from parent to child and teacher to student. The art of the hero wasn’t about being brave; it was about being so competent that bravery wasn’t an issue.
~ Christopher McDougall, Natural Born Heroes
Heroic web design begins and ends with valid semantic HTML. This is the language of the web. It’s our bread and butter. Web Standards are our jam:
We at The Web Standards Project turned everything on its head. We said browsers should support the same standards instead of competing to invent new tags and scripting languages. We said designers, developers, and content folks should create one site that was accessible to everyone.
~ Jeffrey Zeldman
If your browser’s not down, you’re not coming in
We are not building an exclusive night club. Our technology should not employ virtual bouncers on the doors. Our sites should welcome everyone. No matter what brand of trainers or AT they rock, or skin colour or browser they roll in with. Be a great host, greet all guests with open arms. Don’t discriminate or segregate because they use, or are forced to use a particular browser or flavour of AT or screen reader. It shouldn’t matter, there is a person using it. The people matter.
I am not a number, I am a human being
Our masters are not “users” or “numbers”, they are human beings. Every one unique.
Can you afford to ignore these masters? Why would you want to? We are all temporarily able-bodied. One day you might need to buy glasses, get Parkinsons or develop an RSI.
If you do see the world through maths and data is your bag, add these numbers up:
- 33.3% are over 50 years old (pdf).
- 16.6% have hearing loss. That’s more than 11 million people in the UK, one in six of the population. By 2035, it is estimated that number will be 15.6 million people, that’s one in five.
- 10% are dyslexic; 4% severely so.
- 4.5 % are colour blind. Approximately 1 in 12 men (8%) and 1 in 200 women in the world. In Britain there are about 2.7 million colour blind people (about 4.5% of the entire population), most of whom are male.
- 3% have sight loss. Almost two million people in the UK live with sight loss. That’s around one person in 30.
- 1.85% use IE6/7/8
- 1.6% are stroke survivors. There are 1.2 million stroke survivors (pdf) in the UK.
- 1%, or 700,000 people (about 1 in 100) in the UK are living with autism.
- 0.25% or 1 in 400 have Cerebral Palsy. There are about 30,000 children with cerebral palsy in the UK.
- 0.2% or 1 in 500 have Parkinson’s.
- 0.1% or more than 70,000 people have Muscular dystrophy (MD) or a related condition.
- 1 in 100 people have epilepsy, 5% of these have photosensitive epilepsy.
- There are over 40,000 people in the UK with Down’s syndrome.
So 1% of all web users is 30 million. And those users are people, not numbers.
~ Mike Little, Thoughts on progressive enhancement and accessibility
Forget the numbers, these are all people. Real people, some are heroes. People with Parkinson’s like Muhammed Ali or Stephen Hawking who has motor neurone disease.
Would you actually look Stevie Wonder straight in the eye and say, “Sorry Stevie, you can’t use this website!” Well would you? I doubt it. You might do it in a virtual world, but that’s no excuse. Don’t blame it on the Online Disinhibition Effect either. You’d still be an arse.
From hero to zero
A true story.
I created a website for a large organisation last year. They told me that they used IE 10 or 11. I built the website to support IE9. I even wrote it in the contract, which both parties signed. Everyone was happy. Except they weren’t.
Their thousands of staff are required to use IE8 at work. In the end, it was an easy fix. Because at it’s heart my HTML was sound. SVG was the only fly in the ointment.
Contract or no contract, I’d still be a zero if I hadn’t fixed it. Luckily the issue was found before we took the production site live.
An accessible practice
Accessibility is an approach. A commitment to making inclusive websites is just like any other art. Making music, martial arts or making love; practice makes perfect.
To be a true master, you will refine and polish your art daily. You will approach every project with this focus. A clear direction to follow will ultimately make you a better designer, developer or content strategist.
An accessible tool kit for heroic web designers and developers
If you make websites you will probably know about these tools anyway. Applying accessible principles will make your web designs heroic:
Content is the reason people visit your website. Learn how to write accessible web content.
Semantic HTML is how heroes roll. Validate your code and you will not only will it make it better for browsers, it is also good for the Google bot. Google have recently declared that they take valid HTML into their search algorithm too. So this is a win-win.
The stuff that the Zen Garden was made of. Colour contrast is key to making it inclusive, try this color contrast tool from Joe Dolton which will help you find a good contrast for people with impaired vision as well as people with dyslexia.
A great tool for any inclusive web designer’s tool kit, or weapon if you prefer the Ninja, Samurai or Warrior analogy. Get to know progressive enhancement deeply my friend. Understand it, sleep with it if you have to. Just embrace it.
Responsive Web Design
Make your design, flexible and resilient with Responsive Web Design techniques.
The open source content management system has a great team of folks who help make WordPress accessible.
There is nothing to stop you making a commitment to an egalitarian web. To make your content accessible to any person is the goal. Equal access for all, is your focus. To share your knowledge, to mentor and help foster a positive attitude to inclusive web design and development will only help accelerate this process.
Ultimately this will lead to a better world. An open and inclusive world wide web will improve education, health-care and help create economic development. Wouldn’t it be great to help build something like that? Wouldn’t that be heroic? Wouldn’t you like to help shape the future like that?
Think like a hero. You are one even if you haven’t realised it yet:
You’re a ghost riding a meat covered skeleton made from stardust, riding a rock, hurtling through space.
My heroes and heroines
Below is a list of some of my heroes. Some have personally helped me, others I have read their books and articles, or watched them talk. Apologies to all I have omitted, but you can find them on my Twitter.
- Aaron Gustafson
- Alain Schlesser
- Amanda J. Rush
- Andrea Fercia
- Andrea Whitmer
- Andy Clarke
- Bruce Lawson
- Carrie Dils
- Dave Dean
- Dan Cederholm
- Eric Meyer
- Ethan Marcotte
- Gary Jones
- Graham Armfield
- Jeffrey Zeldman
- Jeremy Keith
- Karl Groves
- Joe Dolson
- Mike Little
- Rian Rietveld
- Robin Cornett
- Sridhar Katakam
- Steve Faulkner
- Tim Berners-Lee
I hoped you enjoyed this article. I would really love to know your thoughts, and find out who are your heroes?
Many thanks to Barbara Marcantonio for giving me permission to use her David Bowie Wapuu image. Barbara is heroically working on the WordCamp London 2016 conference. You could be a hero too, and help sponsor the event.