Semantics

Wed Apr 12 2017

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.

Render Tree

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:

The Role
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.
The Name

<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 State
The select element has two states the collapsed and expanded.

 

The Value
Once we select an option the select element will have a value of the car selected.

 

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!