As a Web Developer you’ve been accustomed to the Render-tree. When you write HTML and CSS the browser creates a tree translating the DOM from a string to DOM objects.
However did you know that the browser also generates an Accessibility Tree?
This Accessibility tree is similar to the render tree however it also tries to parse some semantic information to feed in a screen reader or other assistive tool. This semantic information is:
If we add a select element on our page with certain car options
<select> <option value="i10">Hyundai i10</option> <option value="iQ">Toyota iQ</option> </select>
the role will be a “combobox”.
Each element has a specific role.
<label for="cars">Select a Car</label> <select name="cars"> <option value="i10">Hyundai i10</option> <option value="iQ">Toyota iQ</option> </select>
If we include a label element and link it to our select element the “Select a Car” will be interpreted as the name.
The select element has two states the collapsed and expanded.
Once we select an option the select element will have a value of the car selected.