Web Accessibility 3.0

1. Web Accessibility 3.0 Rick Ells rells@cac.washington.edu University of Washington Seattle, Washington

2. Goal We are in the business of helping people climb mountains, figuratively speaking. Our work should not put obstacles in their way.

3. What Are We Doing? • Serving our clients • All of the population of potential clients • Supporting institutional goals and purposes • Serving all students well, including the handicapped • Delivering essential services through the Web • Continually improving service through effective use of available technologies

4. Web Services • Modern higher education relies on the Web to do its business • We have a diverse audience, including people with handicaps • Our audience is using a growing variety of means to access our services (PDAs, mobiles, laptops)

5. Device Independence "A philosophical rule [that guided the development of HTML] was that HTML should convey the structure of a hypertext document, but not details of presentation. This was the only way to get it to display reasonably on any of a very wide variety of different screens and sizes of paper." Weaving the Web - The original design and ultimate destiny of the World Wide Web by its inventor, Tim Berners-Lee

6. Accessibility • Web technologies are designed to support device independence • Accessible design is a special case of the the general goal of maintaining device independence • Device independent approaches are essential to supporting the growing range of devices connecting to Web information and services

7. Making Progress Down through the Web ages, we have made progress in sustaining and expanding device independence • Slop Code Age • Tables Age • X-C/P Age Will we be able to sustain progress as we begin building Web applications?

8. Slop Code Age • No DOCTYPE statement • End tags optional • No validation • Non-standard elements • Heavy use of attributes for color, font, alignment, etc. • Heavy use of tables (and tables within tables) for layout

9. Tables Age • May have DOCTYPE statement • End tags required, except for empty elements • Heavy use of attributes for color, font, alignment, etc. • Heavy use of tables (and tables within tables) for layout • Some validation against standards

10. Typical Tables Layout

11. Problems With Table Age • Major code bloat • Tables imposed sequence on content • Changing presentation required extensive code modification • Different presentations for different devices impossible

12. X-C/P Age • DOCTYPE statement always present, preferably XHTML Strict • Content is in XHTML • Logical markup using element types according to their semantic role • Headings, paragraphs, lists and list items, etc. • Presentation, including layout, controlled with CSS • All code validated against standards

13. X-C/P • XML foundation • Separation of content and presentation • Utilization of semantic logical elements enables efficient presentation control with CSS • Alternative attributes supporting non-visual adaptive technologies • Alternative texts for non-text elements • Labels bind title to form controls

14. X-C/P Accessibility • Can be keyboard accessible • Alternative stylesheets possible for different devices • Logical structure of elements to help in semantic interpretation and navigation • Coherent sequence of content • Page-by-page display

15. Web 2.0 • Strong interest in improving functionality and usability of Web interfaces • Standardization of XHTML, scripting, and XML makes possible reliable dynamic modification of page content between page loads with most graphical browsers • AJAX, ATLAS, Dojo, Bindows • FLEX, Flash - add rich media content

16. AJAX From: Ajax: A New Approach to Web Applications

17. AJAX Enhancements

18. Accessible Web 2.0? • Most current adaptive technology for the Web is page oriented • Web AT often “scrapes” a copy of the page on load and is not aware of subsequent changes made in page content • Does not directly monitor the DOM • How can a voice browser signal changes on a page and direct user to what has changed? • Houston, we have a problem!

19. Accessible UIs Exist • User Interfaces that work with AT • Gnome Accessibility Toolkit, Microsoft Activite Accessibility, Java Accessibility API • Features • Standardized roles for interface divisions • Standardized properties for elements • Focus management • Interaction model • Device navigation mappings • Semantics interpretation • Change notification

20. Progressive Enhancement • Build a foundation of standards based, semantic, validated, accessible content and function • Enhance with rich media • Do it in a way that users can fall back to the accessible foundation if the rich media does not work for the AT

21. What is a Web App? • If important content is being manipulated between page loads, you have a Web application • Graphics • Content • Evaluate by 1194.21 and WCAG2

22. AT Problems • Adaptive Technology is not ready • Still page-by-page oriented • Often not standards based • AT is often developed by small companies for small markets • Do not have deep pockets or large developer communities to share the load • AT is often expensive • Once acquired, users are often slow to upgrade it

23. Implications for Higher Ed • Move carefully on rich media • Explore progressive enhancement • Learn about Web applications • Are Web applications really needed, relative to our goals and values? • Can progressive enhancement methods meet our needs? • How can we move forward in improving usability and functionality of our apps in a field still being defined?

24. Accessible Web Apps Needed: A working contract between the Web page and AT • Notifying AT of changes and their location • Managing focus in a way that can be followed by AT • Standard roles for document parts Work is underway in the W3C Dynamic HTML Working Group on these needs

25. Things Can Fly Apart As Web apps are created, accessibility could be diminished for other reasons • Losing semantics • Narrow technical perspective (silo thinking) • Toolkit bias • Vague direction from management

26. Losing Semantics <div class="question"> <div class="question_content"> <label for="element_3"> <strong>How do you expect to apply the knowledge and insights gained from this training?</strong> </label> </div> <div class="p_question_input"> <textarea id="element_3" name="element_3" cols="80" rows="5"></textarea> </div> </div> Some developers simply create divs with presentation properties, avoiding semantic elements. With only class or id names, how can AT know the semantic role of a div?

27. Accessible Web 3.0 • Full utilization of XHTML/CSS for Web page design • Semantic ontologies • Standard role naming • Disciplined use of scripting methods • Mature interoperative contracts between Web applications and clients

28. Other Thoughts • We need a Gecko-like project to create a standard Open Source adaptive technology engine • We need a better understanding of non-graphical ways of interacting with processes in an application • Is page model appropriate? What about a process semantic ontology?