Accessible Design Tools

One of the most important things about designing a web site is using the right tools. You can make a website with many different types of tools, but if want to make your website accessible to all browsers, it's very important to use tools which help you, rather than interfere with your work. Here are some tools that you may find useful in accessible web design.

Web Site Editors

When it comes to designing web sites for accessibility, it is almost always best to use a text-based editor rather than a graphical editor. There are cases in which a graphical editor may be necessary, but if you can use a text-based editor, you have a lot more control over the accessibility of your site. If your web host offers a web interface for creating web pages it would be a good idea to avoid it- most of those tend to generate pretty poor quality HTML. I'm no longer going to recommend specific editors as the best options are always changing and there are a lot more quality tools available than there used to be.


When selecting a graphical editor (sometimes referred to as WYSIWYG), take care to select one which does a good job of creating accessible sites. In general, graphical editors tend to be fairly bad at this, mainly due to their focus on hacks to achieve specific presentation in the more popular browsers and their removal of control from the creator of the page. Be especially cautious to choose an editor which doesn't rewrite your code without your permission, that creates pages based on standards, and that allows you to take advantage of the standard accessibility features of HTML, such as ALT and NOFRAMES.

Do not assume that an editor will create accessible code just because it is creating HTML code automatically. Make sure to run your pages through a validator at least the first times even if the program has a built in checker, since the checker that is built in may not be thorough, and you can't really tell without running a comparison check. If you must use a graphical editor which produces poor HTML, I highly recommend using HTML Tidy to clean it up before posting or editing it by hand.


Text-based editors are generally best for making accessible sites, because they give you a lot more control over the code they use. In a text-based editor, a web site is as accessible as you make it. You can create a web page in any text editor, but ideally you want to find one which also has features or plugins which are oriented towards web site creation. Some editors provide functionality which make it easier to produce or test for accessibility.

Site Management

Site management tools, such as preprocessors and server side scripting, can help a great deal in making accessible sites (and just in general). For instance, if you want to provide two versions of a site, you can manually maintain both versions, which can lead to a lot of errors or with one section of the site not being updated regularly, or you can automate the process, and make it easy to update repeated sections of text, toolbars, etc. throughout the entire site.


Using a preprocessor allows you to automate the information in your pages with macros and variables, and allows you to publish a version of your site with those macros and variables replaced with the appropriate HTML code so that no server plugin or script is required to access the information. The advantages to this approach over server side scripting are that pages load faster, since no additional work is required by the server, and no special server software is required, so you can use a preprocessor regardless of your server setup. The disadvantages to this approach are that you can't use some dynamic information in your macros that you can with server side plugins/scripts, such as the date the visitor is viewing the page, code which only shows to viewers at certain sites, etc, and that maintaining two versions of your pages could get you into trouble in case you edit the published version instead of the pre-published version.

Server Side Plugins/Scripts

Server side plugins and scripts allow you to embed macros, variables, and dynamic information in your HTML pages that will be evaluated as the pages are being served to your visitors. The advantages of this approach are that you can use dynamic information on your pages, such as the current time, the browser the visitor is using, etc., and that there is only one verison of your pages to maintain. The disadvantages are that you need to have support on your server for the script or plugin you are using, there can be security problems with software of this type, and the additional processing the server must do can slow the loading of your pages.

What Tools to Use

Whether you should use a preprocessor, a server side plugin/script, or some combination of the two is dependent upon the needs of your site. Many tools can function both as preprocessors and as server side plugins or scripts. There are quite a few cross platform preprocessors and server side scripts/plugins available as well. It is also possible to use preprocessors for your CSS such as Compass.

Web Site Testing

Testing your web site for errors is very important. The two most common types of HTML testers are validators and linters. The main difference between a validator and a linter is that a validator checks a page against a published HTML specification for technical errors, whereas a linter checks a page for commonly made mistakes. It is often a good idea to use both as they can sometimes find different types of problems.

Validators and/or linters are included with quite a few good quality HTML editors. If your software doesn't include a validator or at least some sort of HTML checker, it is a very good idea to find one to use. Don't assume that your editor creates valid code. This is very often not the case. Simply testing your pages in your favorite browser or even a couple browsers won't really tell you if you've got some sort of error in your pages that may not be corrected for in another browser, or in a new version of your current browser. Here are a couple of the more useful web based ones:

Graphics Tools

Image Map Editors

When creating image maps for web sites, there are special accessibility issues that should be considered. Often there is a way to avoid the need for an image map, but if you do need to use them on your site, then you should make sure to use a tool which will make your image maps more accessible. First of all, make sure you're using an image map editor which will allow you to add ALT attributes to your AREA tags, since this is required by the HTML spec, and will allow some browsers to navigate your image map without graphics in this manner. In addition, some image map editors have additional functionality, such as generating a text toolbar for the page based upon the image map links to be used for greater accessibility.