1. Accessible Design and Development Mike Elledge Gonzalo Silverio

2. Topics Sakai Accessibility: Collaboration, Cooperation, Checklists! Best Practices –Setting Requirements: Accessibility Checklist –Working up new tools with the toolkit –Reviewing and Revising - QA Screen Genre Structure Problematic Elements & Work-Arounds

3. Collaboration Priority Setting Design, Development & QA Revision and Refactoring

4. Cooperation Adherence Perseverance Ownership

5. Best Practices Utilize User Centered Design Incorporate Accessibility Requirements Leverage Resources Evaluate Accessibility

6. User Centered Design Requirements Analysis and Usability Evaluation:

7. Incorporate Requirements WCAG 1.0 (soon to be 2.0) –http://www.w3.org/WAI/intro/wcag.phphttp://www.w3.org/WAI/intro/wcag.php Sakai Accessibility Style Guide –http://confluence.sakaiproject.org/confluence/x/ ew4http://confluence.sakaiproject.org/confluence/x/ ew4

8. Leverage Resources Sakai Developer Checklist –http://confluence.sakaiproject.org/confluence/x/LgIhttp://confluence.sakaiproject.org/confluence/x/LgI Sakai Design Patterns Library –http://bugs.sakaiproject.org/confluence/display/DESPAT /Homehttp://bugs.sakaiproject.org/confluence/display/DESPAT /Home Sakai Discussion Group –accessibility@collab.sakaiproject.orgaccessibility@collab.sakaiproject.org

9. Evaluate Accessibility Sakai Accessibility Evaluation Protocol –http://confluence.sakaiproject.org/confluence/x/uq4http://confluence.sakaiproject.org/confluence/x/uq4 Tools –aChecker http://www.atutor.ca/achecker/index.php –WebXACT http://webxact.watchfire.com/ –WAVE http://dev.wave.webaim.org/Preferences.jsp –FAE http://fae.cita.uiuc.edu/about.php

10. Accessibily via markup markup in / markup out Markup that uses *our* standards help build *our* standards consult the community in local decisions

11. Accessibily via markup - some problems in markup design –no detailed standard –a lot of judgment calls –lack of a Sakai markup kit in markup production –template technologies –the lure of the new –complex functionality

12. Some short term solutions in markup design –a standard, a forum, a toolkit –Or - the nouns, verbs and syntax that make up the sentences that make up the paragraphs that are a design pattern. in markup production –acc a factor in technology selection –push the technology as hard as you can –share the results –do not accept the OOTB solution –or document why the OOTB solution is a problem

13. What markup? It depends…

14. What markup? Taxi.....

15. What markup? 343 128..... 388

16. What markup? 343 Fred..... Difficult

17. What markup?

18. bananas, apples, pears, other stuff

19. What markup? banana banana apple orange … … …

20. What markup? Citrus orange lemon Tropical banana mangosteen

21. Genre Structure Atomic genres: –Forms –Lists –Items Molecular genres: combinations of above Define roles, identify components, build to meet needs

22. Forms Things having to do with collecting information, changing the data or view of data Good Forms –Use descriptive markup! –Group similar items –Have natural descriptive flow –Are easily understood

23. Form example - before –Styled markup –Non-descriptive markup –Form elements not logically related –Screen-only information –No device independence –EXAMPLE: Evaluation tool > Create new template

24. Form example - after –Descriptive markup –Form elements logically related –Screen and screen reader information –Device independence –EXAMPLE: Evaluation tool > Create new template [after 2.4]

25. Form example - other examples Evaluations Admin EXAMPLE: Evaluation tool > Administrate New announcement Complex - use of headers EXAMPLE: Announcements > Add New Assignment Complex - use of headers, disclosure thingies, screen reader helpers, use of focus (point grade) EXAMPLE: Assignments > Add

26. Form Challenges/Opportunities Presentational layer technology challenges –JSF, JSR168 --- others Some examples –JSF: label/field pair issues, reliance on presentational markup, lack of access. attributes in custom components –Example: mailtool –JSR 168 - meaning neutral present. tech. Adaptive technology issues

27. Lists Things having to do with listing and defining information Good lists –Presentational framework suited to task –Descriptive markup! –Avoid overload –Group similar items –Provide categorization if needed

28. Simple list example - good - Announcements –Appropriate markup structure - it is tabular info –Rich structure Table structure Added structure –Screen reader info Summary, hidden input labels, titles, etc. EXAMPLE: Announcements

29. Simple list example - BAAAD –Rich structure Table structure Added structure –Screen reader info Summary, hidden input labels, titles, etc. –So why is it terrible? Lets take a look EXAMPLE: Site Info > Edit Tools

30. Complex list example A well formed table table for tabular data Complex dynamic hierarchy Hidden helpers (messages in select control and checkbox control) Hidden overdescription Accessible menu of actions for items (kill styles EXAMPLE: Resources

31. List Challenges/Opportunities Presentational layer technology challenges –JSF, JSR168 --- others Some examples –JSF list, what list? Item isolation (inputs, labels, headers, rel) Some bright spots. Adaptive technology

32. Items Structuring content for meaning Good Item Structure –Provides context –Enables scanning –Comforms to presentational practice –Uses hierarchical descriptive markup!

33. Item example - bad –No context –No hierarchy –No metadata pairs –No descriptive markup –Example: Profile view [as student]

34. Item example - good –Context –Hierarchy –Metadata pairs –Descriptive markup –And a pile of other stuff –Example: Announcement view

35. Item Challenges/Opportunities Presentational layer technology –JSF item metadata table issues definition lists - where are they? hierarchy - impossible Adaptive technology

36. Complex Structures Combinations of lists, forms, items and tables Well-defined complex structures: –Simplify complexity –Use structural descriptive markup –Come in many flavors

37. Complex Structure Examples Combinations of previous structures Formish lists –Example: Assignments Tables and Metadata –Example: Site info

38. Building an accessible component Something simple - a form input Label Label

39. Building an accessible component (2) Not that simple…. * Label Label *

40. Building an accessible component (3) Getting more complex! * Label Label Hidden from screen

41. Conclusion Sakai 2.5: unique opportunity –For a taxonomy that produces accessible markup usable markup reusable components happy people all around

42. Questions?