Torna o teu site Webflow mesmo acessível. EAA e WCAG, sem overlay

A verdade: o Webflow não é acessível por predefinição

O Webflow Designer produz HTML limpo, e os componentes do próprio Webflow (Tabs, Dropdown, Navbar, Slider) são, segundo o próprio Webflow, acessíveis por ARIA e por teclado. O problema está naquilo que constróis tu: separadores, modais e botões feitos com divs e interações não recebem papel nem estado, o estilo de foco tens de o definir tu em todo o lado, o Audit panel só verifica quatro coisas e o Lightbox não suporta texto alt. É exatamente aí que aparecem os problemas encontrados.

O que costuma correr mal no Webflow

• Tabs personalizadas sem role e aria-selectedQuando construis as tuas próprias tabs no Designer, elas continuam a ser divs comuns. Sem role="tab", aria-selected e aria-controls nos botões das tabs, um leitor de ecrã não consegue saber que são tabs nem qual está ativa. Adiciona-los à mão através dos Custom Attributes.
• Dropdowns e modais sem gestão de keyboard trapAs interações do Webflow abrem muitas vezes um dropdown ou um modal sem mover nem reter o foco. Os utilizadores de teclado fazem tab para fora, atrás da overlay, e perdem o rasto do conteúdo.
• Botões div sem role e tabindexUm div com uma interação de clique parece um botão, mas não é. Sem role="button" e tabindex="0" através dos Custom Attributes, fica inacessível para os utilizadores de teclado e de leitor de ecrã.
• Imagens em Lightbox sem texto altO Lightbox do Webflow não suporta texto alt para as imagens que contém, e o Audit panel não assinala isso. Cada fotografia de produto ou imagem de portefólio numa lightbox fica, por isso, invisível para os leitores de ecrã. Opta por outra configuração de galeria ou descreve a imagem no texto à volta.

Como é uma correção a sério

Pega num componente de tabs personalizado que construíste a partir de divs no Designer. Um leitor de ecrã ouve então apenas 'grupo' em vez de uma fila de tabs. A correção vive inteiramente nos Custom Attributes, sem reconstrução: define role="tab", aria-selected e aria-controls nos botões das tabs.

<div class="tab-link">Overzicht</div>

<div class="tab-link"
  role="tab"
  aria-selected="true"
  aria-controls="panel-overzicht">Overzicht</div>

O que recebes

Com uma ferramenta de relatórios pagas a licença e os teus programadores para resolverem os erros. Com a Seviranta a correção está incluída, sem conta a dobrar.

Protege a tua conversão e o teu enquadramento legal

Uma app que cola um ícone de acessibilidade por cima do teu site Webflow é um risco para o teu negócio. Os factos em resumo:

O Webflow já é acessível, então porque é que o meu site falha?

Os componentes próprios do Webflow são acessíveis por ARIA e teclado segundo o Webflow, mas tudo o que constróis tu com divs e interações, as tuas escolhas de cor, os teus textos alternativos e a tua ordem de cabeçalhos dependem de ti. É aí que está a maioria das constatações, e o Audit panel em grande parte não as vê.

Também vendo para França ou para a Alemanha. Que norma se aplica aí ao meu site Webflow?

A mesma: WCAG 2.1 AA através da EN 301 549. A França avalia com o RGAA (versão 4.1.2, 106 critérios que cobrem os critérios A e AA das WCAG 2.1), a Alemanha com a BFSG. Ambas avaliam a página publicada, não a ferramenta de construção. Fazer bem uma vez no Webflow vale para todos os mercados.

A Seviranta pode aplicar a correção no Webflow por mim?

Por cada constatação entregamos a localização exata (seletor) e a correção: que custom attribute, que texto alternativo, que estilo de foco. A aplicação fica a teu cargo ou do teu construtor Webflow, no Designer. Não precisamos de acesso ao teu projeto e não colocamos nenhum script no teu site.

Um widget de acessibilidade Webflow chega para a EAA?

Não. Um widget põe uma camada por cima do teu site, mas não repara o código de fundo e não conta como conformidade estrutural.

O meu checkout Webflow está abrangido pela EAA?

Sim. O checkout e a navegação fazem explicitamente parte da obrigação ao abrigo do WCAG 2.1 AA.

A Seviranta analisa também as minhas apps Webflow?

Sim. Testamos o HTML final gerado, tema mais apps, tal como uma autoridade faz.

Isto torna o meu site Webflow mais lento?

Não. Analisamos externamente a partir dos nossos servidores na UE; não entra nenhum script no teu site. 0% de impacto na tua velocidade de carregamento e nos Core Web Vitals.