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.

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

20. so what are the problems?
fejes713

21. visually impaired users

24. Screen readers
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. 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

28. 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

29. 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

30. The alt attribute

31. The alt attribute
• always set the alt attribute
• alt=“” for decorative images
• put the period in the end at of the alt attribute

32. The alt attribute
• always set the alt attribute
• alt=“” for decorative images
• put the period in the end at of the alt attribute

33. The alt attribute
• always set the alt attribute
• alt=“” for decorative images
• put the period in the end at of the alt attribute

34. fejes713

35. fejes713

36. fejes713
"captions": [
{
"text": "a hand holding a cellphone",
"confidence": 0.9583763512737793
}
]

37. Navigation

38. fejes713
<Navigation /> <Container />

39. 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;

40. 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;

41. 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;

42. // 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

43. content
skip link example
fejes713

45. Physically impaired users

46. • Reachable custom elements
• Tab, Space, Escape, Arrow keys
• Visible focus styles
fejes713
Keyboard navigation

47. 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!

48. 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

49. 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

50. <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

51. <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

52. Keyboard traps and modals

53. Inaccessible modals 🤒
fejes713

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. 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

56. 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

57. 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

58. 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

59. Cognitively impaired users

60. 💡 Improvements
• Typography
• Justified text
• Short sentence and paragraphs
• Ability to turn off animations
fejes713

61. const reduceMotionQuery = matchMedia("(prefers-reduced-motion)");
if (reduceMotionQuery.matches) {
// turn animations off
} else {
// turn animations on
}
fejes713
Natively toggle animations

62. Auditory impaired

63. 💡 Improvements
• Interactive features with visual alerts
• Videos with good captioning
fejes713

64. Auto-generated captions
audio file WebVTT
fejes713

66. Temporary disabilities

67. fejes713
Microsoft’s inclusive toolkit

69. What is considered a
good UX in 2019?
fejes713

70. 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

71. Start with small tweaks that can make a
huge impact on your website’s accessibility
fejes713