Instructional Design and Accessibility: Cognitive Curb Cuts

By Stephanie Roberts <Stephanie.Roberts@unco.edu>

University of Northern Colorado, Doctoral Student

Lead Instructional Designer, National Center on Low-Incidence Disabilities

Introduction

Curb cuts were first instituted for accessibility when the Americans with Disabilities Act (ADA) in 1990 mandated that physical, public locations be accessible for any user. City streets with curbs had to be cut in spots where wheelchair users could move along sidewalks without endangering themselves. This concept of the curb cut was been extended into a metaphor for accessibility when in 1998 Section 508 was added to the Rehabilitations Act of 1973, requiring electronic and information technologies to be accessible to people with disabilities. The metaphor of the “curb cut” by now is heavily overused, even borderline abused; yet, the concept and practice are woefully unrefined. For example, a common misapplication of the curb cut is one that leads diagonally to the opposite curb. A blind person using a cane to navigate her walk would exit one curb cut and logically follow a straight path – right into traffic. Accessibility for web sites and electronic media faces the same sorts of qualitative challenges: the mere presence of a curb cut does not mean we have made the content fully accessible. As accessibility gains more attention, most of the how-tos provide tips on making a site technically accessible, but they give no attention to considering content and message, leading users or learners with disabilities right into the middle of a cognitive traffic jam.

Of specific concern are those qualitative aspects of accessibility that are critical in learning environments: the cognitive aspects. Section 508 mandates that any information available to the general public through information technologies should be accessible, in accordance with ADA, and course content certainly falls within such definitions. However, many of the solutions for making that content accessible turns out like an ill-conceived curb cut. The instructional design community (a) is uniquely equipped - through our understanding of media characteristics, message design and learning theories and strategies – to provide truly useful solutions for accessibility and (b) should be involved in the discussions on web accessibility to keep cognition and learning prioritized over tools and techniques. This discussion will focus on distance or computer-mediated learning environments; however, this conversation could be applied to all learning environments. Instructional designers can transfer what we learn about virtual environments to physical environments, and vice versa, so it is important to keep in the backs of our minds the implications of this topic for all instruction we design.

;

Levels of Accessibility

Designers need to be acutely aware of different levels of accessibility in order to make it work. At the National Center on Low-Incidence Disabilities (NCLID), we break accessibility into three levels: physical accessibility, technical accessibility, and cognitive accessibility. Physical accessibility is the infrastructure -- the curb cuts or auditory cues – resulting from ADA and Section 508. It seems like this form of accessibility should be enough, but in practice it often translates into a “they’re there” mentality. Ramps are in place, curb cuts are cut, the elevator has audio announcements of the floor – they’re there, often in all their slippery, diagonal, and inaudible glory. In an online environment, a page or site may have alt tags, d-links, and cascading style sheets, but still not be truly accessible (see http://vision.unco.edu/AccessibleDesign/ for more).

The second level of accessibility – technical accessibility – is the user side in which users or learners have the technology they need in order to access a locale. These technologies may be wheelchairs, a car or bike, a computer, and distance learning equivalents such as an internet connection, JAWS (the leading screen-reader software for blind users), or a switch (for severely or physically disabled users). Designers of distance learning environments cannot provide our geographically distant learners the computer infrastructure they need at home to access their online courses, but we should be aware that students must be able to access the place of learning, whether physical or virtual.

The third level of accessibility is what we have termed cognitive accessibility. Cognitive accessibility is giving users (or learners) equal cognitive access to content. It is the super layer of strategies and methods that help any learner or user understand or cognitively integrate the interface and content. Every user accessing an environment should have the same understanding of how the interface operates and the meaning of any content regardless of form or media. Cognitive accessibility accounts for message and information design behind everything on a website, for example, from an entire interface design down to a specific graphic to ensure those same messages are conveyed through multiple avenues for users accessing the site in different ways.

Practitioners who have worked with accessibility online or in classrooms often state that when an environment is made accessible for one set of users or learners, it’s improved for an even broader audience, often better for the entire audience. This has become a fundamental tenet of the universal design concept (Rose and Meyer, 2002; Fletcher, 2002; Barreto, 2002). So the benefits of accessibility extend to all our users or learners. Actual curb cuts that make city streets accessible for wheelchair users are also a welcome relief for runners, bikers and parents pushing strollers. A teacher who first writes information on a board THEN turns around to speak that same information to the class has just added a layer of accessibility for a hard of hearing student in his class who visually sees the teacher emphasizing information. Furthermore, he has presented the content bi-modally to ALL the students but sequenced that delivery so as to reinforce the content, not completely overlay one mode on another. Similarly, effective alt tags or descriptive links on a website reinforce the meaning of graphics.

A Case for Why Cognitive Accessibility Is Important

First, I need to partially debunk accessibility validation tools. Many people addressing accessibility will use validation tools such as Bobby (www.cast.org) to identify accessibility problems with a site. These tools will check the HTML code of a site to determine whether the site meets different accessibility criteria. Bobby, or some similar tool, is a great place to start for assessing accessibility, but a really bad place to stop. Bobby can tell you whether something is there, such as an alt tag, but it cannot report on the quality of that alt tag. So we then have a graphic with the alt tag “graphic” that is accessible according to Bobby, but not according to a blind user with a screen reader.

Second, the instructional design perspective is missing from the larger discourse on accessibility. We bring the perspective of designing learning for a diverse learner population, and our specific knowledge of and emphasis on message design and cognition means we can speak to and improve the qualitative aspects of accessibility.

The third reason is the thicker one where most of the following techniques will focus. Message design is both explicit and subtle. Instructional designs send both explicit and implicit messages to the learner. Some techniques, such as advanced organizers or descriptions of graphics, make the content or message explicit; other characteristics like sequencing, directional cues, and consistent layout send more subtle cues to the learner. Cognitive accessibility focuses on making sure all learners or users have access to the subtle message as well as the explicit.

Techniques: Translation into Practice

Integrating cognitive accessibility into an instructional design requires the designer to stand back from the design and consider what messages are being conveyed through different graphics and through the interface. Such considerations include how a graphic is being used, whether that graphic is important or not, how the user should use a site, how to cut clutter from the important message, and so on. Basically, cognitive accessibility considers accessibility through some of the theories and strategies we already have: reducing cognitive load (Kirschner, 2002), chunking information for better retention and schema development (Ormord, 1999; Lohr, 2002), and providing “gestalt” – a sense of how the pieces fit into the whole - for learners (Ormord, 1999; Lohr, 2002). In some instances, it requires us to go beyond how we usually consider graphics (Fleming & Levie, 1993; Tufte, 1990) of how to design the best instructional graphic to articulating what the graphic communicates through its structure AND its style. This loops us back into considering the affective as well as cognitive content of graphics and interfaces.

A brief description is also in order of how blind users access a website, since what follows stems largely from working with that particular audience. Blind and visually impaired users use some form of alternative output for accessing any computer content, the most common being Braille output through a Braille keyboard and auditory output from a screen reader. By far, the screen readers outweigh Braille output in their usage, and JAWS is the leading software for auditory output. JAWS sifts through the HTML code of a web page to read the content to a user. To hear a sample of JAWS, go to our online tutorial at http://vision.unco.edu/AccessibleDesign/ and select “Hearing the Page.” In order to design an accessible web site and page, you must understand how the page sounds as well as how it looks. JAWS reads a page straight down in a linear fashion and reads the alt tags for graphics as well as other marked-up language (for more information on JAWS, visit www.freedomscientific.com or download a free demo version at http://www.freedomscientific.com/fs_downloads/jaws_form.asp). For pages set up in frames, JAWS allows the user to jump from frame to frame, reading them as a series of separate web pages. Once you understand what JAWS offers its users, you can build some very powerful ramps and curb cuts for your website.

Examples
Let us start with looking at graphics on a website. We can consider how to treat graphics by breaking them into four types:

1. filler graphics - not really meaningful, typically for decoration

2. simple content graphics - examples would be a person's photograph, a basic photo of anything, a simple logo, etc.

3. action graphics - the user must act upon the graphic (e.g. click on it) in order for something to happen

4. content-rich graphics - examples would be diagrams, maps, complex logos, etc.

Using this sort of classification scheme will really help get at the whole message a graphic is communicating. Filler graphics, the first and most basic type, are all over the web, although not commonly found on educational or instructional sites. For example, I use the following graphic on a site for Instructional Applications of Typography just to break up some content and add an overall feeling to the page and site:

Alt Tag: Three Egyptian Guys

The alt tag conveys the graphic both in content and in import. The sparse description of three little words and the informal “guys” convey that the graphic is nothing to spend any time contemplating. I want my sighted or blind users to spend one second at most cognitively integrating the content of this graphic.

Simple content graphics, our second type, are far more common on instructional sites. These may include an instructor’s personal photo, a university logo, or some other graphic that carries meaning but does not instruct in any way. These require a bit more thought for their accompanying alt tags, which need to convey both the content and import of the graphic. Instructor photos or similar type graphics could have descriptive alt tags like “A photo of me, in my younger years, and I still look that good” or “Me and my husband riding a camel in Cairo.” A university logo would be more than just a filler graphic because it sends the cue to a user that she is in the right place (or maybe not in the right place). For such logos, I will usually put “Welcome to <insert name>” on the first page, since the logo is acting as an orienting or welcoming graphic. On following pages, I revert to a standard alt tag, like “UNC logo” so blind user will pass right over it and expend no energy cognitively integrating it, much as a sighted user will begin to ignore the logo. This should not be translated into a need to NOT have an alt tag in such instances of a graphic’s repetitive use because then the blind user has no idea what the hole is (he’ll hear “Image” then no alt tag) and will then expend too much energy wondering what he’s missing.

Action graphics are separated out because they are serving a unique function. Often, these are buttons or graphical words that by convention a sighted user will know to click on them. Alt tags for action graphics should begin with a verb – the most efficient way to communicate to a user that they will go somewhere or get something when they select that graphical link. For example, in our online classes, our standard menu includes Schedule, Resources, Discussion, Assessment, and Standards. Keeping the visual to one word for the links keeps the graphic and interface nice and concise. Alt tags read “Read the list of resources you need for this course,” and “Go to the class discussion area.” Again, sighted and blind or visually impaired students alike said the site was easier to use when we shifted to better alt tags such as these site-wide.

The fourth classification catapults this discussion into a whole different treatment of graphics and web content or interface altogether. Content-rich graphics like charts, diagrams, conceptual models, and photos are rampant in instructional settings. These are the graphics we are used to talking about in instructional design, and these usually need more than what a little alt tag can handle. As a rule, we keep alt tags down to no more than 10-12 words, including articles and prepositions. At this point, the designer needs to start considering clutter – verbal and visual clutter.

In most instances, a D link is the best technique for making content-rich graphics accessible. In its most common application, a D link is the letter D in brackets ([D]), and the D links to an HTML page with a text-only description of the content-rich graphic. A blind user will hear the “D” read out loud by JAWS as a link, and they then have the option of selecting that link or passing over it. While this technique is friendly to blind users, its typical implementation isn't as friendly as it could be. All the blind user knows is that he or she is clicking on a "D" - he or she does not know what kind of information they're asking for by clicking on the D link. Maybe it's something they want; maybe it's a distraction or not worth the time. In order to give the user control, may we suggest that D links truly become descriptive links:

[Read description of logo]

But let’s put yet another spin on this technique of the D link. Sighted visitors have a nasty habit of paying attention to everything and not fully sorting out what needs attention and what does not (that cognitive load issue). There is one very simple thing you can do to keep the descriptive link by your graphic and NOT distract sighted visitors with its presence. We call this "white-on-white" - make the link the same color as the background of the page (or at least make it blend as best as possible if you absolutely must use a busy background). The descriptive link is still there on the page, waiting for a screen reader to catch it, but not cluttering the page or the mind of your sighted visitor. Again, more examples are in the D Links section of our online tutorial.

As it turns out, white-on-white is a versatile technique to use site-wide to help blind users with the entire interface, and these have turned out to be the more powerful applications of the concept. Take a website that is set up in frames (example at http://www.nclid.unco.edu/CTG2002/frames.html). A sighted user quickly gets the visual cue that the header and navigation frames do not change, only the content in the main frame changes as she makes a selection. She also only pays attention to the navigation frame when she wants to make a new selection. She has received appropriate visual cues that help her cut down the cognitive load. A blind user, on the other hand, keeps reading through each frame with JAWS to make sure none of the content has changed. The cognitive demands of the user increase because he constantly has to step away from the main content to make sure he is getting everything.

In terms of navigation and layout, the research on this appears to be shaking down to consistency (Parsons, 2001). A consistent design reduces the cognitive load of an interface because users or learners eventually cease to spend time figuring out the interface and can ignore what they don’t want and move directly to what they do want. This message rings true for accessibility: a consistent design, wherever your navigation is, allows a user with a screen-reader to move quickly to different pieces instead of having to re-cognize the page every time she goes to a new one.

Opening the Discussion

This paper admittedly keeps the discussion limited to online environments, and more specifically limited to cognitive accessibility for blind or visually impaired users and how accommodations for those users improve a site for all users. We have only recently begun discussions within our Center on what comprises good design for deaf users or physically disabled users. And by no means does this paper explore the full-range of techniques, since cascading style sheets, captioning and other topics have not been covered here. However, the discussion moves forward from here into design strategies or philosophies that guide the use of all techniques and tools. Can we find strategies that cut across the tools for accessibility to guide us in contextual accessibility design? What is the nature or characteristics of cognitively accessible design? How can we address the affective content in the message as well through these strategies? Just how does accessibility improve the learning environment for most or all students? And finally, what can our field contribute to improving online learning for all learners?

References

Barreto, R. (2002). The art of universal design: Designing for the 21^st Century II pre-conference. http://www.adaptenv.org/examples/barreto.php?f=4.

Fleming, M., and Levie, W. H. (1993). Instructional message design: Principles from the behavioral sciences. Englewood Cliffs, N.J. : Educational Technology Publications.

Fletcher, V. (2002). Universal design, human-centered design for the 21^st Century. http://www.adaptenv.org/examples/humancentered.php?f=4.

Kirschner, P. (2002). Cognitive load theory: Implications of cognitive load theory on the design of learning. Learning & Instruction, 12(1), 1-10.

Lohr, L. (2003). Creating Graphics for Gearning and Performance: Lessons in Visual Literacy. Upper Saddle Creek, NJ: Prentice-Hall.

Ormrod, J. (1999). Human Learning (3rd ed.). Upper Saddle River, NJ: Prentice Hall.

Parsons, C. (2001). The efficiency and preference implications of scrolling versus paging when looking for information in long text passages on a web page. Unpublished doctoral dissertation, University of Northern Colorado, Greeley.

Rose, D., and Meyer, A. (2002). Teaching every student in the digital age: Universal design for learning. Alexandria, VA: Association for Supervision and Curriculum Development.

Tufte, E. (1990). Envisioning information. Cheshire, CN: Graphics Press.