About the Demo
The Before and After Demonstration is a multi-page resource that shows an inaccessible website and a retrofitted version of this same website. Each web page includes inline annotations that can be activated to highlight some of the key accessibility barriers or repairs. Each web page is also accompanied by an evaluation report to inform the developers on the level of conformance to the Web Content Accessibility Guidelines (WCAG).
Note: This Demo is intended to illustrate some of the aspects of web accessibility. It does not cover every type of accessibility barrier or accessibility requirement. Some of the inaccessible Demo content may not be easily usable by all readers.
Demo Contents
- Before - the inaccessible website
- Home Page - shows highlights and teasers
- News Page - shows news articles and text
- Tickets Page - shows tables and information
- Survey Page - shows forms and interaction
- Template - used to create all other pages
- After - the accessible website
- Home Page - shows highlights and teasers
- News Page - shows news articles and text
- Tickets Page - shows tables and information
- Survey Page - shows forms and interaction
- Template - used to create all other pages
Download: Entire Before and After Demo (BAD) as zip-archive (~600 kb). Note that the survey form requires a web server with PHP scripting to work; submitting the survey form will not work locally on your computer.
Using the Demo
This Demo serves a variety of purposes such as raising awareness on web accessibility or for providing practical examples for developers. Some of the common ways of using and navigating through the Demo include:
- Preparing presentations on web accessibility: Demonstrating practical examples during presentation is usually very effective. The description pages provide an overview of the accessibility barriers and features that are shown in the Demo. Together with the inaccessible and accessible Demo pages, concrete before and after examples can be explained during presentations.
- Learning about specific web accessibility barriers: Often web developers want to learn more about specific accessibility barriers. For example, what is the cause of a problem and how can it be fixed? While the evaluation reports provide detailed analysis, the inaccessible and accessible Demo pages provide implementation examples for developers to study.
- Understanding the implications of web accessibility barriers: In certain cases, the real issues for people with disabilities are not clear to developers or managers. Browsing through the inaccessible Demo pages using different browser configurations or assistive technologies (such as screen readers and magnifiers) helps highlight these issues. The accessible Demo pages can be browsed in the same manner to show the difference.
- Writing detailed reports of conformance evaluations: A well written evaluation report is key in the process of retrofitting websites for accessibility. It communicates the problems to managers and the developers who need to decide which solutions to implement. The evaluation reports of the Demo serve as a sample format for evaluators.