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:

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.

Further reading


Add to the discussion

All fields are required, your email address will not be published or used for other purposes than verification.