accessibility, usability and web standards

Accessibility, Usability and Web Standards

David RobinsNORASIST Annual Meeting

September 17, 2007

9/17/2007 NORASIST Annual Meeting 2007 2

Purpose Explore the relationship, if any, between

accessibility issues and usability issues Discuss strategies for achieving both


Agenda Accessibility Issues: Standards and

Laws Usability Issues and Guidelines Design for both: Web Standards Converting to Web Standards


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


A Quick Study… Sites using Web Standards

Quirks Mode

Stds Mode

XHTML 1.0 S

XHTML 1.0 T

HTML 1.0 S

HTML 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%


Accessibility Issues Guidelines and Law

508 Section 508 of the American Rehabilitation Act

WAI Web Accessibility Initiative of the World Wide

Web Constortium (W3C)


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


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



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



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


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.


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.


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.”


Help with 508 Compliance

W3C – Web Accessibility Initiative (WAI) http://www.w3.org/WAI/

Section 508 Site (US Government) http://www.section508.gov/

Validation: Use Firefox Web Developer Toolbar


WAI ATAG (Authoring Tool Accessibility

Guidelines) UAAG (User Accessibility Agent

Guidelines) WCAG (Web Content Accessibility

Guidelines)


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


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


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


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


Usability Overview AKA

Human-Computer Interaction (HCI) Computer-Human Interaction (CHI) Human Factors Interface Design

Related to User Experience Interaction Design


Usability Overview Two main interests

Ease of learning Ease of use


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


Why should we separate content and presentation?

Issues Accessibility Section 508 Assistive technology File sizes Download speeds Simplicity “Future-proofing”


Web Standards: Design Layers

Content/Structure Presentation/Style Behavior/Programming


Accessibility and Usability in Web Standards Content Layer

Primarily an accessibility layer Presentation Layer

Primarily a usability layer Behavior Layer

Both accessibility and usability are issues here


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


Steps in Web Standards Design Content/Structure Layer

Assess your audience and content Determine the types of content needed How can this content be broken down? What elements are necessary to present the content to your

audience? Structure your content

Group content into logical categories Determine logical names for your content categories

Markup your content (decide logical flow) 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


Steps in Web Standards Design Design/Style Layer (Template Development)

Wireframe your design (information design) 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,

Gather necessary graphics Construct Style Sheets

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


Steps in Web Standards Design Behavior Layer

Script development Database design and implementation Content Management Systems


Migration Issues Culture Management Technical Resources

Questions?

accessibility, usability and web standards

Documents