Accessible JavaScript applications

Please download to get full document.

View again

of 72
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Similar Documents
Information Report
Category:

Software

Published:

Views: 0 | Pages: 72

Extension: PDF | Download: 0

Share
Description
In this session, we will look into different kinds of disabilities, how they affect the day-to-day experience of our users, and how can we improve the accessibility of our JavaScript applications. The main focus of the talk will be how to go from being generally unaware of accessibility issues to creating highly accessible JavaScript applications. We will talk about why it’s essential to make accessibility a core part of the development process while sharing accessible JavaScript patterns that you can integrate to your project today regardless of available time and budget.
Transcript
  • 1. 1
  • 2. Hello !
  • 3. slid.do/armadajs
  • 4. Stefan Feješ " 20yo Frontend Engineer 🎤 Organizes Novi Sad JS 🐙 Open source contributor fejes713
  • 5. Stefan Feješ " 20yo Frontend Engineer 🎤 Organizes Novi Sad JS 🐙 Open source contributor fejes713
  • 6. Stefan Feješ " 20yo Frontend Engineer 🎤 Organizes Novi Sad JS 🐙 Open source contributor fejes713
  • 7. fejes713
  • 8. Accessible JavaScript applications
  • 9. What is accessibility? fejes713
  • 10. – Oxford English Dictionary “The quality of being easily reached, entered, or used by people who have a disability” accessibile: fejes713
  • 11. … and what about the Web? fejes713
  • 12. “A blind man couldn’t order pizza from Domino’s. The company wants the Supreme Court to say websites don’t have to be accessible” – BBC News
  • 13. About 15% of the world's population have some form of disability fejes713
  • 14. Types of disabilities: • visual 👓 • physical • cognitive 🧠 • auditory 💬 • … fejes713
  • 15. Types of disabilities: • visual 👓 • physical • cognitive 🧠 • auditory 💬 • … fejes713
  • 16. Types of disabilities: • visual 👓 • physical • cognitive 🧠 • auditory 💬 • … fejes713
  • 17. Types of disabilities: • visual 👓 • physical • cognitive 🧠 • auditory 💬 • … fejes713
  • 18. Types of disabilities: • visual 👓 • physical • cognitive 🧠 • auditory 💬 • … fejes713
  • 19. so what are the problems? fejes713
  • 20. visually impaired users
  • 21. Screen readers fejes713
  • 22. Screen readers can read all text visible on a page can read some tags that a sighted user will not be able to see can list all headers and links can’t read text based on css layout can’t read text on images can’t detect navigation fejes713
  • 23. Screen readers can read all text visible on a page can read some tags that a sighted user will not be able to see can list all headers and links can’t read text based on css layout can’t read text on images can’t detect navigation fejes713
  • 24. Screen readers can read all text visible on a page can read some tags that a sighted user will not be able to see can list all headers and links can’t read text based on css layout can’t read text on images can’t detect navigation fejes713
  • 25. Screen readers can read all text visible on a page can read some tags that a sighted user will not be able to see can list all headers and links can’t read text based on css layout can’t read text on images can’t detect navigation fejes713
  • 26. Screen readers can read all text visible on a page can read some tags that a sighted user will not be able to see can list all headers and links can’t read text based on css layout can’t read text on images can’t detect navigation fejes713
  • 27. The alt attribute
  • 28. The alt attribute • always set the alt attribute • alt=“” for decorative images • put the period in the end at of the alt attribute
  • 29. The alt attribute • always set the alt attribute • alt=“” for decorative images • put the period in the end at of the alt attribute
  • 30. The alt attribute • always set the alt attribute • alt=“” for decorative images • put the period in the end at of the alt attribute
  • 31. fejes713
  • 32. fejes713
  • 33. fejes713 "captions": [ { "text": "a hand holding a cellphone", "confidence": 0.9583763512737793 } ]
  • 34. Navigation
  • 35. fejes713 <Navigation /> <Container />
  • 36. fejes713 Announcing changes import React from "react"; class Announcements extends React.Component { render() { return ( <div aria-live="polite" aria-atomic="true" className="visuallyhidden"> {this.props.message} </div> ); } }; export default Announcements;
  • 37. fejes713 Announcing changes import React from "react"; class Announcements extends React.Component { render() { return ( <div aria-live="polite" aria-atomic="true" className="visuallyhidden"> {this.props.message} </div> ); } }; export default Announcements;
  • 38. fejes713 Announcing changes import React from "react"; class Announcements extends React.Component { render() { return ( <div aria-live="polite" aria-atomic="true" className="visuallyhidden"> {this.props.message} </div> ); } }; export default Announcements;
  • 39. // Vue.js - change tab title on route switch router.beforeEach((to, from, next) => { document.title = `${to.name} - Your site name`; next(); }); fejes713 Change page titles on each route
  • 40. content skip link example fejes713
  • 41. Physically impaired users
  • 42. • Reachable custom elements • Tab, Space, Escape, Arrow keys • Visible focus styles fejes713 Keyboard navigation
  • 43. tabindex can make custom elements focusable and ugly doesn’t make custom elements accessible without additional effor 💡 Rules to follow: fejes713 always set tabIndex on custom interactive elements tabIndex="0" // in regular tab order tabIndex="-1" // focusable by JavaScript only tabIndex="1" // not recommended!
  • 44. let mouseDown = false; element.addEventListener('mousedown', () => { mouseDown = true; }); element.addEventListener('mouseup', () => { mouseDown = false; }); element.addEventListener('focus', (event) => { if (mouseDown) { event.target.blur(); // removes blue outline } }); fejes713
  • 45. ARIA (accessible rich internet applications) can make custom elements fully accessible can expose a11y information for custom elements 💡 Some of aria-* attributes: fejes713 role="button" // defines type of custom element aria-label="open" // meaningful label to go with it
  • 46. <div class="button"> Sign up! </div> fejes713 <div class="button" tabindex="0" role=“button" aria-label="Open sign up modal” onClick={modalHandler} > Sign up! </div> → ❌ don’t ✔ do custom el. = tabIndex + role + label + aria-* + event handler
  • 47. <div class="button"> Sign up! </div> fejes713 <button class=“button" aria-label="Open sign up modal” onClick={modalHandler} > Sign up! </button> → ❌ don’t ✔ 🔥 custom el. = tabIndex + role + label + aria-* + event handler
  • 48. Keyboard traps and modals
  • 49. Inaccessible modals 🤒 fejes713
  • 50. fejes713 Accessible modals should be closed once the overlay or ESC key is clicked should toggle aria-hidden attribute on modal should maintain focus position before and after toggling modal should focus the first focusable element within the modal should trap the user’s focus within the modal
  • 51. fejes713 Accessible modals should be closed once the overlay or ESC key is clicked should toggle aria-hidden attribute on modal should maintain focus position before and after toggling modal should focus the first focusable element within the modal should trap the user’s focus within the modal
  • 52. fejes713 Accessible modals should be closed once the overlay or ESC key is clicked should toggle aria-hidden attribute on modal should maintain focus position before and after toggling modal should focus the first focusable element within the modal should trap the user’s focus within the modal
  • 53. fejes713 Accessible modals should be closed once the overlay or ESC key is clicked should toggle aria-hidden attribute on modal should maintain focus position before and after toggling modal should focus the first focusable element within the modal should trap the user’s focus within the modal
  • 54. fejes713 Accessible modals should be closed once the overlay or ESC key is clicked should toggle aria-hidden attribute on modal should maintain focus position before and after toggling modal should focus the first focusable element within the modal should trap the user’s focus within the modal
  • 55. Cognitively impaired users
  • 56. 💡 Improvements • Typography • Justified text • Short sentence and paragraphs • Ability to turn off animations fejes713
  • 57. const reduceMotionQuery = matchMedia("(prefers-reduced-motion)"); if (reduceMotionQuery.matches) { // turn animations off } else { // turn animations on } fejes713 Natively toggle animations
  • 58. Auditory impaired
  • 59. 💡 Improvements • Interactive features with visual alerts • Videos with good captioning fejes713
  • 60. Auto-generated captions audio file WebVTT fejes713
  • 61. Temporary disabilities
  • 62. fejes713 Microsoft’s inclusive toolkit
  • 63. What is considered a good UX in 2019? fejes713
  • 64. fejes713 Good UX in 2019: Loads instantly 60 fps ⚡ Usable with a keyboard Looks amazing 👀 Accessible contrast Award winning content 🏆 Semantic HTML Works on the following screen sizes: All of them Works well in low light environment 🌙 Works well in a bright light environment ☀ Follows all fundamental UI patterns No scroll jank Well balanced if user has different zoom level
  • 65. Start with small tweaks that can make a huge impact on your website’s accessibility fejes713
  • We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks
    SAVE OUR EARTH

    We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

    More details...

    Sign Now!

    We are very appreciated for your Prompt Action!

    x