Voice Over on Semantic HTML
Tags: semantic, a11y, webdev
Published: 2019-03-22 05:03:21

---
title: Voice Over on Semantic HTML
published: true
description: HTML semantics are a collection of HTML tags that have a meaning. Example of this tag that you already use but (maybe) you don't realize are: heading tags from `<h1> - <h6>`, paragraph `<p>`, `<form>` and `<button>`.
tags: [semantic, a11y, web development]
---

HTML semantics are a collection of HTML tags that have a meaning. Example of this tag that you already use but (maybe) you don't realize are: heading tags from `<h1> - <h6>`, paragraph `<p>`, `<form>` and `<button>`.

Another tags like `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`, `<address>`, `<time>`, `<figure>`, `<figcaption>`, `<table>`, `<thead>`, `<tfooter>`, `<th>`, `<td>` included in semantic tags. `<div>`, `<span>` and `<font>` don't include HTML semantics tag.

# HTML Semantics Demo
In this post will demonstrate the use of semantic tags and their impact with the help of Voice Over (Mac OS screen reader) in the Chrome, Safari and Firefox browsers. Chrome that I use is version 72.0.3626.121, Safari version 12.0.3 and Firefox version 65.0.1. For a demo (direct) please [open here](https://html-semantics.glitch.me/).

## Header Tag

{% gist https://gist.github.com/satyakresna/43b0bd607f155b1a0e2965b47111c5c5 %}

**Chrome**

Header tag read as "banner".

{% youtube NjoJm9sp2fI %}

**Safari**

Header tag read as "banner".

{% youtube c7Qp0bQRdjg %}

**Firefox**

Header tag read as "banner".

{% youtube S3t_Rm_bMpc %}

## Navigation Tag

{% gist https://gist.github.com/satyakresna/1592a6a5d76cfda22ae227a20a113246 %}

**Chrome**

Nav tag read as "navigation"

{% youtube k1pevZ4ye4c %}

**Safari**

Nav tag read as "navigation"

{% youtube q4iuzWkCH38 %}

**Firefox**

Nav tag read as "navigation"

{% youtube RZv5oQ_SGjg %}

## Aside Tag

{% gist https://gist.github.com/satyakresna/6bc885270efd65b46b65838196e435b7 %}

**Chrome**

Aside tag read as "complementary"

{% youtube aUmgt1eA4_4 %}

**Safari**

Aside tag read as "complementary"

{% youtube GRjyJ_xEvmQ %}

**Firefox**

Aside tag read as "complementary"

{% youtube 1KwYx664GlY %}

## Details and Summary Tags

{% gist https://gist.github.com/satyakresna/030491eab11a7ab4c1daf3466c0ac203 %}

**Chrome**

The summary tag read as "Copyright 1999-2018., collapsed, disclosure triangle" in the closed position and will be read as "Copyright 1999-2018., expanded, disclosure triangle" in the opened position. While for details tag will be ignored.

{% youtube js0dFoUlVGw %}

**Safari**

The summary tag read as "Copyright 1999-2018., collapsed, summary" in the closed position and will be read as "Copyright 1999 2018., expanded, summary" in the opened position. While for details tag will be ignored.

{% youtube YQwYz50yyI4 %}

**Firefox**

The summary tag read as "Copyright 1999-2018., group" and cannot open to see the detailed content.

{% youtube -f-QsGV4YhE %}

## Figure and Figcaption Tags

{% gist https://gist.github.com/satyakresna/aa8b2a82959927d2d2e2813447ce2a20 %}

**Chrome**

The figure tag that wraps figcaption tag couldn't read by Chrome.

{% youtube hFtD8Xrue2k %}

**Safari**

The figure tag that wraps figcaption read as "Fig.1 - Trulli, Puglia, Italy, figure"

{% youtube raoh9JazVeA %}

**Firefox**

The figure tag that wraps figcaption tag couldn't read by Firefox.

{% youtube Sq1TRExBcw4 %}

## Footer Tag

{% gist https://gist.github.com/satyakresna/b21e06ccbb800b03d3ba59fabfa16ce2 %}

**Chrome**

Footer tag read as "footer"

{% youtube P-WZj63g3AA %}

**Safari**

Footer tag doesn't read by Safari.

{% youtube _FAF5UJ0D5I %}

**Firefox**

Footer tag read as "content"

{% youtube NCVagx1Q56w %}

## Time Tag

{% gist https://gist.github.com/satyakresna/0e09f4da85dbaa38d2e051e00dbc252c %}

**Chrome**

Time tag read as "group, editable"

{% youtube 6ZnO5Z19T10 %}

**Safari**

Time tag read as "January 3rd, 3 January 2017"

{% youtube -B0JX5IyRDM %}

**Firefox**

Time tag read as "January 3rd"

{% youtube 6GwcDyiiSOM %}

## Address Tag

{% gist https://gist.github.com/satyakresna/7d7558739c2fc1ee14bcc4ef8abd13aa %}

**Chrome**

Address tag read as "content info"

{% youtube clgjF8r1EJw %}

**Safari**

Address tag read as "content information"

{% youtube HgrCfCZzX_c %}

**Firefox**

Address tag read as "content"

{% youtube 0prfZqWQ5NI %}

# Observation Result

1. `address`, `time`, `details` - `summary`, `figure` - `figcaption`, `footer` tag get different handling by Chrome, Safari and Firefox. I still can't confirm whether this is the cause of the browser or from the voice over itself. If I get info about this, I will write it in the next note.

2. Not all semantic HTML tags will read by the browser like tag `footer` and `figure` - `figcaption` on Chrome, Safari, and Firefox. But, it doesn't mean that we must ignore those tags. Those tags exist with the purpose when we code HTML we know that that tag intended for footer or figure - figcaption.