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.

Graphical

When selecting a graphical editor, 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 (FrontPage for example is a major culprit for this), that creates pages based on standards (and preferably allows you to specify which standards you are targetting), 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. Also, I recommend against using the graphical editors distributed by the major browser vendors (Netscape's Composer and Microsoft's FrontPage) as they tend to have a bias towards coding for their own browser. If you can give me some information on which tools are good and which should be avoided, please let me know. 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.

Amaya (W3C, Windows and Unix)

"Amaya is the name of W3C's own test-bed browser/authoring tool and is used to demonstrate and test many of the new developments in Web protocols and data formats. Given the very fast moving nature of Web technology, Amaya has a central role to play. It is versatile and extensible - new features can be easily added - and is available on both Unix and Windows '95/NT platforms. Amaya is a complete web browsing and authoring environment and comes equipped with a WYSIWYG style of interface, similar to that of the most popular commercial browsers. With such an interface, users do not need to know the HTML or CSS languages."

Adobe GoLive (Adobe/GoLive, Mac and Windows)

Adobe GoLive is a complete web design tool and site management package. Some of the features which make it useful for accessible site design are: the ability to target for specified HTML or browser versions, the fairly clean and valid code it generally produces, the HTML checker, the included scripts (for Javascript and DHTML) which are designed to degrade appropriately and work in multiple browser versions, and the quality text editor included (and the ability to also work in the editor of your choice).

Macromedia Dreamweaver (Macromedia, Mac and Windows)

Dreamweaver is a graphical editor which also includes site management features, and first class text editors (HomeSite/BBEdit) appropriate for each platform it's available for. It won't change your HTML unless you ask it to.

Text-Based

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. Some editors provide functionality which make it easier to produce or test for accessibility. Here are a few. If you know of an editor which provides features which make it good for accessible site design, please contact me and let me know.

BBEdit (Bare Bones Software, MacOS)

BBEdit is a basic text editor with powerful features and a full suite of HTML tools. It has a robust plug-in architecture, with many useful web design plugins available, multi-file search and replace (with regular expression support), and many other useful features. The lite version is free, the pro version comes with more useful plugins, an HTML checker, link checker, HTML aware spell checker, and other useful features.

HotDog (Sausage Software, Windows, description courtesy of Sausage Software)

As you type, HotDog provides continual feedback on the HTML code you are using. This feedback takes the form of tool tips which explain what each tag and attribute does.

Unfortunately the several different browsers on the market each conform to different HTML standards. While all browsers support the bulk of the HTML language, they all add extra functionality of their own. For example, Netscape has Netscape Extensions and Microsoft have their own extensions as well.

A professional web designer has to make sure their web page looks great under any browser. The only way they can insure this is by knowing which browsers support the different tags and attributes they are using. HotDog has many ways of giving the user this information on the fly. Holding down the CTRL key and moving the mouse over any tag or attribute reveals for what HTML specification the tag or attribute is defined.

A key part of HotDog's ability to provide this syntax information to users is the HTML Property Sheet. The HTML Property Sheet is a panel that sits next your document in HotDog. This panel lists all the known attributes for the tag you are editing. This list of attributes is usually ordered by what browsers support them.

For example, as soon as you type <TABLE> in HotDog, the HTML Property Sheets has listed all the attributes that can be used with the Table tag, and it has listed the attributes by which browsers support them. This enables professional web designers to make informed choices about the HTML they are creating.

The Syntax Manager can be told to only recognize any HTML specification you choose, in particular, the HTML 3.2 specification which nearly all browsers support in its entirety. By using the HTML 3.2 specification only you can be sure your are using HTML code that any browser can display. This would mean that as soon as type a tag or attribute that is not part of the HTML 3.2 specification, it would be colored red to indicate that it might not be recognized by some browsers.

HomeSite (Allaire Corp., Windows)

HomeSite is a full fledged web design tool with many useful features, including web page validation.

NoteTab (Fookes Software, Windows)

NoteTab Pro is a leading-edge text editor and HTML coding tool, and an ideal Notepad replacement. Winner of top shareware industry awards since 1998, this elegant application does it all: you can handle multiple large files with a simple tabbed interface, use a spell-checker and thesaurus, format text, use multiple undo, and bookmark documents. You can build templates, use powerful system-wide searches, and do global multi-line replacements.

Its Clipbook feature lets you create and organize clips, which can range from text macros to complete mini-applications, using a simple scripting language with enough features to satisfy any power user; a bunch of handy clip libraries is included.

Web authors will love the HTML clip library, just one of a load of features that make NoteTab a great code-based HTML editor. Other gems include text-to-HTML conversion, tag stripping, and tools for adding links and color codes.

Arachnophilia (Windows, Java)

Arachnophilia's purpose is to create Web pages. It does this in one of two general ways. The easy way is to drop a Rich Text Format (RTF) document onto the Arachnophilia program window and watch Arachnophilia turn it into a web page for you. The not so easy way is to write the HTML code yourself, which, although more work, produces the most professional-looking results. Arachnophilia will help you create Web pages, no matter what method you choose. And, by just typing, you can create new Arachnophilia commands, even entire toolbars, for HTML tags the author hasn't thought of -- Arachnophilia's suite of commands is entirely under your control. You can load hundreds of documents at once (memory permitting) and search through them at once for particular words. You can preview your work on up to six browsers, thus assuring your pages will look good no matter what browser your visitors own.

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.

Preprocessors

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 server side scripts/plugins such as PHP and Livewire available as well.

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, including Bare Bones Software's BBEdit Pro, Allaire's HomeSite, and Sausage Software's HotDog. 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 (i.e. Netscape 4 no longer allows you to forget ; in entities, like &copy;). There are quite a few validators and linters listed at Yahoo. In addition, here are a couple of the more useful web based ones:

  • W3C Validation Service (HTML 4.0 validator provided by the HTML standards source)
  • Weblint (a very popular Perl based linter, which can be downloaded for use on most platforms, and is used in tandem with web based validators)
  • CSSCheck, a Cascading Style Sheets Lint
  • Bobby (checks web pages for common accessibility problems)
  • HTML Tidy (not really a checker- it will take a page, cleans up the bad HTML, and give you suggestions on how to improve page accessibility)

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 in HTML 3.2 and up, 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. If you know of an image mapping tool or other program that is good for making accessible sites, please let me know.

MapEdit (Boutell.Com, Inc., Windows, MacOS, Linux, Java)

MapEdit is imagemap editing software. MapEdit is a graphical editor that allows the user to make clickable imagemaps for the World Wide Web. MapEdit allows you to load your image into a scrollable, resizable window and then draw polygons, circles and rectangles on top of it, specifiying a URL for each. It also allows you to go back and delete these hotspots, set a default URL for clicks outside the hot area and allows you to associate comments or alternate text to be show to users of non-graphical browsers. With Mapedit 2.63 and the latest web browsers, you can use client-side imagemaps, which reside in your HTML page. Mapedit will also create server-side maps for backwards compatibility with old browsers.