Last Modified
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.
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.
"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 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).
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 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@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. Note: CometPage is no longer being officially supported.
Interaction is a Mac web server companion that makes web sites dynamic social places that adapt to the visitor. It support XML and style sheets, which are processed into HTML at serving time. Services such as threaded forums and chat rooms comes as optional components to the application, and are designed to work with all standard browsers included WebTV and text-only browsers.
XPublish is the first web publishing system for Mac that is based on XML. It supports a website that is published using extensible markup or XML-extended HTML. The application processes XML into standard HTML at publishing time based on Cascading Style Sheets. This offers many of the advantages of one-source publishing, but without the overhead, expense and complexity of an SGML system. XPublish makes publishing of middle-sized and large websites more efficient and flexible, allowing the same content to be published in many formats without manual recoding for optimal accessibility.
Cascade is the first comprehensive Cascading Style Sheets editor. It is used to design the look & feel of websites. Cascading Style Sheets (CSS) offers many advantages for more accessible web pages, included that the presentation can be modified to the preferences of the reader or automatically adapted to various displays or media. Cascade has the ability to emulate CSS so that parts of the design also can take effect for older browsers that doesn't support style sheets.
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 let me know.
ImageMapper supports ALT attributes in images and also will create a text toolbar for non graphics users.