Transcript Accessibility and Usability:

Accessibility, Usability and
Web Standards
David Robins
NORASIST Annual Meeting
September 17, 2007
Purpose


Explore the relationship, if any, between
accessibility issues and usability issues
Discuss strategies for achieving both
9/17/2007
NORASIST Annual Meeting 2007
2
Agenda




Accessibility Issues: Standards and
Laws
Usability Issues and Guidelines
Design for both: Web Standards
Converting to Web Standards
9/17/2007
NORASIST Annual Meeting 2007
3
Accessibility Case: Target.com



Target.com
Suit by a blind student at UC Berkeley
Suit alleges that site denies equal
access to goods and services, e.g.:



Lacks “alt” text for images
Uses image maps for navigation
Brought forth through ADA interpretation
9/17/2007
NORASIST Annual Meeting 2007
4
A Quick Study… Sites using
Web Standards
Quirks
Mode
Stds
Mode
XHTML
XHTML
HTML
HTML
1.0 S
1.0 T
1.0 S
1.0 T
E-Comm
10
10
2
2
1
5
Acad Lib
6
14
2
8
1
3
Public Lib
9
11
0
8
0
1
Total
25
35
4
18
2
9
42%
58%
7%
30%
3%
15%
%
9/17/2007
NORASIST Annual Meeting 2007
5
Accessibility Issues

Guidelines and Law

508


WAI

9/17/2007
Section 508 of the American Rehabilitation Act
Web Accessibility Initiative of the World Wide
Web Constortium (W3C)
NORASIST Annual Meeting 2007
6
The Text-Only Question


Users may be luke warm to text-only sites
Many text-only sites are not fully accessible





Cannot tab among links
Link text may be confusing
Many text-only forms are not accessible
May marginalize disabled users
Loss of branding
9/17/2007
NORASIST Annual Meeting 2007
7
Accessibility: Section 508

Technical Standards








Software applications and operating systems
Web-based intranet and internet information and
applications
Telecommunication products
Video and multimedia products
Self contained, closed products
Desktop and portable computers
Functional Performance Criteria
Information, Documentation, and Support
9/17/2007
NORASIST Annual Meeting 2007
8
Accessibility: Section 508




Alternatives must be available to those
with disabilities
Tables for data only
Graphically based information (images,
flash, color, etc.) must have alternative
rendering
Document must be readable without
style sheets
9/17/2007
NORASIST Annual Meeting 2007
9
Accessibility: Section 508




Client-side image maps are preferable to
server-side image maps
Try to find balance between redundancy and
moderation (navigation, etc.)
Scripting or forms should not interfere with
assistive technology
When all else fails, create a parallel text site
9/17/2007
NORASIST Annual Meeting 2007
10
508: Functional Performance

At least one alternative to visual interaction



People with sight impairments.
People with visual acuity of worse than 20/70, or the device
should have the ability to incorporate assistive technology
At least one alternative to auditory interaction
(“operation and information retrieval”) should be
provided, or the device should allow for the inclusion
of assistive technology appropriate to the hearing
impaired.
9/17/2007
NORASIST Annual Meeting 2007
11
508: Functional Performance



Auditory enhancement for critical auditory content (or
allow for assistive technology that will allow a user to
hear the information).
At least one alternative to systems requiring human
speech should be provided for people with speech
impairments.
At least one alternative must be provided to systems
that require fine motor control (e.g. mice or tablets) to
operate.
9/17/2007
NORASIST Annual Meeting 2007
12
Exceptions to 508



Equipment purchased or systems designed
before 1998
Equipment and systems designed for
intelligence or other operations critical to
national security need not be altered for
accessibility.
Organizations receiving federal money when
the purchase is “incidental to a contract.”
9/17/2007
NORASIST Annual Meeting 2007
13
Help with 508 Compliance



W3C – Web Accessibility Initiative (WAI)
http://www.w3.org/WAI/
Section 508 Site (US Government)
http://www.section508.gov/
Validation:

9/17/2007
Use Firefox Web Developer Toolbar
NORASIST Annual Meeting 2007
14
WAI



ATAG (Authoring Tool Accessibility
Guidelines)
UAAG (User Accessibility Agent
Guidelines)
WCAG (Web Content Accessibility
Guidelines)
9/17/2007
NORASIST Annual Meeting 2007
15
WCAG: Priority 1






General guidelines such as clarity of writing,
descriptive text for non-text content, use of color as
content, and dynamic content
Use of images and image maps (use redundant text
links for server-side maps)
Use of appropriate table markup
Use of frame identification
Ensure that applets, scripts and multimedia produce
usable content
Use of alternative pages that are accessible if the
primary page content is not
9/17/2007
NORASIST Annual Meeting 2007
16
WCAG: Priority 2








Appropriate text/background contrast
Limiting use of images where text is sufficient
Use of style sheets rather than mark up for content
presentation
Division of large text blocks into smaller where possible
Use of consistent navigation tools
Recommends against the use of tables as layout and
visual formatting tools
Proper positioning and association of labels and
controls in forms
More specific guidelines on the use of scripts and
applets
9/17/2007
NORASIST Annual Meeting 2007
17
WCAG Priority 3









Specifying acronyms when first used
Identifying the document’s primary natural language
Use of keyboard shortcuts to links
Use of navigation bars
Placing defining content in headings and the tops of
paragraphs
Use of consistent style throughout pages
Use of redundant text links for client-side image maps
Provide summaries for tables and abbreviations for header
rows
Use of default text in form controls
9/17/2007
NORASIST Annual Meeting 2007
18
Usability Overview





Part of large process of system
development
Involves the analysis of users using
systems
Determines the effectiveness of
interfaces
Usually involves the analysis of tasks
Not limited to computers
9/17/2007
NORASIST Annual Meeting 2007
19
Usability Overview

AKA





Human-Computer Interaction (HCI)
Computer-Human Interaction (CHI)
Human Factors
Interface Design
Related to


9/17/2007
User Experience
Interaction Design
NORASIST Annual Meeting 2007
20
Usability Overview

Two main interests


9/17/2007
Ease of learning
Ease of use
NORASIST Annual Meeting 2007
21
Web Standards





Separation of content and presentation
Content is structured according to
syntactic and semantic elements
Presentation is accomplished through
external style sheets
Use of tables for layout is discouraged
Use of formatting elements is
discouraged
9/17/2007
NORASIST Annual Meeting 2007
22
Why should we separate content
and presentation?

Issues







9/17/2007
Accessibility
Section 508
Assistive technology
File sizes
Download speeds
Simplicity
“Future-proofing”
NORASIST Annual Meeting 2007
23
Web Standards: Design Layers



Content/Structure
Presentation/Style
Behavior/Programming
9/17/2007
NORASIST Annual Meeting 2007
24
Accessibility and Usability in
Web Standards

Content Layer


Presentation Layer


Primarily an accessibility layer
Primarily a usability layer
Behavior Layer

9/17/2007
Both accessibility and usability are issues
here
NORASIST Annual Meeting 2007
25
Migrating to Web Standards





There is no one model for doing so
No magic bullet
It will be expensive and labor intensive
Different considerations for different
situations
Different considerations for different
systems
9/17/2007
NORASIST Annual Meeting 2007
26
Steps in Web Standards
Design
Content/Structure Layer


Assess your audience and content




Structure your content



Group content into logical categories
Determine logical names for your content categories
Markup your content (decide logical flow)



9/17/2007
Determine the types of content needed
How can this content be broken down?
What elements are necessary to present the content to your
audience?
Apply XHTML markup using categories in divisions
This markup should written in such a way that it does not
have to be altered in the future
Markup one time—style many times
NORASIST Annual Meeting 2007
27
Steps in Web Standards
Design

Design/Style Layer (Template Development)

Wireframe your design (information design)





Gather necessary graphics
Construct Style Sheets





9/17/2007
For any presentation of your site, decide on a design
Create a wireframe that shows where each element will be
positioned
Make notes of color, typography, alignment,
Based on your wireframe, write necessary rules for each
element
Establish selectors and rules
Determine the extent to which your styles are inline, embedded,
externally linked, or imported
This is where boxes are sized and positioned
Test in various browsers
NORASIST Annual Meeting 2007
28
Steps in Web Standards
Design

Behavior Layer



9/17/2007
Script development
Database design and implementation
Content Management Systems
NORASIST Annual Meeting 2007
29
Migration Issues




Culture
Management
Technical
Resources
9/17/2007
NORASIST Annual Meeting 2007
30
Questions?