Voice Over di HTML Semantic

3 minutes read
web development
web accessibility • html semantic • web development

HTML semantic adalah tag HTML yang memiliki sebuah arti atau makna. Contoh tag semantic yang umum Anda gunakan namun kadang tidak anda sadari antara lain: tag heading mulai dari <h1> sampai <h6>, paragraph <p>, <form> dan tag <button>.

Tag-tag seperti <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <address>, <time>, <figure>, <figcaption>, <table>, <thead>, <tfooter>, <th>, <td> juga termasuk dalam tag semantic. Tag <div>, <span> dan <font> tidak termasuk dalam tag HTML semantic.

Demo HTML Semantic

Tulisan ini akan mendemonstrasikan penggunaan tag semantic dan dampaknya jika digunakan dengan bantuan Voice Over (sreen reader MacOS) pada browser Chrome, Safari dan Firefox. Browser Chrome yang saya gunakan adalah versi 72.0.3626.121, Safari versi 12.0.3 dan Firefox versi 65.0.1. Untuk demo (live) silahkan buka di sini.

Tag Header

Chrome

Tag header dibaca sebagai “banner”

Safari

Tag header dibaca sebagai “banner”

Firefox

Tag header dibaca sebagai “banner”

Tag Navigation

Chrome

Tag nav dibaca sebagai “navigation”

Safari

Tag nav dibaca sebagai “navigation”

Firefox

Tag nav dibaca sebagai “navigation”

Tag Aside

Chrome

Tag aside dibaca sebagai “complementary”

Safari

Tag aside dibaca sebagai “complementary”

Firefox

Tag aside dibaca sebagai “complementary”

Tag Details dan Summary

Chrome

Tag summary dibaca sebagai “Copyright 1999-2018., collapsed, disclosure triangle” dalam posisi tertutup dan akan dibaca “Copyright 1999-2018., expanded, disclosure triangle” dalam posisi terbuka. Sementara untuk tag details diabaikan.

Safari

Tag summary dibaca sebagai “Copyright 1999-2018., collapsed, summary” dalam posisi tertutup dan akan dibaca “Copyright 1999 2018., expanded, summary” dalam posisi terbuka. Sementara tag details diabaikan.

Firefox

Tag summary dibaca sebagai “Copyright 1999-2018., group” dan tidak bisa dibuka untuk melihat isi detilnya.

Tag Figure dan Figcaption

Chrome

Tag figure yang membungkus figcaption tidak dibaca oleh Chrome.

Safari

Tag figure yang membungkus figcaption dibaca sebagai “Fig.1 - Trulli, Puglia, Italy, figure”

Firefox

Tag figure yang membungkus figcaption tidak dibaca oleh Firefox.

Chrome

Tag footer dibaca sebagai “footer”

Safari

Tag footer tidak dibaca oleh Safari.

Firefox

Tag footer dibaca sebagai “content”

Tag Time

Chrome

Tag time dibaca sebagai “group, editable”

Safari

Tag time dibaca sebagai “January 3rd, 3 January 2017”

Firefox

Tag time dibaca sebagai “January 3rd”

Tag Address

Chrome

Tag address dibaca sebagai “content info”

Safari

Tag address dibaca sebagai “content information”

Firefox

Tag address dibaca sebagai “content”

Hasil Pengamatan

  1. Tag address, time, details - summary, figure - figcaption mendapat perlakuan yang berbeda oleh Chrome, Safari dan Firefox. Saya masih belum bisa memastikan apakah ini penyebab dari browser kah atau dari voice over itu sendiri. Jika saya mendapatkan info terkait hal ini maka saya akan menuliskannya di catatan berikutnya.

  2. Tidak semua tag semantic HTML akan dibaca oleh browser seperti tag article, section pada Chrome, Safari dan Firefox. Namun, bukan berarti kita harus mengabaikan menggunakan tag tersebut. Tag-tag tersebut ada dengan tujuan ketika kita koding HTML kita tahu bahwa tag ini ditujukan untuk article maupun section.