Voice Over on Semantic HTML

Kresna Satya — Fri, 22 Mar 2019 05:03:21 +0000

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.

Header Tag

Chrome

Header tag read as "banner".

Safari

Header tag read as "banner".

Firefox

Header tag read as "banner".

Navigation Tag

Chrome

Nav tag read as "navigation"

Safari

Nav tag read as "navigation"

Firefox

Nav tag read as "navigation"

Aside Tag

Chrome

Aside tag read as "complementary"

Safari

Aside tag read as "complementary"

Firefox

Aside tag read as "complementary"

Details and Summary Tags

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.

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.

Firefox

Figure and Figcaption Tags

Chrome

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

Safari

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

Firefox

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

Footer Tag

Chrome

Footer tag read as "footer"

Safari

Footer tag doesn't read by Safari.

Firefox

Footer tag read as "content"

Time Tag

Chrome

Time tag read as "group, editable"

Safari

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

Firefox

Time tag read as "January 3rd"

Address Tag

Chrome

Address tag read as "content info"

Safari

Address tag read as "content information"

Firefox

Address tag read as "content"

Observation Result

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.
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.

DEV Community: Kresna Satya

Voice Over on Semantic HTML

HTML Semantics Demo

Header Tag

Navigation Tag

Aside Tag

Details and Summary Tags

Figure and Figcaption Tags

Footer Tag

Time Tag

Address Tag

Observation Result