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