`<output>` etiketi

(denodell.com)

4 puan yazan GN⁺ 2025-10-12 | 1 yorum | WhatsApp'ta paylaş

<output> etiketi, web geliştiricileri arasında çok iyi bilinmese de dinamik sonuç gösterimi ve ekran okuyucu erişilebilirliğini yerleşik olarak sunar
HTML spesifikasyonunda uzun süredir yer alır ve role="status" ile otomatik eşlenerek görme engelli yardımcı teknolojilere değişiklikleri duyurur
<output>, girdi değerlerine göre hesaplanan sonuçları bildirmek için kullanılır, ancak çoğu eğitimde ve kütüphanede göz ardı edilir
for="" özniteliği desteği gibi güçlü erişilebilirlik özellikleri sağlar ve JavaScript framework'leriyle de son derece uyumludur
Çeşitli gerçek proje örneklerinde hesap makinesi, slider değeri biçimlendirme, form doğrulama geri bildirimi gibi durumlarda faydalı şekilde kullanılabilir

HTML'deki gizli mücevher: `<output>` etiketi

Tüm geliştiriciler <input> öğesini iyi bilir; bu, web'in temel girdi araçlarından biridir.

Ancak <output> öğesi çoğu kişi tarafından hiç kullanılmamış, hatta çoğu zaman varlığından bile haberdar olunmamıştır.

Bu üzücü, çünkü şimdiye kadar <div> ve ARIA ile geçici çözümler üretilen dinamik sonuç sunumu ve erişilebilirlik sorunlarını <output> doğrudan çözebilir.

Bu etiket HTML spesifikasyonunda uzun zamandır yer alsa da hâlâ yaygın olarak bilinmiyor.

HTML5 spesifikasyonundaki tanım

HTML5 spesifikasyonuna göre

<output> öğesi, uygulamada hesaplanan bir sonucu veya kullanıcı eyleminin sonucunu temsil eder

Erişilebilirlik ağacında role="status" ile eşlenir; böylece değer her değiştiğinde ekran okuyucu tüm içeriği kullanıcıya otomatik olarak bildirir.
Bu, varsayılan olarak aria-live="polite" aria-atomic="true" uygulanmış gibidir.

Bu davranış, kullanıcının akışını bölmeden tüm içeriği sakince okumasıyla öne çıkar.
Gerekirse geliştirici davranışı değiştirmek için ayrıca ARIA öznitelikleri tanımlayabilir.

`<output>` nasıl kullanılır

Basitçe aşağıdaki gibi kullanılabilir:

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

Yalnızca bu şekilde kullanıldığında bile yerleşik yardımcı teknoloji desteği elde edilir; ek özniteliklere, ezberlemesi zor API'lere gerek yoktur ve yalnızca saf HTML ile erişilebilirlik sağlanabilir.

Keşif anı

Yazar, bir erişilebilirlik projesinde çok adımlı formun puan gösterimi üzerinde çalışırken <output> değerini fark etti.

Form puanındaki değişim ekranda görünüyordu, ancak ekran okuyucu kullanan kullanıcılar bu değişimi fark edemiyordu.
Bu sorun ARIA live region ile çözülebiliyordu, ancak anlamsal olarak doğru HTML kullanmanın daha uygun olduğu düşünüldü.

Spesifikasyonu incelerken formdan bağımsız olarak da kullanılabilen ve sonucu otomatik olarak duyuran <output> öğesi keşfedildi; en basit çözümün zaten standardın içinde olduğu anlaşıldı.

Neden pek kullanılmıyor

Bu unutulmuş bir etiket; çoğu eğitimde veya bileşen kütüphanesinde ele alınmıyor ve Github açık depolarında da neredeyse hiç kullanım örneği yok.

Bunun sonucu olarak bilgi eksikliği sürekli tekrar ediyor ve az kullanılma döngüsü sürüp gidiyor.

Bilinmesi faydalı noktalar

<output> da <label> gibi for="" özniteliğine sahiptir
- Sonucun hangi girdilere bağlı olduğunu, ilgili id değerlerini boşlukla ayırarak belirtmek mümkündür
Görsel olarak fark yaratmasa da erişilebilirlik ağacında girdi-sonuç ilişkisini anlamsal olarak kurar
<form> öğesi olmadan da, kullanıcı girdisine göre dinamik olarak değişen metin gereken her yerde kullanılabilir
Varsayılan olarak satır içi öğedir; bu nedenle yerleşim amacına göre <span> veya <div> gibi stillendirilmesi gerekebilir
2008'den beri spesifikasyonda yer aldığı için tarayıcı ve ekran okuyucu desteği çok güçlüdür
React, Vue gibi tüm JS framework'leriyle uyumu çok iyidir
Ekim 2025 itibarıyla bazı ekran okuyucular güncellemeleri okumayabiliyor; bu durumda role="status" özniteliğinin ayrıca eklenmesi önerilir

Önemli:
<output>, kullanıcı girdisiyle açık biçimde ilişkili hesaplama sonucu veya eylem sonucu için uygundur.
Genel bildirimlerde (ör. toast mesajları) kullanılmamalı; sistem geri bildirimi için role="status" veya role="alert" tercih edilmelidir.

Gerçek kullanım örnekleri

Hesap makinesi uygulaması

Basit bir hesap makinesi yaparken sonuç gösterimini <output> ile kurmak, ek ARIA rolleri olmadan sonuç değerinin otomatik olarak duyurulması avantajını sağlar.

Slider değeri biçimlendirme (Volvo Cars örneği)

Bir slider ile dahili bir değer (ör. 10000) ayarlanırken, <output> içinde bunun okunması kolay biçimi gösterilir (10,000 miles/year).
Kapsayıcıya role="group" ve ortak bir etiket verilerek erişilebilirlik ve React bileşen kompozisyonu desteklenebilir.

Form doğrulama geri bildirimi

Parola gücü gibi gerçek zamanlı doğrulama mesajları da <output> aracılığıyla yardımcı teknoloji kullanıcılarına anında bildirilebilir.

Sunucu tarafından hesaplanan sonuçları gösterme

Kargo ücreti, vergi, sunucu API'sinden alınan öneri değerleri gibi sunucuda hesaplanan değerler için de <output> uygundur.

Aşağıdaki React örneğinde olduğu gibi, sunucudan gelen tutar alınıp hemen <output> içinde gösterilebilir.

Yerel öğe kullanmanın tatmini

Spesifikasyonun amaçladığı şekilde saf HTML öğelerini doğru kullanmak,
erişilebilirliği artırır ve kodu sadeleştirir.
Aynı zamanda az bilinen <output> etiketinin değerini ve kullanım alanlarını yeniden keşfetmeyi sağlar.

Bu, HTML içinde hâlâ gizli mücevher niteliğinde pek çok öğe bulunduğunu düşündürür.

Son güncelleme: Bob Rudis, bu yazıya uygun bir çalışan örnek sayfa yayımladı

1 yorum

GN⁺ 2025-10-12

Hacker News görüşleri

<output> öğesinin sorunu, işlevselliğinin yarım uygulanmış olması; bu yüzden pratikte neredeyse işe yaramaz hissettiriyor
input gibi bir type özelliği olsa çok daha kullanışlı olacağını düşünüyorum
Sciter'imde output|type üzerinde deneme yaptım ve aşağıdaki gibi çeşitli türler ekledim
- type="text": varsayılan, biçimlendirme yok
- type="number": kullanıcının yereline göre sayı biçimi
- type="currency": kullanıcının yereline göre para birimi biçimi
- type="date": tarih olarak göster, saat dilimi dönüşümü yok
- type="date-local": yerel tarih biçimi, UTC datetime değerini yerele çevir
- type="time": saat olarak göster
- type="time-local": yerel saat, değer UTC datetime olarak işlenir
  Bu şekilde sunucu kullanıcının yerel ayarını bilmeden de veriyi aktarabilir
- Makaledeki ve spes'teki gibi <output>, uygulamalarda bir hesabın sonucunu veya kullanıcı eyleminin sonucunu göstermek için vardır
  Burada önemli olan ARIA semantiğidir; sayfa güncellendiğinde ekran okuyucu sonucu okur
  <output> içine istediğiniz türde gösterimi kendiniz koyabilirsiniz
  Varsayılan "text"tir; tarih veya saat için <time> etiketi kullanılabilir
  Şu anda sadece sayı biçimlendirmeye adanmış bir etiket yok ama Intl geldikten sonra buna yönelik istekler arttı
  Örneğin:
  <output>The new date is <time datetime="2025-10-11">Oct 11</time></output>
  Yani tüm türleri ele alması gereken şey <output> değil, türleri ifade etmesi gereken şey HTML'in bütünü olmalı
- Yarım yamalak işlev yüzünden neredeyse işe yaramaz denmesine katılıyorum
  2025 itibarıyla hâlâ bu kadar çok böyle örnek olması üzücü
  Bunun önemli bir kısmında Safari'nin payı olduğunu düşünüyorum
  En uç örnek <input type="date">
  Doğrudan prodüksiyonda kullanılabileceği söyleniyor ama tarayıcılar arası sorunlar yüzünden daha çok JS date picker kullanılıyor; bu da tuhaf hissettiriyor
- Benim kişisel dileğim, <output>'un doğrudan <input>'a bağlanıp sonucu göstermesi
  Örneğin: <input type="range" id="example_id" name="example_nm" min="0" max="50"> <output name="example_result" for="example_id"></output> Böylece input değerini doğrudan gösterebilse güzel olurdu
  Bir type belirteci de eklense, ayrıca ::before ya da ::after CSS içinde content: ile içeriğin değişmesi de mümkün olsa iyi olurdu
  Çeşitli <input> türleri için böyle biçimlendirme özellikleri olsa kullanılabilir olur diye düşünüyorum
  Özellikle type="tel" gibi girdileri şık biçimde formatlayıp gösterebilmek kullanışlı olurdu
  'checkbox, color, date, datetime-local, file, month, number, radio, range, tel, time, url, week' gibi türlerin hepsinde işe yarayabilir
  Metin türleri de bazı koşullarda yararlı olabilir
  Bir de for="" özelliğinin daha fazla rol üstlenmesini isterdim
  Şu anda örneklerin çoğu bunu <output name="result"><form oninput="result.value=..."> gibi dolaylı biçimde kullanıyor
- <output> için <input> ile simetrik şekilde türler düşünmek yanlış yaklaşım
  output, girdi gibi tipli bir değer değil; sayfada içeriği değişen bir kapsayıcı kavramı
- Ben şu biçimi tercih ederim <output for=input>  <time is=time-locale datetime=2001-02-03>2001-02-03</time> </output> Bu bileşen yerel ayara göre değeri değiştirebilse iyi olurdu
  HTML/CSS ile sahte içerik üretmek birçok soruna yol açmaya açık
  Örneğin CSS ::before/:after ile enjekte edilen şeyi kopyalarken sorun çıkması ya da .innerText ile gerçek iç metin arasındaki fark gibi
  Elbette bunlarla ilgili kararlar vermek gerekir ama bir etikete fazla işlev yüklenirse sonunda sadece o etiket için yazılmış bir DSL'ye dönüşür
  Değerin türü (mutlak/göreli), eşlik eden veri (para birimi türü vb.) derken iş HTML işlemenin bir parçası hâline gelir ve JS ile esnek biçimde değiştirmek zorlaşır
<output>? Ben de hiç kullanmadım
Bugün ilk kez öğrendim ve TIL listeme ekledim
GitHub public repo'larında arayınca da neredeyse hiç çıkmamasının sebebi, kimse öğretmezse kimsenin kullanmaması
Buradan aklıma gelen şu: LLM'ler kod üretirken bu etiketi gerçekten kullanıyor mu, yoksa hiç öğrenmemiş mi?
- Ben de AI'ın dokümanları (spec) okumamasından endişeliyim
  Yeni bir W3C spec'i çıksa bile çoğu kişi sadece "vibe coding" yaparsa ne olacak?
  AI güncel spec'leri yansıtmak yerine eski kod kalıplarını tekrar tekrar üretirse, spec güncellemelerinin yayılması bugün olduğundan bile zor olabilir
- Claude bana kod üretirken <output> etiketini ilk kez orada fark ettim
- LLM'ler standart belgeleri doğrudan okumaz; mevcut projelerden elde ettikleri devasa veri içindeki istatistiksel örüntülere göre kod üretirler
  Gerçek kodda bu etiket neredeyse hiç kullanılmıyorsa, LLM çıktısında da neredeyse hiç görünmez
7 Ekim 2025 güncellemesi: Bazı ekran okuyucular hâlâ <output> etiketindeki güncellemeleri algılamıyor, bu yüzden bir süre daha role özelliğini açıkça kullanmak daha iyi olabilir: <output role="status">
17 yıllık bu eski etiketin desteğinin iyileşmesini beklemekten başka çare olup olmadığını merak ediyorum
- Windows ortamında NVDA deposuna issue açarsanız genelde oldukça iyi ilgileniyorlar
  https://github.com/nvaccess/nvda
- 17 yıllık bir standart olmasına rağmen ekran okuyucuların etiketi yok sayması sorununu düzeltmek için çaba gerekiyor
  Bunun açıkça ekran okuyucu tarafının sorunu olduğunu düşünüyorum
Birkaç frontend web erişilebilirliği dersi aldım ama <output> etiketini bir kez bile görmedim
Bu faydalı bilgiyi paylaştığın için teşekkürler
<output> da <label> gibi for="" özelliğine sahip; bunun ekran okuyucu kullanıcıları için gerçekten anlamlı olup olmadığını merak ediyorum
Mevcut web'de neredeyse hiç kullanılmadığı için ekran okuyucu kullanıcıları da buna alışık olmayabilir ama sonuçta bu muhtemelen yazılımın UX'ine bağlıdır
- Ben doğrudan ekran okuyucu kullanmıyorum ama test amaçlı çok uğraştım
  Bunun yardımcı teknolojilere düzgün biçimde açılıp açılmadığından emin değilim
  Şu an bilgisayar başında değilim, o yüzden hemen test edemem
  Kişisel olarak output değerini açıkça etiketlemenin çok daha iyi olduğunu düşünüyorum
  Örneğin: <label for="output">Total</label> <output id="output">£123.45</output> Böyle olunca ekran okuyucu bunu "Total, £123.45" diye okur ve bağlamı anlamak kolaylaşır
Semantik HTML'in yeni başlayanlar için bir tuzak olduğunu düşünüyorum
Çok kafa yormadan aria-live gibi gerçekten çalışan çözümler kullanmak gerek
Böyle öğelerle eğlenebilirsiniz ama geliştirici olarak sorumluluğumuz, kullanıcı için gerçekten çalışan bir yapı sunmak
Yaygın kullanılmayan semantik etiketlerdense, tarayıcıların ve mevcut ekosistemin beklediği şeyleri kullanmak daha doğru
- HTML sadece tarayıcılar için değildir
  EPUB ile çok çalışmış biri olarak semantik sayfa yapısının genel olarak çok daha kolay ve iyi olduğunu söyleyebilirim
<output>'un web sayfası erişilebilirliği için, özellikle de ekran okuyucu desteği için bir etiket olduğunu öğrenmiş oldum
"ARIA", erişilebilirliği artıran HTML özellikleri kümesi olan Accessible Rich Internet Applications'ın kısaltmasıdır
- Bu, React'in altında JavaScript'in ne olduğunu açıklamaya benziyor
  Erişilebilirliğin temellerini bilmemek utanılacak bir şey değil ama bu yüzden okuyucunun bilmemesine şaşırır gibi tepki vermek de gereksiz bence
- MDN'de ilgili belgeler gayet iyi derlenmiş
  (Makalenin yazarı da aynı rehberi vurguluyor)
  "ARIA kullanmanın birinci kuralı, gerekli semantik ve davranışı zaten sağlayan yerel bir HTML öğesi veya özelliği varsa, onu yeniden kullanmak için ARIA role, state veya property eklemeye çalışmak yerine doğrudan o yerel öğeyi ya da özelliği kullanmaktır"
  https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
- Açıklama için teşekkürler
  Aslında ben de Google'da aratabilirdim ama bulanık bir cumartesi öğleden sonrasında senin yorumunu okumak daha rahattı
  Tekrar teşekkürler
Bu makalenin başlığını görünce <output>'un yanlış kullanıldığını sanmıştım ama okuyunca gerçekten şaşırdım
(Özellikle en üstteki şüpheli GenAI hesap makinesi görselini görünce daha da büyük bir fiyasko beklemiştim, ama içerik o kadar iyiydi ki hepsini okuyup bitirdikten sonra ancak tekrar o görseli hatırladım)
- O şüpheli GenAI hesap makinesi görseli çok komik
  Toplama, çarpma ve bölme var ama çıkarma yok
- O şüpheli GenAI hesap makinesi görseli hakkında konuşacak olursak
  AI'dan önce insanların yaptığı daha da özensiz görselleri unutuyor gibiyiz
  AI sayesinde artık en azından utanılmayacak kadar düzgün görselleri anında üretebiliyoruz
  Bu örnekteyse (öznel olarak) vintage retro IT havasını iyi verdiği için anlamlı buluyorum
  Her AI kullanımı profesyonel sanatçıların işinin yerine geçmek zorunda değil
Böyle şeyler gördükçe hoşuma gidiyor
Bir başka ipucu da, form adlarını backend veri yapısıyla uyumlu verecek şekilde isimlendirirseniz JS ile değer çekme veya veriyi yeniden şekillendirme ihtiyacı azalır
Örneğin şöyle: <input name=“entity[id]”> <input name=“entity[relation]”> Böylece JS ile ayrıca uğraşıp veri oluşturmaya gerek kalmadan sadece formu göndererek doğrudan istediğiniz veri elde edilir