SlideShare ist ein Scribd-Unternehmen logo
1 von 56
Downloaden Sie, um offline zu lesen
Tales from the
Accessibility Trenches
Graeme Coleman, Mark Palmer
@graemecoleman, @caledoniaman
Who are we?
• Graeme Coleman (@graemecoleman)
– Accessibility consultant at The Paciello Group
(http://www.paciellogroup.com)
• Mark Palmer (@caledoniaman)
– Independent accessibility consultant
– shout@markpalmer.org
• Was once a trainee accountant here in
Edinburgh…
• Had a bit (but not a lot) of web
development experience
• MSc then PhD at the University of Dundee
• Joined the Digital Media Access Group in
2007
Graeme’s Background
• UI Developer for HBOS for 7 years
• Accessibility consultant with an Edinburgh
UX consultancy for 7 years
• Currently employed within the Civil Service
as UX Specialist
• Also freelancing as an Accessibility
Consultant
Mark’s Background
What interests us?
How can we ensure that the content we put
on the web is accessible to everyone,
including people with disabilities?
The stats
• 650 million people worldwide have a disability
of some kind
• That’s around 10% of us…!
• By the time we retire, over 30% of us will
have some form of disability (however minor)
Source: “A Web for Everyone”
(Horton & Quesenbery, 2013)
Forms of disability
• Our users may be:
– Blind (and use a screen reader)
– Visually impaired (and use a screen
magnifier)
– Color blind (and unable to distinguish
between, say, red and green)
– Mobility impaired (which prevents or limits use
of the mouse)
– Cognitively impaired (for example, dyslexia,
and use a Windows high contrast theme)
Forms of disability
• Our users may also be:
– Older people with a combination of minor age
related impairments
– Using a small screen device
– Coping with fatigue, weakness, or stress
Design for Flexibility
• We have no idea:
– Who will be accessing our content
– How they will be accessing our content
How did I get involved in web
accessibility?
“When I grow
up, I want to be a
web accessibility
consultant!”
- No
Early Days
I HAVE NO IDEA
WHAT I’M DOING
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014
Source:
http://creativenerds.co.uk/freebies/slick-but-clean-free-social-media-icon-set/
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014
I’m a web
accessibility
consultant
What do you
do?
…
…yeah, we
don’t have the
capacity to
make these
changes
Web
accessibility is
important
because…
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014
http://www.slideshare.net/johnfoliot/fireman-cop
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014
The Blue Meanie
Source: https://flic.kr/p/4z4EkR
It’s not
accessible.
Do you like my
new widget?
Took me months
to build, and…
Negative mantra
No.
But…can you
help me make
it accessible?
Limited or no remediation advice
FIX ALL THE
THINGS!
Where do I
start…
Limited or no help with prioritizing
…
I don’t know if I
have the
resources, time,
budget…
No awareness of organization’s structure
I don’t know if I
have the
resources, time,
budget…
No awareness of organization’s structure
FIX ALL THE
THINGS!
A positive approach
• Clearly explain why something poses an
accessibility barrier
• Provide illustrative examples, with steps to
reproduce if necessary
• Provide clear recommendations for
remediation, with code if necessary
• Help the client prioritize based on
accessibility impact and resources
required
My perspective on accessibility
• You should not have to completely
redesign your site (except in very, very,
very rare circumstances)
• Most accessibility advice will remediate
issues “under the hood”
• The main aesthetic/visible changes I may
suggest relate to:
– colour contrast, table reorganization, and
sectioning content
Six Accessibility Tips
Tip 1:
Don’t assume specific input devices
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014
• Test that interactive components can be
accessed via the keyboard:
– Can you “tab” to it using the Tab key?
– Does it respond to the Enter key/space bar?
• Make sure that:
– There is a clear indication of focus (don’t use
outline: none;)
– Navigation order is logical
– Custom dialog boxes “grab” focus (but watch
for keyboard traps)
Tip 2:
Use semantic markup
• Give each page an appropriate title
– The first item a screen reader will announce
when the page is opened
• Provide a logical heading structure
• Use HTML elements as per the
specification:
– Use list elements for lists, button elements for
buttons, table elements for data tables…
• http://www.paciellogroup.com/resources/w
at
But:
What about custom widgets?
Tip 3:
WAI-ARIA
• Web Accessibility Initiative
Accessible Rich Internet Applications
• Provides additional semantic meaning to
HTML elements for use by assistive
technologies
• As of 20th March 2014, WAI-ARIA is a W3C
recommendation
• http://www.w3.org/TR/wai-aria/
WAI-ARIA example
<div>Custom Button</div>
WAI-ARIA example
Note:
Further scripting is required to ensure the above
responds to both Enter and Space keys
http://blog.paciellogroup.com/2011/04/html5-
accessibility-chops-just-use-a-button/
<div role=“button”>Custom Button</div>
WAI-ARIA – the caveats
• If a native element already exists, use it!
– It will already have the necessary semantics and
behaviour built in by default
• Use WAI-ARIA when:
– Styling possibilities for the native element are
limited
– The feature is not (yet) available/well supported in
HTML (e.g. a dialog box, treeview)
• http://www.w3.org/TR/aria-in-html/
WAI-ARIA design patterns
http://www.w3.org/TR/wai-aria-practices/#aria_ex
Don’t reinvent the wheel…
http://hanshillen.github.io/jqtest/
Tip 4:
Progressively enhance
“Just stop saying that JavaScript as a
platform is by its very existence an
accessibility problem. It's not, and saying so
is an obstacle to all of the people working to
use it to the advantage of everyone.’”
Matt May, December 2012
http://lists.w3.org/Archives/Public/w3c-wai-
ig/2012OctDec/0223.html
Percentage of screen reader users who
browse with JavaScript enabled (total
n=1465):
97.6%
WebAIM screen reader survey 5, Feb. 2014
http://webaim.org/blog/survey-5-results/
• Take a “content first” approach
– Everyone gets access to the important
information
• A content first approach provides a
fallback for breakage
– This will give you an idea of how assistive
technology users experience your site
Tip 5:
Use colour sensibly
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
• Can you distinguish between foreground
and background colour combinations?
• Problematic when viewing on a mobile
device outside in the sunshine
• Pro Tip: Print the page out in greyscale –
is it still readable?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
• Can you distinguish between foreground
and background colour combinations?
• Problematic when viewing on a mobile
device outside in the sunshine
• Pro Tip: Print the page out in greyscale –
is it still readable?
GoodBad
Choose a colour for your t-shirt: Choose a colour for your t-shirt
X
Red
Green
Blue
Yellow
Required fields are indicated in red text * = Required Field
First name:
Middle name:
Surname:
First name: *
Middle name:
Surname: *
http://24ways.org/2012/colour-accessibility/
Tools for checking use of color
• Colour Contrast Analyser:
– http://www.paciellogroup.com/resources/contrast
Analyser
• Color Contrast Check:
– http://snook.ca/technical/colour_contrast/colour.ht
ml
• Luminosity Colour Contrast Ratio Analyser:
– http://juicystudio.com/services/luminositycontrastr
atio.php
Tip 6:
Ask
• Involve different types of users (and
accessibility consultants!) in the design
process, from as early as possible
• Ask assistive technology users to
demonstrate how they use their devices
• There are many videos on YouTube of
people using assistive devices – check
them out!
Useful Resources
• TPG blog: http://blog.paciellogroup.com/
• Marco’s blog: http://www.marcozehe.de/
• WebAIM: http://webaim.org/
Thank You!
Graeme Coleman
@graemecoleman
Now over to Mark…

Weitere ähnliche Inhalte

Was ist angesagt?

Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive WebsitesClarissa Peterson
 
Optimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignOptimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignClarissa Peterson
 
So You've Got a Seat at the Table. Now What?
So You've Got a Seat at the Table. Now What?So You've Got a Seat at the Table. Now What?
So You've Got a Seat at the Table. Now What?Andrea Mignolo
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design EssentialsClarissa Peterson
 
The Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansThe Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansChristian Heilmann
 
Responsive Design Heaven & Hell
Responsive Design Heaven & HellResponsive Design Heaven & Hell
Responsive Design Heaven & HellClarissa Peterson
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)Christian Heilmann
 
The Drop and The Word: Structured Content in WordPress and Drupal
The Drop and The Word: Structured Content in WordPress and DrupalThe Drop and The Word: Structured Content in WordPress and Drupal
The Drop and The Word: Structured Content in WordPress and DrupalJohn Eckman
 
Is Writing More Important Than Programming
Is Writing More Important Than ProgrammingIs Writing More Important Than Programming
Is Writing More Important Than Programminglegendsland
 
Delivering the News on WordPress
Delivering the News on WordPressDelivering the News on WordPress
Delivering the News on WordPressJohn Eckman
 
Delivering results: The State of Content Management and the Opportunity for D...
Delivering results: The State of Content Management and the Opportunity for D...Delivering results: The State of Content Management and the Opportunity for D...
Delivering results: The State of Content Management and the Opportunity for D...John Eckman
 
From Usability to User Experience to Information Architecture
From Usability to User Experience to Information Architecture From Usability to User Experience to Information Architecture
From Usability to User Experience to Information Architecture Joe Leech
 
Slide traffic review3
Slide traffic review3Slide traffic review3
Slide traffic review3Jack boby
 
Responsive Design for Non-Techies
Responsive Design for Non-TechiesResponsive Design for Non-Techies
Responsive Design for Non-TechiesMalcolm Jones
 
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCAdapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCJason Grigsby
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)Future Insights
 
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesignJensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesignJen Simmons
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real worldJason Grigsby
 

Was ist angesagt? (20)

Responsive Design
Responsive Design Responsive Design
Responsive Design
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive Websites
 
Optimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignOptimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web Design
 
So You've Got a Seat at the Table. Now What?
So You've Got a Seat at the Table. Now What?So You've Got a Seat at the Table. Now What?
So You've Got a Seat at the Table. Now What?
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design Essentials
 
The Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansThe Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for Humans
 
Responsive Design Heaven & Hell
Responsive Design Heaven & HellResponsive Design Heaven & Hell
Responsive Design Heaven & Hell
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 
The Drop and The Word: Structured Content in WordPress and Drupal
The Drop and The Word: Structured Content in WordPress and DrupalThe Drop and The Word: Structured Content in WordPress and Drupal
The Drop and The Word: Structured Content in WordPress and Drupal
 
Is Writing More Important Than Programming
Is Writing More Important Than ProgrammingIs Writing More Important Than Programming
Is Writing More Important Than Programming
 
Delivering the News on WordPress
Delivering the News on WordPressDelivering the News on WordPress
Delivering the News on WordPress
 
Delivering results: The State of Content Management and the Opportunity for D...
Delivering results: The State of Content Management and the Opportunity for D...Delivering results: The State of Content Management and the Opportunity for D...
Delivering results: The State of Content Management and the Opportunity for D...
 
From Usability to User Experience to Information Architecture
From Usability to User Experience to Information Architecture From Usability to User Experience to Information Architecture
From Usability to User Experience to Information Architecture
 
Slide traffic review3
Slide traffic review3Slide traffic review3
Slide traffic review3
 
Responsive Design for Non-Techies
Responsive Design for Non-TechiesResponsive Design for Non-Techies
Responsive Design for Non-Techies
 
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCAdapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
 
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesignJensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real world
 

Ähnlich wie Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014

“Selfish Accessibility” for Create Upstate 2016
“Selfish Accessibility” for Create Upstate 2016“Selfish Accessibility” for Create Upstate 2016
“Selfish Accessibility” for Create Upstate 2016Adrian Roselli
 
Selfish accessibility: 2015 Buffalo Unconference
Selfish accessibility: 2015 Buffalo UnconferenceSelfish accessibility: 2015 Buffalo Unconference
Selfish accessibility: 2015 Buffalo UnconferenceAdrian Roselli
 
Web Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptxWeb Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptxGurzu Inc
 
Usability, User Experience and the Internet in the 21st Century
Usability, User Experience and the Internet in the 21st CenturyUsability, User Experience and the Internet in the 21st Century
Usability, User Experience and the Internet in the 21st CenturyMax Soe
 
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...Dylan Wilbanks
 
Fringe Accessibility: Booster 2016
Fringe Accessibility: Booster 2016Fringe Accessibility: Booster 2016
Fringe Accessibility: Booster 2016Adrian Roselli
 
4 Pillars of Digital Marketing
4 Pillars of Digital Marketing4 Pillars of Digital Marketing
4 Pillars of Digital MarketingJon Payne
 
Accessibility myths for a mobile generation
Accessibility myths for a mobile generationAccessibility myths for a mobile generation
Accessibility myths for a mobile generationJonathan Hassell
 
Selfish Accessibility: Government Digital Service
Selfish Accessibility: Government Digital ServiceSelfish Accessibility: Government Digital Service
Selfish Accessibility: Government Digital ServiceAdrian Roselli
 
Museum Website Best Practices for the 21st Century
Museum Website Best Practices for the 21st CenturyMuseum Website Best Practices for the 21st Century
Museum Website Best Practices for the 21st CenturyDana Mitroff Silvers
 
Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017Adrian Roselli
 
Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017Adrian Roselli
 
Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017Adrian Roselli
 
LEARN STARTUP OVERVIEW
LEARN STARTUP OVERVIEWLEARN STARTUP OVERVIEW
LEARN STARTUP OVERVIEWwe20
 
Selfish Accessibility: a11y Camp NYC 2015
Selfish Accessibility: a11y Camp NYC 2015Selfish Accessibility: a11y Camp NYC 2015
Selfish Accessibility: a11y Camp NYC 2015Adrian Roselli
 
Last linklove presentation round-up
Last linklove presentation round-upLast linklove presentation round-up
Last linklove presentation round-upAgnese Geka
 

Ähnlich wie Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014 (20)

“Selfish Accessibility” for Create Upstate 2016
“Selfish Accessibility” for Create Upstate 2016“Selfish Accessibility” for Create Upstate 2016
“Selfish Accessibility” for Create Upstate 2016
 
Selfish accessibility: 2015 Buffalo Unconference
Selfish accessibility: 2015 Buffalo UnconferenceSelfish accessibility: 2015 Buffalo Unconference
Selfish accessibility: 2015 Buffalo Unconference
 
Web Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptxWeb Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptx
 
Usability, User Experience and the Internet in the 21st Century
Usability, User Experience and the Internet in the 21st CenturyUsability, User Experience and the Internet in the 21st Century
Usability, User Experience and the Internet in the 21st Century
 
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
 
Fringe Accessibility: Booster 2016
Fringe Accessibility: Booster 2016Fringe Accessibility: Booster 2016
Fringe Accessibility: Booster 2016
 
CT Signature PP
CT Signature PPCT Signature PP
CT Signature PP
 
4 Pillars of Digital Marketing
4 Pillars of Digital Marketing4 Pillars of Digital Marketing
4 Pillars of Digital Marketing
 
Accessibility myths for a mobile generation
Accessibility myths for a mobile generationAccessibility myths for a mobile generation
Accessibility myths for a mobile generation
 
Enhancing communication 2.0
Enhancing communication 2.0Enhancing communication 2.0
Enhancing communication 2.0
 
Selfish Accessibility: Government Digital Service
Selfish Accessibility: Government Digital ServiceSelfish Accessibility: Government Digital Service
Selfish Accessibility: Government Digital Service
 
Museum Website Best Practices for the 21st Century
Museum Website Best Practices for the 21st CenturyMuseum Website Best Practices for the 21st Century
Museum Website Best Practices for the 21st Century
 
Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017
 
Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017
 
Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017
 
Growth Hacking at SPN
Growth Hacking at SPNGrowth Hacking at SPN
Growth Hacking at SPN
 
LEARN STARTUP OVERVIEW
LEARN STARTUP OVERVIEWLEARN STARTUP OVERVIEW
LEARN STARTUP OVERVIEW
 
Selfish Accessibility: a11y Camp NYC 2015
Selfish Accessibility: a11y Camp NYC 2015Selfish Accessibility: a11y Camp NYC 2015
Selfish Accessibility: a11y Camp NYC 2015
 
Last linklove presentation round-up
Last linklove presentation round-upLast linklove presentation round-up
Last linklove presentation round-up
 
What is devops
What is devopsWhat is devops
What is devops
 

Kürzlich hochgeladen

Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 

Kürzlich hochgeladen (12)

Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 

Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014

  • 1. Tales from the Accessibility Trenches Graeme Coleman, Mark Palmer @graemecoleman, @caledoniaman
  • 2. Who are we? • Graeme Coleman (@graemecoleman) – Accessibility consultant at The Paciello Group (http://www.paciellogroup.com) • Mark Palmer (@caledoniaman) – Independent accessibility consultant – shout@markpalmer.org
  • 3. • Was once a trainee accountant here in Edinburgh… • Had a bit (but not a lot) of web development experience • MSc then PhD at the University of Dundee • Joined the Digital Media Access Group in 2007 Graeme’s Background
  • 4. • UI Developer for HBOS for 7 years • Accessibility consultant with an Edinburgh UX consultancy for 7 years • Currently employed within the Civil Service as UX Specialist • Also freelancing as an Accessibility Consultant Mark’s Background
  • 5. What interests us? How can we ensure that the content we put on the web is accessible to everyone, including people with disabilities?
  • 6. The stats • 650 million people worldwide have a disability of some kind • That’s around 10% of us…! • By the time we retire, over 30% of us will have some form of disability (however minor) Source: “A Web for Everyone” (Horton & Quesenbery, 2013)
  • 7. Forms of disability • Our users may be: – Blind (and use a screen reader) – Visually impaired (and use a screen magnifier) – Color blind (and unable to distinguish between, say, red and green) – Mobility impaired (which prevents or limits use of the mouse) – Cognitively impaired (for example, dyslexia, and use a Windows high contrast theme)
  • 8. Forms of disability • Our users may also be: – Older people with a combination of minor age related impairments – Using a small screen device – Coping with fatigue, weakness, or stress
  • 9. Design for Flexibility • We have no idea: – Who will be accessing our content – How they will be accessing our content
  • 10. How did I get involved in web accessibility?
  • 11. “When I grow up, I want to be a web accessibility consultant!” - No
  • 12. Early Days I HAVE NO IDEA WHAT I’M DOING
  • 18. …yeah, we don’t have the capacity to make these changes Web accessibility is important because…
  • 22. The Blue Meanie Source: https://flic.kr/p/4z4EkR
  • 23. It’s not accessible. Do you like my new widget? Took me months to build, and… Negative mantra
  • 24. No. But…can you help me make it accessible? Limited or no remediation advice
  • 25. FIX ALL THE THINGS! Where do I start… Limited or no help with prioritizing
  • 26. … I don’t know if I have the resources, time, budget… No awareness of organization’s structure
  • 27. I don’t know if I have the resources, time, budget… No awareness of organization’s structure FIX ALL THE THINGS!
  • 28. A positive approach • Clearly explain why something poses an accessibility barrier • Provide illustrative examples, with steps to reproduce if necessary • Provide clear recommendations for remediation, with code if necessary • Help the client prioritize based on accessibility impact and resources required
  • 29. My perspective on accessibility • You should not have to completely redesign your site (except in very, very, very rare circumstances) • Most accessibility advice will remediate issues “under the hood” • The main aesthetic/visible changes I may suggest relate to: – colour contrast, table reorganization, and sectioning content
  • 31. Tip 1: Don’t assume specific input devices
  • 33. • Test that interactive components can be accessed via the keyboard: – Can you “tab” to it using the Tab key? – Does it respond to the Enter key/space bar? • Make sure that: – There is a clear indication of focus (don’t use outline: none;) – Navigation order is logical – Custom dialog boxes “grab” focus (but watch for keyboard traps)
  • 35. • Give each page an appropriate title – The first item a screen reader will announce when the page is opened • Provide a logical heading structure • Use HTML elements as per the specification: – Use list elements for lists, button elements for buttons, table elements for data tables… • http://www.paciellogroup.com/resources/w at
  • 38. • Web Accessibility Initiative Accessible Rich Internet Applications • Provides additional semantic meaning to HTML elements for use by assistive technologies • As of 20th March 2014, WAI-ARIA is a W3C recommendation • http://www.w3.org/TR/wai-aria/
  • 40. WAI-ARIA example Note: Further scripting is required to ensure the above responds to both Enter and Space keys http://blog.paciellogroup.com/2011/04/html5- accessibility-chops-just-use-a-button/ <div role=“button”>Custom Button</div>
  • 41. WAI-ARIA – the caveats • If a native element already exists, use it! – It will already have the necessary semantics and behaviour built in by default • Use WAI-ARIA when: – Styling possibilities for the native element are limited – The feature is not (yet) available/well supported in HTML (e.g. a dialog box, treeview) • http://www.w3.org/TR/aria-in-html/
  • 43. Don’t reinvent the wheel… http://hanshillen.github.io/jqtest/
  • 45. “Just stop saying that JavaScript as a platform is by its very existence an accessibility problem. It's not, and saying so is an obstacle to all of the people working to use it to the advantage of everyone.’” Matt May, December 2012 http://lists.w3.org/Archives/Public/w3c-wai- ig/2012OctDec/0223.html
  • 46. Percentage of screen reader users who browse with JavaScript enabled (total n=1465): 97.6% WebAIM screen reader survey 5, Feb. 2014 http://webaim.org/blog/survey-5-results/
  • 47. • Take a “content first” approach – Everyone gets access to the important information • A content first approach provides a fallback for breakage – This will give you an idea of how assistive technology users experience your site
  • 48. Tip 5: Use colour sensibly
  • 49. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. • Can you distinguish between foreground and background colour combinations? • Problematic when viewing on a mobile device outside in the sunshine • Pro Tip: Print the page out in greyscale – is it still readable?
  • 50. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. • Can you distinguish between foreground and background colour combinations? • Problematic when viewing on a mobile device outside in the sunshine • Pro Tip: Print the page out in greyscale – is it still readable?
  • 51. GoodBad Choose a colour for your t-shirt: Choose a colour for your t-shirt X Red Green Blue Yellow Required fields are indicated in red text * = Required Field First name: Middle name: Surname: First name: * Middle name: Surname: * http://24ways.org/2012/colour-accessibility/
  • 52. Tools for checking use of color • Colour Contrast Analyser: – http://www.paciellogroup.com/resources/contrast Analyser • Color Contrast Check: – http://snook.ca/technical/colour_contrast/colour.ht ml • Luminosity Colour Contrast Ratio Analyser: – http://juicystudio.com/services/luminositycontrastr atio.php
  • 54. • Involve different types of users (and accessibility consultants!) in the design process, from as early as possible • Ask assistive technology users to demonstrate how they use their devices • There are many videos on YouTube of people using assistive devices – check them out!
  • 55. Useful Resources • TPG blog: http://blog.paciellogroup.com/ • Marco’s blog: http://www.marcozehe.de/ • WebAIM: http://webaim.org/

Hinweis der Redaktion

  1. Was/is still a niche industry (when compared to e.g. Usability/UX)
  2. Divide between the theory and the practice
  3. Was/is still a niche industry (when compared to e.g. Usability/UX)
  4. Was/is still a niche industry (when compared to e.g. Usability/UX)
  5. Was/is still a niche industry (when compared to e.g. Usability/UX)
  6. Was/is still a niche industry (when compared to e.g. Usability/UX)
  7. Was/is still a niche industry (when compared to e.g. Usability/UX)
  8. JavaScript is a tool – use it properly.