Challenges and Opportunities in Creating an Accessible Web Application for Learning Organic Chemistry
Allyson Grace Yu · 2022 · Proceedings of the 24th International ACM SIGACCESS Conference on Computers and Accessibility (ASSETS '22) · doi:10.1145/3517428.3563284
Summary
This paper investigates the accessibility challenges of creating web-based educational tools for organic chemistry, a STEM subject that relies heavily on visual 2D and 3D molecular representations. The author notes that while 19.8% of undergraduate students report having a disability and demonstrate high interest in STEM during the transition to college, their representation drops sharply through postsecondary education and into the workforce. Organic chemistry is particularly relevant as a case study because it is widely perceived as a "weed-out" course and no existing organic chemistry educational website meets WCAG 2.0 Level AA standards. The study introduces webORA (web-based Organic Reaction Animations), a prototype web application built at Temple University that allows users to interact with 3D molecular reaction animations accompanied by text descriptions. The research follows a three-phase methodology: a questionnaire with 56 organic chemistry students to understand preferences and accessibility needs, usability testing with 12 participants (10 of whom self-identified as having a disability, including ADHD, anxiety, OCD, Ehlers-Danlos syndrome, and convergence insufficiency), and a manual accessibility audit using the WAVE evaluation tool against WCAG 2.0 Level AA criteria.
Key findings
The questionnaire revealed that 82% of respondents (46 of 56) agreed that subtitles help them understand video or animation content, directly informing the addition of text descriptions to webORA. During usability testing, the most significant frustrations involved playing the reaction animation and rotating/zooming the 3D molecule using a trackpad — both requiring device-dependent event handlers (mouse-only interactions). The manual accessibility audit of a single reaction page identified two critical issues: 44 instances of device-dependent event handlers (critical severity, blocking keyboard-only users entirely) and 110 instances of missing form labels (high severity, preventing screen reader users from understanding button functions). Despite these barriers, participants praised the 3D rotation feature for enhancing spatial awareness, and the simple layout was noted as helping focus. Color contrast was one area where webORA performed well, with no issues detected even when a participant used dark mode. Notably, one participant blamed herself for being "bad at technology" when unable to complete interaction tasks — underscoring how inaccessible design shifts blame onto users.
Relevance
This paper highlights a critical gap at the intersection of STEM education and digital accessibility. The finding that no organic chemistry educational website meets WCAG 2.0 Level AA is striking and likely extends to many other STEM subjects that depend on visual and interactive content. The identification of device-dependent event handlers as a primary barrier is particularly valuable for web developers building interactive 3D tools — as augmented and virtual reality technologies become more common in education, ensuring device-independent interaction will be essential. The paper also critiques accessibility overlays as "bandage fixes" that do not address source code issues, advocating instead for building accessibility into applications from the start. For practitioners, the study demonstrates the value of combining user testing with disabled participants alongside automated and manual auditing to get a complete accessibility picture. The small sample sizes limit generalizability, but the work establishes an important baseline for accessible STEM web tool development.
Tags: STEM accessibility · STEM education · web accessibility · organic chemistry · keyboard accessibility · usability testing · accessibility audit · device-dependent event handlers · 3D interaction
Standards referenced: WCAG 2.0 · ADA Title III