With HTML, CSS and JS we give the browser the necessary information to build the Document Object Model (DOM), which isthe tree that represents the structure of the document and that will serve to display the information on the screen.

In addition to the DOM,the browser builds a second tree, the Accessibility Tree, which is the equivalent used by assistive technologies (screen reader, voice recognition software...) to navigate our website. This treeneeds certain information to be able to offer a complete representation of the document, and it obtains it from thename,role andvalue parameters of each node.

If any of these parameters is not present,the node will not be reflected in the Accessibility Tree, it cannot be represented by the software and therefore it cannot be used by the user.

This is especially important for interactive elements such as links, buttons, or form elements. For example, if to simulate a link we use a<div> with an associatedonclick event, therole will betext instead oflink and thename andvalue will be empty, so the element cannot be activated using a screen reader.
Or if we use an SVG within alink (as is usually done with header logos), as it does not contain any text or title inside, the element will not have aname in the Accessibility Tree and it cannot be activated either.

Therefore,it is very important to pay attention to the representation that our document generates in the Accessibility Tree to make sure that all the important elements contain the necessary information to be represented in a useful way for the user.
To do this, it is best to learn to useeach of the elements that HTML5 offers us and make correct use of them and their attributes.