Yayınlanma tarihi: 27 Mayıs 2026
Baseline aylık özetine hoş geldiniz. Nisan 2026'da bazı CSS özellikleri ve hassas matematik yardımcı programları kullanıma sunulurken yapısal semantik öğeler ve diğer Web API eklemeleri, geliştirici topluluğundaki gelişmelerle birlikte yaygın olarak kullanılabilir hale geldi.
2026'da temel plan ve erişilebilirlik
Web için geliştirme, herkesin kullanabileceği bir deneyim oluşturmak anlamına gelir. A11y Up'ın yakın tarihli bir makalesinde, geliştiriciler web standartlarını kullandığında erişilebilirlik ihtiyaçlarının daha etkili bir şekilde karşılandığı belirtiliyor. Mühendisler bir süredir, web platformunun bir parçası olan erişilebilir kalıpları yeniden oluşturmak için özel ve genellikle ağır JavaScript çözümleri sunuyor. Bu özel çözümler bazen kırılgan olur, yardımcı teknolojilerde bozulmaya yatkındır ve bakımı zordur.
Makalede, web platformu özelliklerinin tarayıcılar arası birlikte çalışabilirliğe ulaşmasıyla birlikte, erişilebilirlik göz önünde bulundurularak geliştirme yapmanın daha etkili bir görev haline geldiği vurgulanıyor. Web özelliklerini kullanarak yaygın hedeflere ulaşmak ve kullanıcı arayüzü kalıplarını kullanmak, ağır işlerin çoğunu halleder. Böylece doğru semantik doğrudan ekran okuyuculara ve klavye gezinme yardımcı programlarına sorunsuz bir şekilde sunulur. Temel çizgi, web özelliğinin projelerinizde değerlendirilip kullanılacak kadar olgunlaştığı anı işaret ederek burada bir kılavuz görevi görür.
Baseline'da yeni kullanıma sunulan özellikler
Bu bölümdeki özellikler, Nisan 2026 itibarıyla temel tarayıcı grubunda desteklenmektedir ve artık Baseline'da yeni kullanıma sunulmuştur.
CSS contrast-color() işlevi
Dinamik tema motorları ve özelleştirilebilir bileşenler, geliştiricileri yüksek kontrast tercih eden kullanıcıları desteklemek için birden fazla renk sistemi kullanmaya zorladı. CSS contrast-color() işlevi, bu bakım yükünü tamamen tarayıcıya aktarır. İşleve temel bir giriş rengi iletildiğinde motor, yüksek kontrastlı bir eşlik eden rengi değerlendirip döndürür. Bu renk, genellikle en yüksek okunabilirlik puanını sağlayan renge bağlı olarak siyah veya beyazla eşlenir.
.card-header {
background-color: var(--dynamic-bg-color);
/* Automatically resolves to the highest-contrast text color */
color: contrast-color(var(--dynamic-bg-color));
}
Bu sayede, özel bir çözüm veya bakımı zor olan CSS kullanmadan okunabilirlik için erişilebilirlik standartlarını karşılayabilirsiniz. Orta ton renk seçimlerinizi takip etmeye devam etmeniz gerekse de bu işlev, kullanıcı uyarlaması için gereken standart CSS'yi azaltır. Daha fazla bilgiyi contrast-color() için MDN referans sayfasında bulabilirsiniz.
Math.sumPrecise()
Standart döngüler veya Array.prototype.reduce() gibi yöntemler kullanılarak sayı dizilerinin toplanması, kayan nokta duyarlılığının kaybolmasına neden olabilir. Bu durum, önemli finansal hesaplamaları veya telemetri toplamlarını etkileyebilir.
Math.sumPrecise() yöntemi bu sorunu giderir. Sayıların yinelenebilir bir değerini kabul eder ve doğru bir toplam sağlamak için hassasiyet açısından güvenli bir rutin yürütür. Math.sumPrecise() ile ilgili MDN dokümanlarındaki mekanizmalara göz atın.
Yaygın olarak kullanılabilen temel özellikler
Aşağıdaki özellikler Baseline'de genel kullanıma sunuldu. Bu özellikler artık projelerinizde geniş çapta uyumlu ve kullanılabilir.
<search> öğesi
HTML <search> öğesi, bir web uygulamasındaki arama deneyimini toplu olarak temsil eden form kontrolleri, filtreleme mekanizmaları ve gönderim yardımcı programları için açık bir sarmalayıcı görevi görür.
<search>
<form action="/site-search">
<label for="query">Search documentation</label>
<input type="search" id="query" name="q">
<button>Go</button>
</form>
</search>
Kapsayan bir öğeyi <search> etiketiyle değiştirerek kullanıcılara erişilebilirlik avantajı sağlarsınız. Tarayıcı, öğeye otomatik olarak search örtülü ARIA landmark rolünü atar. Bu sayede <form> öğesinde role="search" belirtme ihtiyacı ortadan kalkar. Bu sayede ekran okuyucular, arama arayüzlerini tanımlayabilir ve kullanıcılara bu arayüzlerde gezinme konusunda yardımcı olabilir. <search> öğesinin MDN sayfasındaki uygulama ayrıntılarını okuyun.
Web kimlik doğrulama ortak anahtarı erişimi
Web Authentication (WebAuthn) API ile şifresiz kimlik doğrulamaya geçiş, artık AuthenticatorAttestationResponse arayüzünde doğrudan mülk ayıklayıcılar için geniş destek sayesinde daha az karmaşık. getPublicKey() ve getPublicKeyAlgorithm() gibi yöntemlerle tarayıcı, ham ikili verilerle çalışmak zorunda kalmadan genel anahtar ayrıntılarını sizin için ayıklar. Bu özellikler ve bunları kullanma hakkında daha fazla bilgiyi MDN'nin AuthenticatorAttestationResponse sayfasında bulabilirsiniz.
String.prototype.isWellFormed() ve String.prototype.toWellFormed()
JavaScript dizeleri, Unicode'daki karmaşık karakterleri ve emojileri çiftler halinde eşleyen UTF-16 olarak kodlanır. Bir dize bu durum dikkate alınmadan dilimlenirse yedek çiftin izole edilmiş yarısı (yalnız yedekler olarak bilinir) kalır ve bu da hatalı biçimlendirilmiş metinle sonuçlanır.
isWellFormed(), geliştiricilerin bir dizenin tek başına yedek karakter içerip içermediğini kontrol etmesine olanak tanır ve Boole değeri döndürür. Bir dize doğrulanamazsa toWellFormed() işlevini çağırarak geçersiz vekil karakterleri standart Unicode değiştirme karakteriyle (U+FFFD) değiştirebilirsiniz. Bu, encodeURI() gibi işlevleri çağırmadan önce yararlıdır. Bu işlevler, hatalı biçimlendirilmiş girişlerle karşılaştığında URIError hatası verir. Bu yöntemlerin işleyiş şeklini String.prototype.isWellFormed() ile ilgili MDN belgelerinden öğrenebilirsiniz.
ARIA özelliği yansıtması
Etkileşimli öğelerdeki erişilebilirlik durumlarını güncellemek için standart DOM özelliği yöntemleriyle (ör. element.setAttribute('aria-expanded', 'true')) gidiş dönüşler yapılması gerekiyordu. ARIA özelliği yansıtması, erişilebilirlik özelliklerini nesne özellikleri olarak yansıtarak bu işlemi basitleştirir.
Element arayüzü, ARIA özelliklerini doğrudan element.ariaExpanded, element.ariaChecked ve element.ariaHidden gibi örnek özelliklere yansıtır. Bu, nokta gösterimi söz dizimini kullanarak erişilebilirlik durumlarını değiştirmenize olanak tanır:
// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";
ARIA hedeflerini JavaScript özellikleri olarak ele almak, kullanıcı arayüzü çerçevelerinin ve durum yönetimi araçlarının yardımcı bağlamları daha güvenilir bir şekilde koordine etmesine olanak tanır ve ekran okuyucu bağlamlarının gerçek uygulama durumunuzla uyumlu kalmasına yardımcı olur. Yansıtılan özelliklerin tam listesi için MDN'nin Element örnek özellikleri hakkındaki kılavuzuna göz atın.
Son
Baseline ile ilgili atladığımız bir şey varsa bize bildirin. Bu bilgiyi gelecekteki bir yayına ekleyelim. Sorularınız varsa veya Baseline hakkında geri bildirimde bulunmak istiyorsanız sorun izleyicimizde sorun kaydı oluşturabilirsiniz.