Voice Over on Semantic HTML

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

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

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

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.

Comments

[julio]

Nice Article!
Question, is necessary the " " ?
And why?

[Brenner Pacelli]

Hi, Satya. Do you know any fix for the time tag bug in Chrome? I am using a tag and it is really annoying to know it translates into a "editable group" for the screen reader :(

[Kresna Satya]

Hi Brenner, currently I don't find a good solution to remove "editable group" in time tag. Instead, I put aria-label attribute to the time tag. If modified my time tag by add aria-label:

<time datetime="2017-1-3 08:00-15:00" aria-label="January 3rd">January 3rd</time>

Screen reader (Voice Over) will say "January 3rd, group editable". I think it's better than "group editable".