Tips for addressing accessibility
There are a number of simple ways to start to improve the accessibility of your site, especially during the development stages.
- All headings should be logical and representative of the page's hierarchical structure.
- Headings should be marked up with heading tags rather than using text formatting or styles only, such as bold.
- Ideally pages should start with
- Headings should be descriptive but still concise.
- Avoid the use of all caps.
- Ensure there is sufficient difference between foreground (text) colour and background colour, especially when using coloured text on a background, as people, in particular those with low vision or colour blindness, will have difficulty distinguishing what the text says if contrast is poor. There are a number of tools available online to assist in meeting colour contrast requirements.
- Every image must have an alt attribute.
- Decorative images should have null (empty) alt attributes (
- Descriptive images should have descriptive alt attributes, or have the content and function of the image represented in the surrounding content text.
- Linked images must include a descriptive alt attribute which clearly describes the link location.
- Videos must be captioned to allow the content of web audio and video to be accessible to those who do not have access to audio.
- Captions should be synchronised with the audio.
- Transcripts should be provided as well, containing additional descriptions, explanations, or comments that may be beneficial, such as indications of laughter or an explosion.
- Read more about video accessibility at WebAIM
- Link text should still make sense out of context - the purpose of each link should be determined from the link text alone.
- File type and size should be included in links to non-webpages.
- Ambiguous links such as ‘click here' or linking on a URL should also be avoided.
- Links should not open in new windows and tabs as this can be disorienting for people, especially those who have difficulty perceiving visual content, and is not expected behaviour. In cases where this is unavoidable, it is recommended that there is advance warning.
- Used for tabular data only - not laying out blocks of text or images.
- Must have row or column headings marked up with header (
- Should contain captions to provide a short description of the table content.
- The scope attribute should also be used for complex data tables.
- Every input must have a label.
- An input must be bound to its label by making the
id=""equal the same.
- Forms should be organised in a logical manner through the use of instructions, cues, required form fields, etc.
- Clearly mark any required fields.
- Describe the asterisk for the required form fields at the top of the form for clarity.
Fieldsetis used to descriptively group elements within the form, such as ‘Personal details'.
- Short, descriptive text inserted via the
- If you use an image button (
type="image"), the input must have appropriate alt text. Eg<input type="image" name="submitbutton" alt="Submit Search" src="submit.gif" >
- Logically structured.
- Easily scannable.
- If PDF documents are used, ensure they are accessible documents.