Tips for Digital Accessibility for Web Content
This quick guide helps keep some key accessibility considerations in mind when creating and editing content for the web.
Don't Miss Our Upcoming Training
Join our next training session starting on Wednesday 16th October.
This training course consists of two 2 hour sessions:
- Session 1: Wed 16th October - 12pm-2pm (AEDT)
- Session 2: Wed 23rd October - 12pm-2pm (AEDT)
Both sessions will be held virtually using Microsoft Teams.
Important Note: This checklist is a short guide only created as a companion to a webinar held by TTC. This addresses only some accessibility considerations for content authors. Consideration should be given to WCAG in full to ensure conformance with the standards.
Tip 1: Consider Images
Images require a text alternative to describe their function or purpose. This is generally implemented through the use of an "alt" tag of most web content management systems have inbuilt tools to add a text alternative, which generally adds a text alternative via this method.
Without a text alternative, the image has no meaning for people who use assistive technology to access digital content.
If an image is purely decorative, then the image's alt tag should be empty so it is ignored by assistive technology.
When thinking about text alternatives, remember CRAM:
- C: Text alternatives should be meaningful while being as concise as possible
- R: Include the most important relevant first – considering the context of the non-text content
- A: Text alternatives should be accurate and consider any specific context
- M: All text alternatives should be meaningful – consider if it has meaning or should be decorative
WCAG Guidelines and Resources
- WCAG Success Criterion 1.1.1 - Non-text contrast
- Understanding 1.1.1 - Non-text contrast
- W3C Images Tutorial
Tip 2: Text Colour Contrast
Ensuring the colour of text has sufficient contrast against the background is important for many vision impaired and colourblind users.
Text needs to have a colour contrast ratio of:
- at least 4.5:1 between the text colour and its background (for regular sized text).
- For large text (text that is approximately 18.66px and bold or larger, or 24px or large), contrast should be 3:1.
This includes backgrounds of any kind, including images, gradients and solid colours. If using the image as a background, make sure the contrast minimum is maintained for all text.
WCAG Guidelines and Resources
- WCAG Success Criterion 1.4.3 Contrast (Minimum)
- Understanding 1.4.3 Contrast (Minimum
- Web AIM Colour Contrast Checker
- Colour Contrast Analyser Download
Tip 3: Consider Headings and their Levels
Correctly programmed and descriptive headings are essential for those using assistive technology in being able to navigate the web.
Generally the HTML heading markup is used, which has a heading hierarchy from heading level 1 (H1) down to heading level 6 (H6). These heading levels should be used consecutively and in a way that makes sense to group information.
If you are applying a visual style to distinguish text to stand alone, then consider whether a heading markup is required. In addition, make sure the heading is descriptive and makes sense for the content that is contained within the heading.
WCAG Guidelines and Resources
- WCAG Criteria:, 1.3.1 Info and Relationships
- WCAG Criteria: 2.4.6 Headings and Labels
- W3C Headings Tutorials;
- Understanding Headings and Labels
Tip 4: Don't 'Click Here'
The text to describe a link needs to make sense so a user can understand the purpose of a link.
Click here, Learn more, continue are examples of where, unless there was additional text context, it is not clear to the user the purpose of these links.
Best practice is for the link purpose to be fully contained within the link text itself.
When creating links:
- Ensure link text is meaningful and can be identified (avoid Learn more; click here).
- Keep brief but meaningful.
- Avoid just using the URL directly
- Only links that redirect the user to the same location can have the same link text.
WCAG Guidelines and Resources
- WCAG Criteria: 2.4.4 Link Purpose (In Context)
- Best Practice and AAA Criteria: Link Purpose (Link Only)
- Understanding 2.4.4 Link Purpose
- Understanding 2.4.9 Link Purpose (Link Only)
Tip 5: Keep it Online
Where possible, keep content in HTML – avoid putting information within PDF and Word document attachments where possible
PDF and Word documents are sometimes essential. In these cases, ensure accessibility is factored in and provide alternative formats.
If using PDF or Word, ensure you embed accessibility within these documents. WCAG and its concepts applies to these documents as well as web content. You can take a look at your Creating Accessible Documents training for training on how to do this.