Publicado em: 27 de maio de 2026
Este é o resumo mensal do Baseline. Em abril de 2026, alguns recursos de CSS e utilitários de matemática de precisão ficaram disponíveis, enquanto elementos semânticos estruturais e outras adições de API da Web foram disponibilizados, junto com eventos na comunidade de desenvolvedores.
Valor de referência e acessibilidade em 2026
Criar para a Web significa criar uma experiência que todos possam usar, e um artigo recente da A11y Up mostra que considerar as necessidades de acessibilidade é mais eficaz quando os desenvolvedores usam padrões da Web. Há algum tempo, os engenheiros enviam soluções JavaScript personalizadas e geralmente pesadas para recriar padrões acessíveis que agora fazem parte da plataforma da Web. Às vezes, essas soluções personalizadas são frágeis, propensas a falhas em tecnologias assistivas e difíceis de manter.
O artigo destaca que, à medida que os recursos da plataforma da Web alcançam a interoperabilidade entre navegadores, eles tornam o desenvolvimento com acessibilidade uma tarefa mais eficaz. Usar recursos da Web para alcançar metas comuns e padrões de interface do usuário lida com grande parte do trabalho pesado, expondo sem problemas a semântica certa diretamente aos leitores de tela e utilitários de navegação por teclado. A linha de base serve como um guia, indicando o momento em que um recurso da Web está maduro o suficiente para ser avaliado e usado nos seus projetos.
Recursos de referência recém-disponibilizados
Os recursos desta seção são compatíveis a partir de abril de 2026 no conjunto principal de navegadores e agora estão disponíveis na versão Baseline.
Função contrast-color() do CSS
Os mecanismos de temas dinâmicos e os componentes personalizáveis obrigaram os desenvolvedores a manter vários sistemas de cores para atender à preferência do usuário por alto contraste. A função CSS contrast-color() transfere totalmente essa carga de manutenção para o navegador. Ao transmitir uma cor de entrada básica para a função, o mecanismo avalia e retorna uma cor complementar de alto contraste, geralmente mapeando para preto ou branco, dependendo de qual oferece a maior pontuação de legibilidade.
.card-header {
background-color: var(--dynamic-bg-color);
/* Automatically resolves to the highest-contrast text color */
color: contrast-color(var(--dynamic-bg-color));
}
Isso permite atender aos padrões de acessibilidade para legibilidade sem uma solução personalizada ou CSS difícil de manter. Embora você ainda precise ficar de olho nas opções de cores de tom médio, essa função reduz o CSS padrão necessário para lidar com essa adaptação do usuário. Saiba mais na página de referência do MDN para contrast-color().
Math.sumPrecise()
Somar sequências de números usando repetições padrão ou métodos como Array.prototype.reduce() pode resultar em perda de precisão ao usar pontos flutuantes. Isso pode afetar cálculos financeiros importantes ou totais de telemetria.
O método Math.sumPrecise() resolve esse problema. Ele aceita um iterável de números e executa uma rotina segura de precisão para fornecer uma soma precisa. Confira os mecanismos na documentação do MDN para Math.sumPrecise().
Recursos de referência amplamente disponíveis
Os seguintes recursos ficaram amplamente disponíveis no Baseline, o que significa que agora eles são compatíveis e podem ser usados em seus projetos.
Elemento <search>
O elemento HTML <search> atua como um wrapper explícito para controles de formulário, mecanismos de filtragem e utilitários de envio que representam coletivamente uma experiência de pesquisa em um aplicativo da Web.
<search>
<form action="/site-search">
<label for="query">Search documentation</label>
<input type="search" id="query" name="q">
<button>Go</button>
</form>
</search>
Ao mudar um elemento de contêiner para a tag <search>, você oferece um benefício de acessibilidade aos usuários. O navegador atribui automaticamente uma função de ponto de referência ARIA implícita de search ao elemento, eliminando a necessidade de especificar role="search" no elemento <form>. Isso permite que os leitores de tela identifiquem e ajudem os usuários a navegar até as interfaces de pesquisa. Leia os detalhes da implementação na página do MDN para o elemento <search>.
Acesso à chave pública da Web Authentication
Agora, é menos complexo usar a API Web Authentication (WebAuthn) sem senha graças ao amplo suporte para extratores de propriedades diretas na interface AuthenticatorAttestationResponse. Com métodos como getPublicKey() e getPublicKeyAlgorithm(), o navegador extrai detalhes da chave pública para você sem precisar trabalhar com dados binários brutos. Saiba mais sobre essas propriedades e como usá-las na página do MDN para AuthenticatorAttestationResponse.
String.prototype.isWellFormed() e String.prototype.toWellFormed()
As strings JavaScript são codificadas em UTF-16, que mapeia caracteres complexos e emojis em pares Unicode. Se uma string for segmentada sem considerar isso, metades isoladas de um par substituto, conhecidas como substitutos isolados, vão permanecer, resultando em texto malformado.
isWellFormed() permite que os desenvolvedores verifiquem se uma string contém substitutos isolados e retorna um booleano. Se uma string não passar na validação, chame toWellFormed() para substituir os substitutos inválidos pelo caractere de substituição Unicode padrão (U+FFFD). Isso é útil antes de chamar funções como encodeURI(), que vai gerar um URIError ao encontrar entradas malformadas. Saiba como esses métodos funcionam na documentação da MDN para String.prototype.isWellFormed().
Reflexão de atributo ARIA
A atualização dos estados de acessibilidade em elementos interativos exigia viagens de ida e volta por métodos de atributos DOM padrão, por exemplo, element.setAttribute('aria-expanded', 'true'). A reflexão de atributos ARIA simplifica isso ao espelhar propriedades de acessibilidade como propriedades de objeto.
A interface Element reflete atributos ARIA diretamente em propriedades de instância, como element.ariaExpanded, element.ariaChecked e element.ariaHidden. Isso permite modificar estados de acessibilidade usando a sintaxe de notação por ponto:
// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";
Tratar destinos ARIA como propriedades JavaScript permite que frameworks de interface e ferramentas de gerenciamento de estado coordenem contextos assistivos de maneira mais confiável e ajuda a manter os contextos do leitor de tela alinhados com o estado real do aplicativo. Para uma lista completa de propriedades refletidas, consulte o guia da MDN sobre propriedades de instância Element.
Isso é tudo
Se você acha que esquecemos de algo relacionado ao Baseline, avise para que possamos incluir na próxima edição. Se você tiver dúvidas ou quiser enviar feedback sobre o Baseline, registre um problema no nosso Issue Tracker.