An ALT (alternative) attribute is a text based description for a non-text element on a web site. Non-text elements include photos, graphical representations of text (e.g. mathematical equations, symbols), image maps, animations, audio files and video files. ALT attributes serve a number of useful purposes including:

• Improving accessibility for users with slower connections who may choose not to download graphics. ALT text is available immediately so users do not have to wait until images are fully downloaded. This is particularly useful where images link to another part of a site as the ALT attribute allow users to quickly navigate around the site
• Making a site accessible to the visually impaired – as screen reader software applications decipher text only
• Entering well chosen descriptive text for all ALT attributes will improve the functionality and navigation of a web-site as well as helping the web-site with Search Engine ranking (as search engines index words and not images)
• When printing, users may wish to turn off images to save time and ink, so in this case it is useful to provide well described ALT attributes

Ensure that the ALT attribute is the text equivalent of the image (e.g. “Research” and not “blue button”). For images that are purely decorative and contain no information, such as spacers, image bullets, lines and fills, use the null value for the Alt text (Alt=""). This will be ignored by most assistive technologies such as screen readers and avoids the user being bombarded with hundreds of useless descriptions such as "a spacer, a spacer, a blue line, bullet, bullet, bullet...". Note that null alt text has no characters between the quotes.

ALT attributes display as the user holds the mouse over non-text elements. ALT attributes should contain a few words describing the non-text element (approximately a maximum of 60 characters).

The ALT attribute is part of the IMG tag e.g.

<img src="berkeley.gif" alt="Berkeley Lecky Ussher Library" />

Use 'long descriptions' if you need to explain information that is too complex to describe in only a few words.  For example, if you were to display a graph showing population growth in three countries (France, Germany and Spain) from 1995 to 2001, you could use Alt text to give a basic description of the graph, such as: 
" Graph showing population growth in France, Germany and Spain, 1995 to 2001".

However, the information contained in the graph may be quite complex and may therefore require a longer description. It may show individual colour-coded line plots for each country, allowing the user to quickly identify overall trends and make comparisons. This is beyond the capabilities of ALT and in this case, you should use the HTML "Longdesc" tag or a "D" link. 
Both techniques allow users to access a separate, detailed text description of the content.  Longdesc, though part of the HTML specification, is not widely suported by browsers. The alternative "D" link technique involves inserting, beside the image, a link which is presented as a capital "D". The target of this link should be a separate web page which displays the long description in text-only format. Once the user has read this, they can then return to the page with the image.

See the WAI recommended techniques for Providing long descriptions with Longdesc and the "D" link.

Ensure headings are applied consistently throughout a website. Below is example text that would need to be marked-up correctly with Heading Styles before publishing. The correct markup to use is given in parenthesis:

Page Title (Markup as Heading 1)

Introductory text. Ymo esse luptatum ille caecus ingenium eligo, comis nimis. Probo consequat, in odio te augue exerci pneum hendrerit importunus luptatum lucidus virtus humo ulciscor.

Section Heading (Markup as Heading 2)

Text relating to the section heading that may have sub-texts. Magna sino, suscipere duis fatua feugait, veniam at ut quadrum cogo, natu at valde. Macto probo indoles, aliquam mauris comis, augue quadrum accumsan esca.

First Sub-Section Heading (Markup as Heading 3)

Text relating to the first sub-section heading. Vulpes ut paulatim, vindico occuro nostrud praemitto paratus sed aliquip qui genitus in virtus. Nimis capio meus mara ut vero genitus jumentum bis immitto vereor at cui utrum venio.

Second Sub-Section Heading (Markup as Heading 3)

Text relating to the second sub-section heading. Nostrud nibh volutpat nunc, quod duis ne, elit quidne voco blandit minim utrum consequat. Pneum erat accumsan tamen, utrum pneum erat nullus ad magna.

Another Section Heading (Markup as Heading 2)

Text relating to this other section heading. Melior, et distineo sagaciter consequat, iriure utrum, proprius, verto. Suscipit ventosus regula nisl melior damnum nimis ex lobortis accumsan, cogo.

Avoid Skipping Heading Levels

A heading level is the number associated with a Heading. For example a Heading 1 has the heading level of 1. What should be avoided is having a Heading 1 followed by a Heading 3, 4, 5 or 6. A Heading 2 followed by a Heading 4 would be considered skipping a heading level.

Reasons why skipping heading levels should be avoided:

• A document is accessible for those without visual cues
• Styles can be consistently applied throughout a website
• A table of contents can theoretically be created from a well structured document, this is already the case with MS Word documents

It is advisable not to configure such links to open in a new web browser window or tab. You can indicate that the destination is an external web site by including the domain information in brackets at the end of the link e.g. The RTÉ website (rte.ie).

Tables are normally used for two purposes in web design for a) Data Tables and b) Layout (avoid where possible). If you need to create a data table (for example a table with multiple rows and columns that displays statistical information) additional coding is required so that the table is accessible. When using screen readers (e.g. JAWS) table data needs to be read out linearly (e.g. from left to right across the entire page).

When creating a table in Dreamweaver or similiar ensure that accessibility is addressed by including the following:

• Select a Header (this depends on the type of data table you are creating. The most common type would be "Both" i.e. a header for both columns and rows.) The headers will display as bold print. If using Dreamweaver to create a table you need to ensure that the table is given a Column and/or Row Header
• If you decide not to use a caption then you should consider adding the "title" attribute in the code and this will be picked up by a screen reader. If using Dreamweaver, you will need to switch to code view to do this.
• Enter a table summary (this will not display on the webpage but will be picked up by screen readers). A table summary gives a concise description of the content in the table eg. Imperical results of recent survey into why cats are so popular on the internet.

Where you require the use of an online form on your website in order to collect data, there are a number of items to consider. The most important of these considerations is Data Protection - how the information collected by the form will be collected, stored, maintained and if necessary, destroyed. Consult the Data Protection Act of 1988 (http://www.irishstatutebook.ie/1988/en/act/pub/0025/sec0002.html#sec2) if you are unsure, paying particular heed to your obligation as a data processor.

Please contact the IS Services Helpdesk to arrange for a consultation on your requirements and the best technical solution for you. You should also consult the policy for form data at https://www.tcd.ie/webdesign-projects/preview/webdesign-office-tms2/maintain/forms.php

The steps below give information on how to create your own accessible form.

Making a Form Accessible

Dreamweaver Instruction

1. Click on Insert menu > Form.
   This indicates that you wish to use a form. You now need to add form objects.
2. Click on Insert menu > Form Objects and select for example, Text Field.
   As accessibility for forms is switched on, a number of extra options appear:
3. LABEL - filling this in clearly identifies the field for someone using assistive technology. The name given should be clear and meaningful, for example 'Name', 'Address'
4. Choose the option wrap with label tag radio button.
5. If you check the before form item button, this will place the label you have created in front of the field, while the after form item will place it after the field.
6. The access key option should be left blank.
7. The tab access option is important, as it will direct what is selected on screen if the user is using the tab button. Fill in this option with a number, in order of how you want the user to access each field.
   For example, if you give a field called 'name' the tab index 1, and then follow this by giving a field called 'address' the tab index number 2, when a user hits the tab button the user will be taken first to the 'name' field and then to the 'address' field.
8. Follow the above instructions for each Form Object that is inserted.

HTML Instruction Example

<form action="http://somesite.com/foo" method="get">
	<label for="name">Name:</label> 
     <input type="text" id="name" size="50" />
	<br />
	<fieldset>
		<legend>Sex</legend>
		<input type="radio" name="sex" id="male" />
		<label for="male">Male</label>
		<input type="radio" name="sex" id="female" />
		<label for="female">Female</label>
	</fieldset>
	<br />
	<label for="tcar">Type of car:</label>
	<select name="car" id="tcar">
		<option>Honda Civic</option>
		<option>Ford Taurus</option>
		<option>Saturn</option>
	</select>
	<br />
	<label for="com">Comments:</label>
	<textarea rows=10 cols=30 id="com"></textarea>
	<br />
	<input type="submit" />
	<input type="reset" />
</form>

HTML sample for a form that is sent to an email address (webdesign is used as the sample name)

<form name="webdesign" form method="post" action="http://www.tcd.ie/cgi-bin/mail_tcd?webdesign@tcd.ie" id="webdesign"></form>