Web accessibility for designers [useful infographic]

Post 94 of 262

WebAIM is a site that I have recommended to many designers, template users and site builders. But I don’t think that I have written about it on andreasviklund.com before. What caught my attention today was a simple but very useful infographic on points worth keeping in mind to improve the accessibility of the site you build. You will be able to see it at the end of this post.

First a few words about accessibility and design philosophies

Accessibility is not only good because it makes your content browseable by more people, it also goes hand in hand with several of the improvement points that I refer to as “CoSeOp”, or Common-Sense Optimization. With that I do not only mean search engine optimization, where the target is to make the website improve its positions in the search results. No, I mean creating an overall philosophy that explains the overall purposes with the site from the viewpoint of the web designer, along with creating a suitable visual style, a solid and user-friendly code structure and a coding process that makes the end result a good one.

My way of doing it: ILEVA

Personally, I follow the ILEVA philosophy, where I have shortened down five separate targets (“Independent”, “Lightweight”, “Elementary”, “Valid” and “Accessible”) which I want all my designs to match once they are released. A template built with the ILEVA mindset will be a template which will work great for anyone who wants to use it – at least in terms of its structure. It will be SEO-friendly from the start, it will work in any major web browser and with the most popular accessibility tools, it will be easy to work with thanks to the fact that simplicity is a feature in itself. And the code you start working with will follow established web standards such as XHTML 1.0 Strict, html5, CSS2 or CSS3. Just to give a quick rundown of the ILEVA idea. I will be writing a lot more about ILEVA, as it has started growing into something bigger than just a checklist for my own personal use.

Infographic: Web accessibility for designers

But for now, let’s focus on Web accessibility, specifically for designers. Here is the infographic from WebAIM. Click on the image to go to the corresponding resource page on WebAIM.org. Now, keep in mind that these are short recommendations only. I may possibly write another blog post where I dive deeper into each point on the check list. But still, these are great advices:

Web Accessibility for Designers infographic with link to text version at WebAIM.org

, , , , ,

This article was written by Andreas Viklund

Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.


Jared SmithAugust 31, 2011 at 02:11Reply


Thank you for the kind words and for promoting the WebAIM resources. We’re glad you like the infographic. I like your ILEVA philosophy.

IliaSeptember 12, 2011 at 15:08Reply

I am very pleased with the information found on your homepage. Thank you and keep on the good work!

Ferienwohnungen ZillertalApril 17, 2012 at 16:23Reply

Thanks for sharing the link to WebAim. We are in the middle of creating a new project and are currently engaged in the design. I will pass this on to the concerned departement. It might be useful to them, too.
Like reading you aticles, not only this one but also for example the one about “how to create website icons in any color you want”.