12 Tips for a More Accessible Website

by on 19th March 2010 with 36 Comments

screenshot

Making your website accessible to everyone is not only a moral duty, it’s a legal obligation. Many organizations, including the International Olympic Committee, have been sued for not making their websites accessible enough. With 50 million Americans suffering from some disability or other, improving your site’s accessibility makes clear commercial sense too.

It’s not just those labeled as ‘disabled’ who stand to gain either. Research suggests that 57% of adult computer users will benefit from enhanced accessibility of some kind. Only 19% of websites currently meet the most basic accessibility requirements, so you can really stand out from the competition by making a few changes to your site.

In this article, we explore 12 ways in which you can make your site more accessible. Some methods are very cheap and quick to implement, others require a little more time and financial investment, but you should think of them as business opportunities. With the internet so central to all of our lives these days, it’s unfair that some people are being left behind.

1. WAI-ARIA

screenshot

When improving your site’s accessibility, your first port of call should be a set of documents, published by the Worldwide Web Consortium, called WAI-ARIA. These documents basically set out the ways in which developers should add metadata to HTML for improved accessibility.

2. Progressive Enhancement

screenshot

Progressive enhancement means designing a website in a layered fashion so that everyone can access the most basic functions and users with better bandwidth and advanced browsers can see an enhanced version. Sites built using a strategy of progressive enhancement can be read much more easily by screen reading software, used by people with a range of disabilities.

3. Alternate Content

screenshot

It’s absolutely vital that you provide a text equivalent for non-text content in your site. Images and videos need alt tags, so that people using screen reading software can find out exactly what’s on a page. Links need relevant title tags too.

4. Captions

screenshot

As well as alt tags, images, audio and video clips need captions, so that the visually impaired know exactly what they’re looking at. If you’re uploading videos or podcasts, provide a paragraph of text summarizing its contents, or even better, provide a full transcript. Don’t forget, captions really help with SEO too.

5. Screen Reading Software

screenshot

Most blind and partially sighted people use screen reading software when browsing websites. One of the best ways to make sure that your website is accessible to them is to try using the same software yourself. Turn off your monitor and run the software to find out exactly what your site’s saying to these valuable readers and potential customers. If the software starts spouting gibberish, you know you need to make some changes!

6. Audit

screenshot

No amount of accessibility testing you do yourself can compare to having a real specialist cast their expert eye over your site. There are a number of companies and individuals who will carry out an accessibility audit for you, telling you exactly which changes you need to make.

7. Usability Testing

screenshot

Usability testing is another valuable way to identify potential accessibility problems with your site. Get a group of people with a range of different needs to try your site out for real, navigating around and performing tasks. They’ll be able to tell you in detail about any problems they encounter, lots of which, you’re bound to find, will not be included in WAI-ARIA guidelines.

8. Stylesheets

screenshot

When you’re building or redesigning your site, make sure that your stylesheets permit variable font sizes and never use fixed fonts. You’d be amazed by how many users, from old people to those with slightly poor eyesight, resize their fonts on a regular basis.

9. Font Controls

screenshot

Firefox and Internet Explorer users can enlarge fonts but lots of people are not aware of this and others still are using older browsers that do not have this capability. For them, consider embedding font resizing controls into your site.

10. Consistency

screenshot

Consistency in design from page to page is really important for people who can’t take in a whole page at a glance, and those using screen readers. If you’re site’s consistent, with the same things in the same place on each page, they’ll be able to get to navigate around much more easily. Sighted users often find consistency beneficial too.

11. Text for Navigation

screenshot

Avoid using images for navigation on your site, at all costs. Use text instead. Screen readers can understand it and it’s much easier to resize. If your navigation controls can’t be enlarged, make sure they’re written in a clear font, at least 16 point in size.

12. Colors

screenshot

Using different colors in websites is great, but you have to consider how they work together to create a clear image. Foreground and background colors must contrast sufficiently and you can forget about using light-grey text it’s difficult enough for people with 20-20 vision to read. Links must be a different color from the rest of the text on your site, preferably blue and always underlined.

Conclusion

Accessibility is an often overlooked aspect of web design, but it’s something that should be at the core of your design process right from the start when you’re wireframing a layout. Without sounding too self-serving, ensuring that your website meets the standard for accessibility means one thing: more happy customers. And you know what that means!

Use the comments below to tell us if you agree with the tips above and how you’ve made your site more accessible.

Comments & Discussion

36 Comments

  • http://www.superdwayne.co.uk Dwayne Paisley-Marshall

    This is such an awesome list.

  • http://www.thewebmastersplace.com Mike

    Very good list. Bookmarked. Thank you.

  • http://balgle.designerteam.info/ Beth McLain

    Interesting Post.. Definitely Worth The read.. Thanks for sharing these tips.

  • http://www.katefosson.com Kate Fosson

    Great tips! I like the idea of embedding font resizing controls, especially if the target audience is more likely to have poor vision.

  • http://gotokindle.blogspot.com redclick

    Thanks I like idea for making my website.

  • http://www.wongpk.com wong

    Good list… I always missed a few points there :P But, you did not title your images alt nicely (I’m browsing through Opera Mini, image off).

  • http://www.ThoughtShotConsulting.com Karrie Kohlhaas

    Useful stuff. I’ll share this with my peeps on FB and Twitter an probably on my blog too! Thanks!

  • http://creativenuts.com Creative Nuts

    Nice post, thanks for tips.

  • http://www.dristal.com daksh

    Nice and very useful post. thanks for your tips. Bookmarked!!

  • http://lorimazzola.blogspot.com/ Lori E. Mazzola

    This is great advice! :)

  • Pingback: 12 способов увеличить доступность вашего сайта > Mannodesign.com()

  • http://ogidesigns.net Olivia Gresham

    Thanks for the advice, I’ve learned something new, this will definately be delicioused.

  • http://www.onlinehotel.com.br Jack

    I do agree that acessibility is a very serious issue.

  • http://klcesarz.wordpress.com Kevin Cesarz

    Great list and points, especially captions. People usually shrug when I suggest alt text and captions for audio, video, etc. Also, you are correct: “Don’t forget, captions really help with SEO too.”

  • Pingback: 7 Articles That Got My Attention This Week: « T. Cordon's Blog()

  • Pingback: Weekly round-up: 15 must read development, design and blogging articles - Web Development Blog()

  • http://www.rajibroy.me Rajib Roy

    It is a good article.

  • http://techgrowthglobal.com Omar Paulo

    Thanks for this. I dugg and retweeted this. :-)

  • http://webylife.com Nikunj

    Nice Information that I will put to use

  • http://keralatract.webs.com JINSON XAVIER

    verry good

  • http://www.thecowboyshoponline.com Amanda

    Can anyone tell me someone trustworthy who handles doing accessibility audits as mentioned in this article? I would love to have that done to our website.
    Thanks

  • http://dezinews.com umer

    This is very neat and detailed. Expect more from you! :D

  • http://www.jusudesigns.com Alison Wetton

    Good post and worth noting by all website designers.

  • Kerry Webb

    Minor correction: it wasn’t the IOC that was sued in 2000, it was SOCOG, the Sydney Organising Committee for the Olympic Games. Different mob altogether.

    Apart from that, a good overview.

  • http://www.tintedpixel.com tintedPixel

    degradable JavaScript anyone?

  • http://eddiesdesigns.com Eddie Gear

    A very informative and well written article. Thanks.

  • san

    what kind of font are you using here?? i can’t read jack even though I’m using the latest google chrome.. why don’t you fix your font to Arial or Verdana before giving design advice to others.. sorry for being rude but seeing this is a design article with such a poor choice of font i can only react this way.. btw in case you don’t know what i’m talking about, here is what i’m seeing: http://i.imgur.com/Fa5Eh.png

  • http://www.brettwidmann.com Brett Widmann

    This is a great post! All of these tips are very important to keep in mind while building and maintaining a site.

  • http://thisone your mum

    Hmm, I am guessing copy and paste here.

    This is a website from the Uk – apparently – and yet you have spelt colour wrong, note it has a u in between the o and the r.

    Sort it out, cheat!!!

  • http://thecomptonfamilyonline.com/UCDC/index.php?action=profile;u=2210 Shavonne Blackhurst

    I’d be inclined to cut a deal with you one this subject. Which is not something I typically do! I enjoy reading a post that will make people think. Also, thanks for allowing me to comment!

  • http://www.elite-web.co.uk Web design Manchester

    It is a very good move by W3C. This also will enhance the website’s search engine visibility.

  • Pingback: Tips for a More Accessible Website | Learn for Earn()

  • http://www.slimming-products.net slimming products

    I like it very much and which you shared the info in this post is very useful. Thanks for sharing a wonderful post. I found this post while surfing the web.Thanks for sharing this article.

  • http://www.webdesigners.nl/ Ecommerce website design

    Great Post, I bookmarked your page for my future use.
    I will follow all these steps for a better website.

  • http://www.astraglaxo.com TA-65

    When such a fleeting tear, code becomes outdated or square meat servers, you hand hog the same stag, it offers widespread clarity while rendering and inbound passage.

  • http://www.tgc-anaheim.com/index.php?route=product/category&path=198 水着販売

    Thank you for the information that provided.

Subscribe

Membership
About the Author