Skip to content

HTML Semantics

"When you use semantically correct HTML, you're empowering people so they can find what they want faster and more easily."

— Julie Grundy

Using structural, semantic HTML is critical in providing good accessibility to users. Assistive technology, such as screen readers, obtains its information through the Document Object Model (DOM). Although semantic HTML elements don't do anything by themselves, they provide a way for developers to organize content and provide a positive user experience for users navigating the page with assistive technology.

When this curriculum uses the terms MUST, SHOULD, and MAY in all capital letters, it is in reference to conformance with WCAG 2.1 Level AA as follows:

MUST: Required
SHOULD: Strongly recommended
MAY: Optional or conditionally recommended

Page Title

The <title> is the first thing a screen reader users hear. Without being able to scan the page, users will rely on this information to hear what the page is about. Therefore, the <title> content should have meaningful text that clearly identifies the identity or purpose of the page.

Title for Every Page

  • MUST be present and MUST contain text.
  • MUST be updated when the web address changes

Meaningful Page Title

  • MUST be accurate and informative.
  • SHOULD be concise, if possible.
  • SHOULD be unique, if possible.
  • Unique information SHOULD come first.
  • SHOULD match (or be very similar to) the top heading in the main content (<h1>).

Descriptive Title with Unique Content First

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Submit a Walmart Job Application Online | Walmart Careers</title>
    </head>
</html>

When you do not list specific information first, you may end up with tabs that looks similar to your user.

Title does not list specific information first

Page Language

The primary language of a page ensures the screen reader will read the document in the user's default language. If not set, the screen reader may use the wrong language library, resulting in a very bad accent. This is accomplished by using the lang attribute and the country code.

Primary Language of Page

  • The primary language of the page MUST be specified in the <html> tag.
  • Inline language changes MUST be identified with a valid lang attribute.
  • The language code MUST be valid: HTML Language Code Reference

Primary Language

    <!DOCTYPE html>
    <html lang="en">

Inline Language Change

    <p>While in Spain, my friend tried to speak Spanish, 
    but she wasn't very good. Everyone kept saying:
    <span lang="es">No comprendo nada de lo que dices.</span></p>

Landmarks

Landmarks are used to designate sections of the overall page design and layout. These HTML elements are used to communicate to the screen reader the different parts of a web page. One of the main purposes of landmarks is to allow blind users to quickly find and navigate to the appropriate landmark.

Like the structure of a house, landmarks are the basic building blocks of a website.

Landmark elements in a web page

Source: Developing Empathy: The Importance of Digital Accessibility Workshops

Creating Landmarks

  • Landmarks SHOULD be used to designate pre-defined parts of the layout.
  • All HTML text (content) SHOULD be contained within a landmark element.
  • A document SHOULD not contain more than one instance of the <main> element
  • The total number of landmarks SHOULD be minimized to the extent appropriate for the content.
Landmark Element Meaning
<header> Represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
<nav> Represents a section of the page whose purpose is to provide navigation links, either to the current document or other documents.
<main> Represents the dominant content of the <body>.
<footer> Represents a footer for its nearest sectioning content or sectioning root element. Typically contains author information or links to related documents.
<aside> Represents a portion of a document whose content is only indirectly related to the document's main content.
<section> Represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading.
<article> Represents a self-contained composition in a document (forum post, magazine or newspaper article, blog entry, product card, etc.).
<form> Represents a document section containing interactive controls for submitting information.

Headings

Headings are notorious for being misused. Headings are for logical structure, not visual effects. The purpose of headings is to establish a hierarchy of headline importance so that both human readers and automated search engines can look at a document and determine its informational structure. Additionally, screen readers provide the ability to jump to headings; this allows for easy navigation. This allows screen reader users to "scan" the page like visual users.

Use Real Headings

  • Text that acts as a heading visually or structurally SHOULD be designated as a true heading in the markup (h1 - h6). Screen readers ignore font-size and font-weight, so the only way to indicate a heading is by the correct HTML markup.
  • Text that does not act as a heading visually or structurally SHOULD NOT be marked as a heading.

Meaningful Text

  • Headings MUST be accurate and informative.
  • Heading text SHOULD be concise and relatively brief.

H1 Element

  • The beginning of the <main> content SHOULD start with <h1>.
  • Most web pages SHOULD have only one <h1>.

Hierarchy of Content

  • Headings SHOULD convey a clear and accurate structural outline of the sections of the content of a web page.
  • Headings SHOULD NOT skip hierarchical levels, meaning, do not skip heading levels, such as going from an <h2> to an <h4>

Examples

Good: Descriptive Headings

<h1>Emergency Preparedness Guide</h1>
<h2>Know the Risks</h2>
<h2>Make a Plan</h2>
<h2>Get an Emergency Kit</h2>
    <h3>Emergency Kit Basic Items</h3>
<h2>Resources<h2>

Bad: Generic Headings

<h1>Emergency Preparedness Guide</h1>
<h2>Section 1</h2>
<h2>Section 2</h2>
<h2>Section 3</h2>
    <h3>(a)</h3>
<h2>Section 4<h2>

Know the difference between links and buttons as screen reader users are informed whether something is a button or a link. Screen readers announce "link" before reading the link name and "button" before reading the button text.

Links <a> take users to different locations (either to a different page or to a different location on the same page).

Buttons <button> performs an action, usually activated by a scripted functionality (make a dialog appear, expand a collapsed menu, turn font bold, etc.), usually on the same page, but a button can also submit form data.

It is invalid HTML to nest <button> elements inside an <a> tag.

Good: Link with button styles

<a href="enroll.html" class="myButton">Enroll at Madison College</a>
Enroll at Madison College

Good: Button semantically correct

<button type="button">Add to Favorites</button>

Bad: Link with button semantics

    <button><a href="enroll.html">Enroll at Madison College</a></button>

    <!-- OR -->

    <a href="enroll.html"><button>Enroll at Madison College</button></a>

Lists

When screen readers encounter a list, they announce that list, and they announce how many items are in the list.

  • Unordered <ul> lists SHOULD be used when there is no order of sequence or importance.
  • Ordered <ol> lists SHOULD be used when there is a progression or sequence.
  • Definition lists <dl> and <dt> pairs SHOULD be used for pairing a term with its definition or a name with a value.
  • You SHOULD NOT use lists for indenting or layout purposes.
  • Note: For valid HTML only <li> elements can be nested within a <ul> or <ol> tag.

Creating Text Emphasis

  • Visual styling SHOULD be used to convey important information.
  • Important information SHOULD be conveyed in a text-based format.

Good: Visual Emphasis with Text

<p><strong>Important:</strong> This action will delete your file.<p>

Bad: Visual Emphasis without Text

<p><strong>This action will delete your file.</strong><p>

The <b> and <i> Tags

  • The <b> or "The Bring Attention To element" draws the reader's attention to the element's contents.
  • <i> element represents a range of text that is set off from the normal text. Some examples include technical terms, foreign language phrases, or fictional character thoughts.
  • Neither are recognized by the screen reader.
  • Use CSS and the font-weight ore font-style properties instead.
  • Bottom Line: Do not use the <b> or <i> elements.

The <strong> and <em> Tags

  • The <strong> element indicates the content has strong importance, seriousness, or urgency.
  • The <em> element marks text that has stress emphasis.
  • All major screen readers ignore the <strong> and <em> elements.
  • Some (but not all) screen readers allow the user to configure the screen reader to acknowledge the important text.
  • Bottom Line: You cannot guarantee text will be read with emphasis or important inflection.

Quotes

  • The <blockquote> SHOULD be used for longer and more complex quotes. It can contain paragraphs, headings, and other structural elements.
  • The <blockquote> SHOULD not be used for visual stying alone.
  • The <q> SHOULD be used for inline quotations.

Non-Semantic Elements

The <div> and <span> Tags

  • The <div> and <span> elements are NOT semantic.
  • The <div> and <span> elements SHOULD only be used when no other semantic elements make sense.
  • They are used to group content together so it can be easily styled with the class or id attributes.