When we think about all that goes into mastering good design principles, it’s no wonder that tackling accessibility can appear to be a daunting, unrealistic burden. In making content accessible, we have to think of a range of learners, but we can also look at the range of people who help create that content and make it accessible: internal university faculty, staff, and external corporate partners, educational technologists, accessibility specialists, etc. Using a single case study, we will then provide four perspectives to planning and building one online accessible learning project. Through our session, we will: define disability, identify the key attributes of inclusive design, and provide four role-based approaches to making content accessible. (For Elements: The Web Conference at Penn State: https://elements.psu.edu.)

1. One for All &
All for One
1 site, 4 perspectives on reaching ALL students

2. About us
Ann Clements, Associate Professor of Music Education
Elle Waters, Director of Strategy, Simply Accessible (http:
//simplyaccessible.com/)
Nikki Massaro Kauffman, User Experience Designer, Penn
State World Campus Learning Design
Sonya Woods, Accessibility Consultant, Penn State World
Campus Learning Design

3. Music 295A: Early Field Experiences
in Music Education
Foundations level
course with peer
teaching and early
childhood
experiences.

4. Music 295A: Early Field Experiences
in Music Education
● Taught annually
● Multiple sections
● Drain on resources
● TA use and training
● Too “in general”

5. Music 295A: Early Field Experiences
in Music Education
● I have specific expertise in about 60% of the topics I
teach. I know experts in the other 40%
● How do I bring them into my class longitudinally to
contribute that expertise?
● I can’t be alone in this - shouldn’t we work together?

6. Partner with music education faculty from across
the CIC to create a series of collaborative learning
modules that leverages specific expertise found
at each participating institution.

8. 3 Levels of Collaboration
1. Contribute content.
2. Construct curricular
materials.
3. Use the series in their
classes.
Share expertise.

9. 3 Levels of Collaboration
1. Contribute content.
2. Construct curricular
materials.
3. Use the series in their
classes.
Develop
curricular
content to share.

10. 3 Levels of Collaboration
1. Contribute content.
2. Construct curricular
materials.
3. Use the series in their
classes.
Use the created
content and materials
in their own teaching
and encourage
students to build their
own content to share.

13. The Build
● Template chosen due to amount of media included and a
desire to have the media display well on PC and mobile
● Modifications were within the website architecture and
menu based on content, copyright, and desired aesthetics
● Limitations due to designer/builder time and the overall
schedule

14. ...but when I designed it, I was designing for
the masses like me.”
“The goal of my project was bringing
knowledge to the masses

15. Ann’s Perspective on Accessibility
Fear
Confusion
What’s this going to cost?
Who’s going to do this?
How long with this take?
See if it’s an issue? Or, wait to see if we get caught?

16. What is
inclusive design, or
universal design?

18. Inclusive Design
UX and Accessibility from the Beginning

19. Plan for diversity because...
Those accessing your content have varied ability:
Not all learners can see.
Not all learners can hear.
Not all learners can use a mouse.

20. Plan for diversity because...
Those accessing your content have varied situations:
They may be on a mobile device.
They may have a slow Internet connection.
They may need printable content.

21. Plan for diversity by ...
Offering content in multiple formats
Making sure all interactives can be operated by
mouse or keyboard
Designing it to work on multiple devices (responsive)

22. Plan for diversity by ...
Offering options for completing tasks
Providing accessible documents
Using good web page design practices (WCAG 2.0)

23. Plan for diversity by ...
Being ready to make accommodations when needed
Providing a contact person who can provide
alternate formats or modify tasks or know who
can help you when you need to do this

24. The Design Process

25. Ideas

26. Bueller? Bueller?
Source: http://edudemic.com/2013/01/professors-tedx-talk-shares-why-we-need-teachers/

27. World Campus students think that
ideal length of Online video is…
3:00-5:00
Source: In-course survey of LST 370 SP12 students.

28. The average college
student reads at…
250-350
…words per minute.
The average professional
speaks at…
150-175
…words per minute.
Sources:
•Ziefle, M. (1998), Effects of display resolution on visual performance, Human Factors, 40(4), 555–568.
•Williams, J. R. (1998). Guidelines for the use of multimedia in instruction, Proceedings of the Human Factors and Ergonomics Society 42nd Annual Meeting, 1447–
1451

29. VIDEOS ARE
PICTURES!
moving

30. movingmoving
VIDEOS ARE
PICTURES!

31. Mockups

33. Ted-Inspired Scrolling

34. Content Tabs Below Video

35. Wireframes

38. Final

39. The Burden of
Inclusive Design
Design Development Accessibility &
Usability

40. The Benefit of
Inclusive Design

41. “Teaching is a series of decisions
that increase the probability that
learning will occur.”
The Benefit of
Inclusive Design

42. Accommodation
accessibility brought in at
the end

43. The Benefit of
Accommodation
“Preparing ahead of time seems a
lot of work. Couldn’t I just wait and
see if I need to accommodate?”

44. It’s about being ready for
“when...”
Inclusive design is not about
planning for “if…”

45. Development Accommodation Re-work
The Burden of
Accommodation

46. Course Review Process
I look for potential barriers.
What if someone can’t see this?
What if they can’t hear it?
What if they don’t use a mouse?
Is this confusing?

47. Music Ed Site - What Works
• Excellent use of video.
• Videos are captioned.
• Videos are short.
• There are options for how to use the resource.
• Site is well organized.
• Resources pages are well organized.

48. Headings
are used
well on this
page.

49. Good Formatting
The Resources page for faculty is using a list to
organize content along with clear link text.

50. Course Review Results: Fixes
High Priority
Low PriorityEasy
Hard
1 2
3 4
1. Easy high priority fixes
2. Hard high priority fixes
3. Easy low priority fixes
4. Hard low priority fixes

51. Easy Top Priority Fixes
• Link text - Make the module headings, links and
eliminate the “Go to Module” links.

53. Here the
headings
are also
links.

54. Easy Top Priority Fixes
• Fix heading levels.
• Add meaningful alt text to images.

55. Image alt text Example
Current alt text for this badge image is
<img alt=“cmes_badgecomp_3” />
After fixing, it looks like this
<img alt=“performing badge” />

56. Hardest Top Priority Fix
Redesign the module menus so they work
with a keyboard and a screen reader as well
as a mouse.
The
module
menu can
only be
accessed
by those
who can
see and
use a
mouse.

57. • Make sure videos don’t autoplay.
• Add video transcripts.
• Make all documents accessible or convert
content to printable HTML pages.
Hard Top Priority Fixes

58. What can you do
about inclusive
design today?

60. DIY Inclusive Design
• Collect ideas. What works for you? Why?
• Use consistent navigation and styles.
• Collect feedback from different people at each phase
of design & development.
• Take advantage of user testing and include people
with disabilities.

61. DIY Inclusive Design
• Use unique and descriptive link text.
• Use semantic HTML markup, especially for headings:
<h1/>, <h2/>, etc.
• Use good color contrast: WebAIM Color Contrast
Checker http://webaim.
org/resources/contrastchecker/
• Use accessibly designed documents

62. DIY Inclusive Design
• Test by using a keyboard to navigate.
• Test by printing in grayscale.
• Test by trying to copy and paste text.
• Test by printing the content.

63. DIY Inclusive Design
Celebrate progress!
We are happy you took your time to be here.

64. Resources
Penn State Accessibility site Course Accessibility Guidelines page (http:
//accessibility.psu.edu/courses/courseguidelines/)
WCAG 2.0 at a Glance (https://www.w3.org/WAI/WCAG20/glance/)
IT Accessibility Team - Penn State faculty, staff and student developers
can contact accessibilityweb@psu.edu to arrange for expert testing and
consultations.
UX Team (WCLD) - <l-wcldit-consulting@lists.psu.edu>