Tag `<output>`

 (denodell.com)
4 poin oleh GN⁺ 2025-10-12 | 1 komentar | Bagikan ke WhatsApp
  • Tag <output> memang tidak begitu dikenal oleh para web developer, tetapi secara bawaan menyediakan tampilan hasil dinamis dan aksesibilitas untuk screen reader
  • Tag ini sudah lama ada dalam spesifikasi HTML, dan otomatis dipetakan ke role="status" sehingga perubahan isinya diumumkan ke teknologi bantu bagi tunanetra
  • <output> digunakan untuk memberi tahu hasil yang dihitung berdasarkan nilai input, tetapi diabaikan oleh sebagian besar tutorial maupun library
  • Menyediakan aksesibilitas yang sangat baik, termasuk dukungan atribut for="", serta sangat kompatibel dengan framework JavaScript
  • Dalam berbagai proyek nyata, tag ini berguna untuk kalkulator, pemformatan nilai slider, dan umpan balik validasi formulir

Permata tersembunyi di HTML: tag <output>

Semua developer mengenal baik elemen <input>, yang merupakan sarana input inti di web.

Namun, sebagian besar belum pernah memakai elemen <output>, bahkan banyak yang tidak tahu elemen ini ada.

Ini disayangkan, karena representasi hasil dinamis dan aksesibilitas yang selama ini sering ditangani dengan solusi sementara memakai <div> dan ARIA sebenarnya bisa diselesaikan oleh <output> secara bawaan.

Tag ini sudah lama ada dalam spesifikasi HTML, tetapi sampai sekarang masih belum dikenal luas.

Definisi dalam spesifikasi HTML5

Menurut spesifikasi HTML5

elemen <output> merepresentasikan hasil yang dihitung dalam aplikasi atau hasil dari tindakan pengguna

Dalam accessibility tree, elemen ini dipetakan ke role="status", sehingga setiap kali nilainya berubah, seluruh isinya otomatis dibacakan screen reader kepada pengguna.
Ini setara dengan seolah-olah aria-live="polite" aria-atomic="true" diterapkan secara bawaan.

Perilaku ini memiliki karakteristik membacakan seluruh isi secara perlahan tanpa mengganggu alur pengguna.
Bila diperlukan, developer juga bisa menetapkan atribut ARIA sendiri untuk mengubah perilakunya.

Cara menggunakan <output>

Secara sederhana, elemen ini bisa digunakan seperti berikut:

<output>여기에 동적 값 표시</output>

Hanya dengan ini saja, kita sudah mendapatkan dukungan teknologi bantu bawaan, tanpa perlu atribut tambahan atau API yang sulit diingat, dan aksesibilitas bisa dicapai hanya dengan HTML murni.

Momen penemuan

Penulis menemukan nilai dari <output> saat mengerjakan proyek aksesibilitas untuk menampilkan skor pada formulir bertahap.

Perubahan skor pada formulir terlihat di layar, tetapi pengguna screen reader tidak dapat mengetahui perubahan tersebut.
Masalah ini memang bisa diatasi dengan ARIA live region, tetapi menggunakan HTML yang bermakna jelas terasa lebih tepat.

Saat meninjau spesifikasi, penulis menemukan <output> yang bisa digunakan terpisah dari formulir dan otomatis mengumumkan hasil, lalu menyadari bahwa solusi paling sederhana sebenarnya sudah ada di dalam spesifikasi.

Mengapa jarang dipakai

Ini adalah tag yang terlupakan; sebagian besar tutorial maupun library komponen tidak membahasnya, dan bahkan di repositori publik Github hampir tidak ada contoh penggunaannya.

Akibatnya, kekosongan pengetahuan terus berulang dan menciptakan lingkaran setan karena tag ini jadi makin jarang dipakai.

Hal-hal yang baik untuk diketahui

  • Seperti <label>, <output> juga memiliki atribut for=""
    • Anda bisa menyebutkan id yang dipisahkan spasi untuk menunjukkan input mana yang menjadi dasar hasil tersebut
  • Secara visual tidak ada perubahan, tetapi di accessibility tree, hubungan input-hasil terhubung secara semantik
  • Bahkan tanpa elemen <form>, tag ini bisa dipakai di mana saja selama teks berubah secara dinamis sesuai input pengguna
  • Secara bawaan ini adalah elemen inline, jadi mungkin perlu diberi gaya seperti <span> atau <div> sesuai kebutuhan layout
  • Karena sudah masuk spesifikasi sejak 2008, dukungan browser dan screen reader sangat baik
  • Kompatibilitasnya sangat baik dengan semua framework JS seperti React dan Vue
  • Per Oktober 2025, beberapa screen reader masih ada yang tidak membacakan pembaruan, sehingga dalam kasus seperti ini disarankan menambahkan atribut role="status"

Penting:
<output> cocok untuk hasil perhitungan atau hasil aksi yang terhubung jelas dengan input pengguna.
Untuk notifikasi global (misalnya pesan toast), jangan gunakan elemen ini; untuk umpan balik sistem sebaiknya tangani dengan role="status" atau role="alert".

Contoh penggunaan nyata

Aplikasi kalkulator

Saat membuat kalkulator sederhana, menampilkan hasil dengan <output> memberi keuntungan karena nilai hasil otomatis diumumkan tanpa peran ARIA tambahan.

Pemformatan nilai slider (kasus Volvo Cars)

Nilai internal slider (misalnya 10000) disesuaikan, lalu ditampilkan di <output> dalam bentuk yang lebih mudah dibaca (10,000 miles/year).
Dengan memberi role="group" dan label bersama pada kontainernya, pendekatan ini bermanfaat untuk aksesibilitas dan komposisi komponen React.

Umpan balik validasi formulir

Pesan validasi real-time seperti kekuatan kata sandi juga bisa disampaikan lewat <output> agar langsung diumumkan kepada pengguna teknologi bantu.

Menampilkan hasil perhitungan server

<output> juga cocok untuk nilai yang dihitung di server, seperti biaya pengiriman, pajak, atau nilai rekomendasi dari API server.

Seperti pada contoh React di bawah, nilai yang diterima dari server bisa langsung ditampilkan ke <output>.

Kepuasan memakai elemen native

Dengan menggunakan elemen HTML murni sesuai tujuan spesifikasi,
aksesibilitas dapat ditingkatkan dan kode menjadi lebih sederhana,
sekaligus menemukan kembali nilai dan cara pemanfaatan tag <output> yang jarang dikenal.

Ini juga menunjukkan bahwa HTML masih menyimpan banyak elemen yang layak disebut permata tersembunyi.

Pembaruan terbaru: Bob Rudis merilis halaman contoh yang berfungsi yang cocok dengan artikel ini

Bacaan terkait

1 komentar

 
GN⁺ 2025-10-12
Komentar Hacker News

  • Masalah elemen <output> adalah fungsinya terasa setengah jadi sehingga dalam praktiknya hampir tidak berguna
    Menurut saya akan jauh lebih praktis kalau ada atribut type seperti pada input
    Saya pernah bereksperimen dengan output|type di Sciter saya, dan menambahkan beberapa tipe berikut

    • type="text": default, tanpa format
    • type="number": format angka sesuai locale pengguna
    • type="currency": format mata uang sesuai locale pengguna
    • type="date": ditampilkan sebagai tanggal, tanpa konversi zona waktu
    • type="date-local": format tanggal lokal, UTC datetime diubah ke lokal
    • type="time": ditampilkan sebagai waktu
    • type="time-local": waktu lokal, nilai diperlakukan sebagai UTC datetime
      Dengan pendekatan seperti ini, server bisa mengirim data tanpa perlu mengetahui locale pengguna

    • Seperti di artikel dan spesifikasi, <output> dipakai untuk menampilkan hasil perhitungan di aplikasi atau hasil dari tindakan pengguna
      Semantik ARIA adalah bagian penting di sini, dan saat halaman diperbarui hasilnya akan dibacakan oleh screen reader
      Di dalam <output> Anda bisa langsung menaruh representasi tipe apa pun yang diinginkan
      "text" adalah default, dan untuk tanggal atau waktu kita bisa memakai tag <time>
      Saat ini belum ada tag khusus untuk pemformatan angka, tetapi sejak hadirnya Intl permintaan soal itu makin sering muncul
      Contohnya:
      <output>The new date is <time datetime="2025-10-11">Oct 11</time></output>
      Artinya, <output> tidak perlu menangani semua tipe; justru keseluruhan HTML-lah yang harus mengekspresikan tipe

    • Saya setuju dengan pendapat bahwa fitur setengah matang membuatnya nyaris tidak berguna
      Sangat disayangkan karena bahkan di tahun 2025 masih terlalu banyak kasus seperti ini
      Saya rasa Safari memikul tanggung jawab besar untuk hal itu
      Contoh paling ekstrem adalah <input type="date">
      Katanya aman dipakai langsung di production, tetapi karena masalah lintas-browser jadinya lebih sering memakai JS date picker, dan itu terasa aneh

    • Harapan pribadi saya adalah <output> bisa langsung terhubung ke <input> untuk menampilkan hasil
      Misalnya: <input type="range" id="example_id" name="example_nm" min="0" max="50"> <output name="example_result" for="example_id"></output> Saya berharap nilainya bisa langsung ditampilkan seperti itu
      Akan bagus juga kalau ada penentu "type", dan kalau isi bisa diubah melalui content: di CSS ::before atau ::after
      Menurut saya, fitur pemformatan seperti ini akan berguna untuk berbagai tipe <input>
      Terutama untuk hal seperti type="tel", akan nyaman kalau input bisa ditampilkan dengan format yang lebih rapi
      Ini juga bisa dipakai untuk checkbox, color, date, datetime-local, file, month, number, radio, range, tel, time, url, week, dan lainnya
      Tipe berbasis teks pun bisa berguna dalam kondisi tertentu
      Dan saya juga berharap atribut for="" bisa punya peran yang lebih beragam
      Saat ini kebanyakan contoh justru mengakali pemakaiannya seperti <output name="result"><form oninput="result.value=...">

    • Memikirkan <output> sebagai pasangan simetris dari input yang sama-sama punya tipe adalah pendekatan yang keliru
      Output bukan konsep yang memiliki tipe seperti nilai input, melainkan kontainer di halaman yang isinya berubah

    • Saya lebih suka bentuk di bawah ini <output for=input>

      <!-- sisipkan komponen time-locale kustom -->

      <time is=time-locale datetime=2001-02-03>2001-02-03</time> </output> Akan bagus kalau komponen ini mengubah nilainya sesuai locale
      Membuat konten palsu dengan HTML/CSS mudah menimbulkan berbagai masalah
      Misalnya saat menyalin sesuatu yang disuntikkan lewat CSS ::before/:after, atau perbedaan antara .innerText dan inner text yang sebenarnya
      Memang keputusan soal hal-hal ini perlu dibuat, tetapi kalau terlalu banyak fungsi dimasukkan ke satu tag, pada akhirnya tag itu akan berubah menjadi semacam DSL khusus untuk dirinya sendiri
      Jenis nilai (absolut/relatif), data pendamping (seperti jenis mata uang), semuanya menjadi bagian dari pemrosesan HTML sehingga tidak lagi fleksibel untuk diubah lewat JS

  • <output>? Saya juga belum pernah memakainya
    Baru tahu hari ini, jadi saya tambahkan ke daftar TIL (hal yang saya pelajari hari ini)
    Alasan kenapa hampir tidak muncul bahkan saat dicari di repo publik GitHub mungkin karena kalau tidak ada yang mengajarkan, tidak ada yang memakainya
    Yang langsung terpikir oleh saya di sini adalah apakah LLM benar-benar memanfaatkan tag ini saat menghasilkan kode, atau justru sama sekali tidak terlatih untuk itu

    • Saya juga khawatir AI tidak membaca dokumen/spesifikasi
      Bagaimana kalau ada spesifikasi W3C baru muncul, tetapi kebanyakan orang malah melakukan "vibe coding"?
      Kalau AI tidak mencerminkan spesifikasi terbaru dan hanya terus mengulang pola kode lama, penyebaran pembaruan spesifikasi justru bisa menjadi lebih sulit dibanding sekarang

    • Saya pertama kali menemukan tag <output> karena Claude menghasilkan kode yang memakainya

    • LLM tidak membaca dokumen standar secara langsung; mereka menghasilkan kode berdasarkan pola statistik dari data dalam jumlah besar yang diperoleh dari proyek-proyek yang sudah ada
      Jika tag ini memang hampir tidak pernah dipakai di kode nyata, maka hasil kode dari LLM juga hampir tidak akan menampilkannya

  • Pembaruan 7 Oktober 2025: beberapa screen reader masih belum mengenali pembaruan pada tag <output>, jadi untuk sementara mungkin lebih baik memakai atribut role secara eksplisit: <output role="status">
    Saya bertanya-tanya apakah kita memang hanya bisa menunggu sampai dukungan untuk tag tua berusia 17 tahun ini membaik

    • Di lingkungan Windows, kalau Anda membuka issue di repositori NVDA biasanya cukup responsif ditangani
      https://github.com/nvaccess/nvda

    • Meski sudah menjadi standar selama 17 tahun, tetap dibutuhkan upaya untuk memperbaiki masalah screen reader yang mengabaikan tag ini
      Menurut saya ini jelas merupakan masalah di sisi screen reader

  • Saya sudah mengikuti beberapa kelas aksesibilitas web frontend, tetapi belum pernah sekali pun melihat tag <output>
    Terima kasih sudah membagikan informasi yang bagus ini

  • <output> juga punya atribut for="" seperti <label>, dan saya penasaran apakah ini benar-benar bermakna bagi pengguna screen reader
    Karena hampir tidak pernah dipakai di web saat ini, mungkin pengguna screen reader juga belum akrab dengannya, tetapi pada akhirnya sepertinya akan sangat bergantung pada UX software itu sendiri

    • Saya sendiri tidak memakai screen reader secara langsung, tetapi cukup sering menanganinya untuk pengujian
      Saya ragu apakah ini benar-benar diekspos dengan baik ke teknologi bantu
      Saya sedang tidak di depan komputer jadi tidak bisa langsung mengujinya sekarang
      Secara pribadi, menurut saya justru jauh lebih baik memberi label yang jelas pada nilai output
      Misalnya: <label for="output">Total</label> <output id="output">£123.45</output> Dengan begitu screen reader akan membacakan "Total, £123.45", sehingga konteksnya lebih mudah dipahami

  • Menurut saya semantic HTML hanyalah jebakan untuk pemula
    Tidak perlu terlalu dipikirkan; pakailah solusi yang benar-benar berfungsi seperti aria-live
    Elemen-elemen seperti ini memang menarik untuk dimainkan, tetapi sebagai developer saya merasa tanggung jawab kita adalah membuat struktur yang benar-benar bekerja bagi pengguna
    Daripada tag semantik yang jarang dipakai, lebih tepat memakai hal-hal yang memang diharapkan oleh browser dan ekosistem yang ada

    • HTML bukan hanya untuk browser
      Dari pengalaman saya yang sering mengerjakan epub, susunan halaman semantik secara keseluruhan jauh lebih mudah dan lebih baik

  • Saya jadi tahu bahwa <output> adalah tag untuk aksesibilitas halaman web, khususnya dukungan screen reader
    ARIA adalah singkatan dari Accessible Rich Internet Applications, yaitu sekumpulan atribut HTML yang membantu meningkatkan aksesibilitas bagi penyandang disabilitas

    • Rasanya seperti menjelaskan apa itu JavaScript di bawah komentar React
      Tidak memalukan kalau belum tahu dasar-dasar aksesibilitas, tetapi saya juga tidak merasa perlu bereaksi seolah aneh kalau pembaca belum mengetahuinya

    • Dokumentasi terkait di MDN tersusun dengan baik
      (Penulis artikel juga menekankan pedoman yang sama)
      "Aturan pertama saat menggunakan ARIA adalah: jika sudah ada elemen atau atribut HTML native yang memenuhi semantik dan perilaku yang dibutuhkan, jangan gunakan ulang itu dengan menambahkan role, state, atau property ARIA; langsung gunakan elemen atau atribut native tersebut."
      https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

    • Terima kasih atas penjelasannya
      Sebenarnya saya juga bisa mencari sendiri di Google, tetapi melihat komentar Anda di sore Sabtu yang mendung ini terasa lebih nyaman
      Sekali lagi, terima kasih

  • Awalnya saya mengira dari judul artikel ini bahwa <output> sedang dipakai secara keliru, tetapi setelah membacanya saya benar-benar terkejut
    (Terutama setelah melihat gambar kalkulator GenAI dodgy di bagian atas, saya sempat mengira ini akan jauh lebih buruk, tetapi ternyata isinya sangat bagus sampai saya baru teringat lagi soal gambar itu setelah selesai membaca semuanya)

    • Gambar kalkulator GenAI dodgy itu lucu sekali
      Bisa penjumlahan, perkalian, dan pembagian, tetapi tidak bisa pengurangan

    • Soal gambar kalkulator GenAI dodgy itu
      Rasanya kita seperti melupakan gambar-gambar buatan manusia yang bahkan lebih buruk sebelum AI ada
      Berkat AI, sekarang setidaknya kita bisa langsung membuat gambar yang tidak memalukan
      Dalam kasus ini, menurut saya secara subjektif nuansa IT retro-vintage-nya justru terasa kuat sehingga punya nilai tersendiri
      Saya tidak merasa semua penggunaan AI harus menggantikan karya artis profesional

  • Saya suka setiap kali melihat hal seperti ini
    Tips lainnya, kalau nama form disusun agar cocok dengan struktur data backend, kebutuhan untuk mengambil nilai dengan JS atau menyusun ulang data bisa berkurang
    Misalnya seperti ini: <input name=“entity[id]”> <input name=“entity[relation]”> Dengan begitu, tanpa perlu repot membuat data terpisah lewat JS, cukup submit form dan datanya langsung sesuai kebutuhan