Accessible Website Design Building Complex Web Sites (SI539)

Mike ElledgeAssistant Director

Usability & Accessibility Center (UAC)Michigan State University

Topics

Topics

I. Introduction (:05)

II. Context of Accessibility (:15)

III. Use of Adaptive Technology (:15)

V. Creating Accessible Websites (:90)I. Criteria (:45)

II. Design (:45)

VI. Evaluating Websites for Accessibility (:30)

VII. Questions & Wrap-up (:25)

VIII. Resources

Topics

Introduction

• Mike Elledge, Assistant Director, UAC, MSU– MSI School of Information, U of M

– MBA Columbia University, New York

– 8+ years usability testing and accessibility evaluation; 18+ years consumer marketing and research

• Usability & Accessibility Center, MSU– State-of-art purpose-built center: training, focus group, and testing

rooms; digital audio/video capture; remote viewing

– Director: Sarah Swierenga, PhD Human Factors, U South Dakota; 20+ years human factors, usability testing; Lexis/Nexis, UDRI, University of Dayton faculty

– Visit: http://usability.msu.edu

Topics

Context of Web Accessibility

• Key aspects of Web Accessibility– Economic– Social– Legal– Practical

• Use of Adaptive Technology

Topics

Economic Context

• Persons with disabilities represent a large group– Twenty percent of population has some form of impairment

• 54 million people

– One in ten severe– One in two over 65 have reduced capabilities– The number will grow with aging Boomers

• Estimated disposable income is between $175 and $220 Billion– Plus what they influence

Topics

Social Context

• Disabilities cover a broad range of impairments and conditions– Temporary and permanent– Congenital and onset

• Hearing—Conductive, sensorineural• Visual—Color blindness, low vision, blindness• Cognitive Impairments—ADD, TBI, Dyslexia• Physiological Impairments—MS, MD, CP, injuries,

Carpal Tunnel

Topics

Share of Disabilities

48%

23%

12%

9% 5% 2% 1% 0%Hearing

Vision

TBI

Cognition

Epilepsy

CP

MS

Spinal

Topics

Legal Context

• Federal government must meet Section 508 requirements for its websites and applications– Provide persons with disabilities equal access to Federal

information, and employees with disabilities equal access to electronic and information technology

• ADA requirements being extended to e-commerce sites– Sexton and NFB vs. Target class-action suit– “The 'ordinary meaning' of the ADA's prohibition against

discrimination…is that whatever goods or services the place provides, it cannot discriminate on the basis of disability in providing enjoyment of those goods and services."

Topics

Practical Context 1

• Persons with disabilities benefit– Adults with disabilities spend, on average, twice as much time

online as adults without disabilities- 20 hours per week compared to 10 hours per week.

– Adults with disabilities are much more likely than adults without disabilities to report that the Internet has significantly improved the quality of their lives (48% vs. 27%)

“How the Internet is Improving the Lives of Americans with Disabilities,” Humphrey Taylor, Harris Poll #30, June 7, 2000

Topics

Practical Context 2

• “Non-impaired” users benefit– “Curb-cut Analogy”– Usability improvements

• Business benefits– Paying attention to content = “Staying On-Message”– Minimizing Clutter = Emphasizes Branding– Expanded customer base– Legal protection– Good will

Topics

Use of Adaptive Technology

• Persons with disabilities use websites differently– Blind persons listen to sites– Persons with low vision enlarge their screens– Color blind persons can’t differentiate some colors– Deaf persons read sites– Physically impaired persons use tools– Persons with cognitive issues need help understanding and

focusing

Topics

Adaptive Technology Users

• Kyle (Blind person): www.webaim.org/media/video/kyle/kyle.asx

• Curtis (Deaf person): www.webaim.org/media/video/curtis/curtis.asx

• Gordon (Quadraplegic):

www.webaim.org/media/video/gordon/gordon.asx

Topics

Creating Accessible Websites--Criteria

• Section 508• WCAG 2.0• ARIA 1.0

Topics

Section 508 vs. WCAG 1.0--Definitions

• Section 508 – Required for websites and software developed by, and for,

Federal government– Often used in U.S. as standard– Derived in consultation with W3C

• WCAG 1.0– Voluntary guidelines developed by Web Accessibility Initiative

(WAI) of the W3C (World Wide Web Consortium)– Used outside U.S. as standard

Topics

Section 508 vs. WCAG 1.0--Characteristics

• Section 508 – Descriptive—Not so much “how,” but “what”

www.access-board.gov/sec508/guide/ 1194.22.htm

• WCAG 1.0– Prescriptive—”How”– HTML-focused– Can be more comprehensive than 508, depending on priority

level chosen (I, II or III)

www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html

Topics

Section 508: Hybrid of WCAG 1.0

a) Text equivalent for images (A)

b) Synchronized multimedia captioning (A)

c) Information not color dependant (A)

d) Readable without style sheet (A)

e) Redundant text links for image maps (A)

f) Client-side image maps (A)g) Row and column headers for

data tables (A)h) Associate data with headers

in complex tables (A)

i) Title frames with text (A)j) No page flicker (A)k) A text-only version only when

no alternative (A)l) Accessible alternative to

scripting (A)m) Links to accessible plug-ins or

applets (AA)n) Make forms accessible (AA)o) Ability to skip repetitive

navigation links (AAA)p) Notification of timed response

and ability to notify if more time is needed (not in WCAG 1.0)

http://www.jimthatcher.com/sidebyside.htm#WCAGView

Topics

WCAG 1.0

• Web Accessibility Initiative (WAI)– Web Content Accessibility Guidelines

• Priority One: MUST be done

• Priority Two: SHOULD be done

• Priority Three: MAY be done (helpful)

• Based on specific html-based standards

Topics

Approach

• WCAG 1.0– Primarily HTML-oriented– Elements

• Guidelines > Checkpoints: Must (Priority One), should (Two) and may (Three) > Conformance: “A,” “AA”, and “AAA”

• WCAG 2.0– Technology-independent– Elements

• Conformance and Success Criteria Requirements

• Principles: Perceivable, Operable, Understandable, Robust (POUR) > Guidelines > Success criteria: Levels “A”, “AA” and “AAA” > Techniques: Sufficient, Advisory

Topics

WCAG 2.0

• Released December 2008• More streamlined & guidelines broader in scope to

accommodate variety of technologies

Topics

Why WCAG 2.0?

• Experience providing accessibility has grown– Some requirements outdated (“must work with JS turned off”)– Some requirements reconsidered (“Skip to Main Content” OR headings)– Requests for greater specificity, more technical guidance for HTML, non-HTML

• Web has evolved– HTML is no longer only game in town– AJAX, DHTML, XML, Flash– User agents have more control over content (“Until user agents…”)

• Standards have changed– XHTML 1.0 (August 2002)– CSS 2.0 > CSS 2.1 > CSS 3.0 (mostly working drafts)– HTML 4.01 > HTML 5.0 (in process)

• Adaptive technology has improved– Support PDF, JavaScript, ARIA, Flash– Adobe, Microsoft text-to-speech built-ins

• Browsers more advanced– Firefox 3, IE 8 support ARIA, CSS

Topics

What is WCAG 2.0?

• Web Content Accessibility Guidelines (W3C)– 1.0: May, 1999– 2.0: December, 2008

• Related documents– Understanding WCAG 2.0: http://www.w3.org/TR/UNDERSTANDING-

WCAG20/ – Techniques for WCAG 2.0: http://www.w3.org/TR/WCAG20-TECHS/

• Four principles of accessibility– Perceivable– Operable– Understandable– Robust

• Twelve guidelines (4, 4, 3, 1)– 61 success criteria (22, 20, 17, 2)

• Level A, Level AA, Level AAA

– 264 Sufficient and advisory techniques, failures

Topics

WCAG 2.0 Principles

• Perceivable– Provide text alternatives for non-text content. – Provide captions and alternatives for audio and video content. – Make content adaptable; and make it available to assistive technologies.– Use sufficient contrast to make things easy to see and hear.

• Operable– Make all functionality keyboard accessible. – Give users enough time to read and use content. – Do not use content that causes seizures. – Help users navigate and find content.

• Understandable– Make text readable and understandable. – Make content appear and operate in predictable ways. – Help users avoid and correct mistakes.

• Robust– Maximize compatibility with current and future technologies.

Topics

WCAG 2.0 Guidelines

1.1 Text AlternativesProvide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, Braille, speech, symbols or simpler language

1.2 Time-based MediaProvide alternatives for time-based media

1.3 AdaptableCreate content that can be presented in different ways (for example simpler layout) without losing information or structure.

1.4 DistinguishableMake it easier for users to see and hear content including separating foreground from background.

2.1 Keyboard AccessibleMake all functionality available from a keyboard.

2.2 Enough TimeProvide users enough time to read and use content.

Topics

WCAG 2.0 Guidelines

2.3 SeizuresDo not design content in a way that is known to cause seizures.

2.4 NavigableProvide ways to help users navigate, find content and determine where they are.

3.1 ReadableMake text content readable and understandable.

3.2 PredictableMake Web pages appear and operate in predictable ways.

3.3 Input AssistanceHelp users avoid and correct mistakes.

4.1 CompatibleMaximize compatibility with current and future user agents, including assistive technologies.

Topics

What does it mean for me?

• Designers/Developers– Greater freedom– Greater responsibility– Higher expectations

• Evaluators– Requirements more precisely testable– Past evaluations using WCAG 1.0 still applicable– Future evaluations using WCAG 2.0

• Most tests still relevant

• Some no longer necessary

• Some additional

Topics

Keywords and Concepts

• Accessibility-supported– Technology that is accessibility-supported works with assistive technologies (AT)

and the accessibility features of operating systems, browsers, and other user agents. Technology features can be relied upon to conform to WCAG 2.0 success criteria only if they are used in a way that is "accessibility supported".

• Change of context– Major changes in the content of the Web page that, if made without user

awareness, can disorient users who are not able to view the entire page simultaneously.

• Conformance– Satisfying all the requirements of a given standard, guideline or specification.

• Info and relationships– Information and relationships that are implied by visual or auditory formatting are

preserved when the presentation format changes. For example, the presentation format changes when the content is read by a screen reader or when a user style sheet is substituted for the style sheet provided by the author.

Topics

Keywords and Concepts (continued)

• Meaningful sequence– Enables a user agent to provide an alternative presentation of content while

preserving the reading order needed to understand the meaning. It is important that it be possible to programmatically determine at least one sequence of the content that makes sense.

• Name, role, value– Text (or number) by which software can identify a component, function or value

within Web content to a user. • Example: A number that indicates whether an image functions as a hyperlink,

command button, or check box.

• Programmatically-determined– Content is authored in such a way that user agents, including assistive

technologies, can access the information. • User interface component

– A part of the content that is perceived by users as a single control for a distinct function.

• Web page– Encompasses both static and dynamic representations of content.

Topics

Underlying Conformance

• There are five Conformance Requirements that must be achieved for each Web page to be compliant with WCAG 2.01. Conformance levels

– Levels A, AA, or AAA must be attained or an alternate conforming version be provided– Authors are encouraged to report any progress toward meeting success criteria from all levels

beyond the achieved level of conformance.– Not recommended that Level AAA conformance be required as a general policy for entire sites

because it is not possible to satisfy all Level AAA Success Criteria for some content.

2. Full pages only– No excluding portions of page

3. Complete processes– All Web pages in a process must conform

4. Only accessibility-supported ways of using technologies– Can satisfy success criteria

5. Non-interference– If technologies are not accessibility supported or are non-compliant they do not block

access to the rest of the page

Topics

General Success Criteria

• All content must also meet these success criteria:– Audio control

• Mechanism for pausing, stopping or controlling volume if audio plays automatically for more than three seconds.

– No keyboard trap• If focus can be moved to component using keyboard, it can also be moved

away using keyboard. Tell user of non-standard keystrokes.

– Three flashes or below threshold• Nothing flashes more than three times in any one second period; flash is

below general flash and red flash thresholds.

– Pause, stop hide• Any moving, blinking, scrolling or auto-updating information that 1) starts

automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, has mechanism for user to pause, stop or hide it unless it is essential to an activity.

Topics

Technical Detail

• There is far more detail about how guidelines can be met.– WCAG 1.0

• 7.1: Until user agents allow users to control flickering, avoid causing the screen to flicker. [Priority 1]

– WCAG 2.0• 2.3.1 Three Flashes or Below Threshold: Web pages do not contain

anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds. (Level A)

– Note: Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion. See Conformance Requirement 5: Non-Interference.

• 2.3.2 Three Flashes: Web pages do not contain anything that flashes more than three times in any one second period. (Level AAA)

Topics

Examples

Topics

WCAG 2.0

• See Handout

Topics

Creating Accessible Websites--Design

• Components of website accessibility– Organization– Navigation– Presentation– Content

Topics

Organization

• Provides context for persons with disabilities, by describing organization of page and content– Metadata– Page Title– Divs– Lists– Headings– Frame Attributes

• Also improves search engine indexing

Topics

Organization--Metadata

• Describes page content and can be used to navigate– Search bots use metadata for indexing

– “Link” relationship tag: “Alternate,” “Index,” “Next,” “Prev,” “Home”, etc. recognized by Lynx, Opera, iCab, Firefox*

– “Meta” tag within <head> section: “Description,” “Keywords,” “Author”

Example: <meta name="keywords" content="Accessibility, usability” />

<link rel=“prev" title=“Chapter 1” href="Chapter1.html" />

* “Dive Into Accessibility,” http://diveintoaccessibility.org/day_9_providing_additional_navigation_aids.html

Topics

Organization--Page Titles

• First item announced by a screen reader– Can be spoken on request– Press “<Insert> plus t” to hear title– Provide contextual information in breadcrumb format

• “Travelers By Design: Registration”

– “Title” tag within <head> section

Example: <title>Main Page--Accessibility and Website Design

Website</title>

<title>Table Formatting—Formats Section--Accessibility and Website Design Website</title>

Topics

Organization--Div

• Adds structure and semantic meaning to page content– Is not parsed by screen reader, but enables (for example)

content to be read before navigation; facilitates clean code– Can also be a hook for JavaScript operations– “Div” tag within <body> section

Example:<div id=“news”>

<h3>Zeldman.com turns 10</h3>

<p>Another milestone for Jeffrey as zeldman.com turns 10 today</p>

<p><a href=“news.php”>More news about zeldman.com</a></p>

</div>

Topics

Organization--Lists

• Add structure and semantic meaning to page content– Is announced as “List of x items”– “Ul” and “li” tags within <body>

Example:<ul>

<li><a href="services_expertRev.asp">Expert Review</a></li>

<li><a href="services_UserExp.asp">User Experience Evaluation</a></li>

<li><a href="services_Research.asp">Research</a ></li>

<li><a href="services_training.asp">Training</a ></li>

<li><a href="facilities_rental.asp">Facility Rental</a ></li>

</ul>

Topics

Organization--Headings

• Provide context and can be used to navigate– Press “h” to move through page– Headings are read aloud along with their level: “Accessible

design matters, heading level one”– Press <Insert> + F6 to see/hear list– “h1,” “h2”, etc. within <body> tag

Example:

<h1>Accessible Design Matters!</h1>

<h2>This Site and You</h2>

<p>This site has been developed to help you design accessible websites and web-based

software.</p>

Topics

Organization--Frame Attributes

• Best to avoid frames– Accesskeys don’t work across frames, violates user mental

construct of “page”• Users may be confused about “page” (frame) they are on or where

they are on page

– But if you use them…• Include “title,” “name,” “% sizing” within <frame> tag

• Use “title” and “name” to describe content

• Duplicate content in <noframes> sections

• Use heading tags (<h1>, etc.) for cross-frame navigation

Topics

Organization—Tips

• Retrofitting a site– Always work on a duplicate site, not your live site– Validate your code and convert your site to XHTML 1.0 – If you are using Dreamweaver, activate Accessibility prompts– Frequently review your changes, especially changes to CSS

• Use headings to complement site architecture– Make sure hierarchy (h1, h2) is consistent page to page

• Avoid using nested lists (i.e., multi-level dropdown menus)

Topics

Navigation

• Helps users move easily through site by tabbing or skipping repetitive links

• Uses screen reader features and browser capabilities– Page Links– Skip Links– Accesskeys– Tab Ordering

Topics

Navigation--Page Links

• Users surf by tabbing through links – Can also list links with <Insert> + f7– Will read: “Link about this site”

• Must make sense out of context

– Include the “title” attribute• User can set screen reader to read longest text

• Sighted users can see title with mouseover

Example:<a href="About.html" title="Information about this site”> About this site</a>

Topics

Navigation--Skip Links

• Enable users to skip over navigation bar– To avoid repetition on each page– Will read: “Skip to main content same page link”

• Ideally should be visible to help all keyboard users

• Often used in combination with accesskey

– Top of page: <a href=“#Content”>; where content begins: <a name=“Content”>

Example: <a href="#Content” title=“Skip to Content” >Skip to Main

Content</a>

<h1><a name="Content”></a>Welcome...</h1>

Topics

Navigation--Accesskeys

• Enable users to go directly to link or form input– Will read: “Destinations link alt plus d”– User presses Alt key plus accesskey to set focus

• Then press <enter> to implement

– Should be used sparingly—some say not at all because of browser conflicts

• If you want to us them, we recommend:– Numeric keys, as suggested by UK eCommerce Dept.

Topics

Navigation--UK Accesskey Standard

• UK standard for non-letter-based accesskeys:

1 - Home page2 - What's new3 - Site map4 - Search5 - Frequently Asked Questions (FAQ)6 - Help7 - Complaints procedure8 - Terms and conditions9 - Feedback form0 - Access key details

plus

S - Skip navigation

http://www.cabinetoffice.gov.uk/e-government/resources/handbook/html/2-4.asp

Topics

Navigation--Accesskey Implementation

• Example:<a href="Accessibility.html" title=“Accessibility Information about this

site: alt + 0” accesskey=”0”>Accessibility page (0)</a>

Topics

Navigation--Tab Ordering

• Enables user to tab through site in logical way– Creates reading order for links and inputs (from “0” to “32767”)– “Taborder” within the <a href> tag– Not necessary if web page linearizes (tabs) properly– Tab = “0” enables part of page to receive focus, even if it is not a

link or form field

Example:<a href="About.html" title="Information about this site: Alt + A" class="BottomNav" accesskey=”A" tabindex="121”> About this site (A)</a>

Topics

Navigation—Tips

• Ensure navigation text matches destination page titles

• Accesskeys– Don’t overdo it; 3-4 numeric keys– Include an accesskey to an Accessibility page on your site that

tells screen reader users how to navigate your site

• Make navigation headings clickable and provide a destination page with meaningful content

Topics

Presentation

• Not everyone “sees” the same page• Blindness, color blindness and visual impairments

affect millions of people• Meaningful descriptions, adequate contrast and

“safe” color combinations help level the playing field– Alt tags– Text images– Links– Relative sizing– Color– Contrast

Topics

Presentation--Alt Attributes

• Read by screen readers when image encountered– Concise, relevant description of image– “Alt” attribute within the <img> tag– For more information, provide link to a separate page and add

“Longdesc”– Use alt=“” when image does not contain meaningful content

Example:<img src="Images/Logo.gif” alt="Logo of rising sun" /><a href="Logo.html" title="Description of logo metaphor”></a>

Topics

Presentation--Text Images

• CSS or Scalar images can be enlarged without losing definition– Pixel based images (.gif or .jpg), lose clarity when enlarged

Examples: • HTML text modified by CSS instead

– Relative values for text (i.e., “ems”)

• Scalar vectors (.svg)– Freehand, Illustrator

Topics

Presentation--Links

• Use CSS to differentiate: – Visited and unvisited links– Focused and non-focused links (i.e., “hover”)

• Mirror hyperlinks to destination text– Duplicate the color and intensity of hyperlinks with how they

appear in destination pages– Use CSS :hover and the <strong> attribute

Topics

Presentation--Relative Sizing

• Sites created with relative sizing can be enlarged and retain their shape– Relative sizing allows users to enlarge site to their needs– Use “em,” “%” in style sheets

Example:.Title {font-family: Arial, Helvetica, sans-serif;

font-size: 1.25em;font-weight: bold;margin-left: 5%;}

Topics

Presentation--Color

• Color won’t differentiate objects for everyone• 10% of male population is color-blind

– Green and red are brown– Bad Example: “Required fields are shown in red”

Topics

Presentation--Color Acuity

• To a person without color blindness…

• …these circles look different.

Topics

Presentation--Color Acuity

• To a person with color blindness…

• …these circles look quite similar.

Topics

Presentation--Contrast

• Persons with low vision benefit from

• Use saturation and not color alone to highlight text– Ensure screen reader emphasis with <strong> or <em>

attributes

high contrast

Topics

Presentation--Tips

• Make sure your site is consistent– Visited and unvisited link styles– Layout, navigation, headings

• Watch out for redundant page titles– Use alt=“” for image logos– Make sure page titles contain the site name

• Be judicious with images– Include them only if they provide content and caption them– Make them static: change only with page refreshes or give users

control over a series of them– Don’t use them for text

• Use <strong> or <em> rather than <bold> attribute

Topics

Content

• Persons with cognitive issues struggle with meaning and focus

• Blind persons can’t see data relationships

• Make your site easy to read– Words and Phrases– Sentence and Paragraph Structure

• Make your site easy to understand– Table Mark-up– Form Mark-up– Abbreviation and acronym attributes

Topics

Content--Words and Phrases

• Your goal is to communicate– Use common words and phrases– Write simply and clearly

• Let screen reader users skim– Headings– Meaningful phrases for links

Topics

Content—Sentence and Paragraph Structure

• Be consistent in style and formatting– Start sentences with the subject– Use lead-in sentences to paragraphs– Have consistent paragraph structure

Topics

Content--Table Mark-up

• Blind persons can’t see column or row headings or table structure

• Context has to be provided for them

• “Summary,” “Id” and “Headers,” and “Scope” provide information about tables

1. Tell blind users about table structure

2. Associate cell information with headings– Row and column headers, or Scope

Topics

Table Content—Summary Attribute

• Is invisible on page, spoken by screen readers before table to give information about data structure

– Press “Ctrl + Shift” + t– Will read: “This three by three table…”– “Summary” attribute within <table> tag

Example: <table width=“80%” summary="This 3 by 3 table shows the effect of accessibility on user satisfaction. Row one contains headings for user segments and satisfaction with and without accessibility; rows two and three contain results for user segments.”></table>

Topics

Table Content--ID and Header Attributes

• Screen readers can read table column and row headers– Press “Alt + Ctrl” with arrow or with numpad 5– Will read “Tutorial Introduction,” “Formats Stylesheets”

Example:<tr>

<th id="category1”>Tutorial</th>

<th id=“category2”>Formats</th>

</tr>

<tr>

<th headers="category1">Introduction</th>

<th headers="category2”>Stylesheets</th>

</tr>

Topics

Table Content--Scope Attribute

• Scope attribute can be used in place of “id” and “headers”

Example:<tr>

<th scope="col”>Tutorial</th>

<th scope="col”>Formats</th>

</tr>

<tr>

<td>Introduction</td>

<td>Stylesheets</td>

</tr>

Topics

Table Content—Caption Tag

• Caption tag provides additional contextExample: <caption>Accessibility and User Satisfaction </caption>

• Data=Tables, Layout=CSS

Topics

Content--Form Mark-up

• Like table attributes, form mark-up provides screen readers with information about form structure and content

• “Label For” and “I D”; “Fieldset” and “Legend”• Benefits:

1) Associate a label with its input, and

2) Provide context for users.

Topics

Form Content--Label For and ID

• Screen readers read labels when text box receives focus– “First name form input”

Example:<label for="FirstName” >First name:</label>

<input name="fn" type="text” id="FirstName" />

Topics

Form Content--Fieldset and Legend

• Screen readers read legend before form content• Use Fieldset and Legend to group questions or

sections logically

Example:<fieldset>

<legend>Contact Information</legend>

</fieldset>

Topics

Content—Abbreviations & Acronyms

• Screen readers read titles for abbreviations and acronyms– So users understand reference– Using <abbr> and <acronym> attributes

• Acronyms read letter by letter; SIMS = “S” “I” “M” “S”

• Abbreviations will (usually) be treated as words: “Sims” Some browsers will also identify them with dotted underlines and mouseover popups

Example: <abbr title=“abbreviation”>abbrev.</abbr>

<acronym title=“World Wide Web Consortium”>W3C</acronym>

Topics

Content—Tips

• Keep content concise• Keep content consistent• Tables

– Use <scope> attribute to minimize cell coding

• Forms– Provide additional context for month/day/year forms by including

a hidden label before each input box– Add a colon to each legend tag to create a break between

headings– Put text in input boxes to add context

Topics

Evaluating Websites for Accessibility

• Process– AIS Toolbar + Protocol (http://

www.visionaustralia.org.au/info.aspx?page=614) – Accessibility Evaluation Tools

• Overview: WAVE 4.0

• In-Depth: aChecker (University of Toronto)

– JAWS Review

Topics

AIS Web Accessibility Toolbar

HTML, CSS, Links

Disable, Show Style

Sheets

List, Toggle, Show, Maps, Flicker

Greyscale, Contrast, Vizcheck

Headings, Lists,

JavaScript, Accesskeys,

Taborder, Tables,

Frames, Divs

WAVE, Bobby, Lynx,

Reading Levels,

Analyzers, Simulators

Page Info, Metadata,

Titles, Frames, Links,

Applets/ Scripts

Toggle: Images,

JS*, ActiveX*, CSS, Text

Size, Formatting

View Source*, Highlight Source*, Deprec. HTML*

Magnify

Topics

Accessibility Evaluation Tools

• WAVE 4.0 (http://dev.wave.webaim.org)– Benefits: Visual, concise, reviews both websites and files– Drawbacks: Limited detail, may overlook some items

• Web Accessibility Checker (http://achecker.ca/checker/index.php)– Benefits: Thorough, lists errors/alerts by line number,

recommends repairs, can drill down for explanations– Drawbacks: Significant level of detail can be daunting, can be

slow

Topics

WAVE 4.0 Demo

Topics

Web Accessibility Checker Demo

Topics

Web Accessibility Checklist

• Beyond compliance, extra step with focus on website usability for persons with disabilities

• Encapsulates key manual checks

Topics

Accessibility Checklist--Example

Subject Status Recommendations

Images OK Images presenting meaningful content have <alt> and/or <longdesc> elements containing useful descriptions. Non-essential images have null tags (“”).

Links OK Links have unique and meaningful descriptions. Where text descriptions are redundant, title attributes provide differentiation.

Headings OK Headings appear in a logical hierarchy, have meaningful labels and there are no levels missing.

Accesskeys OK Accesskeys are present and functional.

Page Title OK Page title is descriptive and unique.

Tab Order OK Tabbing takes you through document in a logical order.

Functionality OK Tabbing takes you through document without triggering action. Controls work using only keyboard.

Style Sheets/ Linearization OK Document is useable, readable and sensible with style sheets turned off.

Colors OK Sufficient contrast between foreground and background colors; content not differentiated by color alone

Text Zoom OK Page is readable and functional at 4X magnification.

WAVE Review OK Page contains 0 accessibility errors and 10 warnings are accounted for.

W3C Validation OK Page is XHTML 1.0 Transitional compliant.

Topics

Accessibility Checklist—Home Page

Subject Status Recommendations

Images Fix Repair images with missing alt tags. Check contrast of

Links Fix Most links have unique and meaningful descriptions. Eliminate redundant links wherever possible.

Headings Fix No headings present. Should be added for main content areas and key subcategories.

Accesskeys Fix Consider adding accesskeys for: search, skip to content, shopping cart.

Page Title Fix Page titles are redundant and do not describe page content.

Tab Order Fix Subcategories precede categories in left hand navigation.

Functionality Fix Tabbing takes you through document without triggering action. Controls work using only keyboard. Controls do not work with JavaScript turned off.

Style Sheets/ Linearization Fix Style sheets are used minimally. Page appears to linearize okay despite use of nested tables.

Text Zoom Fix Reliance on tables and text images reduces accessibility.

WAVE Review Fix Page contains 3 types of accessibility errors and 3 types of warnings.

W3C Validation Fix Page is based on HTML 4.01, and contains invalid and deprecated code.

Topics

JAWS Demo—Home Page

• Surf to this address: http://usability.msu.edu

• Listen for:– Navigation scheme– Page structure– Sentence formatting

• Experience the UAC site using JAWS:– Listen to page (ins + down arrow)– Check page title (insert + t)– Tab through links and link phrases (tab)– Scan through headings (h)– Search for item (ctrl + f, type “item”)– Review link phrases (insert + f7)– Review headings (insert +f6)– Go to different pages

• Quit JAWS

Topics

Questions and Wrap-up

Topics

Resources

• A List Apart: http://alistapart.com/• Firefox Add-ons (https://addons.mozilla.org/firefox/):

– Developers Extension– FANGS (Screen Reader Emulator)– Mozilla Accessibility Extension

• W3C: http://www.w3c.org– WCAG 2.0 Recommendations: http://www.w3.org/TR/UAAG20/ – ARIA 1.0: http://www.w3.org/TR/wai-aria/

• Best Practices: http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224/

• WAT Add-on: http://www.paciellogroup.com/resources/wat-ie-about.html

Topics

Questions?