![[]](bvgraphics/anybrowser3.gif){kind=small}
Last Modified March 25, 1998
Introduction |
Contents |
Key Terms |
Design Elements
Design Testing and Considerations | 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.
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.
I don't have a lot of information right now on graphic web editors and which ones are good at creating accessible web sites. If you can give me some information on which tools are good and which should be avoided, please email me at campaign at anybrowser.org and let me know.
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 email me at campaign at anybrowser.org and let me know.
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.
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 is a full fledged web design tool with many useful features, including web page validation.
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 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.
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. Some site management tools which may be worth looking at are:
CometPage can be used as either a preprocessor, or in conjunction with a server plugin (for MacOS, UNIX, or Windows NT) which will process macros on the fly (allowing you to do such things as serving up different sections of code for different browsers). It allows you to setup templates, macros, and variables, which can greatly speed design and updating of web pages. It's available in standalone form, or as a plugin to BBEdit.
pop!site can be used as either a preprocessor or in conjunction with a Windows 95 or NT server plugin.
There are quite a few cross platform preprocessors , such as make, htmlpp, and others, and server side scripts/plugins such as PHP and Livewire available as well.
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 ©). There are quite a few validators and linters listed at Yahoo. In addition, here are a couple of the more useful web based ones:
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 email me at campaign at anybrowser.org and let me know.
ImageMapper supports ALT attributes in images and also will create a text toolbar for non graphics users.
Accessible Site Design Guide:
Introduction |
Contents |
Key Terms |
Design Elements
Design Testing and Considerations |
Accessible Design Tools