An Educational Tool for Generating Inaccessible Page Examples Based on WCAG 2.0 Failures
Atheer S. Al-Khalifa, Hend S. Al-Khalifa · 2011 · Proceedings of the International Cross-Disciplinary Conference on Web Accessibility (W4A) · doi:10.1145/1969289.1969328
Summary
This paper presents the Accessibility Example Generator (AEG), an online educational tool from King Saud University and King Abdulaziz City for Science and Technology in Saudi Arabia, designed to help instructors create modular examples of inaccessible web pages based on specific WCAG 2.0 common failures. The motivation comes from research by Alonso et al. showing that WCAG 2.0 is "far from testable" by undergraduate students, partly due to poor understandability of the guidelines — but that better training significantly improves results. The authors identify a gap: existing educational resources like the W3C's "Before and After Demonstration" contain too many barriers simultaneously, overwhelming beginning learners. AEG addresses this by letting instructors select specific failure types and generate focused, manageable examples containing only the chosen accessibility violations. The tool follows a problem-based learning philosophy where students solve targeted problems and reflect on their experiences, building skills incrementally rather than being confronted with the full complexity of WCAG at once.
Key findings
AEG's interface guides instructors through a structured selection process: first choosing web technologies (HTML, CSS, JavaScript), then selecting feature categories (data tables and forms, error and event handling, link and label presentation, metadata, navigation, sound mechanism, text and dialog presentation, text alternatives for multimedia, visual movement or scrolling, visual formatting and user interface), and finally picking specific failures from the 89 WCAG 2.0 common failures relevant to those selections. Each failure in the repository stores code snippets for HTML body, CSS, JavaScript, and server-side scripts separately. The tool assembles selected failure snippets into a complete HTML file, placing each code type in its correct location within the template, then packages everything as a downloadable ZIP for distribution to students. Technology icons beside each failure help instructors understand which technologies are involved. The tool builds on related work including the Accessibility Evaluation Assistance (AEA) tool for guided manual auditing and the W3C Test Samples Repository for minimal accessible/inaccessible examples. Planned future extensions include a collaborative authoring tool for instructors worldwide to contribute examples, an auto-grader for immediate student feedback, and the ability to inject failures into instructor-provided pages.
Relevance
AEG tackles a pedagogical challenge that remains significant: how to teach web accessibility effectively to computing students who will become the next generation of developers. The modular, failure-focused approach avoids the common problem of students being overwhelmed by the breadth of WCAG and giving up. By grounding examples in WCAG 2.0's documented common failures — real patterns of bad practice — the tool ensures students learn to recognize the most prevalent accessibility mistakes they'll encounter in practice. The problem-based learning approach (here's a broken page, find and understand the problems) is more engaging than lecture-based WCAG instruction. The tool was in beta without formal evaluation at publication, so its effectiveness is unproven. The concept of generating targeted accessibility exercises remains valuable — accessibility education continues to be underrepresented in computing curricula, and tools that lower the barrier for instructors to create practical exercises could help change that.
Tags: accessibility education · WCAG compliance · accessibility evaluation · accessibility tools · web development
Standards referenced: WCAG 2.0