Pubblicato: 27 maggio 2026
Ti diamo il benvenuto nel riepilogo mensile di Baseline. Ad aprile 2026, alcune funzionalità CSS e utilità matematiche di precisione sono diventate disponibili, mentre gli elementi semantici strutturali e altre aggiunte all'API web sono diventati ampiamente disponibili, insieme agli eventi nella community di sviluppatori.
Base di riferimento e accessibilità nel 2026
Creare per il web significa creare un'esperienza che tutti possano utilizzare e un recente articolo di A11y Up sostiene che tenere conto delle esigenze di accessibilità è più efficace quando gli sviluppatori si basano sugli standard web. Per un po' di tempo, gli ingegneri hanno fornito soluzioni JavaScript personalizzate e spesso pesanti per ricreare pattern accessibili che ora fanno parte della piattaforma web. Queste soluzioni personalizzate sono a volte fragili, soggette a interruzioni con le tecnologie assistive e difficili da mantenere.
L'articolo sottolinea che, man mano che le funzionalità della piattaforma web raggiungono l'interoperabilità cross-browser, lo sviluppo tenendo presente l'accessibilità diventa un'attività più efficace. L'utilizzo delle funzionalità web per raggiungere obiettivi comuni e pattern dell'interfaccia utente gestisce gran parte del lavoro pesante, esponendo senza problemi la semantica corretta direttamente agli screen reader e alle utilità di navigazione da tastiera. Baseline funge da guida, indicando il momento in cui una funzionalità web è sufficientemente matura per essere valutata e utilizzata nei tuoi progetti.
Funzionalità di base appena disponibili
Le funzionalità in questa sezione sono supportate a partire da aprile 2026 nel set di browser principali e ora sono disponibili come Baseline.
Funzione CSS contrast-color()
I motori di temi dinamici e i componenti personalizzabili hanno costretto gli sviluppatori a gestire più sistemi di colori per soddisfare la preferenza degli utenti per un contrasto elevato. La funzione CSS contrast-color() sposta interamente questo carico di manutenzione sul browser. Passando un colore di input di base alla funzione, il motore valuta e restituisce un colore complementare ad alto contrasto, in genere mappato in nero o bianco a seconda di quale offre il punteggio di leggibilità più alto.
.card-header {
background-color: var(--dynamic-bg-color);
/* Automatically resolves to the highest-contrast text color */
color: contrast-color(var(--dynamic-bg-color));
}
In questo modo puoi soddisfare gli standard di accessibilità per la leggibilità, senza una soluzione personalizzata o CSS difficili da gestire. Anche se devi comunque tenere d'occhio le scelte di colore dei toni medi, questa funzione riduce il CSS standard necessario per gestire questa sistemazione per gli utenti. Per saperne di più, consulta la pagina di riferimento MDN per contrast-color().
Math.sumPrecise()
La somma di sequenze di numeri utilizzando loop standard o metodi come Array.prototype.reduce() può comportare una perdita di precisione nella rappresentazione in virgola mobile. Ciò può influire su importanti calcoli finanziari o sui totali della telemetria.
Il metodo Math.sumPrecise() risolve questo problema. Accetta un iterabile di numeri ed esegue una routine sicura per la precisione per fornire una somma accurata. Dai un'occhiata al funzionamento della documentazione MDN per Math.sumPrecise().
Funzionalità di base ampiamente disponibili
Le seguenti funzionalità sono diventate ampiamente disponibili in Baseline, il che significa che ora sono ampiamente compatibili e utilizzabili nei tuoi progetti.
Elemento <search>
L'elemento HTML <search> funge da wrapper esplicito per i controlli dei moduli, i meccanismi di filtraggio e le utilità di invio che rappresentano collettivamente un'esperienza di ricerca in un'applicazione web.
<search>
<form action="/site-search">
<label for="query">Search documentation</label>
<input type="search" id="query" name="q">
<button>Go</button>
</form>
</search>
Se passi un elemento contenitore al tag <search>, offri un vantaggio di accessibilità agli utenti. Il browser assegna automaticamente all'elemento un ruolo ARIA implicito di search, eliminando la necessità di specificare role="search" nell'elemento <form>. In questo modo, gli screen reader possono identificare le interfacce di ricerca e aiutare gli utenti a navigare al loro interno. Leggi i dettagli dell'implementazione nella pagina MDN relativa all'elemento <search>.
Accesso alla chiave pubblica di Web Authentication
L'accesso senza password con l'API Web Authentication (WebAuthn) è ora meno complesso grazie all'ampio supporto per gli estrattori di proprietà diretti nell'interfaccia AuthenticatorAttestationResponse. Con metodi come getPublicKey() e getPublicKeyAlgorithm(), il browser estrae i dettagli della chiave pubblica senza dover lavorare con dati binari non elaborati. Scopri di più su queste proprietà e su come utilizzarle nella pagina MDN per AuthenticatorAttestationResponse.
String.prototype.isWellFormed() e String.prototype.toWellFormed()
Le stringhe JavaScript sono codificate in UTF-16, che mappa caratteri complessi ed emoji in coppie Unicode. Se una stringa viene suddivisa senza tenerne conto, rimarranno metà isolate di una coppia surrogata, note come surrogate isolate, che genereranno un testo non valido.
isWellFormed() consente agli sviluppatori di verificare se una stringa contiene surrogati isolati e restituisce un valore booleano. Se una stringa non supera la convalida, puoi chiamare toWellFormed() per sostituire i surrogati non validi con il carattere di sostituzione Unicode standard (U+FFFD). Questa operazione è utile prima di chiamare funzioni come encodeURI(), che generano un errore URIError quando rilevano input non validi. Scopri come funzionano questi metodi nella documentazione MDN per String.prototype.isWellFormed().
Riflessione degli attributi ARIA
L'aggiornamento degli stati di accessibilità sugli elementi interattivi richiedeva round trip tramite metodi di attributi DOM standard, ad esempio element.setAttribute('aria-expanded', 'true'). Il riflesso degli attributi ARIA semplifica questa operazione rispecchiando le proprietà di accessibilità come proprietà dell'oggetto.
L'interfaccia Element riflette gli attributi ARIA direttamente nelle proprietà dell'istanza, come element.ariaExpanded, element.ariaChecked e element.ariaHidden. In questo modo puoi modificare gli stati di accessibilità utilizzando la sintassi della notazione con il punto:
// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";
Il trattamento dei target ARIA come proprietà JavaScript consente ai framework UI e agli strumenti di gestione dello stato di coordinare i contesti assistivi in modo più affidabile e aiuta a mantenere i contesti dello screen reader allineati allo stato effettivo dell'applicazione. Per un elenco completo delle proprietà riflesse, consulta la guida MDN sulle proprietà delle istanze Element.
È tutto.
Se abbiamo dimenticato qualcosa relativo a Baseline, comunicacelo e ci assicureremo di includerlo in una delle prossime edizioni. Se hai domande o vuoi fornire un feedback su Baseline, puoi segnalare un problema nel nostro strumento di monitoraggio dei problemi.