HTML

Many aspects of basic HTML coding require accessibility considerations, including text formatting, links, colours, images, imagemaps and tables. HTML 4.0, although not yet fully supported by all browsers, provides some significant accessibility improvements.

Most of these are simple to create or apply using Dreamweaver or other web editors, while some elements require tweaking of the code for full accessibility. Go to Using Dreamweaver for issues particularly relating to that software. A tutorial on creating accessible sites using FrontPage is available at: http://www.webaim.org/howto/frontpage.php

Go to the next page for more advanced HTML functions - forms, frames, DHTML and dynamic web pages.

Text formatting

CSS (cascading style sheets)
are recommended to be used in formatting text, as this prevents the misuse of structural elements for stylistic reasons (eg heading tags to enlarge text), and also reduces the use of non-functional elements (eg invisible spacer graphics, non-breaking spaces) for layout control.

CSS permits users to set their browser to override author styles, allowing users to adjust font size, colour etc to enhance legibility. CSS also supports 'aural style sheets', which specify how a document will sound when rendered as speech. The CSS data should preferably be included in the page information rather than in a separate document.

CSS is, however, accessible only by more recent browsers, and even then the implementation is not consistent (Netscape 4.x has particular problems). The W3C Checklist recommends that documents should be organised so that they will still be accessible if style sheets are turned off or not supported.

See http://css.nu/pointers/bugs.html for details of some documented bugs in particular browsers when using some CSS functions.

CSS stylesheets can be created in Dreamweaver - Guidelines for Accessible Online Courses (link from EDTeC website) shows how.

An excellent overview on the use of CSS is at: http://www.zeldman.com/askdrweb/index.html.

Fonts
The default settings for font, size, colour etc will display the settings of the user's browser - in most cases that is the browser's default settings, as most users do not override these settings. If you would like to specify font attributes, the following recommendations apply:

Size -
For the ability to allow users to enlarge fonts in the browser, it is recommended to specify 'em' or '%' for font size - (see more information about resizing fonts) - however this is inconsistently implemented between browsers, and specifying 'pixel' size provides the most designer control over font size. This can still be overridden in the browser by turning off style sheets. Another option is to not specify a font size, allowing the users browser to use default sizes.

Font face -
It has been suggested by research that a sans-serif font is the most legible on screen (as opposed to print where research suggests that a serif font is most legible). In either case, it is recommended to use a font that has been designed for screen use - the most common of these is 'Verdana' sans-serif font, or 'Georgia' serif font, which are now standard system fonts on both Windows and Mac. It is possible to specify a range of fonts that the browser can use when the preferred font is not available (eg Verdana, Arial, Helvetica, Sans-serif), and WYSIWYG editors will prompt you to select from a range of options. It is recommended, as previously discussed, to make these settings in the style sheets, rather than within the HTML.

Logical rather than physical formatting tags -
Logical tags have a descriptive aspect (eg heading, strong, blockquote, list) as opposed to physical tags which simply describe physical attributes (eg bold, italic, underline, font colour).

Some previously standard HTML elements are now 'deprecated', in that they have been replaced with more useful alternatives. It is advisable to avoid using deprecated tags. W3C advises:

In general, authors should use style sheets to achieve stylistic and formatting effects rather than HTML presentational attributes. HTML presentational attributes have been deprecated when style sheet alternatives exist.

In Dreamweaver, text styles (such as 'strong') which are not available as a button in the properties window may be accessed from the 'text' menu. See HTML:HTML 4.0, below, for more information about deprecated elements.

Do not use text to represent graphical information
(eg AASCI art, or using a row of asterisks as a section break). Graphical information should be represented by images with appropriate 'ALT' tags. Use <hr> (horizontal rule) tags for visual dividers.

Links

Use default link colours
whenever possible to promote consistency of navigation protocols.

Be explicit in linked text
(eg mailto:myname@mydomain.com rather than "contact me", description of link target rather than "click here", full URL when linking to external site so that the reference will be useful when the page is printed).

Make links keyboard accessible
Most browsers allow navigation through links using the 'tab' key. It may be useful to use the 'tabindex' element to control the order in which links are tabbed through if the layout of links does not provide an intuitive order (go to this page to see how). Some navigational elements, such as dropdown menus, javascript rollovers and server-side imagemaps are not accessible to keyboard or to other assistive technologies like screen readers - these elements, if used, should be supplemented by text links.

Allow skipping of links
Where navigational links are repeated on many pages, provide a links to allow users to skip the repeated links, rather than have to tab or read through them all each time.

Colours

Use adequate contrast between text and background colours
both on the page and within graphics. Check the page in black and white - this gives an idea not only of how the page may look to a colour-blind user, but also how it will appear when printed. Dark text on light background is recommended, rather than light on dark which is harder to read and may not print out well.

The use of 'websafe' colours
which will display without dithering on a 256 colour display is not as critical now that most users have greater colour depth available - it is still worth using the websafe colour palette in areas where text legibility may be affected by dithering, eg in backgrounds, on button graphics, in table cells etc.

The use of colour to differentiate information (as in table cells) should be avoided, as it will not translate to a text-only or text-to-speech browser.

This chart shows how web colours appear to colourblind viewers, or go to http://www.vischeck.com to check individual graphics or web pages.

Images

Use of graphics should be minimised
to improve download time - ensure that any use of graphics is strictly necessary, and that they are optimised for web use (eg JPEGs are appropriately compressed, GIFs contain minimal colour palette). Always specify image dimensions in order to facilitate faster download of page (this is automatic in most web page editors).

All images should be accompanied by descriptive 'ALT' tags.
Graphics containing text (eg navigation buttons) should have the text spelt out in the alt tag, while photos and illustrations should have a descriptive caption. Large blocks of text should not be produced as graphics, while anything requiring a description longer than about eight words (eg charts and other graphics containing information or data) should link to a page containing the description, linked from a 'D' or 'Description' link adjacent to the image.

Graphics used for design and layout purposes that are decorative or spacer graphics should be accompanied by ALT tags which are empty or contain a single space (eg <ALT=""> or <ALT=" ">), which allows screen readers to skip over the graphic. An empty tag can be difficult to apply in a WYSIWYG editor, so a single space may be the easiest to apply, with the disadvantage that 'tool tips' in MS Explorer will then display an empty box when the cursor rests on the graphic, which may be distracting.

The use of style sheets for layout can minimise the necessity for using spacer graphics, and this is recommended by W3C, however layout styles ('layers' in Dreamweaver) do not yet behave consistently between browsers, with notoriously poor support in Netscape 4.x, so the use of spacer graphics and layout tables is likely to be prevalent for some time yet.

Guidelines for Accessible Online Courses (link from EDTeC website) shows how to apply ALT text to an image using Dreamweaver.

Imagemaps

Where image-maps are used they should always be client-side
(ie the imagemap data is located within the HTML page), and be accompanied by text-based links. For optimum acccessibility, it is preferable where such images are to be used to slice them into separate images and link them independently.

Go to http://www.webaim.org/howto/graphics2a for more information about 'ALT' tags, descriptions and imagemaps.

Tables

When using tables for presentation of tabular data rather than for layout purposes:
Use the TABLE element in HTML to mark up tabular information to identify headers, data cells etc. HTML 4.0 permits the identification of column and row headers, as well as 'name' (supported by Dreamweaver 4) and 'summary' (not supported by Dreamweaver 4) elements which can describe the content of the table. For complex tables, table cells can also be associated with their approriate header. With this markup in place, users of screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.

HTML 4.0 also allows you to explicitly link header information to columns and rows using the "headers" attribute of the <TD> and <TH> elements. This needs to be done in the code, it is not supported by Dreamweaver or other WYSIWYG editors.

For more in formation on how to do this, see: http://www.webaim.org/tutorials/tables.
Here is an example of accessible vs non-accessible table.

When using tables for layout purposes:
Use the 'name' and 'summary' elements to indicate the purpose of the table - eg <table width="100%" name="navigation" summary="layout table contains navigation links for Accessibility site">.
Always use alt tags on spacer and decorative graphics (see HTML:Images above).

More information can be found at http://www.webaim.org/howto/tables.

Guidelines for Accessible Online Courses (link from EDTeC website) shows how to add a header tag to cells using Dreamweaver.

If you use tables, test them in a text-only browser.

HTML4.0

HTML 4.0, developed and recommended by WAI/W3C, provides many accessibility benefits over HTML 3. These include the use of CSS (see 'HTML: Text formatting') and additional options for alternate content, such as:

• 'title' attribute to give a short description of an image, link etc
• a 'longdesc' attribute which designates an external document to give a long description of an image etc
• CAPTION element and 'summary' attribute to describe tables
• NOFRAMES and NOSCRIPT elements to enable alternative content
• OBJECT element, specifying rich alternate content to replace inaccessible elements such as applets, images, animations etc.

A full description of HTML4.0 elements which improve accessibility can be found at http://www.w3.org/WAI/References/HTML4-access.

HTML 4.0 'deprecates' some HTML elements - that is they have been outdated by new elements with improved functionality. Here is a list of new, deprecated and outdated elements. Perhaps the most significant of these is the deprecation of the FONT tag in favour of using style sheets to set font attributes.

HTML 4.0 is supported by the most recent versions of major browsers (Jul 2001), but if you wish your site to be accessible to older browser software, it should not be dependent on HTML 4.0 elements.

Your web pages should specify HTML 4.0 format for the purposes of validation (see 'Formatting your Dreamweaver template' for more info), however as not all HTML 4.0 elements are yet supported by all browsers, this is not foolproof in determining accessibility.

For a fully detailed description of HTML and accessibility, see the WAI document 'HTML Techniques for Web Content Accessibility' (http://www.w3.org/TR/WCAG10-HTML-TECHS/).

Go to the next page for forms, frames, DHTML and dynamic web pages.