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