VLibras: tradução para Libras em páginas HTML

Adicione o Widget do VLibras a uma página HTML simples para que seu conteúdo possa ser traduzido para Libras.

1. Visão geral

O VLibras é um conjunto de ferramentas capaz de traduzir conteúdo digital, incluindo texto, áudio e vídeo, para Libras, algo notável do ponto de vista da acessibilidade. Visite a sua página oficial:

https://www.gov.br/governodigital/pt-br/vlibras

Neste material, veremos como utilizar o VLibras em uma página HTML simples.

O que você vai aprender

  • O que é um Widget e como o VLibras é disponibilizado por meio dele
  • Como inserir o Widget do VLibras em um documento HTML
  • Como usar o Widget para traduzir o conteúdo da página para Libras

O que você vai precisar

  • Um editor de texto
  • Um navegador com acesso à Internet

2. O Widget e a página de teste

Widget Javascript

Um Widget é geralmente apresentado como um atalho gráfico que facilita o acesso a certas funcionalidades de uma aplicação. O uso do VLibras é feito por meio da inserção de seu Widget nas páginas HTML em que desejamos utilizá-lo. Veja a documentação:

https://vlibras.gov.br/doc/widget/installation/webpageintegration.html

Novo documento HTML

Para testar o VLibras, crie um documento HTML chamado index.html com o conteúdo a seguir.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Teste vlibras</title>
</head>
<body>
  <p>Vamos testar o Widget do VLibras</p>
  <p>Aqui vai outro teste...</p>
</body>
</html>

3. Usando o Widget

O uso do Widget do VLibras é feito de maneira bastante simples: apenas copiamos e colamos um trecho de código pronto e disponível em sua página oficial. Veja como fica o documento.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Teste vlibras</title>
</head>
<body>
  <p>Vamos testar o Widget do VLibras</p>
  <p>Aqui vai outro teste...</p>
  <div vw class="enabled">
    <div vw-access-button class="active"></div>
    <div vw-plugin-wrapper>
      <div class="vw-plugin-top-wrapper"></div>
    </div>
  </div>
  <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
  <script>
    new window.VLibras.Widget('https://vlibras.gov.br/app');
  </script>
</body>
</html>

Pronto! Abra a página em seu navegador para ver o resultado.

Página com os dois parágrafos de teste e o ícone azul do VLibras destacado no canto inferior direito

O ícone do VLibras aparece no canto da página.

Clique no ícone destacado para ver o boneco do VLibras.

Página de teste com o painel do VLibras aberto, exibindo o avatar e a mensagem Boas-vindas

O painel do VLibras aberto, com o avatar.

Quando o Widget está aberto, ou seja, o boneco está visível, basta clicar sobre algum conteúdo para que o boneco o reproduza em Libras. Vá em frente e clique nos parágrafos da página.

Parágrafo Vamos testar o Widget do VLibras destacado e o avatar sinalizando, com uma mensagem de erro de conexão com o serviço de tradução do VLibras em destaque

Ao clicar em um parágrafo, o avatar o reproduz em Libras.

Este parece ser um erro do próprio Widget, uma vez que ele acontece na própria página oficial do governo. Visite:

https://www.gov.br/pt-br

Observe o que acontece quando tentamos acionar o Widget clicando em algum texto da página.

Portal gov.br com o texto Serviços e Informações do Brasil destacado e o avatar do VLibras exibindo a mesma mensagem de erro de conexão

O mesmo erro aparece no portal gov.br.

4. Encerramento

De toda forma, trata-se de um excelente mecanismo de acessibilidade e é fortemente recomendável adicioná-lo às nossas páginas.

O que você fez

  • Conheceu o VLibras e o conceito de Widget
  • Criou uma página HTML de teste
  • Inseriu o Widget do VLibras e usou o avatar para traduzir o conteúdo da página

Referências da apostila

Todos os codelabs