DOKK Library

Inclusive Design for Online Accessibility - Practical approaches to benefit all

Authors University of Auckland

License CC-BY-SA-4.0

Plaintext
                                                                             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.