A Beginner’s Guide to Web Accessibility: 21 Ways to Make Your Site More Web Accessible

Usability is a term familiar to most web users, even occasionally implemented by webmasters. Web accessibility however, is an oddity among the web’s hundred million some websites. Learn here how you can make your website more adaptable to your visitors’ possible needs and disabilities.

Web accessibility can be regarded as a branch of web usability but actually accessibility requirements to a site are more stringent than usability requirements. This is quite logical and it stems from the functions web accessibility and web usability have - i.e. while the function of web usability is to make the site easy to use to ordinary users, the goal of web accessibility is to make sites usable by people with temporary or permanent disabilities, which prevent them from using the web the way everybody else does.

What Is Web Accessibility?

There are many sources of information about what you need to do (and not do) in order to meet web accessibility requirements. One of the definitive guides about web accessibility is the "Web Content Accessibility Guidelines 1.0" by W3C. You may also want to check its appendix: Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0 by the W3C, which is shorter and can be used for quick checks if a site is accessible or not. The latest version is WCAG 2.0 and even though it is still relatively new and not widely adopted yet, you should get familiar with it as well.

The topic of web accessibility is a vast one and we couldn't cover it to the last detail. However, there are many small steps you can take in the web accessibility direction and here are some of them.

#1. Avoid using tables for layout

Many designers use tables for layout, while others consider this a bad practice. We are not going to argue if design with or without tables is better because each of them has its pros and cons but as far as web accessibility is concerned, tables are bad. Tables are non-linear and this creates a lot of problems for the devices that parse the page.

illustration from hotdesign.com

#2. Don't Use Deprecated Tags

Deprecated tags might not always be suppirted by all web browsers, thus not guaranteeing that your site is displayed correctly. Much like any language on Earth, HTML is evolving. With W3C leading the front, web development is going towards full separation between presentation and style:HTML formatting tags vs. CSS.

Deprecated tags are simply HMTL tags that are in the risk group of going obsolete. They shoud therefore not be used. Here is an extensive list of deprecated HTML tags.

#3. Write Simple

It is a known fact that the same text is more difficult to comprehend when you are listening to it than when you are reading it. For the visually impaired and audio dependent, the written language is thus vital. Avoid using long sentences and paragraphs and words that are difficult to understand.

#4. Think Navigation

When you design for visually impaired individuals, a clear, visible and understandable navigation path is very important. The structure and names of each included navigation link is thus as important as the design.

Make sure you spend some considerable time figuring out what content your visitors are looking for and then via the navigation make it super easy to reach it. Use larger font sizes for the menu items and place your link menus clearly visible. Also skip flash to not only confuse the visually impaired, but to limit search engine indexing as well.

#5. Consider Keyboard Shortcuts

Keyboard shortcuts ease navigation without the mouse. To implement keyboard accessibility on your site, here's some more information on the html-tag accesskey.

#6. Use relative font sizes

Relative font sizes give users more control over the size of the text they will display in their browsers which is why you should use relative font sizes whenever you can. Check out this great tutorial for relative font sizes by Maxdesign.com.

#7. Use textual descriptions for nontext elements

Any non-text element except spacer images and design graphics should have textual descriptions. This could be done in the <alt> tag or with a caption.

#8. Use Sitemaps

Sitemaps are a necessity in any case but when web accessibility is concerned, they are vital. Sitemaps ease navigation incredibly and you must always include them in your sites. WordPress users are recommended the Google XML Sitemaps plug-in.

#9. Don't use colors to convey information

It is not only the color blind who won't be able to read pages where color is used to convey information. Use colors as decoration, not as a way to communicate with the user.

#10. Use high contrast color combinations

High contrast color combinations are easier to read even by people without any visual impairment, so there is no reason to put for example light gray text on a white background.

#11. Don't use flickering effects

It is not only ads and animations where your head spins because of all the flickering effects. Flickering is not only bad for people with visual disabilities but it is also irritating for many others, so there is no reason to use it in your designs.

#12. Death to Frames

Frames are so last century! Even if frames were not a web accessibility sin, there is no point in using them. In case you absolutely have to use frames, provide an alternative noframes version for the modern user as well as for the impaired.

#13. Scripts and noscript versions

It is true that scripts can add a lot of functionality to a page but when due to various disabilities users can't take advantage of this advanced functionality, scripts make no sense. Additionally, in many situations scripts simply can't be executed and this is why you absolutely must take care that the noscript version of your pages has the same functionality as the scripted one.

#14. Avoid using automatic redirects

Automatic redirects are disscussable because when you use them, it is quite possible that the user might have not finished reading the text and when he or she is redirected, this makes it more difficult for him or her to follow. Also, for slideshows, presentations, and similar stuff, don't use automatic forwarding to the next slide.

#15. Use simple numbering for lists

Similarly to tables, long lists should be broken down in smaller chunks. You need to be especially careful with nested lists - nested lists 5 levels and deeper are difficult to follow even by academicians, not to mention by people with visual limitations.

#16. Add a Skip-to-Main-Content link

For site visitors who do not navigate via the mouse but the keyboard primarily, a link to help them jump to your page's main content is often appreciated. Remember to make this link as visible as possible, learn how to create a "skip navigation to content link" here.

#17. Label form elements

When form elements have labels, this makes them more user-friendly but for users with disabilities this is more than friendly - it is vital.

#18. Put the main content near the top

The top of the page is a crowded space because all important stuff (and ads) go there but since users with disabilities might not be able and/or willing to scroll down to see what's there on the page, it is even more important to put the most important things near the top of the page.

#19. Be consistent in your layout

When you are consistent in your layout, this makes navigation easier. This is especially important for people with disabilities because when navigation is easier, they have less difficulties to access your site.

#20. Define acronyms

Again, this is one more requirement that is more common sense than everything else but since it is formally part of web accessibility standards, we need to mention it. Usually the first use of an acronym is the place where you write it in full but it won't hurt if you write it in full more than once. To define acronyms, use the abbr tag.

#21. Validate your pages against the W3C requirements

Finally, if you want to make sure your pages are web accessible regarding their code, use a validator to check them.

As you see, many of these guidelines are not something extravagant. While there are some requirements that are not present when you design standard sites, many of these web accessibility requirements are just common sense or are simply general design best practices. If you follow them, everybody will benefit from your designs, so even if you are not designing sites especially for people with disabilities, it is not a waste of time to apply them.

Written (Updated 2016-10-10)
Share your thoughts

Rikker,  19 November, 2010

I really like your site <a href=http://www.killerbeeprinting.com>Cheap Brochures Guy</a>. Also, great tips for optimizing a site from this blog.

Cheap Brochure Guy,  19 November, 2010

Good tips. Looks like I have a couple areas of design I could improve in. Thanks!

Atlanta web design,  5 November, 2010

I am working with Atlanta Web Design and your work is really nice.

Web Design Delhi,  6 August, 2010

I think there can be some more additions to the list above. But these are also amazing. Thanks for sharing

Art,  6 July, 2010

Your example for "Skip to main ..." looks like the skip link comes after the nav/menu controls. Doesn't that defeat the purpose?

Collins,  18 February, 2010

Write Simply (vs. Simple)
(if you want to write good)

Thank you for the article!

Kulin,  31 December, 2009

I still sometimes fall in the trap of using Tables instead of CSS. I will now resolve not to use it.


Andrew,  31 December, 2009


Andrew,  30 December, 2009

Good catch WebAxe. I agree. The proper use of heading levels is important.

Using color to convey information isn't necessarily a bad thing. When color is the <strong>only</strong> method of communication - that is bad. You can use different shapes along with color to be accessible and increase usability for all users. For example, a red "X" next to a green "check" makes is clear which is bad and which is good.

Angela,  30 December, 2009

As other comments indicated, some of these miss the mark. Here's a good resource on web accessibility, complete with background info and detailed articles: http://www.webaim.org/intro

Web Axe,  30 December, 2009

One of the biggest issues is missing: implement headings (H1, H2, etc.), and properly.

Michael, great comments!

Derek and Brian, you're avoiding the issue. Relative sizing is required for true web accessibility.

Unclear on #18 (content at top). If you code your site properly, I don't think this really matters.

PS: Your captcha is not accessible!

Brian Franklin,  22 December, 2009

Derek: I agree, I prefer pixels myself :-)

Derek,  18 December, 2009

Very good post - I like that you kept the content clear and simple.

I'd add though, that in many cases it's still preferable to use pixels for type, and attaching a large-size stylesheet. I certainly see the benefit of EMs, but for many cases pixels still give a great deal of control over design without necessarily negatively affecting accessibility.

SunJoo,  14 December, 2009

Thanks for the refreshing one.

Ran Meriaz,  8 December, 2009

Another option is to use Bindows to develop a fully accessible site (as a web application) without any of the limitation listed above.

Brian Franklin,  8 December, 2009

Michael: thanks for the feedback, will look into these remarks.


Michael,  8 December, 2009

Some of these tips are great, some of them are not quite right. 1) Serious designers use CSS instead of tables 5) Access keys conflict with screen readers, which already have their own access keys 7) Alt attributes should be empty for spacer images and other images without real content 13) If scripts had no extra functionality, nobody would use them. 20) To define acronyms, use the abbr tag. A good resource for accessibility is webaim.org

Geoffrey Gordon,  7 December, 2009

Great Post, I think I will compare my website against a few of these to see where I measure up, or don't.

Jay Philips,  7 December, 2009

Awesome tips, thank you for sharing.

Show all related articles..

Overall Best Web Hosts

Buying Guide

Are you finding it difficult to understand what type of hosting you need or which provider to go with? Go through our guide and find the best solution


User Reviews

Make your voice heard! Rate and review your web hosting provider - good or bad, we want to know

Everything has been very stabile and I was very impressed with all the features and extras that were included in the plan.

Bill about iPage

Read iPage Review

Why wait? Get today's best deals now!