12 Accessible Tools for Online Environments
Neil Kotch
In this chapter, you will find…
- Some of the most common accessibility considerations you should take when developing course content.
- The 7 core skills for digital accessibility to cultivate a more inclusive and equitable learning community.
- 10 principles for adding accessibility to your websites with tips and tools to assist your design.
- Examples of colour blind experiences and tips on how to use colour to avoid common mistakes.
Full video with transcript [opens in new tab]
7 Core Skills for Digital Accessibility
You can encourage an inclusive, accessible, and equitable community for everyone by incorporating 7 core skills of digital accessibility. The 7 core skills are:
Download the document here: 7 Core Skills for Accessibility [opens in Microsoft Word]
Level Up: Designing for Accessibility
McMaster has created a complete ACCESSIBLE DIGITAL CONTENT TRAINING PressBook [opens in a new tab]
This guide covers creating accessible PDF’s, Word Documents, PowerPoint, Excel and many more common formats
Here are 10 principles you can use to get started creating great accessible websites and mobile interfaces right now.
- There are four major types of disability — visual, hearing, motor and cognitive. As a beginner, understanding the wide variety of disabilities can get overwhelming. A useful place to start is with visual disability. A majority of accessibility issues can be addressed by accounting for blindness.
- Remember to create good alt text (text that describes images). When writing alt text, aim to describe the information in the picture, rather than describing the picture. The alt text depends on the purpose of the image. If the image is purely decorative, you can describe it in a generic way. If the picture is essential to understanding the context, then be as precise as possible.
- Hamburger menus are not accessible, as screen readers usually skip over them. However, if you tag hamburger menus properly, screen readers won’t skip over them.
- Don’t place important content out of the way where screen readers won’t find it.
- You have to test for accessibility with real users to help reveal gaps in accessibility. Even if you test your designs with evaluation tools and checkers, it is imperative to test with real people.
- Don’t disable zoom in mobile interfaces as it ends up locking out users with low vision.
- Accessibility is cheaper when it’s done up front — and easily learned. Factor in accessibility early on, in both design and implementation, instead of retrofitting it.
- Be aware of visual bias, but remember that accessibility does not mean ugly design, especially if you design with accessibility from the very beginning.
- Check mobile accessibility separately. This ties in with principle #4. Often responsive sites can push important content out of the way or reorder elements in a way that becomes confusing or inaccessible, even for sighted users.
- Embrace the all-access attitude. People are the first consideration of design, and you must design for everyone in your audience.
Source: © Ralph Aichinger, CC BY 2.0 Course: Accessibility – How to Design for All: Interaction Design.org – How to Design for All
Your Turn:
If you were describing this image for someone, how would you describe it?
Tips for Designing for Colour Blind Learners
Contrast and colour: Find colours that provide maximum contrast, including enough contrast between content and the background, so that text and non-decorative images are legible for anyone with low vision or colour deficiencies.
Best practices:
- Ratio: Text and interactive elements should have a colour contrast ratio of at least 4.5:1.
- Colour as an indicator: Color should not be the only indicator for interactive elements. For example, underline links on hover, or mark a required field with an asterisk.
- Colour blindness: Red/green colour blindness is the most common, so avoid green on red or red on green. (Think especially about avoiding using red and green for “bad” and “good” indicators).
Source: Web Accessibility – Contrast & Colour
Below is an example of colourblindness types using a pie chart example of why designing graphics with colour matters to your learners.
—Click in the TOP-RIGHT corner of the window above to view in fullscreen.
As you can see, colour has impact on the way information is presented to some learners. The aesthetic integrity of your designs, charts, graphics don’t need to suffer if you keep a few things in mind. Here are some tips to consider when adding graphics and using colour. Limit your colour pallet. Use an online colour checker to see how your assets might appear to some users. Use patterns and textures for fill items. This will help differentiate information you might be trying to draw attention to. Find colour combinations that provide the contrast you need and complement the information you are trying to share, it doesn’t always have t default to black and white.
Design Tools, Testing Tools:
Alternative text is a brief textual explanation of an image, used in the coding of digital graphics online and in digital files; alt text is not visible on websites unless the image does not appear. This Alt Text Guidelines [opens in a new tab] and Techniques for Alt Text [opens in a new tab] can help you gain a better understanding of how to improve alternative text for your images and graphics.
Microsoft offers the Microsoft Accessibility Checker [opens in a new tab] for PC, Mac OS and web to assist you before sending your email message or sharing your document or spreadsheet. You can run the Accessibility Checker to make sure your Microsoft Office content is easy for people with disabilities to read and edit.
Testing with a keyboard is an essential part of any accessibility evaluation. This Keyboard Accessibility Testing chart demonstrates many of the most common online interactions, the standard keystrokes for the interaction, and additional information on things to consider during testing.
Colour tools help to demonstrate the experience of some users. This Colour Blindness Simulator allows you to drop your content in the viewer and demonstrate the colour experience of some users. This Colour Contrast Checker provides fields for you to compare foreground and background colours with a ratio readout and provides a pass/fail readout for colours you have selected.
Have you ever wondered exactly what colour an image graphic or photo was displaying on your screen? This Online Colour Picker lets you load an image and use an eyedropper tool to give the exact RGB, or Hex # of the colour you choose.
Consider the following Accessibility Checklist [opens in a new tab] to gain a better understanding of accessibility standards, and see these 20 Tips for Designing for Accessibility Online [opens in a new tab] to improve your content for accessibility.
Bringing it all together
Congratulations! You have come to the end of Module 3: Implementing Strategic Tools and Techniques for Learning. It is our hope that you have discovered new ways to share information with your learners by using methods that work in teaching blended and online courses. By honing your skills in selecting the right tools at the right time, your learners will know what’s expected of them and gain success from your instructional approach. Improving the learning experience by finding methods of engagement and collaboration your course will gain success with diverse audiences. With an awareness of the most common accessibility considerations and by applying universal design, your learners will benefit from your inclusive approach to teaching.
—Click in the BOTTOM-RIGHT corner of the window above to view in fullscreen.
