The Web Content Accessibility Guidelines (WCAG) are used widely around the world as a benchmark for web accessibility.
WCAG has four main principles:
- Perceivable – Information and user interface components must be presentable to users in ways they can perceive.
- Operable – User interface components and navigation must be operable.
- Understandable – Information and the operation of user interface must be understandable.
- Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents.
For each principle, there are a list of criteria that need to be met to make sure your online content is accessible. There are 38 techniques in total.
The ‘How to meet WCAG’ quick reference guide is a helpful starting point.
- Write an appropriate text alternative for all images except when they’re just decorative - preferably under 100 characters.
- Never put image credits or titles in alt text. Include this information in a caption instead. If image is decorative, move copyright attributions to the end of the page.
- Use a contrast ratio of at least 4.5:1 for text and images of text, unless the text is decorative or unimportant. Use a ratio of 3:1 for large text (18+ points or 14+ points bold).
- Use styled text instead of images of text unless users can customise the text style or an image is essential.
- Don’t use flashing or animated images that could cause a seizure.
- Use icons and their text alternatives consistently.
- Images that are links always require a text alternative.
- Images with captions need a short text alternative but don’t repeat the whole caption or users will have to listen to it twice.
Types of images and alt tags
Always consider the role an image plays in the context of the page where it is used. Start by deciding if the image is:
Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive. Provide a null text alternative (alt="") when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
Images may be considered decorative when they are:
- visual styling such as borders, spacers, and corners
- supplementary to link text to improve its appearance or increase the clickable area
- illustrative of adjacent text but not contributing information (“eye-candy”)
- identified and described by surrounding text.
In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text.
Leaving the alt attribute blank is also not an option because when it is not provided, some screen readers will announce the file name of the image instead which can cause confusion.
Images must have text alternatives that describe the information or function represented by the images. The only exception is when the image is used purely for decorative purposes.
Informative images: Images that graphically represent concepts and information, typically pictures, photos and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
Images of text: Readable text is sometimes presented within an image. If the image is not a logo, text in images should be avoided. However, if images of text are used, the text alternative should contain the same words as in the image.
Groups of images: If multiple images convey a single piece of information, the text alternative for one image should convey the information conveyed by the entire group.
Image maps: The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. In addition, each individual clickable area should have alternative text that describes the purpose or destination of the link.
Contrast: Ensure there is enough contrast to allow content to be read by people with moderately low vision. If text is under 18 points (or 14 points if bold), use a contrast ratio of at least 4.5:1 between text (and images of texts) and background behind text. If text is 18 points or more (or 14 points or more if bold), use a contrast ratio of at least 3:1.
Use of colour: Don’t rely on colour to convey information. Use colour schemes that can be easily distinguished by people with all types of colour vision. Add text labels, patterns and symbols to supplement colour. Avoid using red when you want to attract attention as this colour may appear dull to people who are colour blind.
Recommended tool: Use the Vision Australia colour contrast analyser to check foreground and background colour combinations and determine if they provide good colour visibility. It also allows you to create simulations of certain visual conditions such as colour blindness. The contrast ratio helps determine whether or not the contrast between two colours can be read by people with colour blindness or other visual impairments.
Styled text: Always use styled text rather than images for headings, subheadings, body text, photo and graphics captions, feature text and text or data in tables.
Videos should be produced and delivered in ways that ensure that all members of the audience can access their content. An accessible video includes captions, a transcript, and audio description.
Captions (CC) are a text version of the speech and sound on the video. These are displayed over the video, typically at the bottom, and are toggled on and off by the viewer through the video player. They let deaf and hard-of-hearing users follow the dialogue.
Captions are not subtitles. Subtitles are a direct translation of the speech (and the speech only) from one language to another. Subtitles do not include any other sounds that are in the video.
Captions should appear at the same time as the sound they are captioning and appear onscreen long enough to be read. They can be uploaded and edited on YouTube.
Consider creating a transcript: this is more than just the script of what is spoken in the video. It should also contain descriptions of the action or information on-screen. It must be provided in text, HTML or Word and must appear be immediately after the video or linked immediately after the video.
This is a spoken audio track played along with the video. It lets blind and vision-impaired users know what’s happening on the screen. It is important that this includes all visual information. These can be a bit tricky, and ideally should be taken into consideration during the production of the video, although “extended” audio descriptions can be used where the video itself pauses while the audio description plays.
Provide a descriptive audio narration of any visual content not included in the soundtrack of a video (audio description allows people who are blind or vision impaired to have access to your videos. It is a descriptive narration of all the visual elements of a video. An audio description is written and recorded so that it falls in the gaps between dialogue (and other important audio elements)).
- Vision Australia's guide on when to provide audio descriptions
- More information about creating audio description on Access IQ
- Watch an example of an audio-described video
Auslan is the Australian sign language and it is the primary or preferred language for many people in the Australian Deaf community. When producing videos for emergency communication, such as bushfires or floods, an Auslan interpreter must be present on screen for the entire duration of the video. For other videos, where possible, we recommend including an Auslan interpreter.
Auslan interpreters can be booked through:
If your document is up to four pages long, do not publish it as a PDF. Publish it as a web page instead.
Documents over four pages can be published as an accessible PDF with an accompanying alternative format, such as HTML or an accessible Word document. An alternative format is required because:
- not all versions of all screen readers read out PDFs consistently.
- PDF does not currently have accessibility support on mobile devices.
Scanned PDFs should not be allowed on websites unless an alternative is provided.
The best starting point for an accessible document is the template. If a template is accessible, the process of ensuring that the final document is accessible becomes easier.
About accessible PDFs
PDF is a file format that keeps the visual appearance of a document regardless of the device or operating system used. Creating an accessible PDF file usually refers to "tagged" PDF files, although there is more to an accessible PDF than tags. PDF tags provide a hidden, structured, textual representation of the PDF content that is presented to screen readers. Tags exist for accessibility purposes only and have no visible effect on the PDF file.
PDF files are usually created in a program and converted to that format. Many programs can create PDFs, but very few of them produce accessibility-tagged files. If you are using Microsoft Word or PowerPoint, OpenOffice.org Writer, or Adobe tools such as InDesign, you can create accessible, tagged PDF files without opening Acrobat. The accessibility of the PDF depends on the accessibility of the original document.
Tip: Scanned documents saved as PDFs are not accessible. Instead, you should create your document in Microsoft Word, ensure the headings, text and images meet accessibility guidelines and then save the document as a PDF.
You will also need Adobe Acrobat Standard or Professional (not Adobe Reader) and the Acrobat PDFMaker Add-In for Microsoft Word to set accessible document properties.
Considerations for accessibility
- The document should be a tagged PDF and all headings, lists and tables are tagged.
- Check that reading and tab order are correct.
- Do not rely on colour to convey information.
- Use appropriate text alternatives for images.
- A contrast ratio of at least 4.5:1 for text and images of text is used. A ratio of at least 3:1 for large text (18+ points or 14+ points if bold) is used.
- Recommended tool: Use the Vision Australia colour contrast analyser to check foreground and background colour combinations and determine if they provide good colour visibility. The tool also allows you to create simulations of certain visual conditions such as colour blindness. The contrast ratio helps determine whether or not the contrast between two colours can be read by people with colour blindness or other visual impairments.
- Use styled text rather than images of text,
- Provide a descriptive title.
- Use descriptive links, or ensure you describe the purpose of the link in the enclosing sentence, paragraph, list item or parent list item, table cell or associated header cell.
- Use description headings and labels.
- Set the language for the document.
- Tag foreign language words or phrases.
Headings and paragraphs: Style makes it easier for all readers to follow your document. In longer documents, these elements can add structure for users who are using a screen reader, or who rely on the visual cue of section headings to navigate as they read. The Navigation Pane in Word lets you browse the document by headings.
Columns: Clear column headings help provide context and assist navigation of the table’s contents.
Images: If you use images, include text alternatives (alt text) and enter a description of the image or object into the title and description text boxes.
Settings: Check your document settings in the Adobe PDFMaker Add-In tab of Microsoft Word. Select the ‘Create Bookmarks’ and ‘Enable Accessibility and Reflow with tagged Adobe PDF’ checkboxes.
Support navigation: In long documents, use a linked table of contents (or bookmarks with the initial view set to show the bookmarks panel). Make links out of the document look and behave like links. Don’t underline text that isn’t a link.
Don’t create a print layout: If the content is published only as PDF, use layouts that will still work well on screen. If you’re using a horizontal layout, set initial view to fit page. Find out more.
Save as PDF: After you’ve created an accessible Word document, save your file as a PDF, ticking the ‘Document structure tags for accessibility’ checkbox. Do not print to PDF.
Ensure reader compatibility: Save to an earlier version of PDF so older software can still access the document. Avoid locking text copying or printing.
Identify the content and format: Save the document with a meaningful file name. When you link to the document from a website, use a clear label that states the file format and file size.
Test your PDF for accessibility: Test tagged PDF documents to ensure the tagging is correct, and fix any problems found. Find out how to run the Accessibility Checker.
Offer download options: For large documents, offer a set of smaller downloads as well as a single download. Link to each part clearly, providing a summary of the contents if needed.
Find out more about how to use the accessibility checker tool for PDF’s.
A lot of web content is initially produced as a Microsoft Office document. By applying some simple formatting styles and using the Accessibility Checker built in Microsoft Office you can start making your own accessible documents.
Start your document using simple language. Format it by using the following information.
Add alternative text to images and objects
Alternative text, also known as "alt text" helps people who use screen readers to understand the content of images in your document.
Add alt text by doing the following:
- Right click the image or object, and then click Format Picture.
- Note: For tables, click Table Properties.
- Click Alt Text.
- Enter a description of the image or object into the Title and Description text boxes.
- Click close.
Tip: Use clear, but concise descriptions. For example, “a red Ferrari” tells the reader more about the image than “a car.”
Specify column header rows in tables
In addition to adding alt text that describes the table, having clear column headings can help provide context and assist navigation of the table’s contents.
To specify a header row in a table, do the following:
- Click anywhere in the table.
- On the Table Tools Design tab, in the Table Style Options group, select the Header Row check box.
- On the Table Tools Layout tab, in the Table Data Options group, select Repeat Header Rows.
- Add your header information to the first row of your table.
Use styles in long documents
Heading and paragraph styles, as well as tables of contents when necessary, make it easier for all readers of your document to follow it more easily. In longer documents, these elements can add structure for users who are using a screen reader, or who rely on the visual cue of section headings to navigate as they read.
Note: Using the Navigation Pane in Word lets you browse the document by headings.
To apply heading styles to your document, do the following:
- Select the text you want to make into a heading.
- On the Home tab, in the Styles group, select the appropriate level heading style from the Quick Styles gallery.
You can also create your own heading and paragraph styles.
Use short titles in headings
When you use headings in a document, be sure to keep them short (fewer than 20 words). In general, headings should be, at most, one line long. This makes it easier for readers to quickly navigate the document, either by scanning it, or by using the Navigation pane.
Order of headings
Ensure all heading styles are in the correct order. By using heading levels in a logical order, for example Heading 4 is a child of Heading 3, not Heading 2, assists users in navigating the document and finding information.
To change a heading style:
- Select the heading that you want to change.
- On the Home tab, in the Styles group, choose the correct heading style.
To add a heading line:
- Insert a line of text where you want the new heading.
- On the Home tab, in the Styles group, choose the correct heading style.
You can view and update your document’s organisation by clicking on the View tab and, in the Show group, select the Navigation Pane check box. To help longer documents maintain clear navigation, make sure you have at least one heading about every two pages, and that your headings are in the correct order (Heading 2 under Heading 1, etc.).
Use hyperlink text that is meaningful
Hyperlink text should provide a clear description of the link destination, rather than only providing the URL.
To add a hyperlink to your document:
- Select the text you want to link from.
- Right-click your selection and select Hyperlink.
- In the Address box, type the link URL.
- Click OK.
Use simple table structure
By not using nested tables, or merged or split cells inside of tables, you can make the data predictable and easy to navigate. For example: When you are designing a form, the entire document is often based on a heavily formatted table, which makes it very difficult for users to navigate it with a screen reader, and requires them to piece together the content of each cell, read to them in an unpredictable order, to get an idea of the form’s content.
To test and simplify the table structure:
- Select the first cell of the table.
- Press the Tab key repeatedly to make sure that the focus moves across the row and then down to the first cell of the next row.
- If you need to merge or split cells to simplify the table, on the Table Tools Layout tab, in the Merge group, click Merge Cells or Split Cells as appropriate.
Avoid using blank cells for formatting
Using blank cells to format your table could mislead someone using a screen reader that there is nothing more in the table. You can fix this by deleting unnecessary blank cells or, if your table is used specifically to layout content within your document, you can clear all table styles by doing the following:
- Select the entire table.
- On the Table Tools Design tab, in the Table Styles group, click the arrow next to the style gallery to expand the gallery of table styles.
- On the menu below the gallery, click Clear.
Structure layout tables for easy navigation. If you use a layout table (table with Table Normal style), check the reading order to be sure that it makes sense (for English: left to right, top to bottom).
Verify the table reading order by tabbing through the cells to check that the information is presented in a logical order.
Avoid using repeated blank characters
Extra spaces, tabs and empty paragraphs may be perceived as blanks by people using screen readers. After hearing “blank” several times, those users may think that they have reached the end of the information. Instead, use formatting, indenting, and styles to create white space.
To use formatting to add white space around a paragraph:
- Remove any existing white space around the paragraph.
- Select the text, then right-click and choose Paragraph.
- Select values for Indentation and Spacing to create white space.
Avoid using floating objects
Objects that are not in line with text are challenging to navigate, and they may be inaccessible to users with vision impairment. Setting text-wrapping around objects to Top and Bottom or In Line With Text makes it easier for people with screen readers to follow the structure of your document.
To change the text-wrapping around objects:
- Select the object, and right-click.
- Choose Wrap Text, and then select either In Line With Text or Top and Bottom from the list.
Avoid image watermarks
Images used as watermarks may not be understood by people with vision or cognitive disabilities. If you must use a watermark, make sure that the information is also included elsewhere in your document.
Include closed captions for any audio
If you use additional audio components in a document, ensure that the content is available in alternative formats for users with disabilities, such as closed captions, transcripts or alt text.
When assistive technologies open a document, the first thing it tries to do is say the title assigned in the Properties (which is the title of the document). If there is no title, it will read out a file name, which may provide little meaning e.g. 04-application-2012.pdf.
To add a title and author to the document:
- Click the File button.
- Select Info and click Properties then click show document panel. The document Properties dialogue box will display.
- Insert the Title name and the Author name (consider using your branch or department name).
- Select File. This will automatically save the Properties of the document.
Microsoft Office Accessibility Checker
Like the spelling checker tells you about possible spelling errors, the Microsoft Accessibility Checker tells you about possible accessibility issues.
You can fix these issues so people with a disability can read your document.
To check the accessibility of your document:
- Click File and Info.
- Click Check for Issues and Check Accessibility.
- Any issues will display in the Accessibility Checker pane.
- Click a specific issue, Additional Information and steps you can take to resolve issues will appear.
- Once all issues have been resolved you can save your document.
Forms should be clear and easy to use. You must consider the way the form will be used and the language that you use to explain the steps in completing the form.
The accessibility of the form must be taken into consideration at a technical level and you should follow the WCAG techniques for creating accessible forms. This article from Web AIM has some great advice on how to do this.
On social media, we do not have access to make changes to the platform but we can ensure our profiles are as accessible as possible through our content strategy.
Consider these tips when creating social media content.
- Posts must be easy to understand. On Twitter, be careful to balance clarity with the need to be concise.
- Avoid abbreviations that are unfamiliar to your audience.
- When using multiple-word hashtags, capitalise the first letter in each word to make them more readable (#AusGov, #WebWriting for example).
- Consider placing hashtags and @mentions at the end of your post so the main part of the post can be read without interruption.
- Avoid using text-based emoticons. VoiceOver can read some of them properly, but many will be misread by screen readers.
- Limit use of foreign language words or phrases, except for proper names, technical terms or words that have become part of English.
- Post images with strong colour contrast to ensure text and data are legible.
- Avoid posting images that use colour alone to convey meaning.
- Minimise posting images of text (except for logos, screenshots, maps, diagrams, graphs/charts, some infographics). If you do post them, use large text and plain, readable fonts. Never post an image of text just to get around the word limit on Twitter.
- Don’t post animated graphics that flash or blink unless you’ve tested them to ensure they won’t cause seizures.
- Provide a text alternative for images you post, except where the image is purely decorative.
- Include the text alternative as part of your post. On Twitter, you can use EasyChirp which lets you write a text alternative and long description which are linked as part of your post.
- For image galleries, add a text alternative for each image in the space provided for captions.
- Publish video on YouTube rather than on Facebook, Google+ or LinkedIn, so you can caption and audio describe it. If you must post on other channels, include a link to a captioned/audio described version.
- Give each video a clear title and description.
- Avoid publishing videos that use colour alone to convey meaning, or poor colour contrast for text or data contained in them.
- Don’t publish videos with content that flashes or blinks unless you’ve tested them to ensure they won’t cause seizures.
- Create captions to make the dialogue and important sounds accessible. Don’t rely on auto-generated captions as they are often inaccurate.
- Where necessary, include audio descriptions to make any important visual content accessible.
- Where possible, provide a link to a transcript published in HTML on your website, and based on your captions and audio descriptions.
- Ensure linked content is clearly labelled or described:
- Facebook, Twitter, Google+ and LinkedIn will generate a link and description based on metadata from the resource you’re linking to. You might need to edit or clarify these in the text caption.
- Remove the URL from your Facebook, Google+ or LinkedIn caption after the network has generated the link and description text. For those using screen readers, including the link in text creates a duplicate link and the URL may not be easy to read/listen to.
- Where appropriate, include text that explains the value of the linked content or provides some rationale for why you’re sharing it.
- Avoid linking to inaccessible content. If you must, consider including a warning (‘Poor contrast’, for example).
- Limit links to documents. If used, ensure PDFs are tagged, and warn users about the file type and size (‘[PDF 500KB]’, for example).
- Consider including a warning when linking directly to images, infographics, video or audio, unless your post already makes it obvious (‘[PIC]’, ‘[INFOGRAPHIC]’, ‘[VIDEO]’, ‘[AUDIO]’).