Web Design Tips For Visually Impaired – Making Your Site Accessible!

As a web designer, you have probably thought out every page long and hard. You keep an eye on the latest trends, look for the best tools to make your life a little easier and make sure that you user base is happy. But despite this, you very well might be falling into the same trap as so many other in the business: forgetting to account for the visually impaired.

In the past, this was less of an issue. Those with serious disabilities that prevented them from seeing a screen commonly use a reader to browse the web, and so design means little as long as it is compatible with their device.

But with the increasing userbase of people over 50, and age where visual problems begin to increase, and the surge in people who wear corrective lenses and eyeglasses, you have to keep it in mind. All designs should be somewhat catered to those who have visual impairments, which in the US is in the tens of millions just in the 45 and up demographic alone.

There are a few simple ways you can incorporate this knowledge into your design without affecting the overall concept.

Web Design For Visually Impaired

1. Keep Your Spacing In Mind

I have lost count of the amount of times I have come across websites with close borders that don’t allow for enlarged text. Even people with slightly blurred vision might use CTRL + in order to increase the font for easier reading. Which on some layouts may break the look and cause overlap in columns or grid boxes.

The best way to get around this is making the layout size enough to accommodate sizes from 10 to 16 point. Test it on each size upgrade to make sure it is at least clear. Even up to 14 is acceptable, if you are working with limited space.

2. Create Plenty Of Keyboard Shortcuts

Plenty of people use keyboards only due to their inability to see a mouse cursor. When this happens, they need keyboard shortcuts to navigate properly. No one likes to have to Tab their way over extensive content, so offer an easy and basic shortcut code list that allows them to use the arrow keys and a couple of extras to work their way through. A good example of this is Facebook, which has a complete shortcut system for visually impaired or disabled users.

3. Provide Plenty Of Color Contrast

Provide Plenty Of Color Contrast

One of the best things you can do is give good color contrast. Anything that is too close in shade or tone to your background is asking for trouble, even for users who don’t have vision problems. It can cause eye strain for healthy eyes, and be completely unreadable for those with poor eyesight.

For healthy users, you can just have subtle changes in order to make it easy to view. If this is a big part of your layout, you are welcome to keep it. But you will have to create a higher contrast version for the visually impaired, otherwise they will be unable to read it.

Luckily, you will find that high contrast web design has been trending heavily the last few years. Especially colors like back backgrounds with white text, so it shouldn’t be a hard guideline to stick to.

4. Don’t Forget The Colorblind

Don't Forget The Colorblind

One kind of visual impairment that many people trivialize is colorblindness. It might seem like just a small problem, but many conditions severely effect the way webpages are viewed. If you use a myriad of colors, you could be making it impossible for that percentage of users to view your handiwork.

There are a number of sites that will let you test your web page to see what it looks like to people with different types of colorblindness. One of my personal favorites is ColorFilter, which also have a number of useful links to learn more.

5. Give Full Access To Your Mobile Version

Some visually impaired web users will use searches to find the mobile versions of sites. That is because the viewing potential of these versions are better, due to their higher contrast, larger text and simpler designs.

Instead of only offering mobile versions for phones, give full access on the web, as well. It is an easy way to provide a more user friendly version with very little work on your part.

Conclusion

It is important to incorporate elements to your web design that provide access to those with visual impairments and other disabilities or problems. Don’t make the mistake of leaving these guidelines out of your design.

Annie is a web design blogger for Direct Sight – check out the site for detailed guidelines on purchasing glasses online.

Image Credits: 1, 2.

Contributor

The above post is written by Guest Authors on Orphicpixel. The Guest Author information is available in the post itself. If you wish to write for us. Send your guest post at contact@orphicpixel.com

3 Responses

  1. Lee says:

    Some really good relevant points, its something I’m aware of but not doing enough of. Like the Colorfilter link, that deserves a good look around I feel sure that is a link I should have on my site. I would just like too add Videos to the mix and say especially for instructional videos uploaded, they should have embedded notes and tips pointing out the details.

  2. Web Axe says:

    Number 2 isn't exactly right. You don't need to create additional keyboard shortcuts. You need to make what you already have keyboard accessible.

  3. Kathleen says:

    One very IMPORTANT thing the guest author forgot to mention is to NOT use copyrighted images in a blog. It’s also interesting to note that the author did give credit for two creative commons images used…but not my copyrighted image. Yes…I am known as lunamom58 on Flickr and no I did NOT give permission to use my image. There is only one individual I gave permission to use this image…and he asked!

    Shame on you!

    Kathleen
    aka lunamom58 on Flickr