SlideShare une entreprise Scribd logo
1  sur  47
CN5111 – Week 9
Dr. Andres Baravalle
1
Lecture content
• Introduction to accessibility
• Web accessibility
• The WCAG initiative
• Examples
2
Learning outcomes
• This week we will be working on:
– LO2: Apply appropriate design and
specification standards
– LO4: Effectively evaluate various systems and
make appropriate design decisions
3
Introduction to accessibility
4
What is accessibility
• “Accessibility is a general term used to
describe the degree to which a product,
device, service, or environment is
accessible by as many people as possible”
(Wikipedia)
5
ISO 16071 (2003)
• Accessibility is the “usability of a product,
service, environment or facility by people
with the widest range of capabilities”
6
ISO 13407
• "The usability of an interface is a measure
of the effectiveness, efficiency and
satisfaction with which specified users
can achieve specified goals in a
particular environment with that
interface." (ISO 13407).
7
Accessibility and usability
• Tying in usability’s definition (ISO 13407),
we can say that:
• "The accessibility of an interface is a
measure of the effectiveness, efficiency
and satisfaction with which people with the
widest range of capabilities can achieve
specified goals in a particular environment
with that interface."
8
Accessibility and usability
• If accessibility and usability are a
measure, you have to be able to establish
their magnitude, relative to a unit of
measurement
9
Accessibility is about multiple
paths (1)
• An accessible artefact must support
multiple paths to achieve the same task
– For example, you (often) can use a mobile
phone through voice recognition or using the
hardware interface
• An interface is accessible to an audience
when there is at least one path which can
be usable by each individual within the set
of intended users
10
Accessibility is about multiple
paths (2)
• To ensure accessibility, interaction paths should
be based on the characteristics of:
– Users
– Interfaces
– Goals
• A vocal interface to a hammer might not
increase its accessibility
• A vocal interface for a computer is likely to be
more useful
11
Web accessibility
12
Web accessibility: introduction
• The World Wide Web was conceived by Tim Berners Lee
in a scientific environment and was intended to be used
to exchange ideas freely among the scientific
community.
• The original form of the HyperText Markup Language
(HTML), the language used to build web pages, provided
structured documentation around headings, paragraphs
and other structures that define the information content
of a textual document.
• Presentation was a secondary concern.
13
Web accessibility: introduction
(2)
• As the internet grew and access to computer
networks widened, people other than scientists
were able to access the Web and new
professional figures, in charge of developing
web pages, emerged.
• The focus shifted a little from content towards
presentation: web pages started to be more
appealing and rich with graphics.
14
Focus on content vs. focus on
presentation
15
Improving presentation with
HTML 4.x
• Widespread techniques include:
– Proprietary, non-standard and browser-specific extensions to the
HTML standard, for adding formatting properties (e.g. the tags
<wbr> and <nobr>)
– Using images (with a wider font selection) for rendering text to
replace plain text on the page
– Using images to create graphical elements for presentation,
such as ‘fancy’ borders around the page
– Using data tables for page layout structures, often with blank
images to control the white space
– Using plugins or scripting to produce additional effects not
provided by HTML
16
Consequences (some
examples)
• Inconsistencies amongst browsers: due to the use of
proprietary tags, different browsers could be showing the
content quite differently
• Accessibility was strongly affected by the unexpected
use of HTML tags. HTML tags carry a semantic meaning:
<h1> for example, refers to a page heading, and should
not be used just to make text bigger.
• Using tables for layout, or images for borders, was
overloading the tags with functions that they didn’t
originally have.
17
Disabilities that can affect web
access (non-exaustive list)
• Hearing disabilities (people who are deaf, hard of
hearing, or hearing impaired)
• Visual disabilities (people who are blind, colour-blind or
visually impaired)
• Mobility disabilities (people who are physically disabled
or with impaired motor skills)
• Learning disabilities (such as people with dyslexia).
• It has been estimated that between 15% and 30% of
world population, and almost 10% of internet users,
has some kind of disability
18
That was wrong!
• A series of “magic numbers” - numbers that
appeared by “magic” - were used in the previous
slide
• Never forget to include appropriate references
and support your statements with relevant
quotes
• Thatcher, J., Waddell, C., Henry, S., Swierenga,
S., Urban, M., Burks, M. and Bohman, P. (2003)
Constructing Accessible Websites, Apress,
chapter 1.
19
Why web accessibility is so
important
• As the Web displaces more traditional
information sources and becomes a key
resource for information, commerce,
entertainment, distance learning, job
searching and government services, it
becomes more important that everyone
has access to it.
20
Making the web accessible
• Accessible websites and Web applications, where
people with disabilities can perceive, understand,
navigate, and interact
• Accessible user-agents, such as Web browsers and Web
applications in general (such as rich media players), that
can be used effectively by people with disabilities, and
that work well with assistive technologies that some
people with disabilities use to access the Web
• Accessible Web authoring tools, which support the
production of accessible Web content and websites, and
that can be used effectively by people with disabilities.
21
The WCAG initiative
22
WCAG guidelines
• The Web Content Accessibility Guidelines
have been compiled by the Web
Accessibility Initiative project (WAI - W3C)
to explain how to make web content
accessible
23
WCAG guidelines: #1
• Provide equivalent alternatives to auditory
and visual content.
24
WCAG guidelines: #2
• Don't rely on color alone
25
WCAG guidelines: #3
• Use markup and style sheets and do so
properly
26
WCAG guidelines: #4
• Clarify natural language usage
27
WCAG guidelines: #5
• Create tables that transform gracefully
28
WCAG guidelines: #6
• Ensure that pages featuring new
technologies transform gracefully
29
WCAG guidelines: #7
• Ensure user control of time-sensitive
content changes
30
WCAG guidelines: #8
• Ensure direct accessibility of embedded
user interfaces
31
WCAG guidelines: #9
• Design for device-independence
32
WCAG guidelines: #10
• Use interim solutions
33
WCAG guidelines: #11
• Use W3C technologies and guidelines
34
WCAG guidelines: #12
• Provide context and orientation
information
35
WCAG guidelines: #13
• Provide clear navigation mechanisms
36
WCAG guidelines: #14
• Ensure that documents are clear and
simple
37
Examples
38
Examples
• The next examples are for discussion
• Which ones are usable?
• Which ones are accessbile?
• WHY?
39
Example 1: CAPTCHAs
• CAPTCHAs are commonly used as a
countermeasure to the action of robots, software
that crawls the Web to gather information or to
post content.
• CAPTCHAs, used together with an
authentication system, (should) ensure that
robots can’t post content or access some areas
of a website.
40
Example 2: Drop-down menu at
Adobe.com
41
Example 3: auto-completion at
script.aculo.us
42
Example 4: Mojo
• <div dojoType="dijit.layout.BorderContainer" design="sidebar"
liveSplitters="false">
• <div dojoType="dijit.layout.ContentPane" region="leading">
• <div id="feature-menu"> <div class="cp" id="DojoLinkPane"> <div
class="cpContent"> <div
dojoType="dojoc.sandbox.menu.AccordionMenu" id="DojoMenu"
store="navStore" init="Dojo [...]
• (see
http://dojocampus.org/explorer/#Dojox_Image_Lightbox_Grouped)
43
Example 5: script.aculo.us
• <div class="c">
• <div class="example" id="demo-effect-blinddown"
onclick="new Effect.BlindDown(this)"> <div
style="height: 120px;"> <img
src="http://script.aculo.us/images/demo-logo.gif" alt="">
• <span>Click for Effect.BlindDown demo</span> </div>
[...]
• (see
http://wiki.github.com/madrobby/scriptaculous/combinati
on-effects-demo)
44
Testing tools
• The web developer toolbar:
– WCAG test
– No stylesheets
– Hide images
– Validate HTML/CSS
• Lynx!
45
Lynx
46
Readings
• The WCAG (Web Accessibility Initiative) website:
http://www.w3.org/WAI/
• Web Content Accessibility Guidelines 1.0
http://www.w3.org/TR/WCAG10/
• Web Content Accessibility Guidelines
2.0: http://www.w3.org/TR/WCAG20/
• Checklist of Checkpoints for Web Content Accessibility
Guidelines 1.0: http://www.w3.org/TR/WCAG10/full-
checklist.html
47

Contenu connexe

Tendances

Virtual reality in hci
Virtual reality in hciVirtual reality in hci
Virtual reality in hcijeet patalia
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principlesDzung Nguyen
 
Hypertext, hypermedia and multimedia
Hypertext, hypermedia and multimediaHypertext, hypermedia and multimedia
Hypertext, hypermedia and multimediafernandadavalos2566
 
Design for accessibility
Design for accessibilityDesign for accessibility
Design for accessibilityYogeshDaphane
 
Content Management System - CMS
 Content Management System - CMS Content Management System - CMS
Content Management System - CMSJaime Delgado
 
HCI 3e - Ch 12: Cognitive models
HCI 3e - Ch 12:  Cognitive modelsHCI 3e - Ch 12:  Cognitive models
HCI 3e - Ch 12: Cognitive modelsAlan Dix
 
HCI 3e - Ch 9: Evaluation techniques
HCI 3e - Ch 9:  Evaluation techniquesHCI 3e - Ch 9:  Evaluation techniques
HCI 3e - Ch 9: Evaluation techniquesAlan Dix
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeWhitney Quesenbery
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15koolkampus
 
Accessibility and inclusive design
Accessibility and inclusive designAccessibility and inclusive design
Accessibility and inclusive designLindaHurd
 
WCAG 2.0, Simplified
WCAG 2.0, SimplifiedWCAG 2.0, Simplified
WCAG 2.0, Simplifiedciwstudy
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience WorkshopMotivate Design
 
Human computer interaction -Input output channel
Human computer interaction -Input output channelHuman computer interaction -Input output channel
Human computer interaction -Input output channelN.Jagadish Kumar
 
HCI 3e - Ch 14: Communication and collaboration models
HCI 3e - Ch 14:  Communication and collaboration modelsHCI 3e - Ch 14:  Communication and collaboration models
HCI 3e - Ch 14: Communication and collaboration modelsAlan Dix
 

Tendances (20)

Virtual reality in hci
Virtual reality in hciVirtual reality in hci
Virtual reality in hci
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
 
Hypertext, hypermedia and multimedia
Hypertext, hypermedia and multimediaHypertext, hypermedia and multimedia
Hypertext, hypermedia and multimedia
 
Design for accessibility
Design for accessibilityDesign for accessibility
Design for accessibility
 
Content Management System - CMS
 Content Management System - CMS Content Management System - CMS
Content Management System - CMS
 
HCI 3e - Ch 12: Cognitive models
HCI 3e - Ch 12:  Cognitive modelsHCI 3e - Ch 12:  Cognitive models
HCI 3e - Ch 12: Cognitive models
 
HCI 3e - Ch 9: Evaluation techniques
HCI 3e - Ch 9:  Evaluation techniquesHCI 3e - Ch 9:  Evaluation techniques
HCI 3e - Ch 9: Evaluation techniques
 
Accessibility Basics
Accessibility BasicsAccessibility Basics
Accessibility Basics
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challenge
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15
 
Accessibility and inclusive design
Accessibility and inclusive designAccessibility and inclusive design
Accessibility and inclusive design
 
HCI
HCIHCI
HCI
 
Accessibility
AccessibilityAccessibility
Accessibility
 
WCAG 2.0, Simplified
WCAG 2.0, SimplifiedWCAG 2.0, Simplified
WCAG 2.0, Simplified
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience Workshop
 
User centered Design
User centered DesignUser centered Design
User centered Design
 
Human computer interaction -Input output channel
Human computer interaction -Input output channelHuman computer interaction -Input output channel
Human computer interaction -Input output channel
 
User interface design
User interface designUser interface design
User interface design
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
HCI 3e - Ch 14: Communication and collaboration models
HCI 3e - Ch 14:  Communication and collaboration modelsHCI 3e - Ch 14:  Communication and collaboration models
HCI 3e - Ch 14: Communication and collaboration models
 

En vedette

Social, professional, ethical and legal issues
Social, professional, ethical and legal issuesSocial, professional, ethical and legal issues
Social, professional, ethical and legal issuesAndres Baravalle
 
Background on Usability Engineering
Background on Usability EngineeringBackground on Usability Engineering
Background on Usability EngineeringAndres Baravalle
 
Usability evaluations (part 2)
Usability evaluations (part 2) Usability evaluations (part 2)
Usability evaluations (part 2) Andres Baravalle
 
Accessibility: introduction
Accessibility: introduction  Accessibility: introduction
Accessibility: introduction Andres Baravalle
 
Usability evaluations (part 3)
Usability evaluations (part 3) Usability evaluations (part 3)
Usability evaluations (part 3) Andres Baravalle
 
Measuring the user experience
Measuring the user experienceMeasuring the user experience
Measuring the user experienceAndres Baravalle
 
Usability evaluation methods (part 2) and performance metrics
Usability evaluation methods (part 2) and performance metricsUsability evaluation methods (part 2) and performance metrics
Usability evaluation methods (part 2) and performance metricsAndres Baravalle
 
SPEL (Social, professional, ethical and legal) issues in Usability
SPEL (Social, professional, ethical and legal) issues in UsabilitySPEL (Social, professional, ethical and legal) issues in Usability
SPEL (Social, professional, ethical and legal) issues in UsabilityAndres Baravalle
 
Design rules and usability requirements
Design rules and usability requirementsDesign rules and usability requirements
Design rules and usability requirementsAndres Baravalle
 
Planning and usability evaluation methods
Planning and usability evaluation methodsPlanning and usability evaluation methods
Planning and usability evaluation methodsAndres Baravalle
 
Dark web markets: from the silk road to alphabay, trends and developments
Dark web markets: from the silk road to alphabay, trends and developmentsDark web markets: from the silk road to alphabay, trends and developments
Dark web markets: from the silk road to alphabay, trends and developmentsAndres Baravalle
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScriptAndres Baravalle
 

En vedette (19)

Other metrics
Other metricsOther metrics
Other metrics
 
Designing and prototyping
Designing and prototypingDesigning and prototyping
Designing and prototyping
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Social, professional, ethical and legal issues
Social, professional, ethical and legal issuesSocial, professional, ethical and legal issues
Social, professional, ethical and legal issues
 
Background on Usability Engineering
Background on Usability EngineeringBackground on Usability Engineering
Background on Usability Engineering
 
Issue-based metrics
Issue-based metricsIssue-based metrics
Issue-based metrics
 
Interfaces
InterfacesInterfaces
Interfaces
 
Usability evaluations (part 2)
Usability evaluations (part 2) Usability evaluations (part 2)
Usability evaluations (part 2)
 
Accessibility: introduction
Accessibility: introduction  Accessibility: introduction
Accessibility: introduction
 
Usability evaluations (part 3)
Usability evaluations (part 3) Usability evaluations (part 3)
Usability evaluations (part 3)
 
Measuring the user experience
Measuring the user experienceMeasuring the user experience
Measuring the user experience
 
Usability evaluation methods (part 2) and performance metrics
Usability evaluation methods (part 2) and performance metricsUsability evaluation methods (part 2) and performance metrics
Usability evaluation methods (part 2) and performance metrics
 
SPEL (Social, professional, ethical and legal) issues in Usability
SPEL (Social, professional, ethical and legal) issues in UsabilitySPEL (Social, professional, ethical and legal) issues in Usability
SPEL (Social, professional, ethical and legal) issues in Usability
 
Design rules and usability requirements
Design rules and usability requirementsDesign rules and usability requirements
Design rules and usability requirements
 
Planning and usability evaluation methods
Planning and usability evaluation methodsPlanning and usability evaluation methods
Planning and usability evaluation methods
 
Don't make me think
Don't make me thinkDon't make me think
Don't make me think
 
Dark web markets: from the silk road to alphabay, trends and developments
Dark web markets: from the silk road to alphabay, trends and developmentsDark web markets: from the silk road to alphabay, trends and developments
Dark web markets: from the silk road to alphabay, trends and developments
 
Layout rules
Layout rulesLayout rules
Layout rules
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 

Similaire à Accessibility introduction

Web Accessibility and Design
Web Accessibility and DesignWeb Accessibility and Design
Web Accessibility and Designcolinbdclark
 
Research at work Design for Accessibility
Research at work Design for AccessibilityResearch at work Design for Accessibility
Research at work Design for AccessibilityRuilin Zhang
 
Social Networking Extensions for EPrints
Social Networking Extensions for EPrintsSocial Networking Extensions for EPrints
Social Networking Extensions for EPrintsRichard Davis
 
Web 3.0 and english language teaching by dr meenu pandey
Web 3.0 and english language teaching by dr meenu pandeyWeb 3.0 and english language teaching by dr meenu pandey
Web 3.0 and english language teaching by dr meenu pandeymeenu pandey
 
Web accessibility workshop 2
Web accessibility workshop 2Web accessibility workshop 2
Web accessibility workshop 2Vladimir Tomberg
 
Accessibility Tips: How to create accessible learning content
Accessibility Tips: How to create accessible learning contentAccessibility Tips: How to create accessible learning content
Accessibility Tips: How to create accessible learning contentJacqueline L. Frank
 
Shirley Evans
Shirley EvansShirley Evans
Shirley EvansJisc
 
Accessibility Best Practices for Online Learning Content
Accessibility Best Practices for Online Learning ContentAccessibility Best Practices for Online Learning Content
Accessibility Best Practices for Online Learning ContentJacqueline L. Frank
 
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA International
 
Web accessibility workshop 2
Web accessibility workshop 2Web accessibility workshop 2
Web accessibility workshop 2Vladimir Tomberg
 
Accessibility & Inclusive Design to Enable Success
Accessibility & Inclusive Design to Enable Success Accessibility & Inclusive Design to Enable Success
Accessibility & Inclusive Design to Enable Success Jacqueline L. Frank
 
INNOVATION AND ‎RESEARCH (Digital Library ‎Information Access)‎
INNOVATION AND ‎RESEARCH (Digital Library ‎Information Access)‎INNOVATION AND ‎RESEARCH (Digital Library ‎Information Access)‎
INNOVATION AND ‎RESEARCH (Digital Library ‎Information Access)‎Libcorpio
 
Corporate Web Accessibility Implementation Strategies
Corporate Web Accessibility Implementation StrategiesCorporate Web Accessibility Implementation Strategies
Corporate Web Accessibility Implementation StrategiesUA WEB, A.C.
 
Internet tech &amp; web prog. p1,2,3-ver1
Internet tech &amp; web prog.  p1,2,3-ver1Internet tech &amp; web prog.  p1,2,3-ver1
Internet tech &amp; web prog. p1,2,3-ver1Taymoor Nazmy
 
Jupytercon 2023 Accessibility talk.pdf
Jupytercon 2023 Accessibility talk.pdfJupytercon 2023 Accessibility talk.pdf
Jupytercon 2023 Accessibility talk.pdfStephannieJimnezGach
 

Similaire à Accessibility introduction (20)

Web Accessibility and Design
Web Accessibility and DesignWeb Accessibility and Design
Web Accessibility and Design
 
Research at work Design for Accessibility
Research at work Design for AccessibilityResearch at work Design for Accessibility
Research at work Design for Accessibility
 
Social Networking Extensions for EPrints
Social Networking Extensions for EPrintsSocial Networking Extensions for EPrints
Social Networking Extensions for EPrints
 
Web 3.0 and english language teaching by dr meenu pandey
Web 3.0 and english language teaching by dr meenu pandeyWeb 3.0 and english language teaching by dr meenu pandey
Web 3.0 and english language teaching by dr meenu pandey
 
ICT introduction
ICT introductionICT introduction
ICT introduction
 
Web accessibility workshop 2
Web accessibility workshop 2Web accessibility workshop 2
Web accessibility workshop 2
 
Accessibility Tips: How to create accessible learning content
Accessibility Tips: How to create accessible learning contentAccessibility Tips: How to create accessible learning content
Accessibility Tips: How to create accessible learning content
 
Shirley Evans
Shirley EvansShirley Evans
Shirley Evans
 
Accessibility Best Practices for Online Learning Content
Accessibility Best Practices for Online Learning ContentAccessibility Best Practices for Online Learning Content
Accessibility Best Practices for Online Learning Content
 
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
 
Web accessibility workshop 2
Web accessibility workshop 2Web accessibility workshop 2
Web accessibility workshop 2
 
World wide web
World wide webWorld wide web
World wide web
 
Accessibility & Inclusive Design to Enable Success
Accessibility & Inclusive Design to Enable Success Accessibility & Inclusive Design to Enable Success
Accessibility & Inclusive Design to Enable Success
 
NISO Virtual Conference: Web-Scale Discovery Services: Transforming Access to...
NISO Virtual Conference: Web-Scale Discovery Services: Transforming Access to...NISO Virtual Conference: Web-Scale Discovery Services: Transforming Access to...
NISO Virtual Conference: Web-Scale Discovery Services: Transforming Access to...
 
Viko Eahil 2009
Viko Eahil 2009Viko Eahil 2009
Viko Eahil 2009
 
INNOVATION AND ‎RESEARCH (Digital Library ‎Information Access)‎
INNOVATION AND ‎RESEARCH (Digital Library ‎Information Access)‎INNOVATION AND ‎RESEARCH (Digital Library ‎Information Access)‎
INNOVATION AND ‎RESEARCH (Digital Library ‎Information Access)‎
 
Corporate Web Accessibility Implementation Strategies
Corporate Web Accessibility Implementation StrategiesCorporate Web Accessibility Implementation Strategies
Corporate Web Accessibility Implementation Strategies
 
WEB2.0 And CLOUD
WEB2.0 And CLOUDWEB2.0 And CLOUD
WEB2.0 And CLOUD
 
Internet tech &amp; web prog. p1,2,3-ver1
Internet tech &amp; web prog.  p1,2,3-ver1Internet tech &amp; web prog.  p1,2,3-ver1
Internet tech &amp; web prog. p1,2,3-ver1
 
Jupytercon 2023 Accessibility talk.pdf
Jupytercon 2023 Accessibility talk.pdfJupytercon 2023 Accessibility talk.pdf
Jupytercon 2023 Accessibility talk.pdf
 

Plus de Andres Baravalle

Data collection and analysis
Data collection and analysisData collection and analysis
Data collection and analysisAndres Baravalle
 
Interaction design and cognitive aspects
Interaction design and cognitive aspects Interaction design and cognitive aspects
Interaction design and cognitive aspects Andres Baravalle
 
Usability: introduction (Week 1)
Usability: introduction (Week 1)Usability: introduction (Week 1)
Usability: introduction (Week 1)Andres Baravalle
 

Plus de Andres Baravalle (7)

Don’t make me think
Don’t make me thinkDon’t make me think
Don’t make me think
 
Data collection and analysis
Data collection and analysisData collection and analysis
Data collection and analysis
 
Interaction design and cognitive aspects
Interaction design and cognitive aspects Interaction design and cognitive aspects
Interaction design and cognitive aspects
 
Designing and prototyping
Designing and prototypingDesigning and prototyping
Designing and prototyping
 
Usability requirements
Usability requirements Usability requirements
Usability requirements
 
Usability: introduction (Week 1)
Usability: introduction (Week 1)Usability: introduction (Week 1)
Usability: introduction (Week 1)
 
Don’t make me think!
Don’t make me think!Don’t make me think!
Don’t make me think!
 

Dernier

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 . pdfQucHHunhnh
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.pptRamjanShidvankar
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentationcamerronhm
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxDr. Sarita Anand
 
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.pptxJisc
 
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)Jisc
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...Poonam Aher Patil
 
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).pptxVishalSingh1417
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
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.pptxAreebaZafar22
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseAnaAcapella
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
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.pdfAdmir Softic
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701bronxfugly43
 
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 ClassesCeline George
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.christianmathematics
 

Dernier (20)

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
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
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
 
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)
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
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
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
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
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
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
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
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
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
 
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
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 

Accessibility introduction

  • 1. CN5111 – Week 9 Dr. Andres Baravalle 1
  • 2. Lecture content • Introduction to accessibility • Web accessibility • The WCAG initiative • Examples 2
  • 3. Learning outcomes • This week we will be working on: – LO2: Apply appropriate design and specification standards – LO4: Effectively evaluate various systems and make appropriate design decisions 3
  • 5. What is accessibility • “Accessibility is a general term used to describe the degree to which a product, device, service, or environment is accessible by as many people as possible” (Wikipedia) 5
  • 6. ISO 16071 (2003) • Accessibility is the “usability of a product, service, environment or facility by people with the widest range of capabilities” 6
  • 7. ISO 13407 • "The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with which specified users can achieve specified goals in a particular environment with that interface." (ISO 13407). 7
  • 8. Accessibility and usability • Tying in usability’s definition (ISO 13407), we can say that: • "The accessibility of an interface is a measure of the effectiveness, efficiency and satisfaction with which people with the widest range of capabilities can achieve specified goals in a particular environment with that interface." 8
  • 9. Accessibility and usability • If accessibility and usability are a measure, you have to be able to establish their magnitude, relative to a unit of measurement 9
  • 10. Accessibility is about multiple paths (1) • An accessible artefact must support multiple paths to achieve the same task – For example, you (often) can use a mobile phone through voice recognition or using the hardware interface • An interface is accessible to an audience when there is at least one path which can be usable by each individual within the set of intended users 10
  • 11. Accessibility is about multiple paths (2) • To ensure accessibility, interaction paths should be based on the characteristics of: – Users – Interfaces – Goals • A vocal interface to a hammer might not increase its accessibility • A vocal interface for a computer is likely to be more useful 11
  • 13. Web accessibility: introduction • The World Wide Web was conceived by Tim Berners Lee in a scientific environment and was intended to be used to exchange ideas freely among the scientific community. • The original form of the HyperText Markup Language (HTML), the language used to build web pages, provided structured documentation around headings, paragraphs and other structures that define the information content of a textual document. • Presentation was a secondary concern. 13
  • 14. Web accessibility: introduction (2) • As the internet grew and access to computer networks widened, people other than scientists were able to access the Web and new professional figures, in charge of developing web pages, emerged. • The focus shifted a little from content towards presentation: web pages started to be more appealing and rich with graphics. 14
  • 15. Focus on content vs. focus on presentation 15
  • 16. Improving presentation with HTML 4.x • Widespread techniques include: – Proprietary, non-standard and browser-specific extensions to the HTML standard, for adding formatting properties (e.g. the tags <wbr> and <nobr>) – Using images (with a wider font selection) for rendering text to replace plain text on the page – Using images to create graphical elements for presentation, such as ‘fancy’ borders around the page – Using data tables for page layout structures, often with blank images to control the white space – Using plugins or scripting to produce additional effects not provided by HTML 16
  • 17. Consequences (some examples) • Inconsistencies amongst browsers: due to the use of proprietary tags, different browsers could be showing the content quite differently • Accessibility was strongly affected by the unexpected use of HTML tags. HTML tags carry a semantic meaning: <h1> for example, refers to a page heading, and should not be used just to make text bigger. • Using tables for layout, or images for borders, was overloading the tags with functions that they didn’t originally have. 17
  • 18. Disabilities that can affect web access (non-exaustive list) • Hearing disabilities (people who are deaf, hard of hearing, or hearing impaired) • Visual disabilities (people who are blind, colour-blind or visually impaired) • Mobility disabilities (people who are physically disabled or with impaired motor skills) • Learning disabilities (such as people with dyslexia). • It has been estimated that between 15% and 30% of world population, and almost 10% of internet users, has some kind of disability 18
  • 19. That was wrong! • A series of “magic numbers” - numbers that appeared by “magic” - were used in the previous slide • Never forget to include appropriate references and support your statements with relevant quotes • Thatcher, J., Waddell, C., Henry, S., Swierenga, S., Urban, M., Burks, M. and Bohman, P. (2003) Constructing Accessible Websites, Apress, chapter 1. 19
  • 20. Why web accessibility is so important • As the Web displaces more traditional information sources and becomes a key resource for information, commerce, entertainment, distance learning, job searching and government services, it becomes more important that everyone has access to it. 20
  • 21. Making the web accessible • Accessible websites and Web applications, where people with disabilities can perceive, understand, navigate, and interact • Accessible user-agents, such as Web browsers and Web applications in general (such as rich media players), that can be used effectively by people with disabilities, and that work well with assistive technologies that some people with disabilities use to access the Web • Accessible Web authoring tools, which support the production of accessible Web content and websites, and that can be used effectively by people with disabilities. 21
  • 23. WCAG guidelines • The Web Content Accessibility Guidelines have been compiled by the Web Accessibility Initiative project (WAI - W3C) to explain how to make web content accessible 23
  • 24. WCAG guidelines: #1 • Provide equivalent alternatives to auditory and visual content. 24
  • 25. WCAG guidelines: #2 • Don't rely on color alone 25
  • 26. WCAG guidelines: #3 • Use markup and style sheets and do so properly 26
  • 27. WCAG guidelines: #4 • Clarify natural language usage 27
  • 28. WCAG guidelines: #5 • Create tables that transform gracefully 28
  • 29. WCAG guidelines: #6 • Ensure that pages featuring new technologies transform gracefully 29
  • 30. WCAG guidelines: #7 • Ensure user control of time-sensitive content changes 30
  • 31. WCAG guidelines: #8 • Ensure direct accessibility of embedded user interfaces 31
  • 32. WCAG guidelines: #9 • Design for device-independence 32
  • 33. WCAG guidelines: #10 • Use interim solutions 33
  • 34. WCAG guidelines: #11 • Use W3C technologies and guidelines 34
  • 35. WCAG guidelines: #12 • Provide context and orientation information 35
  • 36. WCAG guidelines: #13 • Provide clear navigation mechanisms 36
  • 37. WCAG guidelines: #14 • Ensure that documents are clear and simple 37
  • 39. Examples • The next examples are for discussion • Which ones are usable? • Which ones are accessbile? • WHY? 39
  • 40. Example 1: CAPTCHAs • CAPTCHAs are commonly used as a countermeasure to the action of robots, software that crawls the Web to gather information or to post content. • CAPTCHAs, used together with an authentication system, (should) ensure that robots can’t post content or access some areas of a website. 40
  • 41. Example 2: Drop-down menu at Adobe.com 41
  • 42. Example 3: auto-completion at script.aculo.us 42
  • 43. Example 4: Mojo • <div dojoType="dijit.layout.BorderContainer" design="sidebar" liveSplitters="false"> • <div dojoType="dijit.layout.ContentPane" region="leading"> • <div id="feature-menu"> <div class="cp" id="DojoLinkPane"> <div class="cpContent"> <div dojoType="dojoc.sandbox.menu.AccordionMenu" id="DojoMenu" store="navStore" init="Dojo [...] • (see http://dojocampus.org/explorer/#Dojox_Image_Lightbox_Grouped) 43
  • 44. Example 5: script.aculo.us • <div class="c"> • <div class="example" id="demo-effect-blinddown" onclick="new Effect.BlindDown(this)"> <div style="height: 120px;"> <img src="http://script.aculo.us/images/demo-logo.gif" alt=""> • <span>Click for Effect.BlindDown demo</span> </div> [...] • (see http://wiki.github.com/madrobby/scriptaculous/combinati on-effects-demo) 44
  • 45. Testing tools • The web developer toolbar: – WCAG test – No stylesheets – Hide images – Validate HTML/CSS • Lynx! 45
  • 47. Readings • The WCAG (Web Accessibility Initiative) website: http://www.w3.org/WAI/ • Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WCAG10/ • Web Content Accessibility Guidelines 2.0: http://www.w3.org/TR/WCAG20/ • Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0: http://www.w3.org/TR/WCAG10/full- checklist.html 47