SlideShare una empresa de Scribd logo
1 de 53
Web Accessibility Principles Strategies &Tactics Sean Yo• University of Guelph • Web Solutions • CCS @seanyo• seanyo.ca • syo@uoguelph.ca
Web Analyst Accessibility Advocate
Introduction Fundamentals of Web Accessibility
Pop Quiz: What is A11y?
What is Web Accessibility?
Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed developed and edited all users can have equal access to information and functionality. http://en.wikipedia.org/wiki/Web_accessibility
Visual Hearing Motor Cognitive
Why Web Accessibility?
[object Object]
Beneficial Standards
Save Internet Resources
Be Recognized
It’s the Law… Or it Will Be
Ease of Maintenance
More Aging Visitors
Care and Sleep Well
Google Will Love Youhttp://accessites.org/why/ http://www.webaim.org/intro/
User Experience
Accessibility Experience
People Have Experiences Checklists Don’t
http://manwithnoblog.com/2010/05/20/kill-accessibility/
Principles Thinking About Web Accessibility
The Only One That Matters People First
AODA Principles Independence Dignity Integration Equality of opportunity
W3C Principles Perceivable Operable Understandable Robust
Strategies Planning For Web Accessibility
Plan for Accessibility… …From the Beginning
Most errors are introduced during requirements analysis and design. The later they are removed, the most expensive it is to take them out. Boehm et al (1975): “Some Experience with Automated Aids to the Design of Large-Scale Reliable Software.”
Website Lifecycle
Support
Change Request Lifecycle
Plan for Accessibility… …at every step
Accessibility is not an option It is completing a website
Avoid Assumptions About Your Visitors
Count on Text  Provide Text Alternatives
Don’t take control of your visitor’s experience
Use Clear Language
Be Usable, Searchable and Navigable
Be Semantic
Separate Content & Presentation
Progressive Enhancement  Is the new  Graceful Degredation
Accessibility Testing Design Functional Demo Final
Design Testing Layout Colour Contrast Unpack Assumptions
Functional Testing Must work with a keyboard…Easily Linear Flow Assistive Technology is a Pre-Req
Demo Testing All Alt Text in Place Test with Screen Reader Turn off CSS
Final Testing Real People Different Needs Assistive Technology
Ethnographic Testing Test with Real People
Tactics Doing Web Accessibility
Solve Problems Lower on the Web Stack
Images, Forms & Tables Oh My!
Images Forms Tables
People First Separate Content & Presentation Be Sematic
Alt Tags

Más contenido relacionado

Más de Sean Yo

Sean on leave
Sean on leaveSean on leave
Sean on leave
Sean Yo
 
Spring it2010keynote
Spring it2010keynoteSpring it2010keynote
Spring it2010keynote
Sean Yo
 
Drupalvs wordpress fsoss2011
Drupalvs wordpress fsoss2011Drupalvs wordpress fsoss2011
Drupalvs wordpress fsoss2011
Sean Yo
 
Firefox 5
Firefox 5Firefox 5
Firefox 5
Sean Yo
 
Getting Started With Web Accessibility
Getting Started With Web AccessibilityGetting Started With Web Accessibility
Getting Started With Web Accessibility
Sean Yo
 
Web accessibility Development Tools In Action
Web accessibility Development Tools In ActionWeb accessibility Development Tools In Action
Web accessibility Development Tools In Action
Sean Yo
 
Web 2.0 Experiential Learning
Web 2.0 Experiential LearningWeb 2.0 Experiential Learning
Web 2.0 Experiential Learning
Sean Yo
 

Más de Sean Yo (18)

Web2013
Web2013Web2013
Web2013
 
Wave training
Wave trainingWave training
Wave training
 
Sean on leave
Sean on leaveSean on leave
Sean on leave
 
Spring it2010keynote
Spring it2010keynoteSpring it2010keynote
Spring it2010keynote
 
Drupal club
Drupal clubDrupal club
Drupal club
 
A Delicious Tale
A Delicious TaleA Delicious Tale
A Delicious Tale
 
1000 km later
1000 km later1000 km later
1000 km later
 
Harm reduction & the web
Harm reduction & the webHarm reduction & the web
Harm reduction & the web
 
Future Of The Web
Future Of The WebFuture Of The Web
Future Of The Web
 
Drupalvs wordpress fsoss2011
Drupalvs wordpress fsoss2011Drupalvs wordpress fsoss2011
Drupalvs wordpress fsoss2011
 
Firefox 5
Firefox 5Firefox 5
Firefox 5
 
Getting Started With Web Accessibility
Getting Started With Web AccessibilityGetting Started With Web Accessibility
Getting Started With Web Accessibility
 
Web accessibility Development Tools In Action
Web accessibility Development Tools In ActionWeb accessibility Development Tools In Action
Web accessibility Development Tools In Action
 
Drupal vs. WordPress: Smackdown Edition
Drupal vs. WordPress: Smackdown EditionDrupal vs. WordPress: Smackdown Edition
Drupal vs. WordPress: Smackdown Edition
 
Welcome To WordPress
Welcome To WordPressWelcome To WordPress
Welcome To WordPress
 
Real World Web Accessibility
Real World Web AccessibilityReal World Web Accessibility
Real World Web Accessibility
 
Web 2.0 Experiential Learning
Web 2.0 Experiential LearningWeb 2.0 Experiential Learning
Web 2.0 Experiential Learning
 
Wiki Do
Wiki DoWiki Do
Wiki Do
 

Último

call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
amitlee9823
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
tbatkhuu1
 
➥🔝 7737669865 🔝▻ Bokaro Call-girls in Women Seeking Men 🔝Bokaro🔝 Escorts S...
➥🔝 7737669865 🔝▻ Bokaro Call-girls in Women Seeking Men  🔝Bokaro🔝   Escorts S...➥🔝 7737669865 🔝▻ Bokaro Call-girls in Women Seeking Men  🔝Bokaro🔝   Escorts S...
➥🔝 7737669865 🔝▻ Bokaro Call-girls in Women Seeking Men 🔝Bokaro🔝 Escorts S...
amitlee9823
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
amitlee9823
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
amitlee9823
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
nirzagarg
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
tbatkhuu1
 

Último (20)

call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
 
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
 
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experiencedWhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls AgencyHire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
 
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRL
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRLHingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRL
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRL
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
 
➥🔝 7737669865 🔝▻ Bokaro Call-girls in Women Seeking Men 🔝Bokaro🔝 Escorts S...
➥🔝 7737669865 🔝▻ Bokaro Call-girls in Women Seeking Men  🔝Bokaro🔝   Escorts S...➥🔝 7737669865 🔝▻ Bokaro Call-girls in Women Seeking Men  🔝Bokaro🔝   Escorts S...
➥🔝 7737669865 🔝▻ Bokaro Call-girls in Women Seeking Men 🔝Bokaro🔝 Escorts S...
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
 
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
 

Web accessibility 2010 v2

Notas del editor

  1. A11y is anabbr for accessibility – a numeronymLike i18n for internationalization We’ll come back to this later…
  2. VisualBlindness low vision color-blindnessHearingDeafnessMotorInability to use a mouse slow response time limited fine motor controlCognitiveLearning disabilities distractibility inability to remember or focus on large amounts of information
  3. Making a web site accessible is work – but so is following all types of coding best practices like keeping presentation code in CSS, using HTML semantically, and using readable white space in your code There is the simple motivation of pride in craft…but more important the purpose of a web site is to communicate If you ignore accessibility, your website will be less successful When you pay attention to accessibility, in my experience, the whole website is better for everyone Let’s look to the built environment – ramps, powered doors and extra railings are an accessibility features – but they can potentially help anyone in that building
  4. Makingaccessibile websites can be challenging – and we’ll all make mistakesChecklists are not a bad thing – they can be a useful toolHowever, if you rely solely on checklists – you will generate false positive reports that a site is accessibleChecklists are about as smart as a spellchecker – try and keep that in mind
  5. “considering accessibility as a separate item is the wrong approach. We really need to be considering the ideals of universal design, in which everything is designed for everyone.   Let’s just for a minute forget about accessibility as a separate issue. We need to design and develop for people using AT just like we do for any other usability issue”
  6. Perceivable - Information and interface must be presentable to users in ways they can perceive.This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)Operable - User interface components and navigation must be operable.This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)Understandable - Information and the operation of user interface must be understandable.This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
  7. Providing an Accessible Experience requires contintuous and iterative design and testing
  8. This model comes from a training session I took with Derek Featherstone that was hosted at the CNIB as part of the Registered Graphic Designers of Ontario Access Ability Conference.
  9. Short description to provide context Less than 100 charactersNot always neededRedundant Images (Help + “?” Icon)Decorative Images (Rounded corners)Alt=“” tells a screen reader to skip – there is no SEO penalty here, since we’re resolving a repetitionRemember – People First…not checklists
  10. Be careful when you use colour to indicate informationUsing colour isn’t evil – but just like an alt tag for an image, when you provide non-text visual information, you need to provide the same information by an alternative methodIf the only way you distinguish an advisory message that is a friendly warning or a critical error is making the warning yellow and the error red, then you need to think about providing that information by an alternative method. Include the word “Warning” and “Error” at the beginning of the advisory messageAlso keep in mind that some sighted people can’t distinguish colours due to colour blindness
  11. Forms should be coded from the first element to the last in the order they are provided on the screenIt is possible to move things around in a form – forms are little HTML black boxes with a big red button on itMake sure the submit button is the LAST item in the form – this is a signal to screen reading users that the form is finishedDon’t force a form into a table for the visual design of a form – that code will be very confusing to a screen readerTab Index should only be needed if you’re breaking linear flow – if you’ve coded your form with linear flow, you don’t need tab indexCSS positioning that doesn’t break linear flowSeparating content from presentation
  12. Tables are for tabular data semantic