SlideShare a Scribd company logo
1 of 22
Toronto Accessibility & Inclusive Design
           meetup.com/a11yTO
@a11yTO                         #a11yTO
Toronto Accessibility & Inclusive Design
            meetup.com/a11yTO
@a11yTO                             #a11yTO



    Practical Web Accessibility

      GeorgeZamfir.com - @GeorgeZamfir
Practical Web Accessibility
                               &

            The Accessibility Tribe
“capture(d) the CSUN zeitgeist (of) the global accessibility
   community as a tribe, drawn together by a shared
   ambition to make the web a truly inclusive place.”
                                                  - Leonie Watson


         This is our local-global tribe!
     And we want you to join the tribe!
                    (there are superheroes)


                 john.foliot.ca/csun-2012-recap
Welcome to the
       The Accessibility Superheroes Tribe


Superheroes talking:

Superman: Hey these iPhones are
great, now we can all keep in touch and
share our crime fighting techniques with
each other.
Batman: I know, right? I can’t imagine
life without one. That would really suck.
Flash: How come I didn’t get one?
Spiderman: Hahaha, Apple doesn’t
support Flash.
#a11yTO – 2 take-aways




Learn something new
         and / or



Validate of your ideas
#a11yTO – Learn Something New
#a11yTO – Validation
#a11yTO – 2 take-aways


      Learn something new
                     &

      Validate of your ideas



It’s about the tribe so I shortened my talk!
Practical Web Accessibility
Sequel to the Guelph presentations - bit.ly/a11y_scotia
Lessons learned from redesigning scotiabank.com


1. Make A Huge Difference For The Users
2. Practical “Dynamic Web 2.0” Accessibility
Make A Huge Difference For The Users
    1. Big impact issues

    2. Don’t just check the WCAG 2 check-marks

    3. My bias: keyboard testing




                     Need help?
     Good thing we now have a tribe to help out 
1. Big impact issues




            “Who Wants To Be A Millionaire” question:
            Which of the following is the largest?
            Possible answers: an elephant or the moon
            The contestant chose "An Elephant"!
1. Big impact issues

    1. “If I can only fix one thing what would that be?”


    2. Look at the BIG picture & the users’ needs

    3. Our approach:
       • framework-first
       • common components
       • frequently used “tools”
       • “real” content structure
1. Big impact issues – Our Approach
1. Framework-first

2. Common components

3. Frequently used “tools”

4. “real” content structure
2. Checking the WCAG2 check-marks

             Don’t get hung up on
    Web Content Accessibility Guidelines 2 (WCAG 2)
3. Keyboard Testing

                  2 BIG concepts:

         Everything is functional by keyboard
             (including highly interactive UI elements)


                  Visual focus indicator
                   (be the :focus to my :hover)



          This website is best viewed at 1024x768
              and only works with the mouse
Practical “Dynamic Web 2.0”Accessibility
                 Widgets
                Overlays
                 Pop-ups
                  Sliders
               Modal dialogs
               Drop-downs
                     ...
                    Oy!


              Sounds familiar?
Practical “Dynamic Web 2.0”Accessibility

              Demo Time!
In the end…


     Accessibility is for everyone!
     “We are only as (dis)abled as the environment around us”
                                                – Oscar Pistorius




     Don’t be the policeman, be the fireman!
                                                    – John Foliot
Practical Web Accessibility




               THANK YOU!

More Related Content

Recently uploaded

Recently uploaded (20)

Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 

Featured

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Featured (20)

Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 

Practical Web Accessibility

  • 1. Toronto Accessibility & Inclusive Design meetup.com/a11yTO @a11yTO #a11yTO
  • 2. Toronto Accessibility & Inclusive Design meetup.com/a11yTO @a11yTO #a11yTO Practical Web Accessibility GeorgeZamfir.com - @GeorgeZamfir
  • 3.
  • 4.
  • 5.
  • 6. Practical Web Accessibility & The Accessibility Tribe “capture(d) the CSUN zeitgeist (of) the global accessibility community as a tribe, drawn together by a shared ambition to make the web a truly inclusive place.” - Leonie Watson This is our local-global tribe! And we want you to join the tribe! (there are superheroes) john.foliot.ca/csun-2012-recap
  • 7. Welcome to the The Accessibility Superheroes Tribe Superheroes talking: Superman: Hey these iPhones are great, now we can all keep in touch and share our crime fighting techniques with each other. Batman: I know, right? I can’t imagine life without one. That would really suck. Flash: How come I didn’t get one? Spiderman: Hahaha, Apple doesn’t support Flash.
  • 8. #a11yTO – 2 take-aways Learn something new and / or Validate of your ideas
  • 9. #a11yTO – Learn Something New
  • 11. #a11yTO – 2 take-aways Learn something new & Validate of your ideas It’s about the tribe so I shortened my talk!
  • 12. Practical Web Accessibility Sequel to the Guelph presentations - bit.ly/a11y_scotia Lessons learned from redesigning scotiabank.com 1. Make A Huge Difference For The Users 2. Practical “Dynamic Web 2.0” Accessibility
  • 13. Make A Huge Difference For The Users 1. Big impact issues 2. Don’t just check the WCAG 2 check-marks 3. My bias: keyboard testing Need help? Good thing we now have a tribe to help out 
  • 14. 1. Big impact issues “Who Wants To Be A Millionaire” question: Which of the following is the largest? Possible answers: an elephant or the moon The contestant chose "An Elephant"!
  • 15. 1. Big impact issues 1. “If I can only fix one thing what would that be?” 2. Look at the BIG picture & the users’ needs 3. Our approach: • framework-first • common components • frequently used “tools” • “real” content structure
  • 16. 1. Big impact issues – Our Approach 1. Framework-first 2. Common components 3. Frequently used “tools” 4. “real” content structure
  • 17. 2. Checking the WCAG2 check-marks Don’t get hung up on Web Content Accessibility Guidelines 2 (WCAG 2)
  • 18. 3. Keyboard Testing 2 BIG concepts: Everything is functional by keyboard (including highly interactive UI elements) Visual focus indicator (be the :focus to my :hover) This website is best viewed at 1024x768 and only works with the mouse
  • 19. Practical “Dynamic Web 2.0”Accessibility Widgets Overlays Pop-ups Sliders Modal dialogs Drop-downs ... Oy! Sounds familiar?
  • 20. Practical “Dynamic Web 2.0”Accessibility Demo Time!
  • 21. In the end… Accessibility is for everyone! “We are only as (dis)abled as the environment around us” – Oscar Pistorius Don’t be the policeman, be the fireman! – John Foliot

Editor's Notes

  1. Welcome to #a11yTO, we’re on Twitter and knowing Jennison, we’ll soon on Fb, G+, Pinterest, Li, Reddit, IRC, Y!, MSN, Skype and any other platform you can possibly imagine.
  2. My name is George Zamfir and I’m an accessibility addict! Welcome to accessibility anonymous everyone, I’m so happy to see so many of you here! Computer Science graduate, Stumbled into this field while Ryerson; dev job -> research -> thesis “ Real job“ Energy regulations vs WCAG 2 Opportunity at Scotiabank : I was in for a ride: 2 years, redesigned / replatformed SOL & Scotiabank.com + a whole lot of smaller projects
  3. I like to jump in the water from high cliffs, especially in my wedding tux. And, unrelated I drink my tea from beer steins.
  4. Also, I like paddling & dragon boating. I’m now on a team representing this team with weird yellow & blue colors.
  5. And sometimes we paddle in the conference rooms.
  6. “ The Tribe” meme started on twitter as a symbol of the accessibility community & the passion we share. People used it a lot at CSUN this year and it stuck with me because it felt really warm & welcoming. Goal for this series of meetups: create our local-global accessibility tribe for all of US, so that we all feel warm & welcomed (and slightly inebriated if you join us at the pub). I am lucky because early on I got to work with a lot of smart people: Deb Fels & research colleagues, IDRC, Monica, Derek and others. I call them superheroes!
  7. Accessibility Superheroes Tribe! Superheroes talking: Superman: Hey these iPhones are great, now we can all keep in touch and share our crime fighting techniques with each other. Batman: I know, right? I can’t imagine life without one. That would really suck. Flash: How come I didn’t get one? Spiderman: Haha, Apple doesn’t support Flash
  8. From conferences: learn something new & Validation of your ideas Well, this is what we want for you. Throughout all the conferences I went to I always left with 2 take-aways:   1. I always learned something new: maybe it was a coding technique, testing , a tip on training, or I learned more about a disability I didn't know much about.   2. Validation for my work: "wow, we've been saying / doing that all along, it's good to know it worked in other places";
  9. Progressive enhancement: from Derek.
  10. @georgezamfir: Just read @feather's "HTML5 Block Links" again for validation - http://simplyaccessible.com/article/html5- … Love these compromise-now-but-futurefriendly solutions WCAG 2 by the letter - Keyboard Focus
  11. From conferences: learn something new & Validation of your ideas Well, this is what we want for you. It’s about the tribe so I shortened the talk so we can spend the last 10-15 minutes talking about your biggest hurdles and how we can help. Because we want you to feel warm & fuzzy 
  12. Sequel to the 2 presentations: The 1st presentation speaks to the governance, policies and management process around the project The 2nd presentation describes the accessibility tasks undertaken at each SDLC phase Lessons learned & what really worked for us About the project: scotiabank.com
  13. Start with what makes the biggest impact: Start with the big picture / from the outside “ If I can only fix one thing what would that be?” In our case: framework-first Don't just check the WCAG guideline check-mark Big believer in keyboard testing (point back to WCAG) because it usually masks bigger issues. And when you don't know what is going on reach to this community
  14. “ If I can only fix one thing what would that be?” Start with the big picture “ can't see the wood for the trees ” Look at your project, what’s the most important thing you want ALL your users In our case: framework-first
  15. DESCRIBE THE TEMPLATE ELEMENTS Header logo, sign in area - Top nav, 2 “skip to content” links, text resize - Service menu, search - Main menu Vertical menu – mirrors the main menu - Main Content Footer
  16. Don't just check the WCAG guideline check-mark. Consider this, keyboard focus is a WCAG 2 AA criteria.
  17. Big believer in keyboard testing (point back to WCAG) because it usually masks bigger issues. And when you don't know what is going on reach to this community
  18. The reality on today's web is that these are now not just geeky features, they are becoming more & more embedded on the web as much as text & images are. Believe it or not when used and built right I think they are empowering to the users.
  19. The reality on today's web is that these are now not just geeky features, they are becoming more & more embedded on the web as much as text & images are. Believe it or not when used and built right I think they are empowering to the users.
  20. Accessibility is for everyone: We are only as (dis)abled as the environment around us – Oscar Pistorius; running on prosthetic legs at Paralympics and has now qualified for the 2012 Olympics. Pregnant lady “ Don’t be the policeman, be the fireman.” – John Foliot via Karl Groves - http://www.karlgroves.com/2012/06/21/lets-put-down-the-pitchforks-and-get-some-perspective/ Take the approach of being a fireman, instead of that of a policeman ; By saying that, what he means is that firemen actually spend a very small amount of their time fighting fires. Most of what they do is in preventing fires. The policeman, on the other hand, are spending their days investigating crimes and keeping a watchful eye out for crimes occurring.
  21. I’ve set aside some time to hear from you But Q’s on the presentation are welcomed as well