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

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

About usAnn 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

Music 295A: Early Field Experiences in Music Education

Foundations level

course with peer

teaching and early

childhood

experiences.

Music 295A: Early Field Experiences in Music Education

● Taught annually

● Multiple sections

● Drain on resources

● TA use and training

● Too “in general”

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?

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.

3 Levels of Collaboration1. Contribute content.

2. Construct curricular

materials.

3. Use the series in their

classes.

Share expertise.

3 Levels of Collaboration1. Contribute content.

2. Construct curricular

materials.

3. Use the series in their

classes.

Develop

curricular

content to share.

3 Levels of Collaboration1. 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.

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

...but when I designed it, I was designing for

the masses like me.”

“The goal of my project was bringing

knowledge to the masses

Ann’s Perspective on AccessibilityFear

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?

What is inclusive design, or universal design?

Inclusive DesignUX and Accessibility from the Beginning

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.

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.

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)

Plan for diversity by ... Offering options for completing tasks

Providing accessible documents

Using good web page design practices (WCAG 2.0)

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

The Design Process

Ideas

Bueller? Bueller?

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

World Campus students think that

ideal length of Online video is…

3:00-5:00Source: In-course survey of LST 370 SP12 students.

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

VIDEOS ARE

PICTURES!

moving

movingmovingVIDEOS ARE

PICTURES!

Mockups

Ted-Inspired Scrolling

Content Tabs Below Video

Wireframes

Final

The Burden of Inclusive Design

Design Development Accessibility & Usability

The Benefit of Inclusive Design

“Teaching is a series of decisions that increase the probability that learning will occur.”

The Benefit of Inclusive Design

Accommodation accessibility brought in at the end

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?”

It’s about being ready for

“when...”

Inclusive design is not about planning for “if…”

Development Accommodation Re-work

The Burden of Accommodation

Course Review ProcessI 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?

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.

Headings are used well on this page.

Good FormattingThe Resources page for faculty is using a list to

organize content along with clear link text.

Course Review Results: FixesHigh Priority

Low PriorityE

asy

Har

d

1 2

3 4

1. Easy high priority fixes

2. Hard high priority fixes

3. Easy low priority fixes

4. Hard low priority fixes

Easy Top Priority Fixes• Link text - Make the module headings, links and

eliminate the “Go to Module” links.

Here the headings are also links.

Easy Top Priority Fixes• Fix heading levels.

• Add meaningful alt text to images.

Image alt text ExampleCurrent alt text for this badge image is

<img alt=“cmes_badgecomp_3” />

After fixing, it looks like this

<img alt=“performing badge” />

Hardest Top Priority FixRedesign 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.

• Make sure videos don’t autoplay.

• Add video transcripts.

• Make all documents accessible or convert

content to printable HTML pages.

Hard Top Priority Fixes

What can you do about inclusive design today?

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.

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

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.

DIY Inclusive Design

Celebrate progress!

We are happy you took your time to be here.

ResourcesPenn 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 [email protected] to arrange for expert testing and consultations.

UX Team (WCLD) - <[email protected]>