Semantics

What are semantics?

Below is a simplified example of a page’s content in HTML code.

<header>
	<div id="logo">[IMAGE]</div>
	<nav>
		<ul>
			<li>Menu Item 1</li>
			<li>Menu Item 2</li>
			<li>Menu Item 3</li>
		</ul>
	</nav>
</header>
<main>
	<h1>Page Title</h1>
	<section>
		<article>
			<header>
				<h2>Article Title</h2>
			</header>
			<p>
				Article Content
			<p>
			<footer>
				Author Information
			</footer>
		</article>
	</section>
</main>
<footer>
	<div>Copyright</div>
</footer>

While not everyone can read HTML code, it should still be apparent what some of structure is because we are used to seeing these things in relation to newspapers, articles, book indexes, etc.

The idea is that.. even though we don’t see the code when viewing web pages… the semantics of a web page should be organized and indicate the relevance of the various elements to the content.

This is helpful for impaired visitors browsing content on a site. As a bonus, it also benefits SEO results.

Dividing content into sections and headings for organization

While we don’t see the code on a site, we do see some of the results.

A common place to consider good semantics is in sections and the headings for sections. They are very helpful for any visitor regardless of A11y.

Page content should be divided up into relevant sections with a fully crafted heading. Compare the headings below… which one would help explain the content of a section better?

Sections and Headings

vs

Dividing content into sections and headings for organization

ACTION ITEM: Appropriately divide content into sections with good headings.

Using TABINDEX attributes for headings

Headings should be able to be used to navigate a web page by tabbing.

This requires “turning on the TABINDEX attribute”. The browser will handle the order of the tabbing as it appears in the code structure (another reason for good semantics).

ACTION ITEM: Add TABINDEX to all headings. Best Method: Use a javascript to automatically turn on tabindexing for at least all H2 and H3 headings (and possibly other elements).
We have a script for that!

Using ALT attributes for images

HTML allows ALT attributes to be provided for images so that the browser has readable text to understand the relevance of the image for navigation or SEO.

In the past, designers/developers have been encouraged to “always enter alternate text for images”.

However, this is NOT good practice anymore. The best practice is to use an empty ALT attribute (alt=””) for all images EXCEPT those that contain relevant information in the image or are part of the interactivity of a website.

The reason for this is screen readers (for severely visually impaired visitors) will skip reading empty ALT text – because it indicates the image is just for visual display paired with a page, section, or article.

ACTION ITEM: Set all ALT attributes for images to empty except those needed for interactivity