Authors University of Auckland
License CC-BY-SA-4.0
Inclusive Design for Online
Accessibility
Practical approaches to benefit all
tinyurl.com/inclusive-design
HEADING
Design for accessibility
HEADING HEADING
Use headings for page structure HEADING
Follow a linear layout
A logical hierarchy of headings creates semantic structure. HEADING
Aid screenreading by ordering content logically.
TEXT Use heading level 1 (H1) for the page title, H2 for section
headings, H3 for sub-sections and so on.
TEXT TEXT
ABC TEXT Write clear & descriptive links
Use plain language Link text should provide context of where the link will
TEXT
ABC Support understanding with plain, concrete and
ABC ABC take the reader and should be in a contrasting colour and
CC
descriptive language. preferably underlined.
ABC
HEADING
CC Request form Click here
CC CC
HEADING
Make text available CC Use contrasting colours
Structure your documents with headings and describe
TEXT
images with captions. Some screen readers have difficulty Contrasting colours
with tagged documents so be prepared to provide a plain
TEXT
text version upon request. ABC Contrasting colours
ABC
Use alternative text for images CC Provide transcripts & captions
Add alternative (alt) text to describe the content and HEADING
Panopto will add captions to recordings automatically.
function of images, and include any text that is part of CC
If you integrate Zoom with Panopto and record to the
an image. Complex images (e.g. graphs and tables) may Zoom Cloud, the recording will upload to Panopto where
require a separate text description. captions are applied.
DING TEXT
ABC
Resist the urge to shrink Make tables accessible
ABC
Ensuretables have a header row. Only use tables for
ABC Ensure all text and images are clear by not shrinking
content to fit on a page. presenting data, not for layout.
HEADING
T
CC
DING
ABC
Test for accessibility
TEXT
Zoom to 200% Use your browser or document viewer zoom – does all the text remain visible?
C
C
ABC
T
Check keyboard navigation Ensure you can navigate just using TAB, SHIFT-TAB, and ENTER keys.
CC
ABC
Use WAVE or aXe web browser plugins to audit the accessibility of your course
C
C
Windows: NVDA Mac OS X: VoiceOver
Check for screen-reader compatibility
Linux: ORCA Chrome: ChromeVox
Use built-in accessibility wizards Available in Adobe DC, Acrobat Pro & Microsoft Office.
Icons by Tony Chung. All other trademarks are the property of their respective owners. This work is licensed under a Creative
Based on the Thinking Accessibility poster produced by the Educational Innovation Team, Information Communications and Technology, and Library at the University of Sydney. Commons Attribution-ShareAlike 4.0
Version 1.4. Created by the University of Auckland. International License.