Upload
clyde-bradley
View
218
Download
3
Tags:
Embed Size (px)
Citation preview
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
Best Practices
• Utilize User Centered Design• Incorporate Accessibility Requirements• Leverage Resources• Evaluate Accessibility
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– [email protected]
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?
<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