SlideShare una empresa de Scribd logo
1 de 15
Ramp it up!
Action-based guide to creating accessible websites
Taliesin L. Smith – terracoda.ca/ramp
MDes. Candidate 2016, Inclusive Design, OCAD University
Accessibility progression
Afterthought Universal Design Centre of the Design
Web Content Accessibility Guidelines
Layers of the WCAG
● 4 Principles
– 12 Guidelines
– 61 Success Criteria
– 3 Levels of compliance: A, AA, AAA
Source: WCAG 2.0
Focus on the POUR Principles
● Perceivable
– Users must be able to perceive the information being presented
● Operable
– Users must be able to operate the interface
● Understandable
– Users must be able to understand the information as well as the operation of
the user interface
● Robust
– Users must be able to access the content when technologies change
What barriers do websites have?
Accessible design decisions create the ramp
Code meaning into content
Use unique & meaningful words for links
Provide text-based alternatives for images
Complexity requires skill
Other media may require external resources
Rethinking disability & accessibility
Mismatch
user + barrier = disability
Accessibility
The ability of the system to accommodate the
needs of the user.
The Web is for everyone (Horton & Quesenbery)
Jacob, Trevor & Steven: Do they have a disability if they are able to accomplish their goals?
(rosenfeldmedia.com)
Assistive technologies: Refreshable Brail display (wikipedia.org), Kurzweil 3000,
hands-free smart phone stand (hongkiat.com)
It takes awareness, skills & resources
Full guide & references at
● My website: Terracoda.ca/ramp
● Contact me: talilief@gmail.com

Más contenido relacionado

Similar a Ramp it up! Action-based guide to creating accessible websites

Web Accessibility: Understanding & Practice!
Web Accessibility: Understanding & Practice!Web Accessibility: Understanding & Practice!
Web Accessibility: Understanding & Practice!Rabab Gomaa
 
Integrating universal design, best practices, & accessibility atia 2013
Integrating universal design, best practices, & accessibility   atia 2013Integrating universal design, best practices, & accessibility   atia 2013
Integrating universal design, best practices, & accessibility atia 2013Howard Kramer
 
Ud in curriculum ahead 2013
Ud in curriculum   ahead 2013Ud in curriculum   ahead 2013
Ud in curriculum ahead 2013Howard Kramer
 
(COLTT 2018) Teaching Accessibility and Inclusive Design in Higher Education ...
(COLTT 2018) Teaching Accessibility and Inclusive Design in Higher Education ...(COLTT 2018) Teaching Accessibility and Inclusive Design in Higher Education ...
(COLTT 2018) Teaching Accessibility and Inclusive Design in Higher Education ...Howard Kramer
 
Integrating universal design, best practices, & accessibility atia 2013 - (...
Integrating universal design, best practices, & accessibility   atia 2013 - (...Integrating universal design, best practices, & accessibility   atia 2013 - (...
Integrating universal design, best practices, & accessibility atia 2013 - (...Howard Kramer
 
Ud in-curriculum-4 ahead-2018-solo
Ud in-curriculum-4 ahead-2018-soloUd in-curriculum-4 ahead-2018-solo
Ud in-curriculum-4 ahead-2018-soloHoward Kramer
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Denise Jacobs
 
Web Accessibility and Older People - not as straighforward as you think?
Web Accessibility and Older People - not as straighforward as you think?Web Accessibility and Older People - not as straighforward as you think?
Web Accessibility and Older People - not as straighforward as you think?David Sloan
 
Teach Accessibility and Universal Design in Higher Education (AHEAD 2017)
Teach Accessibility and Universal Design in Higher Education (AHEAD 2017)Teach Accessibility and Universal Design in Higher Education (AHEAD 2017)
Teach Accessibility and Universal Design in Higher Education (AHEAD 2017)Howard Kramer
 
Increasing access to professional development
Increasing access to professional developmentIncreasing access to professional development
Increasing access to professional developmentPeter Rawsthorne
 
Teaching Accessibility and Universal Design in Higher Education - COLTT 2017
Teaching Accessibility and Universal Design in Higher Education - COLTT 2017Teaching Accessibility and Universal Design in Higher Education - COLTT 2017
Teaching Accessibility and Universal Design in Higher Education - COLTT 2017Howard Kramer
 
Preview Class Handout "
Preview Class Handout "Preview Class Handout "
Preview Class Handout "butest
 
Teaching web accessibility at the source
Teaching web accessibility at the sourceTeaching web accessibility at the source
Teaching web accessibility at the sourceHoward Kramer
 
Accessibility Overview - 508 and WCAG Compliance
Accessibility Overview - 508 and WCAG ComplianceAccessibility Overview - 508 and WCAG Compliance
Accessibility Overview - 508 and WCAG ComplianceFrank Walsh
 
Teaching Accessibility and Universal Design in Higher Education Curriculum - ...
Teaching Accessibility and Universal Design in Higher Education Curriculum - ...Teaching Accessibility and Universal Design in Higher Education Curriculum - ...
Teaching Accessibility and Universal Design in Higher Education Curriculum - ...Howard Kramer
 
#econfpsu16 - Building a Central Digital Services Team
#econfpsu16 - Building a Central Digital Services Team #econfpsu16 - Building a Central Digital Services Team
#econfpsu16 - Building a Central Digital Services Team Jean Ayers
 
The Accessible Web
The Accessible WebThe Accessible Web
The Accessible Weblisbk
 
SGCI at Center for Trustworthy Scientific Cyberinfrastructure workshop
SGCI at Center for Trustworthy Scientific Cyberinfrastructure workshopSGCI at Center for Trustworthy Scientific Cyberinfrastructure workshop
SGCI at Center for Trustworthy Scientific Cyberinfrastructure workshopNancy Wilkins-Diehr
 
DHO Intro to CMS for DH Workshop
DHO Intro to CMS for DH WorkshopDHO Intro to CMS for DH Workshop
DHO Intro to CMS for DH WorkshopShawn Day
 

Similar a Ramp it up! Action-based guide to creating accessible websites (20)

Web Accessibility: Understanding & Practice!
Web Accessibility: Understanding & Practice!Web Accessibility: Understanding & Practice!
Web Accessibility: Understanding & Practice!
 
Integrating universal design, best practices, & accessibility atia 2013
Integrating universal design, best practices, & accessibility   atia 2013Integrating universal design, best practices, & accessibility   atia 2013
Integrating universal design, best practices, & accessibility atia 2013
 
Designing for Everybody Workshop
Designing for Everybody WorkshopDesigning for Everybody Workshop
Designing for Everybody Workshop
 
Ud in curriculum ahead 2013
Ud in curriculum   ahead 2013Ud in curriculum   ahead 2013
Ud in curriculum ahead 2013
 
(COLTT 2018) Teaching Accessibility and Inclusive Design in Higher Education ...
(COLTT 2018) Teaching Accessibility and Inclusive Design in Higher Education ...(COLTT 2018) Teaching Accessibility and Inclusive Design in Higher Education ...
(COLTT 2018) Teaching Accessibility and Inclusive Design in Higher Education ...
 
Integrating universal design, best practices, & accessibility atia 2013 - (...
Integrating universal design, best practices, & accessibility   atia 2013 - (...Integrating universal design, best practices, & accessibility   atia 2013 - (...
Integrating universal design, best practices, & accessibility atia 2013 - (...
 
Ud in-curriculum-4 ahead-2018-solo
Ud in-curriculum-4 ahead-2018-soloUd in-curriculum-4 ahead-2018-solo
Ud in-curriculum-4 ahead-2018-solo
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008
 
Web Accessibility and Older People - not as straighforward as you think?
Web Accessibility and Older People - not as straighforward as you think?Web Accessibility and Older People - not as straighforward as you think?
Web Accessibility and Older People - not as straighforward as you think?
 
Teach Accessibility and Universal Design in Higher Education (AHEAD 2017)
Teach Accessibility and Universal Design in Higher Education (AHEAD 2017)Teach Accessibility and Universal Design in Higher Education (AHEAD 2017)
Teach Accessibility and Universal Design in Higher Education (AHEAD 2017)
 
Increasing access to professional development
Increasing access to professional developmentIncreasing access to professional development
Increasing access to professional development
 
Teaching Accessibility and Universal Design in Higher Education - COLTT 2017
Teaching Accessibility and Universal Design in Higher Education - COLTT 2017Teaching Accessibility and Universal Design in Higher Education - COLTT 2017
Teaching Accessibility and Universal Design in Higher Education - COLTT 2017
 
Preview Class Handout "
Preview Class Handout "Preview Class Handout "
Preview Class Handout "
 
Teaching web accessibility at the source
Teaching web accessibility at the sourceTeaching web accessibility at the source
Teaching web accessibility at the source
 
Accessibility Overview - 508 and WCAG Compliance
Accessibility Overview - 508 and WCAG ComplianceAccessibility Overview - 508 and WCAG Compliance
Accessibility Overview - 508 and WCAG Compliance
 
Teaching Accessibility and Universal Design in Higher Education Curriculum - ...
Teaching Accessibility and Universal Design in Higher Education Curriculum - ...Teaching Accessibility and Universal Design in Higher Education Curriculum - ...
Teaching Accessibility and Universal Design in Higher Education Curriculum - ...
 
#econfpsu16 - Building a Central Digital Services Team
#econfpsu16 - Building a Central Digital Services Team #econfpsu16 - Building a Central Digital Services Team
#econfpsu16 - Building a Central Digital Services Team
 
The Accessible Web
The Accessible WebThe Accessible Web
The Accessible Web
 
SGCI at Center for Trustworthy Scientific Cyberinfrastructure workshop
SGCI at Center for Trustworthy Scientific Cyberinfrastructure workshopSGCI at Center for Trustworthy Scientific Cyberinfrastructure workshop
SGCI at Center for Trustworthy Scientific Cyberinfrastructure workshop
 
DHO Intro to CMS for DH Workshop
DHO Intro to CMS for DH WorkshopDHO Intro to CMS for DH Workshop
DHO Intro to CMS for DH Workshop
 

Último

2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 

Último (20)

2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 

Ramp it up! Action-based guide to creating accessible websites

  • 1. Ramp it up! Action-based guide to creating accessible websites Taliesin L. Smith – terracoda.ca/ramp MDes. Candidate 2016, Inclusive Design, OCAD University
  • 3. Web Content Accessibility Guidelines Layers of the WCAG ● 4 Principles – 12 Guidelines – 61 Success Criteria – 3 Levels of compliance: A, AA, AAA Source: WCAG 2.0
  • 4. Focus on the POUR Principles ● Perceivable – Users must be able to perceive the information being presented ● Operable – Users must be able to operate the interface ● Understandable – Users must be able to understand the information as well as the operation of the user interface ● Robust – Users must be able to access the content when technologies change
  • 5. What barriers do websites have?
  • 6. Accessible design decisions create the ramp
  • 8. Use unique & meaningful words for links
  • 11. Other media may require external resources
  • 12. Rethinking disability & accessibility Mismatch user + barrier = disability Accessibility The ability of the system to accommodate the needs of the user.
  • 13. The Web is for everyone (Horton & Quesenbery) Jacob, Trevor & Steven: Do they have a disability if they are able to accomplish their goals? (rosenfeldmedia.com) Assistive technologies: Refreshable Brail display (wikipedia.org), Kurzweil 3000, hands-free smart phone stand (hongkiat.com)
  • 14. It takes awareness, skills & resources
  • 15. Full guide & references at ● My website: Terracoda.ca/ramp ● Contact me: talilief@gmail.com