SlideShare a Scribd company logo
1 of 24
The Accessible Web
Improving the universal experience
What is web accessibility?
None of these should be required on a website:
● Keyboards
● Mice
● Monitors
● Desktop computers
Interface Independence
The essence of web accessibility: content is
not dependent on the tools used to access it.
Section 504: Equal Opportunities
If your web site:
● Is part of your programs or services
● Provides information on programs or
services
● Shares documents required to register for or
get information about your programs
● Then you’re subject to 504.
Section 504: Equal Opportunities
Under Section 504: you must provide alternate
formats of information you share.
The ideal web site minimizes the need to create
alternate formats: one web site with universal
access.
Principles of Accessibility
Web Content Accessibility Guidelines 2.0
http://www.w3.org/TR/WCAG20/
● Perceivable
● Operable
● Understandable
● Robust
What does that mean?
Web accessibility is for everything on the web:
● Web sites
● PDFs
● .doc, .ppt, .xls, .everything else
Testing Web Sites for Accessibility
Keyboard Accessibility
● Unplug your mouse.
● Hit the tab key
Can you navigate to every link? Can you tell
where you are?
Testing Web Sites for Accessibility
Keyboard Accessibility
Compare these two sites:
● http://themes.joedolson.com/universal/
● http://themes.joedolson.com/iatc/
Testing Web Sites for Accessibility
Form Labeling
● Has a profound impact on web site users
● Is extremely easy to detect.
Testing Web Sites for Accessibility
Form Labeling
Example:
Bad News
Testing Web Sites for Accessibility
Form Labeling
Example:
Good News!
Testing Web Sites for Accessibility
Form Labeling
Compare these two sites:
● http://dev.joedolson.com/form-bad.html
● http://dev.joedolson.com/form-good.html
Testing Web Sites for Accessibility
Alternative Text
● Disable Images
● Is any information missing?
What’s gone with images disabled? Is this an
equal experience for the user?
Testing Web Sites for Accessibility
https://addons.mozilla.org/en-US/firefox/addon/image-
block/
● http://www.girlandthegoat.com/
Testing Web Sites for Accessibility
Inclusive Content
It doesn’t matter how
accessible your site is if you
don’t have accessible content.
Testing Web Sites for Accessibility
Inclusive Content
● Accessible text content
● Accessible PDFs
● Accessible Audio and Video
Testing Web Sites for Accessibility
Accessible Text Content
● Scannable: Use headings and bullet points.
● Avoid directional text: where is “left” in a
screen reader?
● Use meaningful link text: what does “Click
here” mean?
Testing Web Sites for Accessibility
Accessible PDFs
● The source document must be accessible
o Alternative text for images
o Use heading structures - don’t just change fonts and
sizes
o Export to PDF, don’t just print to PDF
http://webaim.org/techniques/acrobat/converting
Testing Web Sites for Accessibility
Accessible PDFs - what about scanning?
● Not accessible by default - just big images.
● Use Optical Character Recognition
● Edit the document to add structure
http://wac.osu.edu/pdf/scan/pdffromscan.html
Testing Web Sites for Accessibility
Inspect your PDFs:
With Acrobat X
● Tools > Advanced > Accessibility > Full
Check
● View > Zoom > Reflow
● Tools sidebar > Action Wizard > Make
Accessible
Testing Web Sites for Accessibility
Accessible Audio & Video
Two factors: the player and the content.
● Player Accessibility
● Text transcription
● Closed Captioning
● Audio Description
In Summary
Web accessibility is complex and subjective;
but there’s still an objective difference between
inaccessible and usable - you too can spot that
difference.
Thank you!
Joseph Dolson
http://www.joedolson.com/
joe@joedolson.com
http://twitter.com/@joedolson

More Related Content

Similar to The Accessible Web: Improving the Universal Experience

How, what and what else
How, what and what else How, what and what else
How, what and what else
James Purser
 
Accessibility testing-Gyani and Siddhanth
Accessibility testing-Gyani and SiddhanthAccessibility testing-Gyani and Siddhanth
Accessibility testing-Gyani and Siddhanth
bhumika2108
 

Similar to The Accessible Web: Improving the Universal Experience (20)

Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland ...
Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland ...Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland ...
Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland ...
 
apidays LIVE Hong Kong - The three things your developer portal can't live wi...
apidays LIVE Hong Kong - The three things your developer portal can't live wi...apidays LIVE Hong Kong - The three things your developer portal can't live wi...
apidays LIVE Hong Kong - The three things your developer portal can't live wi...
 
Web Design For The Nondesigner
Web Design For The NondesignerWeb Design For The Nondesigner
Web Design For The Nondesigner
 
21 web-developement-trends
21 web-developement-trends21 web-developement-trends
21 web-developement-trends
 
How, what and what else
How, what and what else How, what and what else
How, what and what else
 
How to develop browser extension
How to develop browser extensionHow to develop browser extension
How to develop browser extension
 
Accessibilitytesting public
Accessibilitytesting publicAccessibilitytesting public
Accessibilitytesting public
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websites
 
Dmdh workshop #6
Dmdh workshop #6Dmdh workshop #6
Dmdh workshop #6
 
Logistics Referential: a Web App for humanitarian missions in fields without ...
Logistics Referential: a Web App for humanitarian missions in fields without ...Logistics Referential: a Web App for humanitarian missions in fields without ...
Logistics Referential: a Web App for humanitarian missions in fields without ...
 
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
 
Web accessibility webinar 53017
Web accessibility webinar 53017Web accessibility webinar 53017
Web accessibility webinar 53017
 
Creating and Managing Technical Content for Open Source Products
Creating and Managing Technical Content for Open Source ProductsCreating and Managing Technical Content for Open Source Products
Creating and Managing Technical Content for Open Source Products
 
Browser add-ons
Browser add-onsBrowser add-ons
Browser add-ons
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAs
 
Exploring Technology Tools
Exploring Technology ToolsExploring Technology Tools
Exploring Technology Tools
 
Accessibility testing-Gyani and Siddhanth
Accessibility testing-Gyani and SiddhanthAccessibility testing-Gyani and Siddhanth
Accessibility testing-Gyani and Siddhanth
 
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
 
Decoding Web Accessibility through Testing - Anuradha Kumari
Decoding Web Accessibility through Testing  - Anuradha KumariDecoding Web Accessibility through Testing  - Anuradha Kumari
Decoding Web Accessibility through Testing - Anuradha Kumari
 
Web Accessibility and why we need it
Web Accessibility and why we need itWeb Accessibility and why we need it
Web Accessibility and why we need it
 

More from Joseph Dolson

Build a WordPress Plug-in: Accessible social sharing
Build a WordPress Plug-in: Accessible social sharingBuild a WordPress Plug-in: Accessible social sharing
Build a WordPress Plug-in: Accessible social sharing
Joseph Dolson
 

More from Joseph Dolson (20)

Why #A11y?
Why #A11y? Why #A11y?
Why #A11y?
 
WordPress and ATAG Compliance
WordPress and ATAG ComplianceWordPress and ATAG Compliance
WordPress and ATAG Compliance
 
If you build it, they will come.
If you build it,  they will come.If you build it,  they will come.
If you build it, they will come.
 
Electronic information and accessible technology
Electronic information and accessible technologyElectronic information and accessible technology
Electronic information and accessible technology
 
JavaScript and Accessibility
JavaScript and AccessibilityJavaScript and Accessibility
JavaScript and Accessibility
 
The WordPress Way: Accessibility and Backwards Compatibility
The WordPress Way: Accessibility and Backwards CompatibilityThe WordPress Way: Accessibility and Backwards Compatibility
The WordPress Way: Accessibility and Backwards Compatibility
 
WordCamp US: ARIA. Roles, States and Properties
WordCamp US: ARIA. Roles, States and PropertiesWordCamp US: ARIA. Roles, States and Properties
WordCamp US: ARIA. Roles, States and Properties
 
Build a WordPress Plug-in: Accessible social sharing
Build a WordPress Plug-in: Accessible social sharingBuild a WordPress Plug-in: Accessible social sharing
Build a WordPress Plug-in: Accessible social sharing
 
Automating Accessibility: WordCamp Minneapolis 2015
Automating Accessibility: WordCamp Minneapolis 2015Automating Accessibility: WordCamp Minneapolis 2015
Automating Accessibility: WordCamp Minneapolis 2015
 
Massively maintained accessibility: WordPress
Massively maintained accessibility: WordPressMassively maintained accessibility: WordPress
Massively maintained accessibility: WordPress
 
Good Habits: Coding for Accessibility - WordCamp San Francisco 2014
Good Habits: Coding for Accessibility - WordCamp San Francisco 2014Good Habits: Coding for Accessibility - WordCamp San Francisco 2014
Good Habits: Coding for Accessibility - WordCamp San Francisco 2014
 
Accessibility With WordPress: Accessing Higher Ground 2014
Accessibility With WordPress: Accessing Higher Ground 2014Accessibility With WordPress: Accessing Higher Ground 2014
Accessibility With WordPress: Accessing Higher Ground 2014
 
Mission: Accessible. Share & Connect Online with Everybody!
Mission: Accessible. Share & Connect Online with Everybody!Mission: Accessible. Share & Connect Online with Everybody!
Mission: Accessible. Share & Connect Online with Everybody!
 
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp ChicagoWordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
 
Encouraging Accessibility
Encouraging AccessibilityEncouraging Accessibility
Encouraging Accessibility
 
Accessibility with WordPress
Accessibility with WordPressAccessibility with WordPress
Accessibility with WordPress
 
Accessibility & WordPress: Developing for the whole world.
Accessibility & WordPress: Developing for the whole world.Accessibility & WordPress: Developing for the whole world.
Accessibility & WordPress: Developing for the whole world.
 
WordPress and Accessibility
WordPress and AccessibilityWordPress and Accessibility
WordPress and Accessibility
 
Accessible Web Sites: What can you do?
Accessible Web Sites: What can you do?Accessible Web Sites: What can you do?
Accessible Web Sites: What can you do?
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared Responsibility
 

Recently uploaded

Call Girls in Chandni Chowk (delhi) call me [9953056974] escort service 24X7
Call Girls in Chandni Chowk (delhi) call me [9953056974] escort service 24X7Call Girls in Chandni Chowk (delhi) call me [9953056974] escort service 24X7
Call Girls in Chandni Chowk (delhi) call me [9953056974] escort service 24X7
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 

Recently uploaded (20)

Coastal Protection Measures in Hulhumale'
Coastal Protection Measures in Hulhumale'Coastal Protection Measures in Hulhumale'
Coastal Protection Measures in Hulhumale'
 
Postal Ballots-For home voting step by step process 2024.pptx
Postal Ballots-For home voting step by step process 2024.pptxPostal Ballots-For home voting step by step process 2024.pptx
Postal Ballots-For home voting step by step process 2024.pptx
 
Call Girls Chakan Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Chakan Call Me 7737669865 Budget Friendly No Advance BookingCall Girls Chakan Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Chakan Call Me 7737669865 Budget Friendly No Advance Booking
 
Tuvalu Coastal Adaptation Project (TCAP)
Tuvalu Coastal Adaptation Project (TCAP)Tuvalu Coastal Adaptation Project (TCAP)
Tuvalu Coastal Adaptation Project (TCAP)
 
Regional Snapshot Atlanta Aging Trends 2024
Regional Snapshot Atlanta Aging Trends 2024Regional Snapshot Atlanta Aging Trends 2024
Regional Snapshot Atlanta Aging Trends 2024
 
World Press Freedom Day 2024; May 3rd - Poster
World Press Freedom Day 2024; May 3rd - PosterWorld Press Freedom Day 2024; May 3rd - Poster
World Press Freedom Day 2024; May 3rd - Poster
 
Antisemitism Awareness Act: pénaliser la critique de l'Etat d'Israël
Antisemitism Awareness Act: pénaliser la critique de l'Etat d'IsraëlAntisemitism Awareness Act: pénaliser la critique de l'Etat d'Israël
Antisemitism Awareness Act: pénaliser la critique de l'Etat d'Israël
 
TEST BANK For Essentials of Negotiation, 7th Edition by Roy Lewicki, Bruce Ba...
TEST BANK For Essentials of Negotiation, 7th Edition by Roy Lewicki, Bruce Ba...TEST BANK For Essentials of Negotiation, 7th Edition by Roy Lewicki, Bruce Ba...
TEST BANK For Essentials of Negotiation, 7th Edition by Roy Lewicki, Bruce Ba...
 
Akurdi ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready For S...
Akurdi ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready For S...Akurdi ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready For S...
Akurdi ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready For S...
 
VIP Model Call Girls Lohegaon ( Pune ) Call ON 8005736733 Starting From 5K to...
VIP Model Call Girls Lohegaon ( Pune ) Call ON 8005736733 Starting From 5K to...VIP Model Call Girls Lohegaon ( Pune ) Call ON 8005736733 Starting From 5K to...
VIP Model Call Girls Lohegaon ( Pune ) Call ON 8005736733 Starting From 5K to...
 
1935 CONSTITUTION REPORT IN RIPH FINALLS
1935 CONSTITUTION REPORT IN RIPH FINALLS1935 CONSTITUTION REPORT IN RIPH FINALLS
1935 CONSTITUTION REPORT IN RIPH FINALLS
 
Get Premium Budhwar Peth Call Girls (8005736733) 24x7 Rate 15999 with A/c Roo...
Get Premium Budhwar Peth Call Girls (8005736733) 24x7 Rate 15999 with A/c Roo...Get Premium Budhwar Peth Call Girls (8005736733) 24x7 Rate 15999 with A/c Roo...
Get Premium Budhwar Peth Call Girls (8005736733) 24x7 Rate 15999 with A/c Roo...
 
Booking open Available Pune Call Girls Shukrawar Peth 6297143586 Call Hot In...
Booking open Available Pune Call Girls Shukrawar Peth  6297143586 Call Hot In...Booking open Available Pune Call Girls Shukrawar Peth  6297143586 Call Hot In...
Booking open Available Pune Call Girls Shukrawar Peth 6297143586 Call Hot In...
 
Junnar ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready For S...
Junnar ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready For S...Junnar ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready For S...
Junnar ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready For S...
 
Pimpri Chinchwad ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi R...
Pimpri Chinchwad ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi R...Pimpri Chinchwad ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi R...
Pimpri Chinchwad ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi R...
 
(NEHA) Call Girls Nagpur Call Now 8250077686 Nagpur Escorts 24x7
(NEHA) Call Girls Nagpur Call Now 8250077686 Nagpur Escorts 24x7(NEHA) Call Girls Nagpur Call Now 8250077686 Nagpur Escorts 24x7
(NEHA) Call Girls Nagpur Call Now 8250077686 Nagpur Escorts 24x7
 
Financing strategies for adaptation. Presentation for CANCC
Financing strategies for adaptation. Presentation for CANCCFinancing strategies for adaptation. Presentation for CANCC
Financing strategies for adaptation. Presentation for CANCC
 
VIP Model Call Girls Narhe ( Pune ) Call ON 8005736733 Starting From 5K to 25...
VIP Model Call Girls Narhe ( Pune ) Call ON 8005736733 Starting From 5K to 25...VIP Model Call Girls Narhe ( Pune ) Call ON 8005736733 Starting From 5K to 25...
VIP Model Call Girls Narhe ( Pune ) Call ON 8005736733 Starting From 5K to 25...
 
PPT BIJNOR COUNTING Counting of Votes on ETPBs (FOR SERVICE ELECTORS
PPT BIJNOR COUNTING Counting of Votes on ETPBs (FOR SERVICE ELECTORSPPT BIJNOR COUNTING Counting of Votes on ETPBs (FOR SERVICE ELECTORS
PPT BIJNOR COUNTING Counting of Votes on ETPBs (FOR SERVICE ELECTORS
 
Call Girls in Chandni Chowk (delhi) call me [9953056974] escort service 24X7
Call Girls in Chandni Chowk (delhi) call me [9953056974] escort service 24X7Call Girls in Chandni Chowk (delhi) call me [9953056974] escort service 24X7
Call Girls in Chandni Chowk (delhi) call me [9953056974] escort service 24X7
 

The Accessible Web: Improving the Universal Experience

  • 1. The Accessible Web Improving the universal experience
  • 2. What is web accessibility? None of these should be required on a website: ● Keyboards ● Mice ● Monitors ● Desktop computers
  • 3. Interface Independence The essence of web accessibility: content is not dependent on the tools used to access it.
  • 4. Section 504: Equal Opportunities If your web site: ● Is part of your programs or services ● Provides information on programs or services ● Shares documents required to register for or get information about your programs ● Then you’re subject to 504.
  • 5. Section 504: Equal Opportunities Under Section 504: you must provide alternate formats of information you share. The ideal web site minimizes the need to create alternate formats: one web site with universal access.
  • 6. Principles of Accessibility Web Content Accessibility Guidelines 2.0 http://www.w3.org/TR/WCAG20/ ● Perceivable ● Operable ● Understandable ● Robust
  • 7. What does that mean? Web accessibility is for everything on the web: ● Web sites ● PDFs ● .doc, .ppt, .xls, .everything else
  • 8. Testing Web Sites for Accessibility Keyboard Accessibility ● Unplug your mouse. ● Hit the tab key Can you navigate to every link? Can you tell where you are?
  • 9. Testing Web Sites for Accessibility Keyboard Accessibility Compare these two sites: ● http://themes.joedolson.com/universal/ ● http://themes.joedolson.com/iatc/
  • 10. Testing Web Sites for Accessibility Form Labeling ● Has a profound impact on web site users ● Is extremely easy to detect.
  • 11. Testing Web Sites for Accessibility Form Labeling Example: Bad News
  • 12. Testing Web Sites for Accessibility Form Labeling Example: Good News!
  • 13. Testing Web Sites for Accessibility Form Labeling Compare these two sites: ● http://dev.joedolson.com/form-bad.html ● http://dev.joedolson.com/form-good.html
  • 14. Testing Web Sites for Accessibility Alternative Text ● Disable Images ● Is any information missing? What’s gone with images disabled? Is this an equal experience for the user?
  • 15. Testing Web Sites for Accessibility https://addons.mozilla.org/en-US/firefox/addon/image- block/ ● http://www.girlandthegoat.com/
  • 16. Testing Web Sites for Accessibility Inclusive Content It doesn’t matter how accessible your site is if you don’t have accessible content.
  • 17. Testing Web Sites for Accessibility Inclusive Content ● Accessible text content ● Accessible PDFs ● Accessible Audio and Video
  • 18. Testing Web Sites for Accessibility Accessible Text Content ● Scannable: Use headings and bullet points. ● Avoid directional text: where is “left” in a screen reader? ● Use meaningful link text: what does “Click here” mean?
  • 19. Testing Web Sites for Accessibility Accessible PDFs ● The source document must be accessible o Alternative text for images o Use heading structures - don’t just change fonts and sizes o Export to PDF, don’t just print to PDF http://webaim.org/techniques/acrobat/converting
  • 20. Testing Web Sites for Accessibility Accessible PDFs - what about scanning? ● Not accessible by default - just big images. ● Use Optical Character Recognition ● Edit the document to add structure http://wac.osu.edu/pdf/scan/pdffromscan.html
  • 21. Testing Web Sites for Accessibility Inspect your PDFs: With Acrobat X ● Tools > Advanced > Accessibility > Full Check ● View > Zoom > Reflow ● Tools sidebar > Action Wizard > Make Accessible
  • 22. Testing Web Sites for Accessibility Accessible Audio & Video Two factors: the player and the content. ● Player Accessibility ● Text transcription ● Closed Captioning ● Audio Description
  • 23. In Summary Web accessibility is complex and subjective; but there’s still an objective difference between inaccessible and usable - you too can spot that difference.

Editor's Notes

  1. Video URL: https://www.youtube.com/watch?v=bWRwBNnROdI
  2. Video URL: https://www.youtube.com/watch?v=0GplRDFSGL4