An Addendum to Design for All
My Thoughts on Accessibility Continued
Hot off the heels of my recent appearance on ILG’s LT2 podcast on creating accessible e-learning, I figured now would be a good time to expand on a few of the concepts I discussed and revisit ones I wrote about in my first “Design for All” blog. Technology evolves quickly, so there are always opportunities to re-examine and evaluate how we’re implementing accessibility guidelines and how to adapt them to serve our clients best.
Last time, I focused mainly on why accessibility is crucial, but this time I want to focus on how to do it well, including the concepts of hierarchy, repetition, and contrast. From an accessibility standpoint, I think all three of those can be lumped into a single phrase — visual cues. Some real-world examples of visual cues include the following:
Stroke Thickness and Variation
Typically, the thicker the stroke (an outline that defines a shape), the more our eye is drawn to it. This is very handy to keep in mind when designing button states. Sometimes we rely on color alone, but it can be difficult for people with visual impairments to make clear distinctions.
Icons
Icons are more than just a fantastic way to break up content; they’re also a useful way to communicate flow (where our eyes should start and then where they should proceed). Icons can act as a placeholder for text and assist viewers with a language barrier. However, don’t forget to include proper alt tags! An alt tag is non-visible text that can be read by an assistive screen reader that describes an image on a page. This helps visually impaired people understand what’s being shown on screen.
Below are a few other more general concepts I mentioned in the podcast.
Typeface Choices
For courses or documents that are fairly text heavy, body text should be no smaller than 12 point (or 16 pixels) in size. The absolute minimum you should use is 9 point (or 12 pixels) for non-essential information, such as legal footers or copyright information. Also, sans serif typefaces (without “tails” and “feet”) are the best for legibility. Some common examples are Verdana, Arial, and Tahoma.
Tab Order
As I noted in the podcast, failure to pay attention to tab order is one of my personal pet peeves. Tab order is a critical part of navigating through a course or document, not only for those with impairments, but also for those who use keyboard shortcuts (mainly the “tab” button) to jump from one field to the next. When done correctly, users can move through elements in a logical flow, minimizing the frustration and confusion of jumping from one random spot to another. Tab order is also required for compliance with the Web Content Accessibility Guidelines (WCAG). These guidelines are equally relevant to PDF forms, websites, and e-learning courses with interactive elements. An example with the tab order numbered is shown below.
Accessibility for Virtual Reality
As a parting (hopefully provoking) thought, I want to leave you with the concept of accessibility for virtual reality. There’s a fantastic Wired article on accessibility in VR and how complex some of the challenges are and will be. One of my favorite (albeit simplified) examples is from a game I’ve actually played before, Polyarc Games’ Moss. The main character is a mouse that uses American Sign Language (ASL), something I didn’t realize when I played it! I know this is only one of the issues facing VR accessibility, but I do find it clever and encouraging. Even if VR can’t be accessible for everyone, it is valuable to resolve as many accessibility issues for VR as possible.
As long as technology evolves, the need for creative accessibility solutions will continue to grow, and good design will be right in the forefront!