BAD Demo Update Requirements Analysis
Purpose, goal
Make BAD demo more attractive to designers of websites and apps, by:
- modernizing visual design of demo, and updating code to HTML5, ARIA, and some use of responsive design techniques;
- cross-linking with other WCAG 2 technical supports, through Quickref, to improve discoverability of related guidance for a given topic;
- expanding guidance for using demo as instructional material.
Audiences, use cases
- Web and app developers can get an initial orientation to accessibility barriers and solutions.
- Web and app developers can study detailed examples of accessibility barriers and solutions.
- Web and app developers can get an initial orientation to evaluating conformance to WCAG 2.0.
- Web and app developers can study a detailed report of a WCAG 2.0 conformance evaluation.
- Managers can see an example of what to expect in a comprehensive WCAG 2.0 conformance assessment.
- Web accessibility instructors can have reference and practice material to use with students.
Objectives, tasks
Update visual design
- review draft WAI website redesign for suitability
- develop or refine visual redesign
- implement redesign
Recode with responsive design
- confirm approach for responsive re-design
- transpose to responsive design
Cross-link with "How to Meet WCAG 2.0" reference for WCAG 2.0
- confirm assessment of cross-platform compatibility for cross-linking into future update of “Techniques for WCAG 2.0” and “Understanding WCAG 2.0”
- add WAI-ARIA attributes to framework and content, to prepare for responsive design
- determine granularity of cross-linking, to integrate BAD
Develop explanatory material for how to use BAD Demo for self-study, classroom, and online instruction
- summarize existing instructional usages
- develop instructional suggestions, usable for self-study, classroom, and online
- break out introductory vs. advanced suggestions for instructional usage
Next steps
- EOWG review requirements
- Select or develop new visual redesign
- Prepare for responsive redesign
- Draft instructional introduction
Notes, issues
- The content of the demo is layered with accessible, inaccessible, and annotated views; may not be possible to use fully responsive design.
Links
- Current version: Existing Before and After (BAD) Demo
- WAI site redesign in progress: https://projects.invisionapp.com/share/H299QZZGZ#/screens/215895933_Colors (potentially re-use some common elements especially accent colors, but not a requirement)
- Mock up(s): (to be added once available)