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