My name is Carl and I am passionate about accessibility. Why? Because it is a way of giving back to the user while also Big G happy.
My name is Carl and I am passionate about accessibility. Why? Because it is a way of giving back to the user while also Big G happy.
I was recently lucky enough to be asked to be a speaker at an Inclusive Business for People with Disabilities in Manila last month. The event was run by both UN ESCAP and APCD, I won’t delve into acronyms but essentially ESCAP does that talking and APCD promotes action. The event was deeply inspiring to me especially as the last presentation I did I was partnering with an amazing gentleman who is an architect and 100% blind. To see him using a computer is literally awesome (yes Yanks this is the right time for that word).
Seeing him use the internet, his email and word gave me a unique insight into how accessibility is actually used. We already have the why’s, then the how’s (like this post) but I bet a small percentage of people actually seen how blind users use a website? If you have, please comment below and give me your impression.
Right, let’s get down to it, 10 easy ways to make a website accessible to not only blind users but those with additional cognitive requirements.
First Watch This
A JAWS demonstration for Visually Impaired by Blindnoahlong
1. Use alt=”” tags on images
Look at DSC40009.jpg, wow, what an amazing picture, the way the lighting is, the composition, the balance is awesome. To you and I we can see how awesome a picture is, but if you are blind you need a way of the browser to explain what a picture is of. Enter stage left the alt attribute. When a screenreader hits an image it reads the alt text to the user, so make sure the description is short and to the point. Also put the most discriptive words at the start as many blind users only listen to the first couple of syllables of anything as they search around for what they want. So my advice is alt=”Thailand sunset over the temple of the dawn” describes DSC400009.jpg very well.
2. Get To The Point! Skip to #content
Imagine having to read the header, banner, navigation every time you wanted to read the contents of a blog post? Well don’t make your blind users do it either by adding a skip to content at the top of your page. Somewhere you will have a <div> or <article> or even a <section> that contains the main content, slap a id=”content” and then just below the body add a <a href=”#content”></a>. Now move over to your CSS and display:none that a#content bad boy. See that was easy!
This is one of the most useful things you can do, so thanks for doing it!
3. Right Tag, Right Meaning and Right Place
Headings are not just pretty big text, they give context to the paragraphs and un-ordered lists below them. If you see a heading features then you expect features below. Giving your website a good structure using headers is very important for Search Engine Optimisation and not only Accessibiliy. Have one <h1> and then the <h2>’s should be directly releated to that main heading.With any <h3>’s they should in turn be related to the <h2> they are under.
Remember heading tags are not about size they are about meaning.
We Teach Accessibiliy
All of our web design courses have accessibility at their core. We are very passionate about web standards and how to build websites in an intelligent way that makes life so much easier in the long run. If you new to web design I recommend taking our Web Design Beginner course and then moving onto WordPress Training within our Intermediate course.
We Like Comments from Stumblers
We are lucky to get a lot of Stumbleupon love, but don’t stumble to the next post just yet, give us your feedback on the post.
Thanks, Carl
