Knowbility Creative Commons License – some rights reserved 1 IMC2 ► Opening slide.

1KnowbilityCreative Commons License – some rights reserved

IMC2

► Opening slide


Let’s talk about…► Concepts, legal mandates of IT accessibility

► Who is served by accessible design

► User profiles

► Evolving standards and how to use them

► Accessibility Testing & Implementation

► Next Steps


Introductions


Universal Accessibility

► “Good design is Accessible Design” - Slatin

► supports all people

► supports all technology

► generally makes site better for all

► relationship to usability

► avoid a separate “text-only” version

“Web for Everyone. Web on Everything.”

- www.w3.org/Consortium/mission


Accessibility = full participation

Reasons to advocate and implement

► Legal

► Humanitarian

► Market driven


IT Accessibility Movement

► Standards bodies recognized need to address accessibility

► Begins with universal access to the built environment

► Extends concepts into learning and communications


“Accessible”

► People with disabilities can perform the same functions

► .. can receive the same information

► .. can participate as consumers and producers


Who needs accessible IT ?


Disability market is growing► 55 million Americans, 750 million people worldwide have disabilities

► Numbers are increasing as population ages

► In US, Fortune magazine estimates annual income of $1 trillion

10

KnowbilityCreative Commons License – some rights reserved

Official Disabilities

► Visual (including blind, low vision, and color blind)

► Hearing

► Motor/Physical

► Cognitive Learning

People with disabilities may use software via alternate input & output methods – assistive technology

11


► Slow Internet Connection

► Old Browser

► Missing Plugins

► No Speakers

► Small Screens

Curb-cut effect: accommodations for people with disabilities have broad

benefits

12


Assistive Technology

► Customized tools to help people perform daily tasks

► May range from low to high tech

13


Computer Assistive Technology

► specialized tools

► help perform interactive functions

► accomodate various temporary or permanent conditions

14


Vicky► 24 year old, aspiring web developer

► American Sign is native language

► spearheaded innovative use of YouTube for her community

Issues:► alternatives needed for sound cues ► captioned videos ► transcripts for audio content

15


Paul► 42 year old student, retraining

► served in Iraq with National Guard

► injury resulted in partial use of arms and hands

Issues:► probably does not use mouse; needs

keyboard access ► may use filter keys, word prediction

software and single switch devices ► may use sticky key software

16


Toni► learning disabilities, including ADD, dyslexia

► continues to improve in school with the help of assistive technologies (AT)

Issues:► needs simple layout and messages► text to speech software combined

with word highlighting► may use word prediction software

17


Dr. Slatin► University professor, expert user of tech

► Became blind from retinal disease

► Does academic research online

► Blogs and creates content online

Issues:► needs alternatives to image content► text must be converted to sound► search forms, interactive elements► requires accessible content management


Accessibility Law and Standards► Legal mandates for accessibility in the US

► Established standards – and those in development

► Validating to standards

19


Legal environment► 1998 – 2002 legal action by

National Federation of the Blind (NFB) against SW Airlines, AOL others

► Most settled out of court, few clear legal precedents established

► Since 2002, state of New York, NFB, others pushing state and ADA laws

20


Target & Accessibility

► Disability class action lawsuit against Target by National Federation of the Blind

► Charges: www.target.com is inaccessible to the blind violates

► Americans with Disabilities Act (ADA)

► California Civil Rights Act

► California Disabled Persons Act

► Target asked court to dismiss action

► arguing no law requires Target to make website accessible

► Court Ruling – Case Will Be Heard

► all services provided by Target, including its Web site, must be accessible to the disabled

21


Federal Law

► Americans with Disabilities Act, passed in 1990 prohibits discrimination against people with disabilities

► ADA extended the rights of the Rehabilitation Act (from 1973) into the public realm

► Expectation is that the ADA will be extended as well to the Internet

22


States are mandating accessibility

► 16 states have passed explicit legislation

► Many include higher education

► Most reference Section 508

23


Section 508

► Section 508 of the Federal Rehabilitation Act

► Amended in 1998 to include standards on electronic information technology

► Subpart B - technical standards

16 rules of web-based intranet and internet accessibility standards

In process of “Refresh”

Hope is for harmonization to WCAG 2.0 of W3C

www.section508.gov

24


Global Standards – maintained by W3C► WCAG, the Web Content Accessibility Guidelines are

international standards widely adopted

► ATAG, the Authoring Tool Accessibility Guidelines provide vendors with standards for interoperability

► UAAG, the User Accessibility Guidelines for browsers and assistive technologies

► ARIA, the Accessible Rich Internet Application research for emerging technologies

www.w3.org/WAI

25


Components of Web Accessibility WCAG

(web content)

ATAG(authoring tools)

UAAG(user agent)

26


Role of Standards

► Shared understanding of requirements among:

o Consumers

o Authoring Toolmakers

o Developers

o Maker of browsers & AT devices

► “How to” Techniques and testing criteria for content creators

27


Standards are being revised

► 508 being refreshed (hope to harmonize with WCAG 2.0)

► WCAG 1.0 is transitioning to WCAG 2.0 – accessibility defined within 4 basic principles.

► Content must be:

o Perceivable

o Operable

o Understandable

o Robust

508 WCAG

28


Which standard do I use now?

United States: 508 with an eye towards WCAG 2.0 International: WCAG 1.0 Priority 1

29


Accessible Design - ROI► UT - cannot purchase if not 508 compliant

► British Financial Firm (Legal and General)

► Search engine referrals +28% in first 24 hours

► Visitors receiving quotes doubled in first 3 months

► Site maintenance costs cut by 66%

► Project delivered 100% ROI in 12 months

Want to know more? www.w3.org/WAI/bcase/Overview

30


Why make things accessible?► because we can

► because the web is about empowering people with information, not building barriers

► best practice

► ROI

► Google & SEO (search engine optimization)

► because it is the law

31


Let’s Listen

JAWS screenreader www.freedomscientific.com

32


508 Standard = 16 Checkpointsa) Alt Text b) Synchronized alternatives for multimediac) Colord) Use CSSe) Server-side image mapsf) Client-side image mapsg) Simple tables h) Complex tablesi) Framesj) Flickeringk) Text only versionl) Scriptingm) Appletsn) Formso) Skip Navigationp) Timed Response

WebAim Checklistwww.webaim.org/standards/508/checklist

Jim Thatcher’s 508 Tutorialjimthatcher.com/webcourse1.htm

33


Examples of 508 Accessible Design Techniques

► Alt Text

► Media

► Color

► Forms

► TimedReponse

34


508 a) Alt Text

(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

The Issue:

► Think about listening to your web page

► That is why text equivalents must be provided for images and animations

35


<IMG src=… alt=“United Nations Flag” ... />

<IMG src=… alt=“Aeronautics” … />

<IMG src=“spacer.gif” alt=“” width=“1” height=“1” />

Alternative Text Examples

36


Alternate Text Guidelines

► Active (linked) images MUST valid alt attribute.

► Each INPUT of TYPE=“IMAGE” must have alt-text specifying the purpose of the button

► Each AREA of an image MAP must have a valid alt attribute

► Non-active images that do not convey information must have alt=“”

37


Alternate Text: What NOT to do► Too Long

“Image of the United Nations Flag (Blue background with white olive branches surrounding map of world) about one and a quarter inches by one inch.”

► Makes reference to link

“link to aeronautics home page”

Meaningless out of context

“button”

38


Alternate Text Decisions

► A challenge is deciding what is meaningful and what is purely visual

► alt=“” or alt=“people using library services”

39


Long Descriptions

► Sometimes short alt text is not enough

► an HTML attribute “longdesc” is available but may not be the best solution

► longdesc points to a URL that has a “long description” of the image

40


Some images Some images –– like like charts and graphs – charts and graphs – require longdescriptionrequire longdescription

<img src=“traffic.jpg” longdesc=“traffic.htm” alt=“traffic density graph” />

traffic.htm:

<p>This graph shows traffic density on

Main and Center streets measured in …

longdesc Example

41


longdesc “Alternative”

42


508 b) Synchronized Alternatives for Multimedia

(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

The issue is:

► Audio files and the audio part of multimedia content need to be made accessible to people who are deaf.

► Information in the video part of multimedia content needs to be accessible to people who are blind.

43


Multimedia Strategy

► Include a text transcript for informational audio file.

► Provide captions for the audio content of a multimedia presentation.

► Provide synchronized audio descriptions of significant video information in multimedia presentations.

44


Multimedia Solutions

► MAGPie - free software that helps you caption

http://ncam.wgbh.org/webaccess/magpie

► Sample video with captions and audio descriptions:

NCAM Rich Media Project

► NCAM has a free captioning tool for Flash

45


Conveying information through color

► What is the issue?

► What is the alternative?

46


508 c) Color and Contrast

(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

The Issue: information conveyed by color is lost for people who are color blind

► Whenever color carries information, make sure that other parts of the page convey the same information.

► Be sure there is adequate contrast between text and background.

Related Guidelines: 508 §1194.22(c); WCAG 2.1, 2.2; IBM 12.

47


48


49


‣ Can you read me?

‣ Can you read me now?




‣ Use the color contrast analyzer:

http://juicystudio.com/services/colourcontrast.php

Color Contrast

50


Exercise - Color & Links

► Do you underline your links?

► Or are your links obvious by color alone?

► Example

► Imagine you are colorblind

► Tell me how many links are in the second paragraph of information: en.wikipedia.org/wiki/Abraham_lincoln

51


52


53


54


Provide alternatives

► Alt text for active images, “” for inactive images

► Onscreen summary or long description for complex images

► Captions for audio content

► No color dependencies, sufficient contrast

When you have non-textProvide text equivalents.Text repurposes

55


WCAG 2.0,Guideline 2

User interface components must be operable

508 Guidelinesl) Scriptingm) Appletsn) Formsp) Timed Response

56


► Provide keyboard access to all functions

► Provide users time to read and use content

► Avoid content known to cause seizures

► Facilitate navigation

Put user in control

57


Keyboard Access

► Form fields

► Submit buttons

► Navigation elements (Javascripted menus?)

► Media controls

58


‣ NOT onchange in select box menus

‣ NOT just onMouseOver and onMouseOut (requires mouse)

- Also include onFocus, onBlur

‣ <noscript>...</noscript> rarely needed

for more on scripting please research:

‣ unobtrusive javascript

‣ graceful degradation

‣ progressive enhancement

Scripting and Interactivity

59


Exercise – Read this important information

► Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution.

60



► Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems.

61



► Fundamentally transforming well designed actionable information whose semantic content is virtually null.

62



► To more fully clarify the current exchange, a few aggregate issues will require addressing to facilitate this distributed communication venue.

63



► In integrating non-aligned structures into existing legacy systems, a holistic gateway blueprint is a backward compatible packaging tangible of immeasurable strategic value in right-sizing conceptual frameworks when thinking outside the box.

64


508 (p) Timed Response

(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

The issue:

► A person with a disability may not be able to read, move around, or fill in a Web form within the prescribed amount of time.

Related Guidelines: 508 §1194.22(p)

65


Timed Response: Options?

► Do not set time limit on the user response.

► Notify user if a process is about to time-out

► Provide prompt to receive additional time

66


Inspect What You Expect:

Testing &

Implementation

67


Ensuring Accessibility

► Testing Tools

► User Testing

► Implement & Maintain

68


Validity: Building to Code

► HTML & XHTML Validation validator.w3.org/

► CSS Validation jigsaw.w3.org/css-validator/

69


Accessibility Testing Tools► Accessibility/Web Standards Validators

► Page by Page

► Listening to Your Pages

► JAWS / Fangs

► Authoring Tools

► Dreamweaver

► Enterprise Accessibility Reports

► LIFT & WebXM

www.jimthatcher.com/testing.htm

70


Accessibility Validators- Page by Page

► CSS/XHTML Validators

► WebXact

► The Wave

► Web Developer for Firefox

► Accessibility Toolbar for IE

► Luminosity Contrast Ratio Analyser

Accessibility Tools can only automatedly test approximately 27% of the issues.

Accessibility Testing requires human brain power!

71


Evaluation of Free Accessibility Testing Tools

www.webaim.org/techniques/articles/freetools/

links to free online

accessibility testing tools

72


Listening to Your Site

The real test:Can users with disabilities

actually use your site?

Listen to representative pages of site using JAWS

JAWS screenreader www.freedomscientific.com

Fangs screenreader emulator standards-schmandards.com/projects/fangs

73


Enterprise Tools

► Define URL, spider profile

► Select testing criteria

► Review reports

► Results by checkpoints

► Checkpoints expanded

► Resources – How to fix

► Previews of pages

Watchfire WebXM

75


User TestingJust Ask:

Integrating Accessibility Throughout Design

By Shawn Henry

www.uiaccess.com/justask/

Accessibility is a subset of Usability Testing.

76


The Importance of User Testing

77


A Practical Testing Plan

1. Code Validation

2. Browser Testing

► Turn off images

► Don’t use the mouse

► Increase font size

► Change window size

3. Online Accessibility Testing (representative pages)

• use more than one tool, example: Watchfire & Wave

4. Screenreader Testing

• JAWS

5. Enterprise Accessibility Report

• like Lift or WebXM

6. Hands-on Accessibility Testing

78


Software Development Life Cycle

Request

Analysis

Requirements

Design

Test

Deploy

Support

Build

Accessibility


Next Steps

What accessibility actions do you plan to take next?

What resources do you need now?• www.jimthatcher.com• www.knowbility.org • www.webaim.org

80


It is up to you

For most people technology makes things easier. For people with disabilities,

technology makes things possible.

President’s Council on Disabilities

Knowbility Creative Commons License – some rights reserved 1 IMC2 ► Opening slide.

Documents

Transcript of Knowbility Creative Commons License – some rights reserved 1 IMC2 ► Opening slide.