Accessibility for Web 2'0

1
(No Transcript)
2
Eric David
PMI-Certified Project Management
Professional Zend Certified Engineer (PHP 4 and
5) MySQL 5.0 Certified Developer MySQL 5.0
Certified DBA Certified Internet Webmaster
Associate
Public Speaker Topics accessibility, e-commerce
and project management Writer for PHP Architect
magazine Topics accessibility, security and
e-commerce
3
Primary Elementsof Implementing Web Accessibility
Usability Factors - Can be subjective - Varying
levels of adherence
Technical Requirements - Either adheres or does
not
4
Usability Factors

• Avoid using color to convey information

Assure substantial contrast between colors
5
Usability Factors

• Cognition-friendly interface

• Avoid mystery meat and other Web 1.0 gimmicks

6
Usability Factors

• Semantically-correct markup
• Tables used only for tabular data
• Can be navigated by keyboard
• Front-loading

7
Technical Requirements

• XHTML-validity
• All text can be resized
• CSS used for both design and layout must be
  legible and functional without CSS enabled
• JavaScript degrades gracefully
• Text-equivalents for all non-text elements
• HTML-particulars example forms should utilize
  fieldsets, legends and labels

8
Benefits
1. Accessibility implementation includes semantic
correctness which translates into better search
engine rankings (SEO.) 2. Accessibility
implementation includes having good usability
which translates into a better user-experience
for everyone, regardless of ability! 3.
Accessibility implementation includes maintaining
XHTML-valid markup which translates into
substantially-improved cross-browser
compatibility and is less likely to need
adjustment in future-browser releases. 4.
Accessibility implementation includes utilizing
CSS as the sole source of styles which makes
re-skinning your web site a breeze. 5.
Accessibility implementation includes being sure
that your site can be navigated via keyboard,
this also makes it easier for mobile users
browsing on a cellphone. 6. Accessibility
implementation includes being sure that all
JavaScript degrades gracefully in less-able
browsers this also benefits users of web-enabled
appliances like electronic pianos,
refrigerators and vehicle GPS systems.
9
Benefits
7. Accessibility implementation includes not
representing content or functionality solely by
color this also benefits users who are browsing
on the diminutive screen of a cellphone,
Blackberry or web-enabled wristwatch that may not
reproduce contrasting colors with noticeable
distinction. 8. Accessibility implementation
includes aiding the usage of alternative
input-devices that are designed for
special-needs. This primarily involves making
your links easy to click which also benefits
laptop users navigating by trackpoint, touchpad
or similar device. 9. Accessibility
implementation makes for great public relations.
I encourage every company to implement
accessibility and then publicize it as a badge of
honor! 10. Accessibility implementation can
simultaneously improve both your karma and your
e-business. Those with special needs will
appreciate being able to effortlessly utilize
your site and are likely to become loyal
customers this is especially true if your
competitors have not yet implemented
accessibility.
10
Hurdles

• Educating developers
• Some high-end features cannot be made entirely
  accessible
• Design limitations (minimal impact) including
  font-size uniformity between browsers

11
Tools

• W3C XHTML validator
• Bobby, WebXM, WebXACT
• Windows Text-To-Speech
• Jaws
• Tidy

12
The effects of ability-impairments on web browsing

• Impaired dexterity or loss of limb usage

• Photosensitive epilepsy

• Color blindness

• Poor vision

• Blindness

• Blind and deaf

• Cognitive barriers such as dyslexia, lack of
  language fluency or low reading ability

13
Alternate ways of browsing

• Assistive Technologies
• Enlarged text
• Head wand (mouth stick)
• Specialty keyboards
• Screen readers
• Virtouch mouse for the blind

14
Alternate ways of browsing

• Cellphone BlackBerry
• Tiny screen
• Keyboard navigation only
• May not support CSS or JavaScript
• Some have low contrast
• iPhone PDA Internet Tablets
• Small screen reduced resolution
• Mouse navigation much easier than keyboard
• Web-enabled refrigerators
• Electronic pianos with web browsers
• Internet kiosks

15
WCAG-WAI and Section 508 guidelines

• W3C WCAG 1.0 WAI levels
• Section 508
• Distill the important guideline points
• Some concepts can reduce usability for
  conventional users
• Accesskey takes over common browser shortcut keys
• Preset values in forms can be annoying,
  especially with JavaScript disabled
• Some guidelines are solely designed to overcome
  the shortcomings of older
• screen reader software that has since been
  deprecated

Must Info does not depend on color, imagery or
CSS layout
Should Semantic correctness,
color contrast and cognitive aids
May Usability features and
presentation consistency
Compliance required by law for US Federal agencies
16
WCAG 2.0

• Display suggestions when errors are caught
• Context-sensitive help

17
Web 2.0 Accessibility - Ajax

• Graceful Degradation
• Ajax links that work with or without JavaScript
  enabled.

ltscript type"text/javascript"gt //lt!CDATA lt!-- f
unction ajaxLinkAction(href) // Ajax-link
code goes here return false window.onload
function() var links document.getElement
sByTagName('a') for (var i 0 i lt
links.length i) if(linksi.className
'ajaxlink') linksi.onclick
function() return
ajaxLinkAction(this.href)
//--gt //gt lt/scriptgt lta
href"link.php" class"ajaxlink"gtAjax linklt/agt
18
Web 2.0 Accessibility Ajax DHTML

• Sensing Content Changes
• Primarily for screen readers

ltscript type"text/javascript"gt //lt!CDATA lt!-- f
unction getContentViaAjax(href) //
Ajax-content-retrieval code goes here function
populateContentViaAjax(href)
document.getElementById('ajaxcontent').innerHTML
getContentViaAjax(href) document.location
'ajaxcontent' return false window.onlo
ad function() document.getElementById('nex
tcontentlink').onclick function()
return populateContentViaAjax(this.href)
//--gt //gt lt/scriptgt ltdiv
id"ajaxcontent"gtoriginal contentlt/divgt lta
href"nextContent.php" id"nextcontentlink"gtNextlt/
agt
19
Web 2.0 Accessibility - Ajax

• Back Button, Bookmarks and Bubbling

• Ajax pager back button and bookmark fix
• Page anchors ajaxPage.phpaboutus
• Javascript and an ltiframegt
• Fixing this benefits everyone
• Sensing page changes
• Highlight recently updated areas
• Provide traditional interface functionality in
  addition to Ajax
• Most relevant to users of screen magnifiers,
  screen readers and those with cognitive
  disabilities

20
Web 2.0 Accessibility DHTML Flash

• Do not abuse the power!
• What not to do

Avoid time limits on actions
21
Web 2.0 Accessibility DHTML Flash

• Do not abuse the power!
• What not to do

Assure that your content is legible
Do not expect users to click elements that are
moving around the screen
22
Web 2.0 Accessibility Flash

• The Accessibility Panel

Select Make Movie Accessible Provide text
equivalents Use the Name field like the alt or
title properties in HTML

• ActionScript
• Do not turn off _focusrect unless you will
  provide an over state to every link
• Accessibility.isActive() is your friend

23
Web 2.0 Accessibility Flex

• Accessiflexibilty

Add to flex-config.xml ltmxml-compilergt
ltaccessiblegttruelt/accessiblegt lt/mxml-compilergt A
ppend to URL flex.mxml?accessibletrue Provi
de text equivalents Use the toolTip property
like the alt or title properties in
HTML ltmxImage width"200" height"80"
source"assets/lincoln.jpg" toolTip"1964 Lincoln
Continental convertible"/gt
24
Web 2.0 Accessibility Blogs

• Semantically-Correct Mark Up
• Proper header-tag usage

lth1gtThe strange technology news
bloglt/h1gt lth2gtKermit the Frog spotted
impersonating a Perl Monklt/h2gt ltpgtAccording to an
eye witness, the green Muppet was seen pounding
wildly on the keyboard developing some new Perl
Poetry to impress Miss Piggy.lt/pgt lth2gt2010 US
Space Shuttle software to be programmed in
PHPlt/h2gt ltpgtWhile Stanley Kubrick could not
predict that Peter Hyams would produce 2010, we
can predict that the open-source movement will be
so strong by the year 2010 that the software
powering the US Space Shuttle will be programmed
exclusively using ltacronym titleLinux, Apache,
MySQL, PerlgtLAMPlt/acronymgt technologies.lt/pgt
25
Web 2.0 Accessibility Tag Clouds

• Bypass Blocks

lta href"endoftagclouds" title"Skip block of
tag clouds"gtltspan style"display none"gtSkip
block of tag cloudslt/spangtlt/agt lta
href"go.php?keywordSpaghetti"gtSpaghettilt/agt
lta href"go.php?keywordSmoked_Mackeral"gtSmoked
Mackerallt/agt lta href"go.php?keywordFalafel"gtF
alafellt/agt lta href"go.php?keywordCheese_Cake"
gtCheese Cakelt/agt lta href"go.php?keywordTomato
es"gtTomatoeslt/agt lta id"endoftagclouds"gtlt/agt
26
Web 2.0 Accessibility

• Abbreviations, acronyms and jargon

Create a dictionary of abbreviations, acronyms
and jargon used in your application Automatically
have the appropriate mark up added at each
occurrence within your content ltabbr title"Ruby
on Rails"gtRoRlt/abbrgt ltacronym title"Practical
Extraction Reporting Language"gtPerllt/acronymgt ltspa
n title"writing in my web log"gtblogginglt/spangt
27
Web 2.0 Accessibility CAPTCHA

• Provide a non-visual alternative

Audio recording of the CAPTCHA word or Instead
of the CAPTCHA, ask a spam-challenge question
that requires a human being to answer For
example What is two minus one?
28
Web 2.0 Accessibility CAPTCHA

• Zero Wing syndrome

What is two minus one should accept answers of
one, 1, won and wun!
29
Presentation Download
This presentation canbe downloaded
fromwww.ericdavid.cc/oscon2007
Thank you for attendingAccessibility for Web 2.0