Step 3: Complete the accessibility test

To meet the conformance requirements of the Web Content Accessibility Guidelines (WCAG) for Queensland Government Digital services, you must meet all success criteria of both level A and AA. The following acceptance criteria highlight common WCAG issues that can be tested and fixed by non-accessibility specialists but this is not a complete list of all WCAG requirements. For the full list of requirements refer to the Web Content Accessibility Guidelines.

If you are new to digital accessibility, you can find out more in the accessibility fundamentals overview and W3C’s Easy Checks – A First Review of Web Accessibility.

Navigation and focus

Goal: Ensure users can navigate the site and use all parts of it with only a keyboard, and that there is a clear visual indicator (focus indicator) of where they are on the site.

How to test:

Start at the top of the web page, and press the Tab key to move through interactive elements like links, buttons, and forms. Check that:

• you can move through each element in the order that the content is intended to be read
• there is a clear visual indicator of the element selected, e.g. it is highlighted or outlined with correct colour contrast
• the focus indicator clearly stands out and cannot be mistaken for any other visual element on the page
• you can navigate using only a screen reader.

Structure and page order

Goal: The page is to be set out in a logical order, with headings starting with H1, H2, and H3 as required. Landmarks such as banners, navigation, main content, and footer are correctly labelled.

How to test:

• Use a code inspector like the WAVE or axe browser extensions to identify all headings and check they are correctly marked up, ordered from H1, with no levels skipped or empty headings.
• Use a screen reader to check that headings are correctly structured and landmarks are announced.

Skip to main content

Goal: Screen reader users can skip the main header and navigation content that are repeatedly read aloud.

How to test: Use a code inspector, such as the WAVE browser extension, to check whether a skip to content link is present and correctly coded. Also, test using a screen reader to ensure the skip to content link works correctly.

Text alternatives

Goal: All non-text content, such as images, icons, graphics, infographics, and maps, have a text alternative that can be read by screen reader software.

How to test:

• Use a browser extension like Silktide and use the Alt text section to review images on each page.
• Use a screen reader to check that all images and other non-text items have meaningful alt text. Meaningful alt text will explain the information and context the image contains. If an image is purely decorative, it should have an empty alt attribute (alt=””).

Colour and contrast

Goal: All text is clear and readable against the background, including for users with visual impairments.

How to test: Use a colour contrast analyser tool such as the WebAIM colour contrast checker.

• The minimum contrast ratio required is 4.5:1 for normal text and 3:1 for large text.
• Check that colour isn't used as the only way to convey information. If the colours are changed (test in greyscale, dark mode, high contrast, etc.) or if the content can’t be seen at all, all the same information must be available and easy to understand.
• Success, error and alert messages are often coloured. Ensure that these messages and icons are clearly explained in other ways, and that colour is not used alone to convey information or meaning.
• Similar to colour, direction can't be used to convey information, e.g. select the button on the right or view the information below. This is because content moves positions when it is resized and used on different devices and screen sizes. The content's position will not be the same for all users.

Headings, link text, and interactive elements

Goal: Users can scan headings, links, buttons and other interactive elements to understand their meaning or where the link would take them if selected.

How to test:

• Check that all page titles are unique. For example, there is only one page titled "Contact us" or "About us."
• All links need to provide meaning and context. Don’t use ‘click here’, ‘read more’, ‘learn more’, ‘more information’ as there’s no context for what the link is for and what will happen if the user selects it.
• Use a screen reader to check that the site and content can be understood and used without requiring vision.

Forms and input fields

Goal: Forms can be used only with keyboard navigation and are usable with assistive technologies such as screen readers.

How to test:

• Use the tab key, arrow keys, space bar and enter to complete the form.
• Use a screen reader to navigate the form and complete it.
• Check that the hint and help text works with screen readers.
• Check that success and error messages are read out by screen readers, and it is clear what the user needs to do to complete each field successfully.

Form input fields have correct and meaningful labels

Goal: Make the element name discoverable and provide a text alternative for any non-text content. Form buttons must have a descriptive value, and form inputs must have associated text labels.

How to test:  

• Use a testing tool to inspect code.
• Use a screen reader to check if form fields are announced correctly.

The following is an example of a label and a checkbox form control associated with each other either implicitly or explicitly.

<label>

<input type=”checkbox” checked name=”Letter”>Sign up for newsletter

</label>

Or

<input type=”checkbox” checked name=Letter” id=”letter”>

<label for=”letter”>Sign up for newsletter</label>

Learn more about accessible forms

• W3C forms tutorial
• WebAIM Creating accessible forms
• MDN page on <label> demonstrates options for associating a label.

Interactive elements and widgets

Goal: All interactive elements, such as dropdowns, sliders, accordions, modals, sort, filters, dashboards, maps and carousels, can be used with only a keyboard and are usable with assistive technologies.

How to test: Use both a keyboard and screen reader to navigate and interact with all elements, such as dropdown menus, accordions, modals, sliders, and similar. Check that they can be used and that, when using the screen reader, the current state (expanded, collapsed, selected, unselected) is read out.

Audio and video content

Goal: Multimedia content is accessible and usable.

How to test:

• Check that videos have closed captions that can be turned on and off by the user, they shouldn't be permanently embedded (burnt in) into the video.
• Check that both audio and video content have a descriptive transcript, including information about visual elements and non-spoken content.
• Audio and video content must not auto-play. Controls to start and stop audio and video that can be operated only with a keyboard must be available.
• Check the colour contrast between text and the background in videos to ensure it is readable and meets the minimum colour contrast requirements.

Responsive design and zoom

Goal: The site and content can be used on all devices and screen sizes, particularly when zoomed in.

How to test:

1. Test in each different browser, including on a mobile device.
2. Make sure the content is correctly formatted, functionality isn't lost, and it adjusts to different screen sizes and orientations (check portrait and landscape on mobile devices).
3. Resize and zoom the page to at least 200% and check that the content remains usable and readable.
4. Content reflows, and no overlapping content is found.

Content readability

Goal: Content is easy to understand, findable and accessible for all users.

• Content is written with simple words and an active voice.
• Avoid using government jargon, technical terms and acronyms that most people won't know.
• Write content at a reading age below grade 9.

How to test:

• Refer to style guides
  • Queensland Government Web and writing style guide
  • Australian Government clear language and writing style guide
  • Accessible and inclusive content
• Check content
  • Paste content into the Hemingway Editor to check spelling, grammar, readability and reading age level.
  • Use built-in tools such as Microsoft Word to check readability and grade level.
  • Test the readability of content using tools or Hemingway Editor.

Next step

Document findings and assess issues