Demystifying accessibility in Web apps

Introduction to Web accessibility

Web pages get rendered when HTML is parsed by the browser and it in turn forms the DOM tree out of which browser builds visual UI which we can see and interact

However, it does not end there in parallel it also builds an accessibility tree containing all of the important accessibility information
Which then gets exposed to assistive technology like a screen reader and is used to navigate the page

Let us take an example for a given HTML page below the accessibility tree will look as shown in the adjacent image
Each element in accessibility tree has role (type of element and it’s purpose), accessible name, additionally it will contain lot of other attributes

So use of sematic elements are recommended to have best accessibility practices

In modern UI native element might not be enough so in those cases we can use ARIA

ARIA : accessible rich internet application

We will Deep dive more into use of ARIA in part-2