SlideShare a Scribd company logo
1 of 62
Download to read offline
Summary
Throughout history, JS has been pointed out as the villain when the matter is
accessible websites.
By presenting some tricks and techniques, we plan to provoke this
discussion among developers and show that Accessibility and JS may live
together, as long as you take the right steps.
Accessibility and JS: side-by-side
Overview
● Why Should I invest on Accessibility?
● What is Accessibility?
● Who needs Accessibility?
● Essential things about the documentation
● User Agents: Do you know them?
● Barriers between Accessibility and JavaScript
● The great secret of accessible applications
#1
Why Should I invest on
Accessibility?
According to UN
650 Million
have some kind of disabilities
Many people around the world
In Brazil are over
According to IBGE
45.6 Million
people could be using your application.
Business opportunity
Who wouldn´t wanted to have
23%
of a population as possible clients?
The world cannot be excluded from great minds
When we talk about accessibility
#2
What is Accessibility?
It´s basically create or turn it accessible
for the largest number of users, mainly
for those with special needs
What would be an accessible application?
Anything isn’t enough
accessible that
couldn’t be improved
New accessibility
Passive
Robotic
Dependent
Impotent
Able
Active
Independent
Engajed
#3
Who needs accessibility?
Who needs accessibility?
Who needs accessibility?
Videos with subtitles
#4
Essential things about the
documentation
• W3C (World Wide Web Consortium)
• WAI (Web Accessibility Initiative)
• WCAG (Web Content Accessibility
Guidelines)
• WAI-ARIA(Accessible Rich Internet
Applications)
Alphabet soup
• ATAG (Authoring Tool
Accessibility Guidelines)
• UAAG(User Agent Accessibility
Guidelines)
• eMAG (Brazil´s e-gov model of
accessibility)
Most part of the material is produced by W3C and by institutions interested on
internet development as a whole. The idea is to have internet for all people.
Robust
Understandable
Operable
Perceivable
WCAG 4 Basic principles
WCAG #4.1 Perceivable
● Distinguishable information
● Text Alternatives
● Adaptable
● Time-based Media
WCAG #4.2 Operable
● Navigable
● Keyboard Accessible
● Seizures
● Enough Time
WCAG #4.3 Understandable
● Readable
● Predictable
● Input Assistance
WCAG #4.4 Robust
Compatible with different
User Agents
#5
Users Agents:
Do you know them?
User agents could be guide dogs
User agents could be web browsers
...But usually Screen Readers
Screen Readers usage
WebAIM 2014
Mobile Screen Reader usage
We have to teach
We need to get connected
The user agents how to speak
Content
Presentation
Interactivity
#6
Barriers between
Accessibility and JavaScript
Accessibility Barriers
According to the University of Minnesota
● Some browsers may not support JavaScript or may have JavaScript
processing disabled.
● Users may be unaware of dynamically changing page content.
● Some AJAX features (widgets) may be difficult or impossible to navigate
using a keyboard alone.
● Some browsers and browser versions may not support AJAX.
● Some browsers and browser versions may not support ARIA standards.
● Some adaptive Technologies may not support AJAX and ARIA.
Accessibility Barriers
According to the University of Minnesota
● Some browsers may not support JavaScript or may have JavaScript
processing disabled.
● Users may be unaware of dynamically changing page content.
● Some AJAX features (widgets) may be difficult or impossible to navigate
using a keyboard alone.
● Some browsers and browser versions may not support AJAX.
● Some browsers and browser versions may not support ARIA standards.
● Some adaptive Technologies may not support AJAX and ARIA.
Summed up in four major problems
01. Browsers do not support JavaScript or it is disabled
02. Developers lack of knowledge in WAI-ARIA practices
03. Rich applications using dynamic content with Ajax
(Asynchronous Javascript and XML)
04. Difficulty or impossibility to navigate using a keyboard
#6.1
Browsers Don’t Support
JavaScript
Browsers Support JavaScript
According to WebAIM 2014, over 97% of screen readers
support and have javascript enabled
97,6%
Enabled
2,4%
Disabled
People use JavaScript and don´t know it!
Fallback strategies to others 2.4%
Provide alternative accessible controls that do not require script processing
A good idea for fallback strategies
Detect Features Instead of Browsers
function registerEvent( sTargetID, sEventName, fnHandler )
{
var oTarget = document.getElementById( sTargetID );
if ( oTarget != null )
{
if ( oTarget.addEventListener ) {
oTarget.addEventListener( sEventName, fnToBeRun, false );
} else {
var sOnEvent = "on" + sEventName;
if ( oTarget.attachEvent )
{
oTarget.attachEvent( sOnEvent, fnHandler );
}
}
}
}
#6.2
Developers lack of knowledge
in WAI-ARIA practices
What is WAI-ARIA
Accessible Rich Internet Applications (ARIA)
defines ways to make Web content and Web
applications (especially those developed with
Ajax and JavaScript) more accessible to
people with disabilities
WAI-ARIA Workflow
The jQuery creator says
ARIA isn’t just a pipe
dream of functionality,
It’s implemented!
John Resig
Use semantic and Landmarks ARIA
The language your
browser likes
to speak!
#6.3
Rich Internet Applications
With Ajax
Asynchronous Javascript and XML
Ajax is a technique for developing
interactive Web Applications
Updating of Web content without
refreshing the whole page
Every modern applications use it
Ajax and Accessibility
aria-live=”polite”
How polite the live area is?
The default is ‘polite’ – in that it waits
until all forms of user interaction have
been completed before describing the
updates to the user.
aria-relevant=”additions removals”
Only notify the user about new node additions and removals.
This will give us the appropriate level of updates to make this
possible.
aria-describedby=”users-desc”
A pointer to the element that describes the contents of
the live area. If the user wishes to know more about
what the contents of the field represent this element
can be read to them.
ARIA Live Regions
#6.4
Difficulty or impossibility to
navigate using a keyboard
Navigations and menus
Users that can´t or don´t want to use the mouse
could use keyboard to navigate on the application!
Insert in the link description
On the description we should avoid generic names such as “click here”, “download”
Write texts that make sense. Even when the monitor is turned off!
Preferred
Avoid
Jim Thatcher
pioneering
Using Links, #hashtags and
some IDs we could link and
navigate in the whole page!
Skip navigation 1998
Skip navigation visual focus
Skip navigation focus
Think beyond the mouse
Semantic menu and ARIA
Show and hide sub-menus
#7
The great secrets of
accessible applications
Accessibility menu
Font size control
High and low contrast
The WEB creator says
Take the Standards to
Keep the Web Free!
Tim Berners-Lee
Complementing Tim
ARIA and Interactive design too!
Felipe Albuquerque
Special thanks to
felipealbuquerque.com
fa@cesar.org.br
@felipedeolinda
Felipe de Albuquerque
Ask me here or by

More Related Content

Viewers also liked (6)

TCP Theory
TCP TheoryTCP Theory
TCP Theory
 
UCLKS Web
UCLKS WebUCLKS Web
UCLKS Web
 
Societas Presentation Sep10
Societas Presentation Sep10Societas Presentation Sep10
Societas Presentation Sep10
 
miss u
miss umiss u
miss u
 
Societas Presentation Feb11
Societas Presentation Feb11Societas Presentation Feb11
Societas Presentation Feb11
 
Academic record didin
Academic record   didinAcademic record   didin
Academic record didin
 

Similar to Accessibility and JS: side-by-side

Similar to Accessibility and JS: side-by-side (20)

Accessibility and why it matters
Accessibility and why it mattersAccessibility and why it matters
Accessibility and why it matters
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Web Content Accessibility Guidelines
Web Content Accessibility GuidelinesWeb Content Accessibility Guidelines
Web Content Accessibility Guidelines
 
Aria interview questions
Aria interview questionsAria interview questions
Aria interview questions
 
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
 
Accessibility Standards and the Mobile Web
Accessibility Standards and the Mobile WebAccessibility Standards and the Mobile Web
Accessibility Standards and the Mobile Web
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
 
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.
Usability ≠ Accessibility. An intro to web accessibility for agencies.
 
Lightning Talks by Globant - Accessibility for everyone testing tools
Lightning Talks by Globant - Accessibility for everyone testing toolsLightning Talks by Globant - Accessibility for everyone testing tools
Lightning Talks by Globant - Accessibility for everyone testing tools
 
Web accessibility is everyone's job
Web accessibility is everyone's jobWeb accessibility is everyone's job
Web accessibility is everyone's job
 
Don't Panic! How to perform an accessibility evaluation with limited resources
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
 
A Half Day Workshop on Building Accessible Websites For People With Disabilities
A Half Day Workshop on Building Accessible Websites For People With DisabilitiesA Half Day Workshop on Building Accessible Websites For People With Disabilities
A Half Day Workshop on Building Accessible Websites For People With Disabilities
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008
 
Inclusive design: real accessibility for everyone
Inclusive design: real accessibility for everyoneInclusive design: real accessibility for everyone
Inclusive design: real accessibility for everyone
 
Making Content Creation Tools Accessible
Making Content Creation Tools AccessibleMaking Content Creation Tools Accessible
Making Content Creation Tools Accessible
 
Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland ...
Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland ...Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland ...
Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland ...
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websites
 
Role of-engineering-best-practices-to-create-an-inclusive-web final-1
Role of-engineering-best-practices-to-create-an-inclusive-web final-1Role of-engineering-best-practices-to-create-an-inclusive-web final-1
Role of-engineering-best-practices-to-create-an-inclusive-web final-1
 
Web Accessibility Overview
Web Accessibility OverviewWeb Accessibility Overview
Web Accessibility Overview
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
 

Recently uploaded

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Recently uploaded (20)

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
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
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
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...
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 

Accessibility and JS: side-by-side