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)– http://www.w3.org/WAI/intro/wcag.php

• Sakai Accessibility Style Guide– http://confluence.sakaiproject.org/confluence/x/

ew4

Leverage Resources

• Sakai Developer Checklist– http://confluence.sakaiproject.org/confluence/x/LgI

• Sakai Design Patterns Library– http://bugs.sakaiproject

.org/confluence/display/DESPAT/Home

• Sakai Discussion Group– accessibility@collab.sakaiproject.org

Evaluate Accessibility

• Sakai Accessibility Evaluation Protocol– http://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

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?

<ol>

<li>Taxi</li>

<li>Taxi</li>

. . . . . . . . . .

</ol>

What markup?

<ol>

<li>343</li>

<li>128</li>

. . . . . . . . . .

<li>388</li>

</ol>

What markup?

<tr>

<td>343</td>

<td>Fred</td>

. . . . . . . . . .

<td>Difficult</td>

</tr>

What markup?

What markup?

<p> bananas, apples, pears, other stuff

</p>

What markup?

<ul> <li>banana</li> <li>banana</li> <li>apple</li> <li>orange</li> … … …

</ul>

What markup?

<h3>Citrus</h3><ul> <li>orange</li> <li>lemon</li></ul>

<h3>Tropical</h3><ul> <li>banana</li> <li>mangosteen</li></ul>

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, 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

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, JSR168 --- 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<p class=“shorttext”>

<label for=“input”>Label</label>

<input type=“text” id=“input” />

</p>

Label

Building an accessible component (2)

• Not that simple….<p class=“shorttext”>

<span class=“reqStar”>*</span>

<label for=“input”>Label</label>

<input type=“text” id=“input” title=“?” />

</p>

Label*

Building an accessible component (3)

• Getting more complex!<p class=“shorttext required”>

<span class=“reqStar”>*</span>

<label for=“input”>Label</label>

<input type=“text” id=“input” title=“?” />

</p>

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?