Online Content & Universal Design for Learning

1. Online Content & Universal Design for Learning January 8th, 2009 Marla Roll, MS, OTR Director of ATRC, Office of Equal Opportunity & Diversity Assistant Professor, Dept of Occupational Therapy Jesse Hausler Coordinator of Assistive Technology IT ATRC, Office of Equal Opportunity & Diversity

2. Objectives of Today’s Presentation Access Project at CSU Principles of Universal Design for Learning Online Content and Universal Design for Learning

3. Access Project ACCESS to Postsecondary Education through Universal Design for Learning A grant funded by the US Dept. of Education, Office of Postsecondary Education ACCESS II just awarded in late 2008

4. Objectives of Access I • Development of tutorials for faculty development • http://accessproject.colostate.edu/udl/modules/index.cfm • Development of self-advocacy materials • http://accessproject.colostate.edu/sa/ • Begin research on outcomes related to implementation of Universal Design in CSU gateway courses • http://accessproject.colostate.edu/research/

5. Objectives of Access II • Expand research – data will be collected to measure: • Perceptions of increased access to course content • Increased opportunities for engagement and representation • Karla Gingerich and Psych teaching Fellowes • Ken Blehm and CVMBS faculty • Dissemination of Access I materials

6. What is Universal Design for Learning? A set of principles and techniques for creating inclusive classroom instruction and accessible course materials. At its core is the assertion that when instructors increase the number of learning options available to students, everyone benefits.

7. What is Universal Design for Learning? • As conceptualized and implemented at CSU, UDL consists of three broad principles: • Presenting information and concepts in multiple ways and in a variety of formats. • Allowing students multiple ways to express their comprehension and mastery of a topic. • Encouraging students to engage with new ideas and information in multiple ways.

8. What is Universal Design for Learning? • An extension of Universal Design as it relates to architectural concepts • Design and build structures that accommodate the widest spectrum of users • Includes individuals with disabilities, without the need for adaptation or specialized design • By applying the notion of built-in flexibility to the educational curriculum, UDL promotes equal access to information and learning.

9. How can this image of bike riders explain Universal Design? Example

10. Universal Design for Learning is just good teaching! • UDL acknowledges the diversity of students in today’s classrooms: • students with different life experiences • language backgrounds • learning styles • abilities and disabilities • UDL recognizes the ever-widening range of instructional technologies employed by faculty and students. • The goal of UDL is to make learning, and the materials of instruction, accessible to all students.

11. UDL and the Web • Let’s start with some common Misconceptions • Everyone has the same screen size that I do. • Everyone either can or prefers to read page content with their eyes. • Everyone can use a mouse to navigate. • Everyone can interpret the audio portions of my page with their ears. • Everyone can visually interpret the pictures, charts, and diagrams on my page.

12. UDL and the Web • In Reality: • Users may have small monitors, use a low resolution, screen magnifiers, or mobile devices. • Users may be Dyslexic, Blind, or have other needs or preferences for Text-to-Speech. • Some users do not use a mouse. • Users may prefer not to, or be unable to process auditory information. • Users may prefer not to, or be unable to process visual information found in charts, images, and diagrams

13. UDL and the Web • So what do I have to think about? • HTML structural elements and Cascading Style Sheets (CSS) • Images, Charts, and Diagrams • Keyboard vs. Mouse • Transcripts, Captions, and Descriptive Text • Tables • Forms

14. HTML Structure and CSS • Separate Content from Presentation • Use appropriate structural markup: • Headings: <h1>, <h2>, <h3>,… • Paragraphs: <p> • Logical Divisions: <div> • Lists: <ul>, <ol>, <dl> • Tables: <table>, <th>, <td>

15. Images, Charts, and Diagrams Value of an visual element is limited if meaning is only conveyed visually Include an associated alternative text for visual elements Describe the meaning given the context, rather than its appearance Completely describe Charts and Diagrams Acknowledge decorative images

16. Image Context How does the context of this image effect the alternative text?

17. Example of a Chart • The Alt text for this chart would say: • Fastest growing occupations in 2004-2014. • Home health aides 56%, • Network Systems and Data Comm Analysts • 54.6%, Medical Assistants 21%, • Physician Assistants 49.6%, • Computer Software Engineers 48.4%, • Physical Therapist 44.2%, • Dental Hygienists 43.3%, • Computer Software Engineers 43%, • Dental Assistants 42.7%, • Personal and Home Care Aides 41%

18. Keyboard Access Some users prefer and other users need to navigate the web without using the mouse. Any webpage can (and should) be made navigable using only the Tab, Arrows, and Enter keys. JavaScript and AJAX are the biggest culprits of keyboard inaccessibility, but they can be made keyboard friendly. Avoid using “onMouse” script actions without providing a keyboard alternative.

19. Transcripts, Captions, and Descriptive Text Transcript – written or text based record of dictated or recorded speech Captions – transcript timed to display with the video track Descriptive Text – narration of key visual elements in a video or multimedia product, including action, setting, and characters necessary for understanding

20. Transcript

21. Captioning

22. Tables • Avoid nesting tables inside one another. • Use the <caption> tag to include a description. • Use <TH> for table headers cells. • Use <TD> for table data cells. • Properly markup tables with two or more logical rows and/or columns of headers. Use tables for Data only whenever possible, avoid using tables for layout purposes.

23. Forms • Ensure complete keyboard access, and a logical tab sequence. • <Label> form elements properly. • Group related elements using <fieldset> and <legend> tags. • Avoid dynamically changing forms and focus changes. • Use the proper form element for the situation. • Provide contact information, in case of trouble.

24. Web Accessibility Initiative • Web Content Accessibility Guidelines • WCAG 2.0 • Perceivable – processing content • Operable – Interaction with the system • Understandable – readable, predictable, error recovery • Robust – help in retrieving, rendering, interacting • BBC Videos • http://news.bbc.co.uk/1/hi/technology/7789622.stm

25. Microsoft Word, Excel & PowerPoint • Many of the same principles apply: • Styles and Headings • Images need alternative text • Proper use of tables • MS Word, Excel, and PPT examples (if there is time)

26. Contact Us Jesse Hausler jhausler@cahs.colostate.edu 970-491-0625 Marla Roll mcroll@cahs.colostate.edu 970-491-2016