A question often seen in the accessibility space is "I am using this framework, how do I know if it is accessible?". That of course is a very open ended question and is a bit more difficult to answer than "yes" or "no". To fully answer that question, we have to lay out all the features that each individual JavaScript framework gives us from an accessibility perspective and compare each of them.

Each JavaScript framework has its own unique Pros and Cons for using the frameworks outside of accessibility. This article is not meant to share a list of cons for each framework from an accessibility perspective, simply because the cons are all relatively the same, and the big problems were detailed in Part 1 of this series!

This article is also not meant to sway you to use one framework over the other. It is simply made to give information for developers of each framework to know what accessibility options are available. The comparison and decision on which to use is up to you!

Comparing Each Framework

The best ways to compare the accessibility of each framework is to look at the 3 main items. What are the out of the box features, the documentation, and any other perks that may be available with the using the framework.

React

React is the most open JavaScript framework on the market. It does not enforce a generic project structure and has many different uses. With it being so open it can have it challenges from an accessibility perspective, but also gives it many options to make applications accessible in it.

React Accessibility Features

React does not carry many out of the box accessibility features due to the nature of being so open. But here are the main features:

• Allows for use of to keep HTML semantics
• Ease of use of component lifecycle for focus management
• Allows for semantic labeling using htmlFor attribute

React Accessibility Documentation

The accessibility documentation of React is a little bit all over the place and could be a bit more detailed. It puts some detail into accessible forms, focus control and couple short pieces on titles and language. But the biggest downside is they place the section about ARIA use above the use of semantic HTML.

Other React Perks

Where React will see its biggest accessibility benefit is from all the open source libraries that help make accessibility a bit easier. Here are some of the other perks of React:

• Massive accessibility community that builds and supports open source libraries
• ESLint JSX plugin
• React Document Title package that allows for easy page titles
• React modal that is very accessible
• Live announcer package that gives an accessible aria-live region
• A large variety of accessibility first UI libraries
  • Note: Please read A Word of Caution on accessible frameworks

Angular

Angular is much more structured and less open than React. Angular breaks projects into modules, components, and services. It makes for structured development that can lead to more enforced web coding practices, which in turn can help make content created in it to be more accessible.

Angular Accessibility Features

Angular has a number of out of the box accessibility features that you can tap into. Here are some of them:

• Title service that lets you set the title
• Uses HTML files which enforces semantic HTML practices
• Ease of use of component lifecycle for focus management
• Can make use of NavigationEnd router event to set focus
• Can bind ARIA attributes

Angular Accessibility Documentation

The accessibility documentation for Angular from an overall understanding of accessibility is great since it links out to googles accessibility docs. However, the documentation about Angular and accessibility are lacking greatly.

It points to the use of material UI which has some good accessibility tools, but as a framework is not the most accessible. It also does not go very in depth for use of semantic HTML and also the features you get out the box.

Other Angular Perks

Angular not being as open as React or even Vue makes it so there isn't a lot of additional add-ons, however it does have one main package that helps with accessibility:

• Angular Material A11y SDK has the following features:
  • Plugin to trap focus in modal
  • Live announcer plugin
  • High contrast mode styles
• ESLint for Angular has multiple accessibility rules

Vue

Vue is the perfect mix of React and Angular. Not as open as React but also not as strict as Angular. Vue focuses more on the View layer of the Model-View-Controller concept. All CSS, JavaScript, and HTML are done in a single Vue file.

Vue Accessibility Features

Vue has a couple of different features out of the box that makes it very unique in what you get from an accessibility perspective:

• Mixins make for easy creation of titles on pages
• Vue router makes for more accessible routing for page navigation
• CSS, JS, HTML being in one file helps enforce semantics

Vue Accessibility Documentation

The accessibility documentation for Vue is actually very well put together. It gives practical design patterns about how to use skip links, and also content structure of a page. It also places an emphasis on semantic HTML over ARIA, which is fantastic! It is still a little short, however it is very effective in the information it gives to users.

Other Vue Perks

Vue has a pretty large accessibility community that has create many plugins and add-ons to use for accessibility such as:

• Vue-A11y-Utils package contains helpful accessibility functions
• Vue-Announcer is a fully accessible live region
• Contains a number of accessible frameworks such as Vuetify
• Vue focus trap package that traps focus in modals and menus

Ember

Ember is a very easy to use and robust JavaScript framework that allows you to create structured web applications. With some of the best documentation around and an extremely engaged community it is a great JavaScript framework to use.

Ember Accessibility Features

Ember comes with quite possibly the most built in accessibility options out of all the other frameworks:

• Ability to create default language for application
• Ember-page-title service allows for easy title setting
• Focus management plugin in routing
• Consistent structure makes for more enforcement of semantic HTML

Ember Accessibility Documentation

Hands down Ember has the best documentation out there compared to any other JavaScript frameworks. It lays out into application considerations, template considerations, testing considerations and a load of additional resources. It is very easy to read and very easy to follow along with to create an accessible application in ember

Other Ember Perks

With such an active community, Ember has a load of extra add-ons that can be used to increase the accessibility of your application:

• Ember-a11y-landmarks helps with landmark roles in your application
• Ember-component-focus helps you manage focus in components and pages
• Ember-keyboard makes for painless support of keyboard events
• A11y-Announcer announces when the page has changed
• Linter that contains accessibility rules

Svelte

Svelte is newer to the JavaScript framework market, but has made a very significant impact in the market. Svelte is a component based framework that is light weight and very easy to use. It also created a niche with the accessibility community with having a couple of nifty accessibility features

Svelte Accessibility Features

• An accessibility linter built into the framework that suggests fixes as you code!
• CSS, JS, HTML being in one file helps enforce semantics
• Very simple component lifecycle to manage focus

Svelte Accessibility Documentation

The accessibility documentation is pretty much based in the accessibility warnings section. This covers all the checks from an accessibility perspective. Outside of that there is not much more mention of accessibility in their documentation.

Other Svelte Perks

Svelte does have a few additional addons to help from accessibility perspective:

• Svelte accessible according has an accessible according component
• Svelte-accessible-dialog gives applications an accessible modal

In Summary

As you can see, each framework has their own unique features and accessibility add-ons that you can use to make your application accessible.

Although this articles lays out all the different tools you have at your disposal, the best tool you will have is you and your development team simply giving a damn about the content you create and making accessibility a priority in the development you do!