Written by: Pamela Kachka on December 2, 2011.
Pamela Kachka, MAEd
Academic Trainer & Consultant
Pearson eCollege
As we roll on through 2011, the speed of technology in online learning has not slowed a bit. In fact, it is safe to say that with improvements and enhancements in the LMS, the availability of ebooks and the access to third party online tools, our ability to effectively teach online grows exponentially. So, with that thought in mind, are we, the educators and the instructional designers, improving the courses we teach and design exponentially? No matter what our course building expertise might be whether it is copying and pasting from word processing documents, building content directly in the visual editor, organizing that content in a table because it looks better or doing it all with the help of some HTML editing or use of a style sheet, are we building with universal design principles that will make our content functional and useful? My guess is that the answer is no. The reason I feel so confident saying no is that when we educators create content accessed online whether it is an eCompanion to a face-to- face course, the digital portion of a hybrid course or a fully online course, we are going with what we know and most of us do not know too much about universal design. I know I did not and I have been designing content online for over a decade.
So let us start there. What is universal design? When talking about design in broad terms be it a book or a spatula, a key or a content page in an online course, most designs succeed because the majority of users find it functional and useful. What universal design considers is that is that slight modifications on the design side will lead to accessibility by more than the simple majority. It will also include some of the other groups in the minority. They only require a few changes or additions and now that item, that product, or that Webpage is accessible to their group as well. This can affect both the Web content for consumption and the Web content for contribution (such as student assignments). By creating Web content with universal design in mind, you have designed the content or assignment with the intention that the user will finish or adjust that design as appropriate.
Recently, in a Webinar, participants were asked to sign their name with their left hand inside a grid square on a whiteboard in a synchronous session. The results were that some could not fit it in the box. Others fit it in the box but it was illegible. Yet others wrote it perfectly as directed. So the flaw with the design of the task was in locking the task down to a specific area and use of the left hand. Those left handed had few difficulties but right handed participants struggled. Others might have struggled with the use of a mouse to write on a computer screen. What if the assignment allowed participants to simply put their name on the grid? Those who struggle with using the mouse might have chosen the typing tool. Clever participants might have found an image of their name elsewhere and copied and pasted. Those with dexterity in one hand or another would use their primary hand to complete the task with their mouse. The better end result or universal solution is that the task is completed but the participants individually determined which way to accomplish the task (Hall, 2011).
That was an example of an assignment, overly simplified, but the point should be clear. When we think about designing our content pages, there are a few things we can do that will make the content more universally accessible. If we go back to our first days learning to build Webpages, we were told to put our content in tables to make it more likely to appear as it would in a word processor (a familiar comparison). We learned that there are 72 pixels in an inch so we can set the size of the table based on how many inches we want it to take up on the screen. We also learned that the alt text for an image was for those who could not see it. These tips were doled out for those who were not hard coders and built online content using a WYSIWYG editor now commonly referred to as a visual editor. While these tips have made building course content easier as time goes on, those initial tips have evolved and most online educators need to update their library of basic design rules.
In order to understand the concepts of universal design in creating online content, it helps to see examples of universal design out in the world. One solid explanation of universal design describes it as including but not limited to:
The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.
- The design is useful and marketable to people with diverse abilities.
- Provide the same means of use for all users: identical whenever possible; equivalent when not.
- Make the design appealing to all users.
- The design minimizes hazards and the adverse consequences of accidental or unintended actions.
- Provide fail-safe features such as an “undo” feature in computer software that allows the user to correct mistakes without penalty (Connell et al., 1997).
A primary example in the world is the sloped curbs on most sidewalks. All new sidewalks are built with them and many already built sidewalks have been renovated to include them. If you ride a bike on most paths in urban and suburban areas, it is much nicer to cross intersections down a slope instead of bouncing down the curb. All Apple computers have an extensive built in screen reader. One student indicated that he used the screen reader to read or listen to the text of course content out loud while doing chores around the house (Hall, D., 2011). The kitchen tool company OXO set out to make kitchen gadgets that did not hurt the hands of the user. As development progressed, they realized the universal need for easier to hold and easier to use tools which affected the average user, the aged user with arthritis and the user with mobility issues. Their entire product line developed out of these simple goals. A couple other examples are cabinets with pull out shelves or museums that allow visitors to choose to listen to audio or read the descriptions or both. It is apparent that universal design has worked its way into our lives in many ways and often goes unnoticed. We are not usually the designers but rather the users. As designers of our online content, we need to start thinking about ways we can universally design our content so that it works its way into the lives of the users unnoticed. When that happens, we are accommodating many population groups instead of the majority population group.
So, moving into the Web design for online teaching world, a new perspective might be necessary. It is important to realize that some online users do not use a pointing device such as a mouse. These people interact using a keyboard or some other tool that sends commands to a keyboard. Therefore, all interaction on a Website needs to be accessible whether using a mouse or a keyboard. On the Web, the optimal design is one that adapts to the user’s environment. For most of us, we do not expect to take control of a design and make it more suitable to our needs or better match our expectations (Horton, 2004). But the Web is different when it comes to design. Designers must work within the medium and deliver content in a format that can be transformed as needed by the user. Additionally, designers need to respect the boundaries of the user-controlled environment. When these boundaries are crossed, even with the best intentions, usability suffers. Conversely, users need to learn the functions and features that are under their control, and use the available tools to customize their environment (Horton, 2004).
One example of this concept in use is designing content to fill a browser screen versus designing content with fixed widths. So knowing that there are 72 pixels in an inch helps for resizing images to make them Web-ready but might not be the best design choice when used in a table. Many designers fix the width to maintain the integrity viz. design of the content. However, considering universal design, pages that adapt to fill the Web browser are more universally accessible. This allows you to open a page on a mobile phone, a 42 inch monitor, or a tablet such as an iPad and fill the screen appropriately. It allows someone with poor eyesight to enlarge the text without affecting the design. For many it is a new paradigm in design but, nonetheless, it is worth considering and then implementing so that a greater number of groups of people have access to the Web content instead of only one group—the majority group.
So, in addition to the fixed width giving way to flexible width to achieve universal design, here are more design suggestions to make your Web content universally accessible.
Designer Mindset— Before designing the next page of content, it is worth bearing in mind at all times that every page designed might be read by someone using a screen reader. So while some design suggestions benefits different groups for different reasons, almost every suggestion will benefit someone using a screen reader.
Font Type—While the research is split on whether serif font such as Times New Roman is easier to read online or whether sans serif font such as Arial is easier to read online, the balance tips in the direction of sans serif font (thus this article is posted in a sans serif font). In my efforts to find the research backing up this statement, I found about 55% of the articles favored sans serif font and 45% of the articles favored a serif font for text online. However, considering all the content on the Web that is text, it is obvious that most others agree with using a sans serif font because that is the predominant font on the Web. Sans serif font or font without hooks is easier to read on screens.
Text—Text content is a necessary component in online learning. In the Webinar I referenced in the beginning, I heard the presenter provide the following guideline for writing for the Web. Write it out and then delete 60% of the words; delete connector words and put into bullet points (Hall, D., 2011). That may be a difficult goal to reach for many but 60% fewer words in any lecture content item is likely to be more effective.
Colored Text—Many users of the Web cannot see certain colors. Make sure when choosing color combinations that you use combinations that have high contrast. Also, bear in mind that those with visual color deficiencies will not be able to see certain colors. Lastly, do not change text color to blue for emphasis because it looks like a link and users wonder why the link does not work.
Bold/emphasis— Our team uses the term double coding when referring to emphasis in content. Some methods are better than others for emphasizing important details. Do not underline because it looks like a link. Color for emphasis helps but some users cannot see the color change. So in additional to a color change, it is recommended that you double code such as making the text bold as well. Even better is to add the word bold into the text just before the important detail or mark important details with asterisks.
Navigation Links—Include as much detail to describe where the link leads as part of the hyperlink on the page. In the sentence–click here to navigate to the museum of science and nature Website, build the link on the words–navigate to the museum of science and nature Website–instead of just click here which removes the indications, for those using a screen reader, where the site leads.
Tables—As mentioned before, tables were the way that most of us using WYSIWYG editors instead of hard coding HTML built content online in an nicely formatted layout. Tables are a challenge for screen readers when used for content presentation. When used for data presentation (which admittedly is the primary purpose of tables) they cause fewer problems. The best rule around tables would be that if it is your only best option for design, the content presentation should make sense when reading it from left to right. Otherwise, if you can use HTML commands such as blockquote to create margins on the page around the text and content, that is preferable to a 1X1 table. This site provides more tips for universally designing a table.
Images/Graphics—include images and graphics to present content via different modalities. Only insert images and graphics that are relevant and further convey a concept. When adding alternate text, be very descriptive. Those viewing the image with a screen reader or as text only with images suppressed should be able to see in their mind what the image, table or chart looks like.
Cut & Paste—when pulling content from other resources and using cut/paste commands, paste the content as plain text and format it within the visual editor. Trying to copy formatting and links from a word processing document often creates a poorly designed replacement. It takes more effort but it will look better visually and screen readers will read the page more cleanly as well.
There are many sites available with universal design tips. See the bibliography below as a starting point.
The topic of universal design includes many aspects depending on what you are designing. In Web content specifically, because the end user has the ability to further adjust the content to make it usable for him or her, we the designers of the content need to keep those potential adjustments in mind and design under the assumption that one or many tools might be used by each different end user. While this is frustrating to some designers, it is really actually pretty powerful to consider designing something so well that almost anyone can access the content, interpret the meaning and do so in a way most effective for that one user. As one research group stated:
People who could benefit from more universal designs include many both with and without disabilities. They include:
- People in a noisy shopping mall who cannot hear a kiosk
- People who are driving their car who must operate their radio or phone without looking at it
- People who left their glasses in their room
- People who are getting older
- People with disabilities
- Almost anyone (Trace Research & Development Center, 2010)
So next time you post something on the Web, strive to benefit almost anyone.
Bibliography:
Colblindor. Coblis – Color Blindness Simulator. (2006). Retrieved October 19, 2011 from http://www.colblindor.com/coblis-color-blindness-simulator/
Connell, B. R., Jones, M., Mace, R., Mueller, J., Mullick, A., Ostroff, E., Sanford, J., Steinfeld, E. , Story, M. & Vanderheiden, G. (1997, April 1). The 7 principles of universal design. The Center for Universal Design NC State University, Retrieved from http://www.ncsu.edu/project/design-projects/sites/cud/content/principles/principles.html
Hall, D. (August 26, 2011). Universal Design. Retrieved October 13, 2011, from https://at.ccconline.org/training/http://www.ggu.edu/university_library
Horton, S. (2005). Access by Design: A Guide to Universal Usability [electronic version]. New Riders Press. Retrieved October 13, 2011. from http://universalusability.com/index.html
Horton, S. (2004, September 1). Forging a partnership between designer and user. Digital Web Magazine, Retrieved from http://www.digital-web.com/articles/designer_user_partnership/
Krovitz, G. (2010, November 10). Being disabled for a day [Web log message]. Retrieved from http://blog.ecollege.com/WordPress/?paged=5
Listening is Learning. How Does Description Benefit Students Without Visual Impairments? Retrieved October 18, 2011 from http://listeningislearning.org/background_description-no-bvi.html
OXO. About OXO. Retrieved October 19, 2011 from http://www.oxo.com/aboutOXO.aspx
The Trace Research & Development Center. (2010). General Concepts, Universal Design Principals and Guidelines. Retrieved October 17, 2011 from http://trace.wisc.edu/world/gen_ud.html
University of Central Florida Teaching Online. (2009). Accessibility Tips. Retrieved September 23, 2011 from http://teach.ucf.edu/resources/creating-accessible-course-content/accessibility-tips/
WebAIM. Creating Accessible Tables. (2011). Retrieved October 18, 2011 from http://webaim.org/techniques/tables/