Forem

Kresna Satya
Kresna Satya

Posted on • Edited on

8

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (3)

Collapse
 
julioalucero profile image
julio

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

Collapse
 
brennerpacelli profile image
Brenner Pacelli

Hi, Satya. Do you know any fix for the time tag bug in Chrome? I am using a

Collapse
 
kresnasatya profile image
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".

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay