Semantic and Visual Information

Applications in a graphical user interface frequently convey information through visual cues such as text size, spacing between elements, or color. In addition, images are often used to share information, as in the form of a chart or infographic, or convey information that is non-explicit or rhetorical, such as by showing a picture of a smiling person using a product.

There is another kind of information present in computer applications, web pages, and documents: semantic information. The word "semantic" means "meaningful," and in computing referes to elements, such as buttons, lists, or paragraphs, whose purpose is made explicit in a way the computer can understand.

This is often a difficult distinction, so let's use an example. Let's imagine two web developers make a simple landing page, one that needs a large "subscribe" button. In the HTML code, the first developer uses <button> tags to create a button element. The second developer uses non-specific <div> tags, then uses CSS, a styling language, to make the element look visually like a button. If the same CSS is used, both buttons might look identical to a sighted visitor to the web page. However, software like the browser, operating system, or screen readers will not know that the element is intended as a button. In the second case, a screen reader would be less able to communicate information about that element to a user. We would call the first developer's button, which explicitly uses <button> tags, "semantic," because its meaning is made available to the computer.

Though we use HTML as an example above, various applications and document formats can be either semantic or non-semantic, depending on how they are created. Using good semantics often has advantages beyond accessibility, such as making code more readable by other developers and making code more robust against the future, but it is especially important for accessibility.