Pop-up Accessibility

About this presentation

Modals and pop-ups can be a really useful tool for displaying additional information or getting users to enter information in a way that doesn't clutter up your screen. However as yet (one coming soon) there is no official HTML element that lets us display modals in a consistent way. As a result screen readers, such as JAWS and NVDA, have a hard time reading them resulting in a lot of pop-ups not being accessible to people with disabilities. Today we will look at how to make a modal accessible for people who use screen readers. This uses a combination of ARIA attributes and hidden text to speak with the screen reader. As well as helping of JavaScript to help with some custom keyboard control. All while keeping a pleasing look and feel for all users using JavaScript and CSS.