VI. How To?
6.3. Page Structure
6.3.3. Semantics
Semantic is the grammar of a language. It specifies how the elements of a piece of code should interact. Raphaël Goetter wrote: “an object’s semantic is its MEANING, what it is meant to be. For accessibility and maintaining reasons it is recommended to use each tag and attribute in a correct semantically way” (Goetter, 2005).
With HTML and CSS (or with the use of deprecated presentational tags such as font) it is easy to change the default presentation of an element to make it look like another one. The example bellow shows two pieces of text on a HTML page:
Figure 6.1: Example of HTML page, with CSS supported and activated.
Both of these lines look alike and would be interpreted as a header, because of their important size. However, they are not. Bellow it the source code of this page:
<html>
<head>
<title>Web Accessibility: Why and How? - Example - Semantic</title>
<style type="text/css">
p {margin:21px 0; padding:0; font-size:32px; font-weight:bold;}
</style>
</head>
<body>
<p>Is this a Header?</p>
<h1>Is this a Header?</h1>
</body>
</html>
On a visual point of view, there is not difference between the two lines and they will both be interpreted as header; but if the user uses a screen reader, both line will not be pronounced the same way, indeed, screen readers will speak louder for a heading than a paragraph; and if CSS are deactivated or not supported on the browser the paragraph tag (p) will take back its default behaviour:
Figure 6.2: The same HTML page, with CSS unsupported or deactivated.
View this example in HTML (You can (de)activate the stylesheet in the "View -> Style of the Page" Menu of Firefox)
One of the most common example of bad semantically use of an HTML element is the table-based layout of a page. Indeed, tables are meant to present tabular data, not to position elements on the page (See 6.4.3. Tables) and can represent an accessibility flaw if used in this view.