Dipublikasikan: 27 Mei 2026
Selamat datang di ringkasan bulanan Baseline. Pada April 2026, beberapa kemampuan CSS dan utilitas matematika presisi baru tersedia, sementara elemen semantik struktural dan penambahan Web API lainnya tersedia secara luas, bersama dengan peristiwa di komunitas developer.
Dasar pengukuran dan aksesibilitas pada tahun 2026
Membangun untuk web berarti membangun pengalaman yang dapat digunakan semua orang, dan artikel terbaru dari A11y Up menyatakan bahwa memperhitungkan kebutuhan aksesibilitas lebih efektif jika developer mengandalkan standar web. Selama beberapa waktu, engineer telah mengirimkan solusi JavaScript kustom dan sering kali berat untuk membuat ulang pola yang dapat diakses yang kini menjadi bagian dari platform web. Solusi khusus ini terkadang rapuh, rentan rusak di bawah teknologi pendukung, dan sulit dipertahankan.
Artikel ini menekankan bahwa saat fitur platform web mencapai interoperabilitas lintas browser, fitur tersebut membuat pengembangan dengan mempertimbangkan aksesibilitas menjadi tugas yang lebih efektif. Penggunaan fitur web untuk mencapai sasaran umum dan pola antarmuka pengguna menangani sebagian besar tugas berat, sehingga secara lancar mengekspos semantik yang tepat langsung ke utilitas navigasi keyboard dan pembaca layar. Dasar berperan sebagai panduan di sini, menandakan saat fitur web cukup matang untuk dievaluasi dan digunakan dalam project Anda.
Fitur baru yang tersedia di Baseline
Fitur di bagian ini didukung mulai April 2026 di set browser inti dan kini tersedia sebagai Baseline baru.
Fungsi contrast-color() CSS
Mesin tema dinamis dan komponen yang dapat disesuaikan telah memaksa developer untuk mempertahankan beberapa sistem warna guna mengakomodasi preferensi pengguna untuk kontras tinggi. Fungsi CSS contrast-color() mengalihkan beban pemeliharaan tersebut sepenuhnya ke browser. Dengan meneruskan warna input dasar ke dalam fungsi, mesin mengevaluasi dan menampilkan warna pendamping yang sangat kontras, yang biasanya dipetakan ke hitam atau putih, bergantung pada warna yang memberikan skor keterbacaan tertinggi.
.card-header {
background-color: var(--dynamic-bg-color);
/* Automatically resolves to the highest-contrast text color */
color: contrast-color(var(--dynamic-bg-color));
}
Hal ini memungkinkan Anda memenuhi standar aksesibilitas untuk keterbacaan, tanpa solusi kustom, atau CSS yang sulit dikelola. Meskipun Anda tetap harus memperhatikan pilihan warna tengah, fungsi ini mengurangi CSS boilerplate yang diperlukan untuk menangani akomodasi pengguna ini. Anda dapat mengetahui lebih lanjut di halaman referensi MDN untuk contrast-color().
Math.sumPrecise()
Menjumlahkan urutan angka menggunakan loop standar atau metode seperti Array.prototype.reduce() dapat menyebabkan hilangnya presisi floating point. Hal ini dapat memengaruhi perhitungan keuangan atau jumlah total telemetri yang penting.
Metode Math.sumPrecise() mengatasi masalah ini. Fungsi ini menerima iterable angka dan menjalankan rutin yang aman presisi untuk memberikan jumlah yang akurat. Lihat mekanisme di dokumentasi MDN untuk Math.sumPrecise().
Fitur dasar yang tersedia secara luas
Fitur berikut menjadi tersedia secara luas di Baseline, yang berarti bahwa fitur tersebut kini kompatibel dan dapat digunakan secara luas dalam proyek Anda.
Elemen <search>
Elemen HTML <search> berfungsi sebagai wrapper eksplisit untuk kontrol formulir, mekanisme pemfilteran, dan utilitas pengiriman yang secara bersama-sama merepresentasikan pengalaman penelusuran di aplikasi web.
<search>
<form action="/site-search">
<label for="query">Search documentation</label>
<input type="search" id="query" name="q">
<button>Go</button>
</form>
</search>
Dengan mengalihkan elemen penampung ke tag <search>, Anda memberikan manfaat aksesibilitas kepada pengguna. Browser otomatis menetapkan peran penanda ARIA implisit search ke elemen, sehingga tidak perlu menentukan role="search" pada elemen <form>. Hal ini memungkinkan pembaca layar mengidentifikasi dan membantu pengguna membuka antarmuka penelusuran. Baca detail penerapan di halaman MDN untuk elemen <search>.
Akses kunci publik Web Authentication
Menggunakan API Web Authentication (WebAuthn) tanpa sandi kini lebih mudah berkat dukungan luas untuk ekstraktor properti langsung di antarmuka AuthenticatorAttestationResponse. Dengan metode seperti getPublicKey() dan getPublicKeyAlgorithm(), browser mengekstrak detail kunci publik untuk Anda tanpa harus bekerja dengan data biner mentah. Pelajari lebih lanjut properti ini dan cara menggunakannya di halaman MDN untuk AuthenticatorAttestationResponse.
String.prototype.isWellFormed() dan String.prototype.toWellFormed()
String JavaScript dienkode UTF-16, yang memetakan karakter dan emoji kompleks dalam pasangan Unicode. Jika string diiris tanpa memperhitungkan hal ini, setengah pasangan pengganti yang terisolasi—yang dikenal sebagai pengganti tunggal—akan tetap ada sehingga menghasilkan teks yang salah bentuk.
isWellFormed() memungkinkan developer memeriksa apakah string berisi pengganti tunggal dan menampilkan nilai boolean. Jika string gagal divalidasi, Anda dapat memanggil toWellFormed() untuk mengganti pengganti yang tidak valid dengan karakter pengganti Unicode standar (U+FFFD). Hal ini berguna sebelum memanggil fungsi seperti encodeURI(), yang akan menampilkan URIError saat menemukan input yang salah format. Pelajari cara kerja metode ini di dokumentasi MDN untuk String.prototype.isWellFormed().
Refleksi atribut ARIA
Memperbarui status aksesibilitas pada elemen interaktif memerlukan perjalanan pulang pergi melalui metode atribut DOM standar—misalnya, element.setAttribute('aria-expanded', 'true'). Refleksi atribut ARIA menyederhanakan hal ini dengan mencerminkan properti aksesibilitas sebagai properti objek.
Antarmuka Element mencerminkan atribut ARIA langsung ke properti instance seperti element.ariaExpanded, element.ariaChecked, dan element.ariaHidden. Hal ini memungkinkan Anda mengubah status aksesibilitas menggunakan sintaksis notasi titik:
// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";
Memperlakukan target ARIA sebagai properti JavaScript memungkinkan framework UI dan alat pengelolaan status mengoordinasikan konteks pendukung secara lebih andal, serta membantu menjaga konteks pembaca layar selaras dengan status aplikasi Anda yang sebenarnya. Untuk mengetahui daftar lengkap properti yang tercermin, lihat panduan MDN tentang properti instance Element.
Selesai
Beri tahu kami jika ada hal terkait Baseline yang terlewat, dan kami akan memastikan hal tersebut dicantumkan dalam edisi mendatang. Jika ada pertanyaan atau ingin memberikan masukan tentang Baseline, Anda dapat melaporkan masalah di issue tracker kami.