On this page

Introduction

The following Online and Print Inclusive Design and Legibility Considerations were developed by Digital Access at Vision Australia to support the creation of accessible content and equal access to information for people with disability or age related impairment. They are intended to help designers and developers identify the main considerations for accessibility and inclusive design when creating a web page or electronic document (e.g. PDF, EPUB3 or InDesign file), which in turn will aid the creation of accessible print documents from the same electronic source.

The Considerations are based on the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines version 2.0 (WCAG 2.0), the principles of Universal Design, and gathered knowledge from our own experience and those of disability agencies nationally and internationally. They are not intended and should not be regarded as a sole and comprehensive resource for accessibility or inclusive design.

WCAG 2.0

All web content, including online information in the Portable Document Format, should be compliant with WCAG 2.0. Find out how to meet WCAG 2.0 from the W3C’s customisable quick reference to WCAG 2.0 requirements (success criteria) and techniques.

WCAG 2.0 covers a wide range of recommendations for making web content more accessible. Recognised as the global technical standard for web content accessibility, following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your web content more usable in general.

These standards are mandated by the Australian Government’s National Transition Strategy (NTS), which stipulates that all federal, state and territory government websites need to meet WCAG 2.0 Level A conformance by 31 December 2012, and all federal government websites need to meet WCAG 2.0 Level AA conformance by 31 December 2014. Read more about the NTS in “AGIMO tells: NTS, WCAG 2.0 and beyond”.

WCAG 2.0 applies to web technologies, however the principles can be applied more generally to all document formats.

Universal Design

The seven internationally recognised Universal Design principles can be summarised as follows:

  • Equitable use seeks to maximise the usefulness of design for everyone, identical whenever possible and equivalent when not, so that it avoids segregating or stigmatising any users.
  • Flexibility in use values design that accommodates a wide range of individual preferences and abilities.
  • Simple and intuitive use seeks to create ease of understanding for users, regardless of their experience, knowledge and language.
  • Perceptible information seeks to ensure that design allows information to be communicated effectively to the user, regardless of ambient conditions or the user's sensory abilities.
  • Tolerance for error seeks to minimise hazards and the negative consequences of accidental or unintended actions.
  • Low physical effort seeks to ensure that interaction with the environment can occur efficiently and comfortably and with minimal fatigue.
  • Size and space for approach and use seeks to maximise approach, reach and manipulation capabilities of users irrespective of their size, posture and mobility.

Online and Print Inclusive Design and Legibility Considerations

Readability

  • Ensure the reading level (ease of comprehension) of content is appropriate for the intended audience.
  • Avoid acronyms unless necessary, and always expand each acronym the first time it is used on a page.

Font and styling

  • Use sans serif fonts, e.g. Arial and Helvetica.
  • Avoid excessive use of italic, bold and all-capitals formatting.
  • Avoid the use of underlining to emphasise text or headings.
  • Ensure web safe fonts are used.

Layout and structure

  • Use informative headings and lists to group information where appropriate.
  • Use true heading and list styles (do not simply rely on formatting, e.g. using large, bold font to make text look like a heading).
  • Include informative images and icons alongside related textual content.

Tables

  • Visually identify the column headers of tables. For websites, this is best implemented by using Cascading Style Sheets (CSS) and ensuring header cells are marked-up as table header elements.
  • Avoid complex tables (merged cells, nested tables, etc.). Instead, break-up complex tables into multiple, simple tables where possible.
  • Avoid excessive use of blank characters or table cells.

Forms

  • Include text labels for form inputs, positioned close to their related fields:

     

    • To the left of text input fields, text areas and drop-down menus.
    • To the right of radio buttons and checkboxes.
  • Ensure required form fields are clearly visually identified.
  • Indicate what format data is required in (e.g. dd/mm/yyyy).
  • Visually group radio buttons and tick boxes and include a legend when required.
  • Avoid the use of CAPTCHAs.
  • Ensure forms include a submit button and work with a keyboard alone.
  • Explicitly associate all form labels with their associated form input field.

Form validation

  • As a general rule, when forms are submitted with errors, a list of the errors should be included above the form.
  • If the page does not reload (as when client side error checking is used) a JavaScript alert box should notify users that errors were found and that they are listed at the top of the form OR the page focus should be moved to the top of the form.
  • Error messages must reference the label for the input field in error and clearly describe the problem that has occurred, and ideally should include suggestions on how to rectify it.

Colour contrast

  • Ensure foreground and background colours have a minimum contrast ratio of 4.5:1 for normal text or 3:1 for large-scale text.

Use of colour to convey information

  • Avoid using colour alone to convey information, e.g. identifying a form field in error by highlighting it in red font.

Charts and diagrams

  • Avoid using colour alone to convey information in charts and diagrams, e.g. if lines are used to denote different types of roads in a map, use different thicknesses, dashes, etc. in addition to different colours to differentiate the lines.
  • Ensure good colour contrast when using charts and graphs.

Text alignment

  • Align text to the left and avoid indenting paragraphs.

'Leading' and spacing

  • 'Leading', or spacing between the lines of text, should be at least 25-30% of the point size.
  • Use equal spacing between words and generous spacing between paragraphs.
  • Ensure letters are well spaced.

Stock choice

  • For print documents, use good quality, thick stock with a matt finish.

Margins

  • Use a wide margin for printed materials if they are to be bound.

Navigation

  • Ideally, all contextual links (i.e. links that appear within the body of a page) should be underlined. If contextual links are not underlined, provide sufficient colour contrast with surrounding text (3:1) and underline the link when it receives focus.
  • Provide sufficient keyboard focus feedback. Highlight a user interface component, e.g. a link, a form control, a submit button, etc. when it receives page focus. The default browser focus indicator may be sufficient; however, we recommend additional visual feedback such as changing the background colour.
  • Provide users with more than one way to locate content, e.g. site map, search, navigation menus, etc.
  • All pages should have a unique and meaningful page title that describes the content and purpose of the page (e.g. <title> About Us – Vision Australia</title>).
  • Best practice for accessible links:

     

    • Ensure the link title makes sense if read out of context (that is, as a stand-alone link).
    • Avoid using URLs.
    • Include document format and size, e.g. PDF 400KB).
  • Do not force keyboard-only users to navigate through every link in a navigation mega menu.
  • Provide a mechanism for users to bypass lists of navigation, e.g. include a ‘skip to content’ link.
  • Mark-up all navigation lists as unordered lists (these lists can be displayed horizontally using CSS).

Text zoom

  • Allow users to increase text by 200% without loss of content or functionality.

Images of text

  • Do not create text as an image (commonplace in page headers, banner advertisements and carousels). Instead, use techniques such as plain text with CSS background images.

Keyboard accessibility

  • All functionality, features and interactivity must be available from a keyboard. If this is not possible an accessible alternative must be supplied.
  • Ensure there is a logical keyboard tab order, i.e. the tab order follows the page reading order.
  • Ensure there are no keyboard traps.
  • Navigating to and interacting with form controls should not cause a change of context (for example, form submission, page reload, page redirect, etc.). All forms should include a submit button.

Moving content

  • A stop, hide or pause option must be available for moving content, e.g. slideshows, carousels, etc.

Confirmation screens

  • A ‘confirmation screen’ is necessary for forms that:

     

    • Comprise more than one screen; and
    • Cause legal commitments or financial transactions to occur.

Time limits

  • If there is a time limit on a page, ensure one of the following (note: there are some exceptions and instances where time limits are permitted):
    • Ability for user to turn off the time limit.
    • Ability for user to adjust the time limit (set it to ten times the default).
    • Ability for user to extend the time limit (up to ten times).

Multimedia

  • Video and audio content must be accompanied by:
    • Captions—need to be synchronised and equivalent. 
    • A text transcript, which must contain: dialogues; sounds; setting and background; actions and expressions. 

Text or graphics

  • For core videos AUSLAN should also be considered.
  • Avoid flashing content. If flashing content is included ensure it does not flash more than three times in any one-second period.
  • Do not auto-start a video or audio file (e.g. when a page loads). Instead, provide user controls to start, stop and pause video and audio content.
  • Ensure the multimedia player used to play the video or audio is accessible. The player controls (e.g., play, pause, stop, volume buttons, etc.) must be keyboard accessible.

Accordions

  • Ensure content or page focus appears immediately below the ‘expand’ button.
  • Ensure the ‘expand’ button has a large clickable area.
  • Inform the user that the content will appear below (this can be achieved through screen reader-only text; for example, ARIA).

Modal Windows

  • Use standard web conventions/interactive elements.
  • Ensure focus moves straight to the window.
  • Keep the content in the window brief.
  • Include a close button.

Tabs

  • The trigger buttons for ‘tabbed’ content should be marked-up as a list of buttons.
  • Each button should contain hidden text, " - show below". The button for the tab that is currently open should have the hidden text, " - currently showing". Hide text by positioning it off-screen with CSS.

Third-party banner advertisements

  • All banner advertisements and social media content should be optimised for accessibility, even if the host is not compliant. 

Email communication

  • Ensure emails are readable by someone using assistive technology.
  • If images are used ensure they have appropriate alternative text.

About Digital Access

Digital Access at Vision Australia is recognised internationally as an industry leader in online accessibility. Specialising in training, consulting and testing, we have spent 15 years advocating for inclusive design, and helping people understand why accessibility is important and how to successfully and sustainably implement it in their digital projects.

Digital Access has a unique position as a pan-disability consultancy within a wider organisation that is the leading provider of blindness and low vision services in Australia. We work closely with people with a range of disabilities including cognitive, mobility, hearing and vision impairments, and alongside adaptive technology trainers who teach people with disability how to use assistive technologies. It’s our real-world interactions with end users that provide us with unparalleled insights into accessibility and inform all the services we deliver.

Servicing public and private sector organisations Australia-wide, Digital Access is a professional consultancy at the forefront of the accessibility industry in Australia. All profits made by Digital Access are directed back to Vision Australia. The income we make through our fee-for-service approach directly supports people who are blind or have low vision.

Global leaders

Our ongoing affiliation with key organisations ensures we stay at the forefront of the industry. In 2014 we became a Founding Member of the International Association of Accessibility Professionals (IAAP). Through IAAP we’ll have the opportunity to collaborate with colleagues from other leading organisations, such as Adobe, IBM, Microsoft and The Paciello Group to help shape the future of accessibility.

Since 2002 we have been an active member of the World Wide Web Consortium (W3C) and were instrumental in the collaborative development of WCAG 2.0. In 2014 we contributed to the revision of the PDF Sufficient Techniques for achieving WCAG 2.0 conformance. 

Digital Access gave expert advice to the Australian Government in the development of its National Transition Strategy and we continue to work closely with the Australian Human Rights Commission (AHRC).

Services, resources and training

We've developed a range of materials and tools to support accessibility awareness and implementation. Available free of charge, we hope these resources benefit your accessibility agenda. Visit our resources pages for more information.

Our consulting, training and testing services have been expertly designed to support our clients in their achievement of sustainable accessibility. Visit our services pages or contact us for more information.