Learn how to build inclusive web applications and Single Page Apps in modern JavaScript frameworks. This project collects strategies, links, patterns and plugins for React, Vue and Angular.

Patterns

Menus & Dropdowns

Web-apps are full of interactive items that show a new container with links and options once you interact with them. A simple user experience pattern, but hard to get right if you want to build it with accessibility in mind

  • Vue
  • React
  • Angular
Contribute!

Accessible routing

A Single Page Application consists of one single HTML document - anything else is being loaded without ever really navigating off of or reloading the page. This leads to accessibility challenges

  • Vue
  • React
  • Angular
Contribute!

(Modal) dialog windows

A modal dialog requires a user's response and makes it mandatory to interact with it. Focus, both literally and proverbially, can't be moved away from the modal. Learn more about what to look out for when using dialog windows

  • Vue
  • React
  • Angular
Contribute!

Notifications for all users

You have to inform every user about dynamic changes in your web app - not just the ones using a visual browser. Learn more about programmatically exposing asynchronous content changes to screen readers

  • Vue
  • React
  • Angular
Contribute!

What makes web-apps special?

Web applications aim to emulate the experience of native apps by loading and displaying data in an asynchronous fashion ("AJAX"). This lack of full page reloads makes it hard for users of screen readers.

Read more about accessibility challenges in web apps

About accessible-app.com

This project aims to be a resource for inclusive modern JavaScript framework usage - so it needs contribution from people who specialize in accessibility regarding React, Angular and Vue. Got ideas, framework knowledge, feedback or want to contribute?

Find and contribute to this project on GitHub

The Demo App "Accessibooks"

Reading about patterns in theory only gets you so far – often times you need a concrete example to learn. This is why Accessibooks SPA exists.

Go to the version built in Vue