Web Accessibility

Our top 5 key areas

Here are our top 5 key areas to consider when producing accessible web content.

1. ALT text

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 allows the user 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 element 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" attribute 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 supported 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.

2. Heading styles

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. I think we dream so we don’t have to be apart for so long. If we’re in each other’s dreams, we can be together all the time.

Section Heading (Markup as Heading 2)

Text relating to the section heading that may have sub-texts. It is more fun to talk with someone who doesn't use long, difficult words but rather short, easy words like “What about lunch?”

First Sub-Section Heading (Markup as Heading 3)

Text relating to the first sub-section heading. You can't stay in your corner of the Forest waiting for others to come to you. You have to go to them sometimes.

Second Sub-Section Heading (Markup as Heading 3)

Text relating to the second sub-section heading. People say nothing is impossible, but I do nothing every day.

Another Section Heading (Markup as Heading 2)

Text relating to this other section heading. If the person you are talking to doesn't appear to be listening, be patient. It may simply be that he has a small piece of fluff in his ear.

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

3. External links

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 website by including the domain information in brackets at the end of the link e.g. see the Title of the Article (rte.ie), or Title of the Article (external).

4. Data tables

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 similar 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. Empirical results of recent survey into why cats are so popular on the internet.

5. Forms

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 (irishstatutebook.ie) if you are unsure, paying particular heed to your obligation as a data processor.

Please contact the IT 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.

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 element 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.

For example code see our Forms page.

Testing and validation

Web authors need to ensure that website content meets with the Trinity's Policy for Web Accessibility. After you add new content, check the website using multiple browsers and on another computer to ensure that all link and images references are correct.

The following is a list of validators that will assist with this task:

• The W3C Markup Validation Service (w3.org)
• WAVE - Web Accessibility Evaluation Tool (webaim.org)
• Complete List of Web Accessibility Evaluation Tools (W3C)
• Web Content Accessibility Guidelines (WCAG)