SlideShare uma empresa Scribd logo
1 de 50
Universal Accessability
Paul Houle
Library Systems
CU Library

Based on a presentation by Sarah Horton
slide 1 of 64
What is universal accessability?
 An extension of usability
 Make systems usable for everyone
 First: be flexible to people’s needs
 Second: provide alternative access
 Gives best user experience
 At least cost
Designing Accessible WebsitesDEFINITIONS

slide 2 of 64


Access by accommodation…

Designing Accessible WebsitesDEFINITIONS


… versus design

Designing Accessible WebsitesDEFINITIONS
Prevalance of Disabilities
• US Census: 1 in 5 Americans report disability
• 9% of incoming freshman have a disability
that affects computer use

Designing Accessible WebsitesEQUITABLE USE

slide 5 of 64
Disabilities and Adaptations
• Blindness (screen readers, ALT text)
• Low vision (scalable text)
• Color blindness (use colors carefully)
• Deafness (captions)
• Motor problems (access keys)
• Cognitive deficits (general usability)

Designing Accessible WebsitesEQUITABLE USE

slide 6 of 64
•Time to complete task varies:
• 2.4 times between 25% and 75% percentile
• 15 times between fastest and slowest
Jacob Nielsen’s Alertbox 5/15/2006
“Technologically Challenged”
• Text web browsers
• Old equipment
• Small screens (PDA, cell phone)
• Large screens (16:9, HDTV)
• Web robots

Designing Accessible WebsitesEQUITABLE USE

slide 8 of 64

www.nln.ac.uk

Some sites offer “accessible” or “text-only” versions…

Designing Accessible WebsitesEQUITABLE USE

www.nln.ac.uk

…but alternate versions are often accessible but not
equivalent
Designing Accessible WebsitesEQUITABLE USE

www.oldnavy.com

Some sites put the onus on users…

Designing Accessible WebsitesEQUITABLE USE

www.jkrowling.com

…by requiring them to adapt their environment

Designing Accessible WebsitesEQUITABLE USE

www.newyorker.com

Fixed-width columns, mix of text and graphic text

FLEXIBLE DESIGN

www.newyorker.com

The main text scales but the column width remains the
same…
FLEXIBLE DESIGN

www.newyorker.com

…and the image-based navigation does not scale

FLEXIBLE DESIGN


Fixed designs hold together at a certain text size…

www.academicimpressions.com/

FLEXIBLE DESIGN


…but break apart when the text is enlarged

www.academicimpressions.com/

FLEXIBLE DESIGN

www.newyorker.com

Fixed-width pages use only a portion of a large display…

FLEXIBLE DESIGN

www.newyorker.com

…and do not reflow for viewing on small screens

FLEXIBLE DESIGN
Cascading Style Sheets
• Can display document parts out of order (put
navigation at the end for screen readers)
• Users can customize (Opera)
• Support flexible layouts

Designing Accessible WebsitesEQUITABLE USE

slide 20 of 64

www.wikipedia.org

Flexible pages adapt to modifications, such as…

FLEXIBLE DESIGN

www.wikipedia.org

…enlarged type…

FLEXIBLE DESIGN

www.wikipedia.org

…larger page widths

FLEXIBLE DESIGN

www.wikipedia.org

…smaller page widths

FLEXIBLE DESIGN

www.wikipedia.org

…customized for small screens

FLEXIBLE DESIGN

www.wikipedia.org

…and formatting turned off…

FLEXIBLE DESIGN

www.wikipedia.org

…and with custom formatting

FLEXIBLE DESIGN
Be careful about
• Frames
• Pop-up windows
• Javascript
• AJAX
• Flash

Designing Accessible WebsitesEQUITABLE USE

slide 28 of 64
Accessable Flash
• Good: text in Flash is really text
• Good: Flash supports video with captions
• Good: Flash supports access keys (use
them!)
• Bad: many sites have broken flash detection
• Bad: many platforms will never support flash
(text mode browsers)

Designing Accessible WebsitesEQUITABLE USE

slide 29 of 64
Fallbacks offer alternate modes of
access
 Primarily text-based because text can be seen
and heard
 Some provisions for alternates built into
technology
 Otherwise, alternates can be integrated into
interface

FALLBACKS

slide 30 of 64

www.apple.com

Image-based content that is not accessible to non-visual
users…
FALLBACKS

www.apple.com

…can be supplied via alternate text (alt-text)

FALLBACKS

www.apple.com

Though for equitable use…

FALLBACKS

www.apple.com

…the alt-text must be equivalent

FALLBACKS


Equivalent text for text graphics is essential…

www.creativecommons.org

FALLBACKS


…but alt-text describing reinforcing graphics is not helpful

www.creativecommons.org

FALLBACKS

www.warnerbros.com

Flash-based content can be presented with a fallback…

FALLBACKS

www.warnerbros.com

…though it often isn’t

FALLBACKS

solarsystem.nasa.gov

On some sites, the Flash fallback…

FALLBACKS

solarsystem.nasa.gov

…is a suggestion to install Flash, here offered with an
additional fallback link…
FALLBACKS

solarsystem.nasa.gov

…to a text version

FALLBACKS

www.kidshealth.org

The most successful Flash fallback…

FALLBACKS

www.kidshealth.org

…is invisible to the user

FALLBACKS


Another way to provide fallbacks is to offer alternates in the
interface

www.pbs.org/wgbh/nova/sciencenow/

FALLBACKS


Providing alternate formats accommodates technology
preferences and constraints

www.pbs.org/wgbh/nova/sciencenow/

FALLBACKS


Audio-based content that is not accessible to users who
cannot hear…

www.pbs.org/wgbh/nova/sciencenow/

FALLBACKS


…can be supplied via captions

www.pbs.org/wgbh/nova/sciencenow/

FALLBACKS


…can be supplied via captions

www.pbs.org/wgbh/nova/sciencenow/

FALLBACKS


…as well as a transcript

www.pbs.org/wgbh/nova/sciencenow/

FALLBACKS
Guidelines
 Universal design
Principles of Universal Design
Center for Universal Design
North Carolina State University
 Usability
Jakob Neilson, useit.com
Steve Krug, Don’t Make Me Think
 Universal usability
Sarah Horton, Access by Design

Designing Accessible WebsitesGUIDELINES

slide 50 of 64

Mais conteúdo relacionado

Semelhante a Implementing universal accessability

4087 chapter 08 8ed part2
4087 chapter 08 8ed part24087 chapter 08 8ed part2
4087 chapter 08 8ed part2
winegron
 
Designing and evaluating web sites using universal design principles (hands on)
Designing and evaluating web sites using universal design principles (hands on)Designing and evaluating web sites using universal design principles (hands on)
Designing and evaluating web sites using universal design principles (hands on)
Howard Kramer
 

Semelhante a Implementing universal accessability (20)

Web accessibility workshop 2
Web accessibility workshop 2Web accessibility workshop 2
Web accessibility workshop 2
 
Designing for Everybody Workshop
Designing for Everybody WorkshopDesigning for Everybody Workshop
Designing for Everybody Workshop
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
SXSWUI15 UI Patterns: Then & Now
SXSWUI15  UI Patterns: Then & NowSXSWUI15  UI Patterns: Then & Now
SXSWUI15 UI Patterns: Then & Now
 
EVOLVE'16 | Maximize | Libby Schaper & Gina Petrucceli | Web Accessibility & AEM
EVOLVE'16 | Maximize | Libby Schaper & Gina Petrucceli | Web Accessibility & AEMEVOLVE'16 | Maximize | Libby Schaper & Gina Petrucceli | Web Accessibility & AEM
EVOLVE'16 | Maximize | Libby Schaper & Gina Petrucceli | Web Accessibility & AEM
 
EVOLVE'16 | Maximize | Gina Petruccelli & Libby Schaper | Web Accessibility &...
EVOLVE'16 | Maximize | Gina Petruccelli & Libby Schaper | Web Accessibility &...EVOLVE'16 | Maximize | Gina Petruccelli & Libby Schaper | Web Accessibility &...
EVOLVE'16 | Maximize | Gina Petruccelli & Libby Schaper | Web Accessibility &...
 
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016
 
Re-Coding for Responsive Design: Tips, Tricks, and Traps
Re-Coding for Responsive Design: Tips, Tricks, and TrapsRe-Coding for Responsive Design: Tips, Tricks, and Traps
Re-Coding for Responsive Design: Tips, Tricks, and Traps
 
Responsive Web Design Overview 2013
Responsive Web Design Overview 2013Responsive Web Design Overview 2013
Responsive Web Design Overview 2013
 
Universal access across devices
Universal access across devicesUniversal access across devices
Universal access across devices
 
15 Point Checklist For An Accessible Research Website
15 Point Checklist For An Accessible Research Website15 Point Checklist For An Accessible Research Website
15 Point Checklist For An Accessible Research Website
 
4087 chapter 08 8ed part2
4087 chapter 08 8ed part24087 chapter 08 8ed part2
4087 chapter 08 8ed part2
 
Responsive design with flexbox
Responsive design with flexboxResponsive design with flexbox
Responsive design with flexbox
 
Designing and evaluating web sites using universal design principles (hands on)
Designing and evaluating web sites using universal design principles (hands on)Designing and evaluating web sites using universal design principles (hands on)
Designing and evaluating web sites using universal design principles (hands on)
 
Research at work Design for Accessibility
Research at work Design for AccessibilityResearch at work Design for Accessibility
Research at work Design for Accessibility
 
Making your website accessible
Making your website accessibleMaking your website accessible
Making your website accessible
 
CIS375 Interaction Designs Chapter6
CIS375 Interaction Designs Chapter6CIS375 Interaction Designs Chapter6
CIS375 Interaction Designs Chapter6
 
Optimal Mobile Web Experiences
Optimal Mobile Web ExperiencesOptimal Mobile Web Experiences
Optimal Mobile Web Experiences
 
Designing Accessible Drupal Themes
Designing Accessible Drupal ThemesDesigning Accessible Drupal Themes
Designing Accessible Drupal Themes
 
Public Sector Talk by Yeliz Yesilada
Public Sector Talk by Yeliz YesiladaPublic Sector Talk by Yeliz Yesilada
Public Sector Talk by Yeliz Yesilada
 

Mais de Paul Houle

Mais de Paul Houle (20)

Chatbots in 2017 -- Ithaca Talk Dec 6
Chatbots in 2017 -- Ithaca Talk Dec 6Chatbots in 2017 -- Ithaca Talk Dec 6
Chatbots in 2017 -- Ithaca Talk Dec 6
 
Estimating the Software Product Value during the Development Process
Estimating the Software Product Value during the Development ProcessEstimating the Software Product Value during the Development Process
Estimating the Software Product Value during the Development Process
 
Universal Standards for LEI and other Corporate Reference Data: Enabling risk...
Universal Standards for LEI and other Corporate Reference Data: Enabling risk...Universal Standards for LEI and other Corporate Reference Data: Enabling risk...
Universal Standards for LEI and other Corporate Reference Data: Enabling risk...
 
Fixing a leaky bucket; Observations on the Global LEI System
Fixing a leaky bucket; Observations on the Global LEI SystemFixing a leaky bucket; Observations on the Global LEI System
Fixing a leaky bucket; Observations on the Global LEI System
 
Cisco Fog Strategy For Big and Smart Data
Cisco Fog Strategy For Big and Smart DataCisco Fog Strategy For Big and Smart Data
Cisco Fog Strategy For Big and Smart Data
 
Making the semantic web work
Making the semantic web workMaking the semantic web work
Making the semantic web work
 
Ontology2 platform
Ontology2 platformOntology2 platform
Ontology2 platform
 
Ontology2 Platform Evolution
Ontology2 Platform EvolutionOntology2 Platform Evolution
Ontology2 Platform Evolution
 
Paul houle the supermen
Paul houle   the supermenPaul houle   the supermen
Paul houle the supermen
 
Paul houle what ails enterprise search
Paul houle   what ails enterprise search Paul houle   what ails enterprise search
Paul houle what ails enterprise search
 
Subjective Importance Smackdown
Subjective Importance SmackdownSubjective Importance Smackdown
Subjective Importance Smackdown
 
Extension methods, nulls, namespaces and precedence in c#
Extension methods, nulls, namespaces and precedence in c#Extension methods, nulls, namespaces and precedence in c#
Extension methods, nulls, namespaces and precedence in c#
 
Dropping unique constraints in sql server
Dropping unique constraints in sql serverDropping unique constraints in sql server
Dropping unique constraints in sql server
 
Prefix casting versus as-casting in c#
Prefix casting versus as-casting in c#Prefix casting versus as-casting in c#
Prefix casting versus as-casting in c#
 
Paul houle resume
Paul houle resumePaul houle resume
Paul houle resume
 
Keeping track of state in asynchronous callbacks
Keeping track of state in asynchronous callbacksKeeping track of state in asynchronous callbacks
Keeping track of state in asynchronous callbacks
 
Embrace dynamic PHP
Embrace dynamic PHPEmbrace dynamic PHP
Embrace dynamic PHP
 
Once asynchronous, always asynchronous
Once asynchronous, always asynchronousOnce asynchronous, always asynchronous
Once asynchronous, always asynchronous
 
What do you do when you’ve caught an exception?
What do you do when you’ve caught an exception?What do you do when you’ve caught an exception?
What do you do when you’ve caught an exception?
 
Extension methods, nulls, namespaces and precedence in c#
Extension methods, nulls, namespaces and precedence in c#Extension methods, nulls, namespaces and precedence in c#
Extension methods, nulls, namespaces and precedence in c#
 

Último

Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 

Último (20)

Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 

Implementing universal accessability