Accessibility Now: What Developers Need to Know About Inclusive Design

Patti Arouni & John Contarino
Geographic Solutions
Making Your
Online Services
Accessible to
All Users
Accessibility Now: What Developers Need to Know About Inclusive Design
3
Accessibility is the practice of making your websites usable by
as many people as possible.
You could also think of accessibility as treating everyone the
same, and giving them the same opportunities, regardless of
ability or circumstance.
4
• People with disabilities:
• conduct personal banking
• make restaurant reservations
• access government benefits
• apply for college, shop online, read the news, play online games, and anything
else that is available on the web.
• You: improved Search Engine Optimization (SEO).
• You: Demonstrates good ethics/morals, which improves your public image.
• Other groups, such as mobile phone users, those on a low speed network, etc.
• In fact, everyone can benefit from such improvements.
Accessibility Now: What Developers Need to Know About Inclusive Design
6
• Section 508 of the Rehabilitation Act of 1973, as Amended
(Section 508)
• Americans With Disabilities Act of 1990, as Amended (ADA)
• Web Content Accessibility Guidelines 2.0 (WCAG 2.0)
Accessibility Now: What Developers Need to Know About Inclusive Design
Section 508
8
Section 508 of the Rehabilitation Act as amended, 29 U.S.C. Section 794d,
requires all digital materials developed, procured, maintained, or used by
Federal agencies be accessible to people with disabilities, and that the access
be comparable to the access and use by those without disabilities. The
accessibility requirements noted within Section 508 build upon the accessibility
guidelines of the W3C for all web-based materials.
Section 508
9
In January 2018, Section 508 was refreshed to more
closely align with the Principles and Guidelines of
WCAG 2.0.
Accessibility Now: What Developers Need to Know About Inclusive Design
ADA
11
The Department of Justice (DOJ) published the Americans with
Disabilities Act (ADA) Standards for Accessible Design in
September 2010. These standards state that all electronic
information must be accessible to people with disabilities.
Who is Affected?
12
• Americans with disabilities and their friends, families,
and caregivers
• Private employers with 15 or more employees
• Businesses operating for the benefit of the public
• All state and local government agencies
What Does it Mean to Me?
13
Websites and electronic information must be
accessible to all users and compliant with the ADA.
How Do We Comply with the ADA?
14
Organizations are encouraged to use the WCAG 2.0 level AA
guidelines as a guide on how to become accessible.
Accessibility Now: What Developers Need to Know About Inclusive Design
What is WCAG 2.0?
16
Web Content Accessibility Guidelines (WCAG) is developed through
the World Wide Web Consortium (W3C), with a goal of providing a single
shared standard for web content accessibility that meets the needs of
individuals, organizations, and governments internationally.
Who is Affected by WCAG 2.0?
17
People with disabilities, including:
• Blindness and low vision
• Deafness and hearing loss
• Learning disabilities
• Cognitive limitations
• Limited movement
• Speech disabilities
• Photosensitivity
• Combinations of the above
How do we Comply with WCAG 2.0?
18
Accessibility is a continuous process, with
contributions by every department. By following the
WCAG 2.0, websites and products can be accessible
to all users, regardless of their ability.
Accessibility Now: What Developers Need to Know About Inclusive Design
20
• Perceivable
• Operable
• Understandable
• Robust
Accessibility Now: What Developers Need to Know About Inclusive Design
Perceivable
22
Users must be able to perceive your website
content, regardless of their abilities and the
manner in which they perceive it.
How Do We Do That?
23
• Provide text alternatives for non-text content
• Provide alternatives for time-based media
• Create content that is presentable in different
ways without loss of function
• Make it easier for users to see and hear content
Accessibility Now: What Developers Need to Know About Inclusive Design
Operable
25
Operability is about making the input methods of web content functionally
available to a wide range of input devices, including:
• Mouse or touchpad
• Keyboard
• Touchscreen
• Voice recognition software
• Other specialized input devices (most of which emulate the keyboard
or mouse)
How Do We Do That?
26
• Make it keyboard accessible
• Provide enough time
• Avoid seizure-causing content
• Provide skip to main content links
• Provide proper descriptive page titles
• Ensure proper focus order
• Provide descriptive link text
• Ensure focus is indicated
Accessibility Now: What Developers Need to Know About Inclusive Design
Understandable
28
The information and operation of the user
interface must be understandable to users
AND assistive technology.
How Do We Do That?
29
• Make it readable
• Make it appear and operate in a
predictable way
• Provide input assistance
Accessibility Now: What Developers Need to Know About Inclusive Design
What Does it Mean?
31
Content must be robust enough that it can be
interpreted reliably by a wide variety of user
agents, including assistive technologies.
How Do We Do That?
32
• Make it syntactically correct
• ARIA – use Name, Role, Value for
user interface components (if not
provided by HTML5)
Accessibility Now: What Developers Need to Know About Inclusive Design
34
• Color Blindness
• Vision
• Hearing
• Motor Skills
• Cognitive
Accessibility Now: What Developers Need to Know About Inclusive Design
36
Color blindness means a person’s
perception of colors is different from what
most of us see.
What is Color Blindness?
37
This is what a non color blind
person would see.
Non Color Blind View
38
This is what a red color blind
person would see.
Red Color Blind View
39
This is what a green color blind
person would see.
Red Color Blind View
40
Side-by-Side Comparison:
Green Color Blind ViewRed Color Blind ViewNon Color Blind View
Accessibility Now: What Developers Need to Know About Inclusive Design
What is Vision Impairment?
42
Vision impairment is defined as a limitation of one
or more functions of the eye (or visual system). The
most common vision impairments affect the
sharpness or clarity of vision.
Types of Vision Impairment
43
• Low vision
• Macular degeneration
• Cataracts
• Glaucoma
• Total vision loss
44
Mild Low Vision
45
Moderate Low Vision
46
Serious Low Vision
47
Macular Degeneration
48
Cataracts
49
Glaucoma
Accessibility Now: What Developers Need to Know About Inclusive Design
What is Hearing Impairment?
51
Hearing impairment, or hearing loss, occurs when you lose part or
all of your ability to hear. Hearing impairments are classified
based on the severity and type of hearing impairment. The severity
of hearing impairment can be mild, moderate, severe, or profound.
Accessibility Now: What Developers Need to Know About Inclusive Design
What is a Motor Skills Impairment?
53
Motor skills impairment may prevent a user
from being able to use a mouse, click on small
links, or operate dynamic elements effectively.
Accessibility Now: What Developers Need to Know About Inclusive Design
What is a Cognitive Impairment?
55
By far the most common type of disability is a cognitive disability.
Cognitive impairment comes in many different forms. Autism,
dyslexia, limited comprehension, limited problem-solving skills,
short term memory loss, and attention deficit are just a few of the
disabilities that fall under this spectrum.
Accessibility Now: What Developers Need to Know About Inclusive Design
57
• Keyboard Only
• Screen Readers
• Enlarging Text
• Captioning
• User Settings
*This list is not all-inclusive
Accessibility Now: What Developers Need to Know About Inclusive Design
Keyboard Only
59
Anything a user can do with a mouse, they
should be able to do using only the keyboard.
60
1. Starting Point Alt+D
Navigates to the URL field
2. Tab Key
Navigating around the page
3. Shift+Tab
Navigate to the previous focusable element
4. Skip to Main Content Alt+2
5. Skip to Page Footer Alt+3
6. Select Drop Down List
Alt+Arrow Down opens list
Arrow Up or Down to navigate through items
OR
Without opening Arrow Up or Down to navigate
through items
61
7. Radio Buttons
Arrow between radio buttons.
8. Check Boxes
Space key will check and uncheck
9. Navigate Page Backwards
Alt + Left Arrow
10. Navigate Page Forwards
Alt + Right Arrow
11. Zoom In web page
Crtl + Plus Key
12. Zoom Out web page
Crtl + Minus Key
13. Reset Zoom to 100%
Ctrl + 0 (zero)
62
14. Refresh Page
F5
OR
Crtl + F5 – Clears cache and refresh page
15. Text Editing
Crtl + A = Select All
Crtl + C = Copy
Crtl + X = Cut
Crtl + V = Paste copied contents
Accessibility Now: What Developers Need to Know About Inclusive Design
What are Screen Readers?
64
A screen reader transmits whatever text is displayed on the
computer screen into a form that a visually impaired user can
process (usually tactile, auditory or a combination of both).
What Screen Readers are Available?
65
These are the four most commonly-used screen readers:
• JAWS (Job Access With Speech)
• NVDA (NonVisual Desktop Access)
• Apple VoiceOver
• Microsoft Narrator
Accessibility Now: What Developers Need to Know About Inclusive Design
Text Enlargement
67
WCAG 2.0 requires a user to be able to enlarge text to 200%
without losing content or functionality.
WCAG 2.1 (Recommendation as of June 5, 2018) requires a
400% enlargement of text.
What Text Enlargers Are Available?
68
• Windows Operating System (Ctrl+plus sign)
• MAC Operating System (Command+plus
sign)
• ZoomText (AiSquared)
• MAGic (Freedom Scientific)
• Many Others
Accessibility Now: What Developers Need to Know About Inclusive Design
Captioning
70
WCAG 2.0 requires that captions be provided for
all prerecorded audio content in synchronized
media, except when the media is a media
alternative for text and is clearly labeled as such.
Accessibility Now: What Developers Need to Know About Inclusive Design
User Settings
72
User controlled settings is functionality that allows users to choose (or
set) the website settings to what’s most comfortable for them. For
example, allowing the user to change contrast, select or set the font
size, and change font colors are just some examples of how a user can
create a user experience customized to their needs.
Questions and Contact Information
Corporate Headquarters:
1001 Omaha Circle - Palm Harbor, FL 34683
Phone: 727-786-7955 – Fax: 727-786-5871
Patti Arouni
Lead Programmer/Analyst
Accessibility Services Team
PArouni@geosolinc.com
West Coast Office:
234 Capitol Street, SuiteA – Salinas, CA 93901
Phone: 831-757-4400 – Fax: 831-757-4401
www.GeographicSolutions.com
John Contarino
Programmer/Analyst
Accessibility Services Team
JContarino@geosolinc.com
73
1 de 73

Recomendados

Including Everyone: Web Accessibility 101 por
Including Everyone: Web Accessibility 101Including Everyone: Web Accessibility 101
Including Everyone: Web Accessibility 101Helena Zubkow
3.5K vistas48 diapositivas
Web Accessibility por
Web AccessibilityWeb Accessibility
Web AccessibilityAmal Abduallah
1.3K vistas52 diapositivas
Accessibility in Agile Projects por
Accessibility in Agile ProjectsAccessibility in Agile Projects
Accessibility in Agile ProjectsAdrian Redden
200 vistas42 diapositivas
What is Web Accessibility? An Introduction to Web Accessibility. por
What is Web Accessibility? An Introduction to Web Accessibility.What is Web Accessibility? An Introduction to Web Accessibility.
What is Web Accessibility? An Introduction to Web Accessibility.Christopher Positive Equator
253 vistas20 diapositivas
Web Accessibility por
Web AccessibilityWeb Accessibility
Web AccessibilityZoe Gillenwater
2K vistas65 diapositivas
Web Accessibility for Web Developers por
Web Accessibility for Web DevelopersWeb Accessibility for Web Developers
Web Accessibility for Web DevelopersAlexander Loechel
849 vistas31 diapositivas

Más contenido relacionado

La actualidad más candente

Assistive Technology past present and future por
Assistive Technology past present and futureAssistive Technology past present and future
Assistive Technology past present and futureDavid Banes
1.7K vistas25 diapositivas
Accessibility and Technical Communication por
Accessibility and Technical CommunicationAccessibility and Technical Communication
Accessibility and Technical CommunicationSTC-Philadelphia Metro Chapter
1K vistas25 diapositivas
What is accessibility? por
What is accessibility?What is accessibility?
What is accessibility?Russ Weakley
5.3K vistas100 diapositivas
Web Accessibility & Usability Principle por
Web Accessibility & Usability PrincipleWeb Accessibility & Usability Principle
Web Accessibility & Usability PrincipleAnuragKumar680
22 vistas19 diapositivas
Introduction to mobile accessibility, 2015 por
Introduction to mobile accessibility, 2015Introduction to mobile accessibility, 2015
Introduction to mobile accessibility, 2015Henny Swan
4.8K vistas180 diapositivas
Impact of-accessibility-on-technical-writing por
Impact of-accessibility-on-technical-writingImpact of-accessibility-on-technical-writing
Impact of-accessibility-on-technical-writingMohammad Qais Mujeeb, PMP
3.4K vistas32 diapositivas

La actualidad más candente(19)

Assistive Technology past present and future por David Banes
Assistive Technology past present and futureAssistive Technology past present and future
Assistive Technology past present and future
David Banes1.7K vistas
What is accessibility? por Russ Weakley
What is accessibility?What is accessibility?
What is accessibility?
Russ Weakley5.3K vistas
Web Accessibility & Usability Principle por AnuragKumar680
Web Accessibility & Usability PrincipleWeb Accessibility & Usability Principle
Web Accessibility & Usability Principle
AnuragKumar68022 vistas
Introduction to mobile accessibility, 2015 por Henny Swan
Introduction to mobile accessibility, 2015Introduction to mobile accessibility, 2015
Introduction to mobile accessibility, 2015
Henny Swan4.8K vistas
Assistive technology for disabled people in libraries por sanmati1996
Assistive technology for disabled people in librariesAssistive technology for disabled people in libraries
Assistive technology for disabled people in libraries
sanmati19961.5K vistas
Making the Web Accessible por Infosys
Making the Web AccessibleMaking the Web Accessible
Making the Web Accessible
Infosys8.9K vistas
Accessibility Standards and the Mobile Web por mmaertens
Accessibility Standards and the Mobile WebAccessibility Standards and the Mobile Web
Accessibility Standards and the Mobile Web
mmaertens927 vistas
Web Accessibility: A Shared Responsibility por Joseph Dolson
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared Responsibility
Joseph Dolson4K vistas
Summary Guidelines por twoplayer
Summary GuidelinesSummary Guidelines
Summary Guidelines
twoplayer769 vistas
Udem 2007 Accessibility Standards por sharron
Udem 2007 Accessibility StandardsUdem 2007 Accessibility Standards
Udem 2007 Accessibility Standards
sharron714 vistas
Assistive technologies past present and future - 2015 por David Banes
Assistive technologies   past present and future - 2015Assistive technologies   past present and future - 2015
Assistive technologies past present and future - 2015
David Banes559 vistas
Assistive technology in libraries por RyanRM
Assistive technology in librariesAssistive technology in libraries
Assistive technology in libraries
RyanRM708 vistas

Similar a Accessibility Now: What Developers Need to Know About Inclusive Design

Week 3 Lecture: Accessibility por
Week 3 Lecture: AccessibilityWeek 3 Lecture: Accessibility
Week 3 Lecture: AccessibilityKatherine McCurdy-Lapierre, R.G.D.
2.1K vistas29 diapositivas
Don't Panic! How to perform an accessibility evaluation with limited resources por
Don't Panic! How to perform an accessibility evaluation with limited resourcesDon't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resourcesMichael Ryan
1.6K vistas47 diapositivas
Usability ≠ Accessibility. An intro to web accessibility for agencies. por
Usability ≠ Accessibility. An intro to web accessibility for agencies.Usability ≠ Accessibility. An intro to web accessibility for agencies.
Usability ≠ Accessibility. An intro to web accessibility for agencies.Kate Horowitz
807 vistas122 diapositivas
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ... por
UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA International
374 vistas39 diapositivas
UX Akron Global Accessibility Awareness Day 2019 por
UX Akron Global Accessibility Awareness Day 2019UX Akron Global Accessibility Awareness Day 2019
UX Akron Global Accessibility Awareness Day 2019Joshua Randall
107 vistas34 diapositivas
Digital accessibility intro-a11ycle_2020-01-15 por
Digital accessibility intro-a11ycle_2020-01-15Digital accessibility intro-a11ycle_2020-01-15
Digital accessibility intro-a11ycle_2020-01-15Joshua Randall
94 vistas72 diapositivas

Similar a Accessibility Now: What Developers Need to Know About Inclusive Design(20)

Don't Panic! How to perform an accessibility evaluation with limited resources por Michael Ryan
Don't Panic! How to perform an accessibility evaluation with limited resourcesDon't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resources
Michael Ryan1.6K vistas
Usability ≠ Accessibility. An intro to web accessibility for agencies. por Kate Horowitz
Usability ≠ Accessibility. An intro to web accessibility for agencies.Usability ≠ Accessibility. An intro to web accessibility for agencies.
Usability ≠ Accessibility. An intro to web accessibility for agencies.
Kate Horowitz807 vistas
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ... por UXPA International
UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA International 374 vistas
UX Akron Global Accessibility Awareness Day 2019 por Joshua Randall
UX Akron Global Accessibility Awareness Day 2019UX Akron Global Accessibility Awareness Day 2019
UX Akron Global Accessibility Awareness Day 2019
Joshua Randall107 vistas
Digital accessibility intro-a11ycle_2020-01-15 por Joshua Randall
Digital accessibility intro-a11ycle_2020-01-15Digital accessibility intro-a11ycle_2020-01-15
Digital accessibility intro-a11ycle_2020-01-15
Joshua Randall94 vistas
Designing, Developing & Testing for Accessibility por Eric Malcolm
Designing, Developing & Testing for AccessibilityDesigning, Developing & Testing for Accessibility
Designing, Developing & Testing for Accessibility
Eric Malcolm248 vistas
Designing and Testing for Digital Accessibility por Usability Matters
Designing and Testing for Digital AccessibilityDesigning and Testing for Digital Accessibility
Designing and Testing for Digital Accessibility
Usability Matters2.1K vistas
Accessibility Overview - 508 and WCAG Compliance por Frank Walsh
Accessibility Overview - 508 and WCAG ComplianceAccessibility Overview - 508 and WCAG Compliance
Accessibility Overview - 508 and WCAG Compliance
Frank Walsh559 vistas
Digital Accessibility: What Local Governments Should Know por MarketingeScribe
Digital Accessibility: What Local Governments Should KnowDigital Accessibility: What Local Governments Should Know
Digital Accessibility: What Local Governments Should Know
MarketingeScribe20 vistas
Website Accessibility: It’s the Right Thing to do por DesignHammer
Website Accessibility: It’s the Right Thing to doWebsite Accessibility: It’s the Right Thing to do
Website Accessibility: It’s the Right Thing to do
DesignHammer774 vistas
Digital accessibility intro 2021 por Joshua Randall
Digital accessibility intro 2021Digital accessibility intro 2021
Digital accessibility intro 2021
Joshua Randall106 vistas
Website Accessibility por Nishan Bose
Website AccessibilityWebsite Accessibility
Website Accessibility
Nishan Bose1.8K vistas
UX recommendations for publishers por OpenAthens
UX recommendations for publishersUX recommendations for publishers
UX recommendations for publishers
OpenAthens54 vistas
Accessibility importance por Krishna Vutla
Accessibility importanceAccessibility importance
Accessibility importance
Krishna Vutla195 vistas
Modern web development and accessibility (Christina Papadimitriou, Nadia Mark... por GreeceJS
Modern web development and accessibility (Christina Papadimitriou, Nadia Mark...Modern web development and accessibility (Christina Papadimitriou, Nadia Mark...
Modern web development and accessibility (Christina Papadimitriou, Nadia Mark...
GreeceJS399 vistas
doumi94 por doumi94
doumi94doumi94
doumi94
doumi94576 vistas

Último

predicting-m3-devopsconMunich-2023.pptx por
predicting-m3-devopsconMunich-2023.pptxpredicting-m3-devopsconMunich-2023.pptx
predicting-m3-devopsconMunich-2023.pptxTier1 app
10 vistas24 diapositivas
JioEngage_Presentation.pptx por
JioEngage_Presentation.pptxJioEngage_Presentation.pptx
JioEngage_Presentation.pptxadmin125455
9 vistas4 diapositivas
Electronic AWB - Electronic Air Waybill por
Electronic AWB - Electronic Air Waybill Electronic AWB - Electronic Air Waybill
Electronic AWB - Electronic Air Waybill Freightoscope
6 vistas1 diapositiva
Techstack Ltd at Slush 2023, Ukrainian delegation por
Techstack Ltd at Slush 2023, Ukrainian delegationTechstack Ltd at Slush 2023, Ukrainian delegation
Techstack Ltd at Slush 2023, Ukrainian delegationViktoriiaOpanasenko
7 vistas4 diapositivas
How to build dyanmic dashboards and ensure they always work por
How to build dyanmic dashboards and ensure they always workHow to build dyanmic dashboards and ensure they always work
How to build dyanmic dashboards and ensure they always workWiiisdom
16 vistas13 diapositivas
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile... por
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...Stefan Wolpers
44 vistas38 diapositivas

Último(20)

predicting-m3-devopsconMunich-2023.pptx por Tier1 app
predicting-m3-devopsconMunich-2023.pptxpredicting-m3-devopsconMunich-2023.pptx
predicting-m3-devopsconMunich-2023.pptx
Tier1 app10 vistas
JioEngage_Presentation.pptx por admin125455
JioEngage_Presentation.pptxJioEngage_Presentation.pptx
JioEngage_Presentation.pptx
admin1254559 vistas
Electronic AWB - Electronic Air Waybill por Freightoscope
Electronic AWB - Electronic Air Waybill Electronic AWB - Electronic Air Waybill
Electronic AWB - Electronic Air Waybill
Freightoscope 6 vistas
How to build dyanmic dashboards and ensure they always work por Wiiisdom
How to build dyanmic dashboards and ensure they always workHow to build dyanmic dashboards and ensure they always work
How to build dyanmic dashboards and ensure they always work
Wiiisdom16 vistas
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile... por Stefan Wolpers
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...
Stefan Wolpers44 vistas
tecnologia18.docx por nosi6702
tecnologia18.docxtecnologia18.docx
tecnologia18.docx
nosi67026 vistas
Top-5-production-devconMunich-2023.pptx por Tier1 app
Top-5-production-devconMunich-2023.pptxTop-5-production-devconMunich-2023.pptx
Top-5-production-devconMunich-2023.pptx
Tier1 app10 vistas
Mobile App Development Company por Richestsoft
Mobile App Development CompanyMobile App Development Company
Mobile App Development Company
Richestsoft 5 vistas
Supercharging your Python Development Environment with VS Code and Dev Contai... por Dawn Wages
Supercharging your Python Development Environment with VS Code and Dev Contai...Supercharging your Python Development Environment with VS Code and Dev Contai...
Supercharging your Python Development Environment with VS Code and Dev Contai...
Dawn Wages5 vistas
Quality Engineer: A Day in the Life por John Valentino
Quality Engineer: A Day in the LifeQuality Engineer: A Day in the Life
Quality Engineer: A Day in the Life
John Valentino10 vistas
Unlocking the Power of AI in Product Management - A Comprehensive Guide for P... por NimaTorabi2
Unlocking the Power of AI in Product Management - A Comprehensive Guide for P...Unlocking the Power of AI in Product Management - A Comprehensive Guide for P...
Unlocking the Power of AI in Product Management - A Comprehensive Guide for P...
NimaTorabi217 vistas
Streamlining Your Business Operations with Enterprise Application Integration... por Flexsin
Streamlining Your Business Operations with Enterprise Application Integration...Streamlining Your Business Operations with Enterprise Application Integration...
Streamlining Your Business Operations with Enterprise Application Integration...
Flexsin 5 vistas
Transport Management System - Shipment & Container Tracking por Freightoscope
Transport Management System - Shipment & Container TrackingTransport Management System - Shipment & Container Tracking
Transport Management System - Shipment & Container Tracking
Freightoscope 6 vistas
Advanced API Mocking Techniques Using Wiremock por Dimpy Adhikary
Advanced API Mocking Techniques Using WiremockAdvanced API Mocking Techniques Using Wiremock
Advanced API Mocking Techniques Using Wiremock
Dimpy Adhikary5 vistas
Introduction to Git Source Control por John Valentino
Introduction to Git Source ControlIntroduction to Git Source Control
Introduction to Git Source Control
John Valentino8 vistas

Accessibility Now: What Developers Need to Know About Inclusive Design

  • 1. Patti Arouni & John Contarino Geographic Solutions Making Your Online Services Accessible to All Users
  • 3. 3 Accessibility is the practice of making your websites usable by as many people as possible. You could also think of accessibility as treating everyone the same, and giving them the same opportunities, regardless of ability or circumstance.
  • 4. 4 • People with disabilities: • conduct personal banking • make restaurant reservations • access government benefits • apply for college, shop online, read the news, play online games, and anything else that is available on the web. • You: improved Search Engine Optimization (SEO). • You: Demonstrates good ethics/morals, which improves your public image. • Other groups, such as mobile phone users, those on a low speed network, etc. • In fact, everyone can benefit from such improvements.
  • 6. 6 • Section 508 of the Rehabilitation Act of 1973, as Amended (Section 508) • Americans With Disabilities Act of 1990, as Amended (ADA) • Web Content Accessibility Guidelines 2.0 (WCAG 2.0)
  • 8. Section 508 8 Section 508 of the Rehabilitation Act as amended, 29 U.S.C. Section 794d, requires all digital materials developed, procured, maintained, or used by Federal agencies be accessible to people with disabilities, and that the access be comparable to the access and use by those without disabilities. The accessibility requirements noted within Section 508 build upon the accessibility guidelines of the W3C for all web-based materials.
  • 9. Section 508 9 In January 2018, Section 508 was refreshed to more closely align with the Principles and Guidelines of WCAG 2.0.
  • 11. ADA 11 The Department of Justice (DOJ) published the Americans with Disabilities Act (ADA) Standards for Accessible Design in September 2010. These standards state that all electronic information must be accessible to people with disabilities.
  • 12. Who is Affected? 12 • Americans with disabilities and their friends, families, and caregivers • Private employers with 15 or more employees • Businesses operating for the benefit of the public • All state and local government agencies
  • 13. What Does it Mean to Me? 13 Websites and electronic information must be accessible to all users and compliant with the ADA.
  • 14. How Do We Comply with the ADA? 14 Organizations are encouraged to use the WCAG 2.0 level AA guidelines as a guide on how to become accessible.
  • 16. What is WCAG 2.0? 16 Web Content Accessibility Guidelines (WCAG) is developed through the World Wide Web Consortium (W3C), with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.
  • 17. Who is Affected by WCAG 2.0? 17 People with disabilities, including: • Blindness and low vision • Deafness and hearing loss • Learning disabilities • Cognitive limitations • Limited movement • Speech disabilities • Photosensitivity • Combinations of the above
  • 18. How do we Comply with WCAG 2.0? 18 Accessibility is a continuous process, with contributions by every department. By following the WCAG 2.0, websites and products can be accessible to all users, regardless of their ability.
  • 20. 20 • Perceivable • Operable • Understandable • Robust
  • 22. Perceivable 22 Users must be able to perceive your website content, regardless of their abilities and the manner in which they perceive it.
  • 23. How Do We Do That? 23 • Provide text alternatives for non-text content • Provide alternatives for time-based media • Create content that is presentable in different ways without loss of function • Make it easier for users to see and hear content
  • 25. Operable 25 Operability is about making the input methods of web content functionally available to a wide range of input devices, including: • Mouse or touchpad • Keyboard • Touchscreen • Voice recognition software • Other specialized input devices (most of which emulate the keyboard or mouse)
  • 26. How Do We Do That? 26 • Make it keyboard accessible • Provide enough time • Avoid seizure-causing content • Provide skip to main content links • Provide proper descriptive page titles • Ensure proper focus order • Provide descriptive link text • Ensure focus is indicated
  • 28. Understandable 28 The information and operation of the user interface must be understandable to users AND assistive technology.
  • 29. How Do We Do That? 29 • Make it readable • Make it appear and operate in a predictable way • Provide input assistance
  • 31. What Does it Mean? 31 Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
  • 32. How Do We Do That? 32 • Make it syntactically correct • ARIA – use Name, Role, Value for user interface components (if not provided by HTML5)
  • 34. 34 • Color Blindness • Vision • Hearing • Motor Skills • Cognitive
  • 36. 36 Color blindness means a person’s perception of colors is different from what most of us see. What is Color Blindness?
  • 37. 37 This is what a non color blind person would see. Non Color Blind View
  • 38. 38 This is what a red color blind person would see. Red Color Blind View
  • 39. 39 This is what a green color blind person would see. Red Color Blind View
  • 40. 40 Side-by-Side Comparison: Green Color Blind ViewRed Color Blind ViewNon Color Blind View
  • 42. What is Vision Impairment? 42 Vision impairment is defined as a limitation of one or more functions of the eye (or visual system). The most common vision impairments affect the sharpness or clarity of vision.
  • 43. Types of Vision Impairment 43 • Low vision • Macular degeneration • Cataracts • Glaucoma • Total vision loss
  • 51. What is Hearing Impairment? 51 Hearing impairment, or hearing loss, occurs when you lose part or all of your ability to hear. Hearing impairments are classified based on the severity and type of hearing impairment. The severity of hearing impairment can be mild, moderate, severe, or profound.
  • 53. What is a Motor Skills Impairment? 53 Motor skills impairment may prevent a user from being able to use a mouse, click on small links, or operate dynamic elements effectively.
  • 55. What is a Cognitive Impairment? 55 By far the most common type of disability is a cognitive disability. Cognitive impairment comes in many different forms. Autism, dyslexia, limited comprehension, limited problem-solving skills, short term memory loss, and attention deficit are just a few of the disabilities that fall under this spectrum.
  • 57. 57 • Keyboard Only • Screen Readers • Enlarging Text • Captioning • User Settings *This list is not all-inclusive
  • 59. Keyboard Only 59 Anything a user can do with a mouse, they should be able to do using only the keyboard.
  • 60. 60 1. Starting Point Alt+D Navigates to the URL field 2. Tab Key Navigating around the page 3. Shift+Tab Navigate to the previous focusable element 4. Skip to Main Content Alt+2 5. Skip to Page Footer Alt+3 6. Select Drop Down List Alt+Arrow Down opens list Arrow Up or Down to navigate through items OR Without opening Arrow Up or Down to navigate through items
  • 61. 61 7. Radio Buttons Arrow between radio buttons. 8. Check Boxes Space key will check and uncheck 9. Navigate Page Backwards Alt + Left Arrow 10. Navigate Page Forwards Alt + Right Arrow 11. Zoom In web page Crtl + Plus Key 12. Zoom Out web page Crtl + Minus Key 13. Reset Zoom to 100% Ctrl + 0 (zero)
  • 62. 62 14. Refresh Page F5 OR Crtl + F5 – Clears cache and refresh page 15. Text Editing Crtl + A = Select All Crtl + C = Copy Crtl + X = Cut Crtl + V = Paste copied contents
  • 64. What are Screen Readers? 64 A screen reader transmits whatever text is displayed on the computer screen into a form that a visually impaired user can process (usually tactile, auditory or a combination of both).
  • 65. What Screen Readers are Available? 65 These are the four most commonly-used screen readers: • JAWS (Job Access With Speech) • NVDA (NonVisual Desktop Access) • Apple VoiceOver • Microsoft Narrator
  • 67. Text Enlargement 67 WCAG 2.0 requires a user to be able to enlarge text to 200% without losing content or functionality. WCAG 2.1 (Recommendation as of June 5, 2018) requires a 400% enlargement of text.
  • 68. What Text Enlargers Are Available? 68 • Windows Operating System (Ctrl+plus sign) • MAC Operating System (Command+plus sign) • ZoomText (AiSquared) • MAGic (Freedom Scientific) • Many Others
  • 70. Captioning 70 WCAG 2.0 requires that captions be provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
  • 72. User Settings 72 User controlled settings is functionality that allows users to choose (or set) the website settings to what’s most comfortable for them. For example, allowing the user to change contrast, select or set the font size, and change font colors are just some examples of how a user can create a user experience customized to their needs.
  • 73. Questions and Contact Information Corporate Headquarters: 1001 Omaha Circle - Palm Harbor, FL 34683 Phone: 727-786-7955 – Fax: 727-786-5871 Patti Arouni Lead Programmer/Analyst Accessibility Services Team PArouni@geosolinc.com West Coast Office: 234 Capitol Street, SuiteA – Salinas, CA 93901 Phone: 831-757-4400 – Fax: 831-757-4401 www.GeographicSolutions.com John Contarino Programmer/Analyst Accessibility Services Team JContarino@geosolinc.com 73

Notas del editor

  1. This session is Making Your Online Services Accessible to All Users
  2. Web Accessibility Compliance
  3. Section 508 of the Rehabilitation Act of 1973, as Amended (Section 508) Americans With Disabilities Act of 1990, as Amended (ADA) Web Accessibility Web Content Accessibility Guidelines 2.0 (WCAG 2.0)
  4. Section 508
  5. John demo