Accessibility 101
© 2007 Knowbility, Inc. All rights reserved
Class Objectives
• Accessibility Terms / History • Experience the problem of access barriers • Accessible Design Techniques • Accessible PDFs • Accessibility Testing • Creating an Accessibility Plan © 2007 All rights reserved. Knowbility, Inc 2
Introduce accessibility terms and history
© 2007 All rights reserved. Knowbility, Inc 3
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 © 2007 All rights reserved. Knowbility, Inc 4
What is Accessibility?
• A user experience • The ability of a user with a disability to obtain the same information and perform the same tasks as any other user.
• Generally creating a better user experience for all.
True Test: Can people with disabilities use your web page?
© 2007 All rights reserved. Knowbility, Inc 5
Official Disabilities
• Visual (including blind, low vision, and color blind) • Hearing • Motor/Physical • Speech • Cognitive Learning © 2007 All rights reserved. Knowbility, Inc 6
Quasi-Disabilities
• Slow Internet Connection • Old Browser • Missing Plugins • No Speakers • Small Display (pda, mobile phone) • Eyes busy / Hands busy • Noisy Environment © 2007 All rights reserved. Knowbility, Inc 7
Who is responsible for web accessibility?
‣ ‣ ‣ ‣ ‣ ‣
we can only control how sites & pages are built techniques we use have significant impact on accessibility
Web Content Accessibility Guidelines (WCAG)
others are responsible too
Authoring Tool Accessibility Guidelines (ATAG) ‣ ‣ These are the rules for people who create software like
Dreamweaver
and
FrontPage
and
Content Management Systems
.
User Agent Accessibility Guidelines (UAAG) Rules for people who create user agents, like
browsers
(for example,
Firefox
and
Internet explorer
) and
assistive technology
(screenreaders.and speech recognition software) © 2007 All rights reserved. Knowbility, Inc 8
Why is this important?
• More than 50 million Americans – 750 million worldwide – have disabilities.
• Numbers increasing as population ages.
• $1 trillion in aggregate annual income.
• Emerging best business practices.
• Federal mandates.
© 2007 All rights reserved. Knowbility, Inc 9
Why make things accessible?
• because we can • because the web is about empowering people with information, not building barriers • Google & SEO (search engine optimization) • because it is the law © 2007 All rights reserved. Knowbility, Inc 10
Accessibility in law and policy
• • • •
International
• WCAG – Web Content Accessibility Guideline from W3C
Federal
• Americans with Disability Act • Section 508 of the Rehabilitation Act
State (North Carolina)
• North Carolina state law (N.C. Gen. Stat. § 168A-7) – against discrimination in public service…provide reasonable accomodation • http://www.ncga.state.nc.us/EnactedLegislation/Statutes/HTML/By Section/Chapter_168A/GS_168A-7.html
Organization
• North Carolina State http://www.ncsu.edu/it/access/legal/webreg.php
• University of Texas at Austin Policy www.utexas.edu/web/guidelines/accessibility.html
Organization © 2007 All rights reserved. Knowbility, Inc 11
Accessibility in Charlotte
© 2007 All rights reserved. Knowbility, Inc 12
Target & Accessibility
• Disability class action lawsuit against Target by National Federation of the Blind • Charges: www.target.com
violates • is inaccessible to the blind the Americans with Disabilities Act (ADA) • • the California Unruh Civil Rights Act California Disabled Persons Act. • Target asked court to dismiss action • arguing no law requires Target to make website accessible. • September 6, 2006 Court Ruling – Case Will Be Heard • all services provided by Target, including its Web site, must be accessible to the disabled © 2007 All rights reserved. Knowbility, Inc 13
Accessibility Standards
Two sets of Standards: •
Web Content Accessibility Guidelines, WCAG 1.0 (international)
•
Section 508 Standards (United States)
© 2007 All rights reserved. Knowbility, Inc 14
Brief Look at WCAG
www.w3.org/wai Developed by consensual process –
Comprehensive:
Includes over 60 checkpoints –
Widely accepted:
European Union, Canada, Australia have adopted WCAG.
Published in May 1999
(old and about to be replaced by 2.0 anticipated soon) Priority 1: Critical Priority 2: Moderately important Priority 3: Useful but not essential © 2007 All rights reserved. Knowbility, Inc 15
Brief Look at Section 508
www.access-board.gov/sec508/guide/1194.22.htm
Legally applies only to federal agencies: –
Shorter:
508 has 16 checkpoints, WCAG over 60 –
Experience:
508 based on WCAG’s most critical accessibility checkpoints.
–
Measurable:
508 standards developed to be objective and measurable. © 2007 All rights reserved. Knowbility, Inc 16
Assistive Technology
• specialized tools • help us do things we’d normally do • accomodate various temporary or permanent conditions © 2007 All rights reserved. Knowbility, Inc 17
Examples of Computer Assistive Technology • Screen Magnifier - Zoom Text • Screen Reader – JAWS • Voice Recognition DragonSpeak © 2007 All rights reserved. Knowbility, Inc 18
Hands on Exercise Using a Screenreader
• Experiencing accessibility issues first hand • Individually or in pairs, with headsets • Discuss • • • what worked?
what didn’t work?
how could it be improved?
© 2007 All rights reserved. Knowbility, Inc 19
Learn accessible design techniques
© 2007 All rights reserved. Knowbility, Inc 20
Web Development Techniques
‣ ‣ ‣ ‣ ‣
HyperText Markup Language (HTML and XHTML)
Semantic, structural markup (headings, lists, quotes, etc Includes things not in Section 508 (acronyms, abbreviations, language changes, validation) Related Guidelines: WCAG 3.1, 3.5, 3.7, 5.4
Cascading Style Sheets (CSS) JavaScript (JS)
© 2007 All rights reserved. Knowbility, Inc 21
How is XHTML different than HTML?
• • •
well-formed
• all elements must either have closing tags •
or
• all the elements must nest properly •
Help!
lower case
• lower case for all HTML element and attribute names
quotes
• attribute values must be quoted © 2007 All rights reserved. Knowbility, Inc 22
Mandatory XHTML Elements
► ► ►
Recommended DOCTYPE is XHTML 1.0 Transitional Tutorial on XHTML http://www.w3schools.com/xhtml/ Validate your XHTML at http://validator.w3.org/
© 2007 All rights reserved. Knowbility, Inc 23
Section 508
a) Alt Text b) Synchronized alternatives for multimedia
c) Color d) Use CSS e) Server-side image maps f) Client-side image maps g) Simple tables h) Complex tables
i) Frames
j) Flickering k) Text only version l) Scripting
m) Applets n) Forms
o) Skip Navigation p) Timed Response © 2007 All rights reserved. Knowbility, Inc 24
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 Related Guidelines: 508 1194.22(a), WCAG 1.1, IBM 1.
© 2007 All rights reserved. Knowbility, Inc 25
• • • • •
Alt-text for Images
Every
image must have a valid alt attribute. Images which are not active and which do not convey information should have alt=“” .
Image links must have a non-empty alt attribute.
Each INPUT of TYPE=“IMAGE” must have alt-text specifying the purpose of the button Each AREA of a MAP must have a valid alt attribute (more later) © 2007 All rights reserved. Knowbility, Inc 26
Alt-text Examples
alt=“United Nations Flag”
width=… >
alt=“Aeronautics”
width=…> Maybe
title=“Visit the Aeronautics Home Page”
alt=“”
width=“1” height=“1”> © 2007 All rights reserved. Knowbility, Inc 27
• • • •
Alt-text No No’s
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.” Reference to link: “link to aeronautics home page” – we know it’s a link.
File information: “spacer.gif 236 bytes” Meaningless out of context: “Click here” © 2007 All rights reserved. Knowbility, Inc 28
•
Alt-text - Judgment
Is it purely Visual? Use
alt=“”
.
• NLS uses
alt=“Image of NLS Users”
© 2007 All rights reserved. Knowbility, Inc 29
Long Descriptions (not widely supported)
• • The issue: Sometimes short alt text does not convey the information in an image.
This is obviously true for charts and graphs.
Related Guidelines: 508 1194.22(a), WCAG 1.1, IBM 3.
Glenda’s recommendation. Don’t use longdesc. Put longer descriptions right directly onto the page as a caption. Or create a second page with additional details. Don’t limit the longdesc to Assistive Technology! © 2007 All rights reserved. Knowbility, Inc 30
• •
Long Descriptions
Use the long description attribute ( longdesc ) on the IMG element to provide text equivalents for images like charts or graphs. Instead, such images may be described in the text of the page or with a caption. © 2007 All rights reserved. Knowbility, Inc 31
Long Descriptions - Examples
Some images need “long descriptions”like charts and graphs < IMG src="traffic.jpg" ...
longdesc="traffic.htm"
alt="traffic density graph“ > traffic.htm :
This graph shows traffic density on Main and Center streets measured in … © 2007 All rights reserved. Knowbility, Inc 32
Long Descriptions - Examples
© 2007 All rights reserved. Knowbility, Inc 33
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. Related Guidelines: 508 §1194.22(a, b); WCAG 1.1, 1.4; IBM 4.
© 2007 All rights reserved. Knowbility, Inc 34
• • •
Multimedia
Include a text
transcript
for each informational audio file. Provide synchronized text equivalents (
captions
) for the audio content of a multimedia presentation. Provide synchronized
audio descriptions
of significant video information in multimedia presentations.
© 2007 All rights reserved. Knowbility, Inc 35
Multimedia - Examples
Check out MAGPie at • http://ncam.wgbh.org/webaccess/magpie Sample video with captions and audio descriptions: • NCAM Rich Media Project © 2007 All rights reserved. Knowbility, Inc 36
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.
© 2007 All rights reserved. Knowbility, Inc 37
© 2007 All rights reserved. Knowbility, Inc 38
© 2007 All rights reserved. Knowbility, Inc 39
Color: What not to do
© 2007 All rights reserved. Knowbility, Inc 40
Color: How to fix it
© 2007 All rights reserved. Knowbility, Inc 41
Color Contrast
‣ ‣ ‣ ‣ ‣ Can you read me?
Can you read me now?
Can you read me now?
Can you read me now?
Can you read me now?
Use the color contrast analyzer:
http://juicystudio.com/services/colourcontrast.php
© 2007 All rights reserved. Knowbility, Inc 42
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_linco ln © 2007 All rights reserved. Knowbility, Inc 43
© 2007 All rights reserved. Knowbility, Inc 44
© 2007 All rights reserved. Knowbility, Inc 45
© 2007 All rights reserved. Knowbility, Inc 46
Quality Link Text
• The issue: Will link text make sense out of context, in a list of links?
Related Guidelines: WCAG 13.1
. Note: this is
NOT
part of the 508 guideline. It will be part of WCAG 2.0.
© 2007 All rights reserved. Knowbility, Inc 47
Exercise – Link Lists
• Imagine you are visually impaired and listening to the list of links for the a university’s course catalogues.
You hear:
program courses program courses program courses program courses… © 2007 All rights reserved. Knowbility, Inc 48
• •
Links
Use descriptive link text that lets the user know where the link goes. Links to the same place should have the same text; links to different pages should be different. © 2007 All rights reserved. Knowbility, Inc 49
Links - Examples
Which goes with which?
To go where?
© 2007 All rights reserved. Knowbility, Inc 50
508 d) Use CSS
(d) Documents shall be organized so they are readable without requiring an associated style sheet.
• • The issue: Style sheets are an asset to accessibility but they are ignored by assistive technology so it is important not to convey information with style sheets Sometimes individuals use local style sheets for enhanced font size and color Related Guidelines: 508 §1194.22(d); WCAG 6.1; IBM 11.
© 2007 All rights reserved. Knowbility, Inc 51
Issues with Stylesheets
• Users have the ability to override stylesheets and create their own. They might, for example, create a light text on dark background stylesheet.
• CSS colors should be declared in pairs so that if they are overridden, they are overridden together.
• • • • } #header { color: #000; background-color: #ccc; © 2007 All rights reserved. Knowbility, Inc 52
Issues with Stylesheets
• Most modern browsers support stylesheets, but we can’t always guarantee that they are used and/or delivered.
• We need to ensure that pages are readable without stylesheets as well.
• This includes checking for positioning/content order, color issues, and generated content © 2007 All rights reserved. Knowbility, Inc 53
Other CSS Issues
• Use relative units to allow pages to “resize” based on user need • Use percentages to specify the width of tables. This refers to the percentage of the screen that the table will fill • Use percent (%), em, or the terms larger, smaller, etc. for the font-size property. This sets font-size relative to the defaults specified by the user, and allows him or her to change font sizes as needed using the browser • Related guidelines: WCAG 3.4
© 2007 All rights reserved. Knowbility, Inc 54
The Power of CSS
• Designing with CSS • • Separate content from presentation Make maintaining a site more effective and efficient • See CSS in Action at www.csszengarden.com
*note – sites at csszengarden are not necessarily accessible © 2007 All rights reserved. Knowbility, Inc 55
508 (e, f) Image Maps
(e) Redundant text links shall be provided for each active region of a server-side image map. (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. • The issue: Server side maps require the use of a mouse. Many disabled users cannot use a mouse.
Related Guidelines: 508 §1194.22(e, f), WCAG 1.2, 9.1; IBM 2.
© 2007 All rights reserved. Knowbility, Inc 56
• • • •
Image Maps
Do not use server-side image maps. Use client-side image maps.
Include alt-text on every AREA of the MAP specifying the purpose of each hot spot. Include alt-text on the actual image © 2007 All rights reserved. Knowbility, Inc 57
Image Maps - Examples
© 2007 All rights reserved. Knowbility, Inc 58
Image Maps - Examples
alt=“My Yahoo!”
>
alt=“Finance”
>
alt=“Travel”
>
alt=“Email”
>
alt=“Messenger”
>
alt=“Help”
>
© 2007 All rights reserved. Knowbility, Inc 59
Image Maps - Examples
shape=poly
coords="173,7,181,9,180,10,227,9,232,10,233,12,238,11,244,12, 250,13,257,14,263,15,267,17,259,27,251,27,245,36,249,41,246,48, 254,53,256,57,257,61,258,66,262,68,263,73,264,75,263,77, 262,78,260,78,259,80,258,82,257,84,256,86,254,87,243,87,243,88, 229,88,229,92,207,92,206,90,186,90,184,85,173,82,170,45, 172,30,172,7,174,8" href=" ... "
alt="North Dakota, Minnesota, South Dakota, Nebraska, Iowa"
> © 2007 All rights reserved. Knowbility, Inc 60
508 (g & h) Tables
(g) Row and column headers shall be identified for data tables. (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
• • The issue: Data tables are designed for viewing; column and row headers can be discerned while reading data. Accommodation is needed so that screen readers will announce headings as the user navigates a table.
Related Guidelines: 508 §1194.22(g, h); WCAG 5.1, 5.2; IBM 10.
© 2007 All rights reserved. Knowbility, Inc 61
• • • • •
Data Tables
Place column headings in the first row and place row headings in the first column.
Use the scope attribute on all heading cells specifying whether the heading labels a column or a row e.g., scope= “ row ” .
Use the TH element for all heading cells. For
complex tables
: Assign an id and string of id ’s as the header to each heading cell attribute for each data cell to say which are heading cells for that data cell. Use the summary attribute and/or CAPTION element.
© 2007 All rights reserved. Knowbility, Inc 62
Simple Data Tables
Performance width= "10% “ width= "10% width= "10% “ “ scope= “ col ” > 1998 scope= “ col ” > 1999 scope= “ col Fund ” > 2000 17.7
...
> © 2007 All rights reserved. Knowbility, Inc 63
Complex Data Tables
They do exist (http://workshops.fedstats.gov/htmlSamples.htm).
© 2007 All rights reserved. Knowbility, Inc 64
Complex Data Tables - Example
The “usual” Example: © 2007 All rights reserved. Knowbility, Inc 65
Complex Data Tables - Code
travel Expense Report
id="c2">Meals
Hotels transport subtotals
id="r2">San Jose
id="r3" >25-Aug-97
headers="c2 r2 r3">37.74
112.00 45.00 © 2007 All rights reserved. Knowbility, Inc 66
508 i) Frames
(i) Frames shall be titled with text that facilitates frame identification and navigation.
• The Issue: Frames are presented to users of assistive technology as lists of pages. This requires that meaningful text be available for those lists.
Related Guidelines: 508 §1194.22(i); WCAG 12.1; IBM 9.
© 2007 All rights reserved. Knowbility, Inc 67
•
Frames
Provide title attributes for each FRAME element in the FRAMESET that make clear the purpose of the frame.
© 2007 All rights reserved. Knowbility, Inc 68
Frames - Examples
© 2007 All rights reserved. Knowbility, Inc 69
Frames - Examples
name="Title"
frameborder="yes"
title="Title Content"
>
name=“Main_Navigation"
frameborder="yes"
title=“Main Navigation"
>
name="Banner_Ad"
frameborder="yes"
title="Banner Ad"
>
name="Main_Content"
frameborder="yes"
title="Main Content"
>
name=“Local_Navigation"
frameborder="yes"
title=“Local Navigation"
>
© 2007 All rights reserved. Knowbility, Inc 70
Frames - Examples
As seen with Lynx: FRAME: frame 70890 FRAME: frame 70888 © 2007 All rights reserved. Knowbility, Inc 71
508 j) Flickering
(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
• The issue is: Flicker in the range 2Hz to 55Hz may cause seizures in people with photosensitive epilepsy.
Related guidelines: 508 §1194.22(j); WCAG 7.1; IBM 13.
© 2007 All rights reserved. Knowbility, Inc 72
•
Flickering
The frequency of flicker (
image appearing and disappearing
) in animated GIF’s, Flash or other objects must be less than 2 Hz or greater than 59 Hz.
© 2007 All rights reserved. Knowbility, Inc 73
• •
Flickering- Examples
Warning! Flash Example of Flicker (http://ncam.wgbh.org/richmedia/media/flicker _demo.html) For comparison, the caret blink rate (or cursor blink rate) in Windows 2000 varies from 1/2 Hz at the slowest setting to 3 Hz at the fastest; the middle setting is about 1 Hz.
© 2007 All rights reserved. Knowbility, Inc 74
508 k) Text-Only Version
(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. LAST RESORT © 2007 All rights reserved. Knowbility, Inc 75
Text Only?
• No other way to make content accessible • Text only version is up-to-date with “main” version • Text only version provides equivalent functionality as “main” version © 2007 All rights reserved. Knowbility, Inc 76
508 l) Scripts
(l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. • The issue: Content created with scripts may be inaccessible, especially to people using screen readers and/or unable to use the mouse. Related Guidelines: 508 §1194.22(l); WCAG 6.3, 6.4, 8.1, 9.3; IBM 5. © 2007 All rights reserved. Knowbility, Inc 77
• • •
Scripts – Some Cautions
If text is made visible through attribute changes with JavaScript, then the interactions must be keyboard accessible, or the content must be readily available in some other accessible way. Do not use the onChange event on select menus for form submission.
For more information on Accessible Javascript see WebAim www.webaim.org/techniques/javascript/ © 2007 All rights reserved. Knowbility, Inc 78
508 m) Applets
(m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l). • The issue: Software associated with a web page must be accessible.
Related Guidelines: 508 §1194.22(m); WCAG 6.3, 6.4, 8.1; IBM 6.
© 2007 All rights reserved. Knowbility, Inc 79
•
Applets and Plugins
Information conveyed and the function provided by applets, plugins or other objects must be available to users of screen readers and other assistive technology • Check that the software is directly accessible (desktop players, for example) or provide accessible alternatives.
© 2007 All rights reserved. Knowbility, Inc 80
508 n) Forms
(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. • • The issue: “Tell me what this form control is for!” People using screen readers need to be told the purpose of an edit field or check box.
Related Guidelines: 508 §1194.22(n); WCAG 10.2, 12.4, 9,3; IBM 7 © 2007 All rights reserved. Knowbility, Inc 81
Accessible Forms
Text prompt © 2007 All rights reserved. Knowbility, Inc Input control 82
Accessible Forms
1.
2.
3.
Position text prompts immediately adjacent to input controls Associate text prompts corresponding input with the element using the label element with the for attribute Use the title attribute on form controls when text not available for label © 2007 All rights reserved. Knowbility, Inc 83
Accessible Forms: Example
for= “lname”
> Last Name:
… … type= “text”
id= “lname”
name= “last-name”
id= “old”
name= “visited” value= “yes” / >
for= “old”
> I have visited before.
…
id= “new”
name= “visited” value= “no” / >
for= “new”
> I am a new user
…
© 2007 All rights reserved. Knowbility, Inc 84
• • •
Accessible Forms
Position prompts immediately adjacent to input controls Associate prompts with the corresponding INPUT element using the LABEL element with the for attribute Use the title attribute on form controls when text not available for LABEL © 2007 All rights reserved. Knowbility, Inc 85
Accessible Forms - LABEL
for= "name"
> Last Name:
… size= "20" type= "text"
id= "name"
name= "Name" > …
for= "old"
> I have visited before.
…
type= "radio" checked
id= "old"
name= "visited" value= "yes" > © 2007 All rights reserved. Knowbility, Inc 86
•
Accessible Forms -Title
Some times there is no text to use with Label:
title=“disagree 3
"> © 2007 All rights reserved. Knowbility, Inc 87
508 o) Skip Navigation
(o) A method shall be provided that permits users to skip repetitive navigation links.
• The issue: Navigation links often precede the main content on every page. People listening to the page have to listen to those links on every page making the main content difficult to find Related Guidelines: 508 §1194.22(o); WCAG 13.5, 13.6; IBM 8 © 2007 All rights reserved. Knowbility, Inc 88
•
Skip Navigation
If there are navigation links before the main content of the page, provide a link at the top of the page that jumps over the navigation to the main content. © 2007 All rights reserved. Knowbility, Inc 89
Skip Navigation – The Problem
A screen reader user has to listen to everything before the “main content.” © 2007 All rights reserved. Knowbility, Inc 90
Skip Navigation – Example
© 2007 All rights reserved. Knowbility, Inc 91
Skip Navigation – Example
alt="Click here to skip to main content"
… … Updated: 12:03 … © 2007 All rights reserved. Knowbility, Inc 92
Skip Navigation
‣ ‣
Far Left Technique
#skiplink { position:absolute; left:-999px; width:990px; }
Do Not Use display:none
#skiplink {display:none} © 2007 All rights reserved. Knowbility, Inc 93
Skip Navigation – another technique
‣
Use proper markup
‣ Heading tags allow users of screen readers to navigate through a page.
‣ Don’t leave out heading levels © 2007 All rights reserved. Knowbility, Inc 94
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.
© 2007 All rights reserved. Knowbility, Inc 95
Exercise – Read this important information
• 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.
© 2007 All rights reserved. Knowbility, Inc 96
Exercise – Read this important information
• Fundamentally transforming well designed actionable information whose semantic content is virtually null. © 2007 All rights reserved. Knowbility, Inc 97
Exercise – Read this important information
• To more fully clarify the current exchange, a few aggregate issues will require addressing to facilitate this distributed communication venue.
© 2007 All rights reserved. Knowbility, Inc 98
Exercise – Read this important information
© 2007 All rights reserved. Knowbility, Inc • 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.
99
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) © 2007 All rights reserved. Knowbility, Inc 100
Timed Response
• Do not set a time limit on the users response.
• Notify the user if a process is about to time-out • Provide a prompt asking whether additional time is needed.
© 2007 All rights reserved. Knowbility, Inc 101
Just Do IT!
© 2007 All rights reserved. Knowbility, Inc 102
Correct Markup
• • The issue: If you use structural markup for its intended purpose then assistive technology can take advantage of the structure when navigating the page If you use structural markup in the wrong way, a user of assistive technology may be confused when navigating the page Related Guidelines: WCAG 3.1, 3.5, 3.7, 5.4
Will be part of WCAG 2.0
© 2007 All rights reserved. Knowbility, Inc 103
• • •
Correct Markup
Use structural markup ( H1 , UL , P , …) for their designated purpose; don’t simply change font size and weight for a heading, for example. Don’t use structural markup to replace style changes, e.g., don’t use headings to achieve large font. Use BLOCKQUOTE for quotations, not for indentation © 2007 All rights reserved. Knowbility, Inc 104
17. Pop-up Windows
• • The issue: It is extremely disorienting to some people when content opens in a new window. If you cannot see the screen or if your browser is maximized you probably won’t know that a new window has appeared.
Related guidelines: WCAG 10.1.
© 2007 All rights reserved. Knowbility, Inc 105
• • •
Pop-up Windows
Do not use spontaneous pop-up windows.
If you must display content in a new window, include the fact that a new browser window will be opened in the link text (“product list in a new window”).
Provide a simple way to close the pop-up.
© 2007 All rights reserved. Knowbility, Inc 106
Bonus Points
• Abbreviations expanded • UT • Identify primary natural language and changes • lang="en" • Use XHTML 1.0 to create site. With strict DTD • • • www.webstandards.org/learn/reference/templates/ © 2007 All rights reserved. Knowbility, Inc 107
Create Accessible PDFs with Acrobat & MS Word
4/27/2020 © 2007 All rights reserved. Knowbility, Inc 108
The PDF File Format: Characteristics That Support Accessibility
• • • •
Establish Logical Reading Order
Content makes sense when you listen to it
Create Alternate Text Descriptions for Non-Text Elements Establish a Logical Tab Order (Forms)
Navigate PDF forms in a way that makes sense
Add Short Descriptions to Form Fields
Audible short descriptions added to form fields for those with visual disabilities 4/27/2020 © 2007 All rights reserved. Knowbility, Inc 109
PDF General Do’s and Don’ts
• Do NOT Use Character formatting for Headings • Do Add Alternative Text to Graphics in Source File • Do Use a Table Editor if Available to Create Tables • Do NOT Use Tables for layout • Do Set PDF Output Preferences option to Tagged • Do Check the Results in Adobe Acrobat 7 or 8 • Advanced > Accessibility > Full Check • Do Follow the Suggestions for Repair • Repeat Until No Errors Detected 4/27/2020 © 2007 All rights reserved. Knowbility, Inc 110
Microsoft Word: Use Styles
• • Apply Styles • Style Drop Down • Styles and Formatting Task Pane • Formatting Shortcuts • Title = Alt + Ctrl + 0 • • • Heading 1 = Alt + Ctrl + 1 Heading 2 = Alt + Ctrl + 2 Heading 3 = Alt + Ctrl + 3
Do NOT use Character Formatting Effects using Fonts, Font Size, Bolding, etc.
• Creates the Illusion of a Style, but it does not make it a Style 111 4/27/2020 © 2007 All rights reserved. Knowbility, Inc
Microsoft Word: Add Alt Text to Graphics
• Reveal the Format Picture Dialog • Select the Graphic and Right Mouse Click to Select “Format Picture...) • Double Click the Graphic • Apply the Alternative Text Description in the Text Box Provided Under the Web Tab 112 4/27/2020 © 2007 All rights reserved. Knowbility, Inc
Microsoft Word: Use Table Editor Properly
• Use the Table Editor for Tables • Table > Insert • Do Not Use Spacing and Tabbing to Display Tabular Information • Do Not Use Tables for Creating Multi Column Page Effects • Use the Columns Feature for Formatting Page Columns • Format > Columns 4/27/2020 © 2007 All rights reserved. Knowbility, Inc 113
Microsoft Word: PDFMaker
• •
Acrobat PDFMaker installed in Word when Acrobat is Installed Default settings for PDFMaker are Great!
• • • • • Adobe PDF > Change Conversion Settings Settings: Verify 'Enable Accessibility and Reflow with tagged Adobe PDF' is Checked Security (Optional) Word: Select Which Word Elements Get Converted to Their PDF Equivalents Convert Word Headings to PDF Bookmarks, Establish Heading Levels 114 4/27/2020 © 2007 All rights reserved. Knowbility, Inc
Microsoft Word: Generate a Tagged PDF File with PDFMaker
•
Do Not Print to Adobe PDF
• Two Options for Generating Tagged PDF with PDFMaker • Select Adobe PDF > Convert to Adobe PDF • Generate the PDF Using the Acrobat PDF Maker 8.0 Toolbar • Note: If this toolbar is not visible verify that it is active View > Toolbars > Acrobat PDFMaker 8.0
4/27/2020 © 2007 All rights reserved. Knowbility, Inc 115
PDF Accessibility Check
•
Run Accessibility Full Check
• Menu: Advanced > Accessibility > Full Check • •
Make recommended and appropriate repairs
• Read the Report
Repeat process until “No Problems Found”
4/27/2020 © 2007 All rights reserved. Knowbility, Inc 116
Adobe is Accessible
www.adobe.com/accessibility/
Creating Accessible PDF Documents with Adobe Acrobat 7.0
© 2007 All rights reserved. Knowbility, Inc 117
Accessibility testing
© 2007 All rights reserved. Knowbility, Inc 118
Accessibility Testing tools
• Accessibility Validators – Page by Page • Listening to Your Pages • Screenreaders/Talking Browsers • Accessibility Reports • Practical Testing Plan © 2007 All rights reserved. Knowbility, Inc 119
Accessibility Validators- Page by Page
• • • • • WebXact The Wave Web Developer for Firefox (extension) 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!
© 2007 All rights reserved. Knowbility, Inc 120
4 Free Accessibility Validators Tool WebXact +
*New tool from the folks at Watchfire (replaces bobby) *Excellent resource
-
•Doesn’t have visual info you used to get from Bobby
Wave Accessibility Toolbar Web Developer for Firefox
•Good for seeing “reading order” & alt text •Report not as intuitive •Doesn’t explain how to solve problems •Great tool that combines many accessibility validators and simulations •Beta version (occasional bug) •Only available for PC/IE •Great tool that combines many accessibility validators and simulations •Available for all OS •Only available for Firefox and Mozilla (ver. 1.0 – current) © 2007 All rights reserved. Knowbility, Inc 121
Evaluation of Free Accessibility Testing Tools
www.webaim.org/techniques/articles/freetools/ Articles has links to all the free accessibility testing tools © 2007 All rights reserved. Knowbility, Inc 122
Testing a Site
• http://www.charmeck.org/living/home.htm
• • • • WebXact Wave Web Developer in Firefox Luminosity Contrast Ratio Analyser © 2007 All rights reserved. Knowbility, Inc 123
Listening to Your Site
The real test – can users with disabilities actually use your site?
Listen to representative pages of your site using JAWS •
JAWS by Freedom Scientific
– popular screen reading software. Uses internal speech synthesizer and computer’s sound card to read info from computer screen aloud. www.freedomscientific.com
© 2007 All rights reserved. Knowbility, Inc 124
Watchfire WebXM
• Tests entire sites for accessibility • Builds accessibility reports
• • • • • • Results by checkpoints Checkpoints expanded Edit Preferences Create Reports Resources – How to fix Previews of pages for debugging © 2007 All rights reserved. Knowbility, Inc 125
© 2007 All rights reserved. Knowbility, Inc
Watchfire WebXM
126
A Practical Testing Plan
1. Test with your browser • Turn off images • Don’t use the mouse • Increase font size • Change window size 2. Online Accessibility Tests on representative pages • use more than one tool, example: Watchfire & Wave 3. Listen to your pages • JAWS 4. Review WebXM Report 5. Hands on Accessibility Testing © 2007 All rights reserved. Knowbility, Inc 127
Creating an Accessibility Plan
1. Gather Baseline Information 2. Gain Top Level Support 3. Organize a Web Accessibility Committee 4. Define a Standard 5. Create an Implementation Plan 6. Provide Training and Technical Support 7. Monitor Conformance 8. Remain Flexible Through the Changes WebAim 8 Step Implementation Model www.webaim.org/articles/implementation © 2007 All rights reserved. Knowbility, Inc 128
Next Steps
What accessibility actions do you plan to take next?
What resources do you need now?
• • www.utexas.edu/learn/accessibility/ www.jimthatcher.com
• www.knowbility.org
• www.webaim.org
• Sharepoint Accessibility msdn2.microsoft.com/en-us/library/ms916821.aspx
© 2007 Knowbility, Inc. All rights reserved