Accessibility Crash Course
Accessibility is not really a hot topic currently. Unlike SEO there are few or no companies making money on accessibility in itself. Nevertheless, it’s still important that everyone can access your website.
Why does accessibility matter?
Because everybody should be able to acces your website. Not everybody is healthy and has a modern pc with the latest browser and high speed internet connection.
Some disabilites you might want to consider are:
-
Lack of javascript.
Some people have javascript disabled, for whatever reason, or have browsers that don’t support every part of javascript that you need. Note: Google does not support javascript, so you could sell this under the name of SEO. Also, it looks quite clumsy when a javascript error breaks the entire page.
-
Poor or no sight.
Some are blind and use screen readers, others see everything a bit blurry. This also includes people with color blindness.
-
People without mouse.
Most smartphones have internet access (and therefore access to your site) but no mouse. And while most PCs have mice, they can break down. And some people just prefer using their keyboard for stuff.
-
Slow internet connections.
Although almost everybody has a fast internet connection at home, mobile internet still isn’t fast everywhere.
And of course, there are a lot more ways of having trouble accessing the web, but these are the most important ones, I believe.
How can I make my website more accessible?
I will not discuss every detail of accessibility here, only the basic stuff that is the easiest and most effective (I think). I do, however, assume that you (the reader) are experienced with HTML.
Use HTML the way it’s meant to be used
With this I mean that headers should actually be headers (<h1>, <h2>, etc…), images should have alt attributes (also good for SEO) and lists should be lists (<ul> or <ol>). One more thing to pay extra attention to are labels. <label for="someInputId">Understandable text</label><input type="text" id="someInputId" /> will label the input field with “Understandable text”. This way everybody knows what the input field is about, without any visual cues. Bonus: you can click the label to put focus on the input field.
Design for readability
No matter how great the text on your website is, readers will leave when it’s not readable. This includes having enough contrast, also for colourblind people. This also includes setting your font size relative (in em or rem) rather than in absolute (in pixels), so people can just change a setting in their browser to view your text larger. Also good to improve readability (but not necessarily accessibilty) is to limit the line width.
Also, write with readability in mind. Correct spelling and grammar do make a text better readable, and so do punctuation and division into paragraphs. Do not use overly complicated wording, explain acronyms and abbreviations at least once per page, unless you are absolute certain your entire audience can understand them. For example: on a news web site, you might want to explain what HTML means. On a developers’ web site you can assume your visitors know what it is.
Use javascript as decoration only
Not everybody uses javascript, and one error breaks the entire script. Therefore: use javascript for decoration and extras only. Good (or bad) examples are Twitter and YouTube. You can’t even logout without javascript (although twitter offers their mobile site as an alternative).
Do not reset the outline
Most visual browsers give the focused element an outline, which you can disable using css. Please don’t. Change it if you like, but make sure the currently focused item is visible as such. Press ‘tab’ a few time on this page, you’ll get the point. You can do this using the :focus selector.
Concluding
It’s not very hard to make your website well accessible with great results. It will also benefit the way search engines can access your website, since they can’t understand images (therefore the alt-attributes) or run javascript.
My website currently falls short on some points, but I’m busy fixing those. For the meantime, I hope you’ll do better than me.