VLibras: Como adicionar em uma aplicação Nextks

Como integrar o VLibras em uma aplicação Nextjs

O V-libras é uma suite de código aberto, que traduz conteúdos digitais para a Lingua Brasileira de Sinais (Libras). O objetivo é deixar as aplicações mais acessíveis para pessoas surdas.

Neste tutorial, vamos usar o VLibras Widget, que é feito para páginas Web. Com ele é possível fazer a tradução automática direto do site.

Como funciona na prática?

1. O usuário clica em um ícone flutuante ao lado direto da página.
2. Com o Widget ativado, o usuário poderá passar o mouse sobre os textos, realçando o que pode ser traduzido.
3. Ao clicar em um conteúdo, o avatar irá traduzir o texto selecionado.

Integrando com a aplicação Nextjs

Para integrar com as páginas web, é necessário consumir:

1. O script disponibilizado
2. A imagem do ícone
3. Fazer o load dos itens quando o DOM tiver pronto

Como é totalmente client-side, precisamos ter certeza que o client está pronto para renderizar o Widget.

Além disso, é necessário deixar pronto os elementos que serão usados pelo VLibras. Sendo eles:

• Uma div com vw="true" e className="enabled" (container principal).
• Uma div com vw-access-button="true" (botão flutuante que o usuário clica para abrir o widget).
• Uma div com vw-plugin-wrapper="true" e dentro dele o vw-plugin-top-wrapper (área onde o avatar e a tradução em Libras aparecem).

O React não reconhece os atributos (vw e vw-access-button) que são necessários para a renderização e o funcionamento, devido a isso eles são passados via spread com type assertion para React.HTMLAttributes<HTMLDivElement>.

Implementação

'use client'

import Script from 'next/script'
import React from 'react'

const WIDGET_SRC = 'https://vlibras.gov.br/app'
const SCRIPT_SRC = 'https://vlibras.gov.br/app/vlibras-plugin.js'

export default function VLibras() {
    return (
        <>
            <Script
                src={SCRIPT_SRC}
                strategy="afterInteractive"
                crossOrigin="anonymous"
                onLoad={() => {
                    if (typeof window !== 'undefined' && window.VLibras) {
                        new window.VLibras.Widget(WIDGET_SRC)
                        window.dispatchEvent(new Event('load'))
                    }
                }}
            />
            <div {...({ vw: 'true', className: 'enabled' } as React.HTMLAttributes<HTMLDivElement>)}>
                <div {...({ 'vw-access-button': 'true', className: 'active' } as React.HTMLAttributes<HTMLDivElement>)} />
                <div {...({ 'vw-plugin-wrapper': 'true' } as React.HTMLAttributes<HTMLDivElement>)}>
                    <div className="vw-plugin-top-wrapper" />
                </div>
            </div>
        </>
    )
}

O que esse código faz

1. Inicializa o script. Na callback `onLoad` dispara a criação do Widget. A estratégia `afterInteractive` é utilizada para que o script seja carregando após a página ficar interativa.
2. O componente em si disponibiliza as divs necessárias informadas pela documentação.

Após isso, basta importar esse componente no Layout de preferência. Nesse blog, foi importado no RootLayout, afim de ficar disponível em todo o blog.