Improving the Interactivity and Accessibility of Laboratory Manuals Using HTML/Javascript/Python

Mitchell Huot and Danielle Vlaho

McGill University

101st Canadian Chemistry Conference and Exhibition
Edmonton Alberta
May 31st 2018

Accessibility

"The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect."

-Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Accessibility encompasses any disability a student may encounter that affects their ability to access your material

  • visual
  • auditory
  • cognitive
  • neurological
  • physical
  • speech

Visual

Roughly 3.8% of Americans are blind or low-vision

But only 300 people with a reported disability receive a Ph.D. annually.

We can use a set of guidelines to help make our web based content more accessible

J. Chem. Educ. 2009, 86, 587-591

WCAG 2.0 Guidelines

Text should be re-sizable

Content accessible to text-to-speech software

Images should have text alternatives

Page should be navigable via keyboard

Colour

Colour should not be the only visual means of conveying information.

xkcd.com/1064/

Contrast

Low Contrast Text can be hard to read

Low Contrast Text can be hard to read

Low Contrast Text can be hard to read

Low Contrast Text can be hard to read

High Contrast Text is much better

The evolution of a lab manual

Printed out Lab manuals

PDF Laboratory manuals

HTML Lab manuals

Audio

  • The Canadian Association of the Deaf considers that there are approximately 357,000 profoundly deaf and deafened Canadians and possibly 3.21 million hard of hearing Canadians.
  • Add subtitle files to pre-lab videos
  • Added benefit: videos are now searchable
  • Also handy for students whose first language is not the language of instruction
1
1
00:00:11,066 --> 00:00:15,799
Copper is a reddish brown metal often used in pipes and electrical cords

2
00:00:15,800 --> 00:00:19,766
Canadian pennies were made of copper until 1996

3
00:00:19,766 --> 00:00:25,099
The point of our lab today is to show you that we can run a number of chemical reactions on copper

Interactivity

Interactive Practice Problems

Periodic Table

Fillable Forms

Outside resources

Limitations

Changing Web Standards:

  • Shockwave
  • Java
  • Javascript

Time

Thank you

- Dr. Danielle Vlaho
- Dr. Sam Sewall and Jean-Marc Gauthier
- McGill Chemistry Laboratory Staff
- All of my former students
- CSC organizing committee

[email protected] or [email protected]