Web accessibility with application development is a vital area that needs constant improvement. Web accessibility is not just in the engineering aspects of an application; but also in the user experience of a website. Improvements are required in areas that should cover the basics to web accessibility.

In 2020 31% of all home pages had missing alternative text for images. 55% of the 4.2 million form inputs fields identified were not properly labelled on websites around the world (Source, WebAIM).

ARIA-Able is an accessibility library of custom web components built using the ARIA specifications of the World Wide Web Consortium (W3C). These components contain semantic logic inside HTML attributes. This semantic logic activates well known elements in a web page, such as screen readers and focused style buttons.

ARIA-Able and the library work with encapsulation of logic with the ARIA attributes, converted to JavaScript style Web Components. The developer would greatly benefit from this approach.

It eliminates the need for accessibility functionality being included as an afterthought to the development process; by simply installing a package and declaring ARIA-Able in the codebase. It also gives increased accessibility to users and makes websites more interactive for everyone.

The project consists of the ARIA roles encapsulated to JavaScript style components bundled as a NPM package, along with a React application developed as a documentation website giving references. Users to the site can try out the components, discover their functionality related to accessibility, and most importantly integrate the features into their very own web pages.