Why semantics are important.
The semantics lets us express the affordances that the HTML element offers. Every element has a role, name, value, and state. A typical example to explain "affordances" is a teapot. It has a handle for holding by hand and a spout through which the tea is served.
With proper semantics of HTML elements, it helps us instruct a screen-reader on how to announce, for example, a "button" or "navigation" to a user and helps them interact with it.
How do you figure out what your semantics are when writing code? An option is to go through the code and test the website with a screen-reader. This can obviously be tedious to inspect.
A more reasonable approach to test for semantically rich experience is using the accessibility tool on Google Chrome or the Firefox Accessibility Inspector.
Let's set some basic semantic rules:
Use alt attributes to properly describe an image
We should make sure all images always have an alt attribute attached to it. The alt attribute is used to either describe the image or where the user will navigate to if they click on it.
Associate labels with form control elements
Input or checkbox elements should always have a label associated with them. Labels help the screen-reader properly announce form controls. To associate the label with elements, you either place the input element inside a label element or use the label’s for attribute and refer to the element's id .
Make descriptive text inside a link tags
A better way to create links is by putting the most descriptive piece of text inside the link itself, rather than read here .
Use button tags over divs for the proper button element
Because buttons must have an accessible name, this name will be the same as the text inside a button tag. Also, a more important reason to use the <button></button> tag over <div></div is because it describes the function of its content; in this case a button. It is therefore advised not to use divs as clickable elements. Use either<a> or <button> elements for clickable elements.
Other semantic rules are:
For a logo image, it's most likely is a link that returns to the homepage. If the <a> tag doesn't have any text in between it, add a aria-label attribute just to make sure it has an accessible name.
Use <header> tags to represent introductory content.
Use <nav> element to represent navigation links.
Use <main> element to represent the main content of the body of a document.
More semantic elements are the <article>, <aside>, <address>, <footer> and many other elements. You can find the link to useful elements in this resource.
