Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Summary
Throughout history, JS has been pointed out as the villain when the matter is
accessible websites.
By presenting s...
Overview
● Why Should I invest on Accessibility?
● What is Accessibility?
● Who needs Accessibility?
● Essential things ab...
#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 woul...
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...
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 Jav...
Accessibility Barriers
According to the University of Minnesota
● Some browsers may not support JavaScript or may have Jav...
#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%...
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, fnH...
#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 (espec...
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 wi...
Ajax and Accessibility
aria-live=”polite”
How polite the live area is?
The default is ‘polite’ – in that it waits
until al...
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 tex...
Jim Thatcher
pioneering
Using Links, #hashtags and
some IDs we could link and
navigate in the whole page!
Skip navigation ...
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
Accessibility and JS: side-by-side
Upcoming SlideShare
Loading in …5
×

Accessibility and JS: side-by-side

1,266 views

Published on

Palestra sobre Acessibilidade e JavaScript, que foi apresentado no jsConf US 2015

Published in: Technology

Accessibility and JS: side-by-side

  1. 1. 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
  2. 2. 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
  3. 3. #1 Why Should I invest on Accessibility?
  4. 4. According to UN 650 Million have some kind of disabilities Many people around the world
  5. 5. In Brazil are over According to IBGE 45.6 Million people could be using your application.
  6. 6. Business opportunity Who wouldn´t wanted to have 23% of a population as possible clients?
  7. 7. The world cannot be excluded from great minds
  8. 8. When we talk about accessibility
  9. 9. #2 What is Accessibility?
  10. 10. 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
  11. 11. New accessibility Passive Robotic Dependent Impotent Able Active Independent Engajed
  12. 12. #3 Who needs accessibility?
  13. 13. Who needs accessibility?
  14. 14. Who needs accessibility? Videos with subtitles
  15. 15. #4 Essential things about the documentation
  16. 16. • 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.
  17. 17. Robust Understandable Operable Perceivable WCAG 4 Basic principles
  18. 18. WCAG #4.1 Perceivable ● Distinguishable information ● Text Alternatives ● Adaptable ● Time-based Media
  19. 19. WCAG #4.2 Operable ● Navigable ● Keyboard Accessible ● Seizures ● Enough Time
  20. 20. WCAG #4.3 Understandable ● Readable ● Predictable ● Input Assistance
  21. 21. WCAG #4.4 Robust Compatible with different User Agents
  22. 22. #5 Users Agents: Do you know them?
  23. 23. User agents could be guide dogs
  24. 24. User agents could be web browsers
  25. 25. ...But usually Screen Readers
  26. 26. Screen Readers usage WebAIM 2014
  27. 27. Mobile Screen Reader usage
  28. 28. We have to teach We need to get connected The user agents how to speak Content Presentation Interactivity
  29. 29. #6 Barriers between Accessibility and JavaScript
  30. 30. 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.
  31. 31. 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
  32. 32. #6.1 Browsers Don’t Support JavaScript
  33. 33. Browsers Support JavaScript According to WebAIM 2014, over 97% of screen readers support and have javascript enabled 97,6% Enabled 2,4% Disabled
  34. 34. People use JavaScript and don´t know it!
  35. 35. Fallback strategies to others 2.4% Provide alternative accessible controls that do not require script processing
  36. 36. 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 ); } } } }
  37. 37. #6.2 Developers lack of knowledge in WAI-ARIA practices
  38. 38. 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
  39. 39. WAI-ARIA Workflow
  40. 40. The jQuery creator says ARIA isn’t just a pipe dream of functionality, It’s implemented! John Resig
  41. 41. Use semantic and Landmarks ARIA The language your browser likes to speak!
  42. 42. #6.3 Rich Internet Applications With Ajax
  43. 43. 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
  44. 44. 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.
  45. 45. ARIA Live Regions
  46. 46. #6.4 Difficulty or impossibility to navigate using a keyboard
  47. 47. Navigations and menus Users that can´t or don´t want to use the mouse could use keyboard to navigate on the application!
  48. 48. 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
  49. 49. Jim Thatcher pioneering Using Links, #hashtags and some IDs we could link and navigate in the whole page! Skip navigation 1998
  50. 50. Skip navigation visual focus
  51. 51. Skip navigation focus
  52. 52. Think beyond the mouse
  53. 53. Semantic menu and ARIA
  54. 54. Show and hide sub-menus
  55. 55. #7 The great secrets of accessible applications
  56. 56. Accessibility menu
  57. 57. Font size control
  58. 58. High and low contrast
  59. 59. The WEB creator says Take the Standards to Keep the Web Free! Tim Berners-Lee
  60. 60. Complementing Tim ARIA and Interactive design too! Felipe Albuquerque
  61. 61. Special thanks to felipealbuquerque.com fa@cesar.org.br @felipedeolinda Felipe de Albuquerque Ask me here or by

×