Accessible Design and Development Mike Elledge Gonzalo Silverio

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

Collaboration Priority Setting Design, Development & QA Revision and Refactoring

Cooperation Adherence Perseverance Ownership

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

User Centered Design Requirements Analysis and Usability Evaluation:

Incorporate Requirements WCAG 1.0 (soon to be 2.0) – Sakai Accessibility Style Guide – ew4http://confluence.sakaiproject.org/confluence/x/ ew4

Leverage Resources Sakai Developer Checklist – Sakai Design Patterns Library – /Homehttp://bugs.sakaiproject.org/confluence/display/DESPAT /Home Sakai Discussion Group

Evaluate Accessibility Sakai Accessibility Evaluation Protocol – Tools –aChecker –WebXACT –WAVE –FAE

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

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

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

What markup? It depends…

What markup? Taxi.....

What markup?

What markup? 343 Fred..... Difficult

What markup?

bananas, apples, pears, other stuff

What markup? banana banana apple orange … … …

What markup? Citrus orange lemon Tropical banana mangosteen

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

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

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

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]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Questions?