With HTML, CSS and JS we give the browser the necessary information to build the Document Object Model (DOM), which is the 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 tree needs certain information to be able to offer a complete representation of the document, and it obtains it from the name, role and value 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 associated onclick event, the role will be text instead of link and the name and value will be empty, so the element cannot be activated using a screen reader.
Or if we use an SVG within a link (as is usually done with header logos), as it does not contain any text or title inside, the element will not have a name 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 use each of the elements that HTML5 offers us and make correct use of them and their attributes.
Top comments (0)