Tips

Some tips for building accessible HTML pages.

Colors of the layout

Regarding the layout, there must be a good contrast between the text and the website's background. Colorblind individuals will have difficulty seeing dark red text on a light pink background, for example.

The ideal is for the text to be close to black and the background close to white, without many variations. The site needs to be easily navigable, even in black and white.

Links cannot be defined solely by different colors from the rest of the text. Colorblind individuals will not distinguish links in red within a paragraph of black text. Ideally, the links should be underlined or bold.

The structure of the site should be relatively simple, allowing for a smooth top-to-bottom reading of the text, without many difficulties in accessing the content.

Images

The ALT attribute in html allows an image to be described, even for those who cannot see it. It can be included in any <img> tag:

<img src="LumisPortal.jpg" alt="LumisXP" />

Images used solely for spacing or only to enhance the layout should not contain text in ALT: <img src="pix.gif" alt=" " />

To pass accessibility validators, the ALT must genuinely have a value of an empty space. That is, it must be alt= " " and not alt= "".

Because of this, to ensure that images with empty ALT do not show an empty box when hovering over them using Internet Explorer, you must add a TITLE, also with an empty value:<img src="Image.gif" alt= "" title= "" />

The description of images needs to be detailed, such as in research graphs, for example. Therefore, it is advisable to use the LONGDESC attribute. However, this attribute is not supported by many browsers. For more information, consult: http://wats.ca/resources/longdesc/31

Font Sizes

The fonts of an accessible site cannot be fixed, allowing browsers options to change them easily.

Currently, unlike other modern browsers, Internet Explorer 6 does not change to font sizes defined in pixels (px). In relation to other measures (pt, em, etc...), all can be changed by all browsers.

The CSS tag from Yahoo probably defines the best font size to be used:

body{font:84%/1.2em arial,sans-serif;direction:ltr}

This tag defines that all fonts on the site will have a size of 84%; with a line height of 1.2em; and left-to-right direction (default).

If it is necessary to create another font size within the site, just create alternative style sheets (CSS) in which the classes defining the fonts determine smaller or larger sizes than the default (probably it won’t make sense to have classes with smaller font sizes).

For more information, please refer to http://www.tableless.com.br/estudo/switcher/

Forms

Forms need to have titles for each data entry field associated with their respective <INPUT> tags. This is done through <LABEL> tags, which are invisible to visual browsers, but play an important role in accessible forms:

Note that the FOR attribute must contain the same value as the ID of the respective <INPUT> tag to which the text is associated. The <INPUT> image tags should also have texts in ALT, just like normal images:

<input type="image" name="submit" src="button.gif" alt="Submit" />.

Scripts

Scripts should be followed by <NOSCRIPT> tags, even if just to contain no value. However, in scripts with document.write that render information, it is advisable to include at least a description of what they would be in the <NOSCRIPT> tag:

Not all scripts appear in the code within <SCRIPT> tags, this mainly applies to links, such as those that use window.open. Below is an example of how to use links with window.open, without making them inaccessible for browsers that do not have javascript enabled:

This way, even browsers without javascript enabled will be able to open the link, as they will ignore the ONCLICK attribute, but not the HREF attribute.

Table

The tags <table> will have at least one sequence <tr><td></td></tr>.