Versão: v11.0.0

Parâmetros

Os Parâmetros permitem configurar e personalizar o funcionamento do plugin da Hand Talk. Você pode ativar ou desativar funcionalidades conforme sua necessidade, ajustando elementos como posição, alinhamento, idioma e recursos assistivos.

Tradutor de Sites

Você pode preferir habilitar ou desabilitar algumas funcionalidades do Tradutor de Sites, para isso utilize os parâmetros abaixo:

Configurações	Descrição	Valores	Padrão
align	Define o alinhamento vertical da janela do tradutor no site.	"default" ou "top" ou "bottom"	"default"
avatar	Define o avatar que o plugin irá utilizar.	"HUGO" ou "MAYA"	"HUGO"
doNotTrack	Se o valor desta propriedade for verdadeiro, as frases traduzidas não serão armazenadas ou utilizada para a melhoria do sistema de tradução.	false ou true	false
exceptions	Lista de queries que serão ignoradas pelo plugin, ex.: `["a", "form", ".main", "#site-title"]`	array	[ ]
highContrast	Define se o plugin vai iniciar com o modo escuro ativado.	false ou true	false
maxTextSize	Define o tamanho máximo de caracteres para captura de texto em um elemento.	Número inteiro entre 500 e 1000	800
mobileConfig	Objeto de configuração para a plataforma mobile, quando definido, sobscreve as configurações padrões de HT.	Object
customButtonStyle	Define uma customização para o botão de acessibilidade na versão mobile dentro do parâmetro `mobileConfig`.	`{borderRadius, size, horizontalMargin, bottomMargin}`	undefined
mobileEnabled	Quando verdadeiro ativa o tradutor de sites em dispositivos móveis.	false ou true	true
remoteConfigEnabled	Quando verdadeiro ativa as Configurações Remotas do Plugin.	false ou true	true
addonsEnabled	Quando verdadeiro ativa os Recursos Assistivos do Plugin.	false ou true	true
opacity	Define a opacidade inicial do fundo no plugin.	Número: 0 ou 50 ou 100	100
parentElement	Elemento que receberá o plugin Hand Talk.	Element	document.body
side	Define o posicionamento da janela do tradutor no site. O Tradutor de Sites pode ser inicializado do lado esquerdo ou do lado direito da tela.	"right" ou "left"	"right"
textEnabled	Quando verdadeiro: exibe o tradutor de sites para textos.	false ou true	true
zIndex	Define o posicionamento da profundidade do tradutor no site, ou seja, determinar se o Tradutor de Sites estará mais próximo ou mais afastado da tela.	Inteiros	1000000
clickables	Lista de queries que serão tratadas como elementos clicaveis, pelo plugin, ex.: `["a", "form", ".main", "#site-title"]`	array	[ ]
language	Altera a língua do plugin.	"en-ase" ou "ptBR-bzs"	"ptBR-bzs"
colorButton	Define a cor do botão do Hand Talk Plugin.	"a11yColorMain" or "neutralLowMain" or "a11yColorLight"	"a11yColorMain"
offRedirection	Quando verdadeiro desativa o redirecionamento de links externos, útil para o contexto de máquinas de auto atendimento.	false ou true	false
addonsMap	Objeto de configuração para gerenciar uso de recursos assistivos individualmente.	Object	`{ fontControl {}, navigation {}, colorControl {}}`

dica

Para mais informações sobre o customButtonStyle e a customização no mobile acesse o link: Botão de acessibilidade no mobile

Exemplo do uso dos parâmetros no Tradutor de Sites

<body>
  <h1>Hand Talk</h1>
  <h2>
    Conte com a ajuda do Hugo e da Maya, nossos tradutores virtuais, para tornar
    a sua comunicação mais acessível.
  </h2>
  <p>
    Oferecemos tradução digital para acessibilidade em Libras, a Língua
    Brasileira de Sinais.
  </p>
  <!-- Pega a ultima versão do plugin Hand Talk -->
  <script src="https://plugin.handtalk.me/web/latest/handtalk.min.js"></script>
  <script>
    var ht = new HT({
      // Troque por seu token de acesso
      token: "TOKEN",
      // Muda o avatar para o HUGO
      avatar: "HUGO",
      // Muda o alinhamento para cima
      align: "top",
      // Muda o lado para a direita
      side: "right",
      // Muda o botão do plugin para a cor a11yColorLight
      colorButton: "a11yColorLight",
      // Muda a opacidade inicial do plugin
      opacity: 50,
      // Inicia o plugin com o modo escuro ativado
      highContrast: true,
      //Inicia o plugin em ASL
      language: "en-ase",
    });
  </script>
</body>

Recursos Assistivos

Você pode adicionar parâmetros específicos para gerenciar a disponibilidade dos recursos assistivos. Para isso, utilize a propriedade addonsMap e adicione os parâmetros que irão sobrescrever as configurações padrão.

Configurações	Descrição	Valores
addonsMap	Objeto de configuração para gerenciar uso de recursos assistivos individualmente	`{ fontControl {}, navigation {}, colorControl {}}`

O gerenciamento dos recursos ocorre através do objeto de cada seção. Você pode desabilitar um ou mais recursos de acordo com a seção escolhida. Abaixo, segue uma tabela com os objetos das seções disponíveis:

Configurações	Descrição	Valores
fontControl	Objeto de configuração para gerenciar uso de recursos assistivos relacionados a controle de fonte	`{ fontSize, textStyle, highlightLetters, letterSpacing, lineHeight }`
navigation	Objeto de configuração para gerenciar uso de recursos assistivos relacionados a navegação	`{ pageSpeech, readerMode, readingMask, magnifier, pageStructure, hideImages, highlightHeadings, highlightLinks, readingGuide, pauseAnimations }`
colorControl	Objeto de configuração para gerenciar uso de recursos assistivos relacionados a controle de cores	`{ contrastMode, saturationMode }`

Dentro do objeto da seção escolhida, você pode adicionar um ou mais recursos caso deseje desativá-los. Para isso, defina o recurso específico de acordo com sua seção.

dica

Por padrão todos os parâmetros dos recursos assistivos são definidos como true.

📌 fontControl

Objeto responsável por agrupar recursos assistivos relacionados a controle de texto

Configurações	Descrição	Valores
fontSize	Gerencia o estado do recurso tamanho de fonte	`true` ou `false`
textStyle	Gerencia o estado do recurso estilo de texto	`true` ou `false`
highlightLetters	Gerencia o estado do recurso letras destacadas	`true` ou `false`
letterSpacing	Gerencia o estado do recurso espaço entre letras	`true` ou `false`
lineHeight	Gerencia o estado do recurso espaço entre linhas	`true` ou `false`

Objeto responsável por agrupar recursos assistivos relacionados a navegação

Configurações	Descrição	Valores
pageSpeech	Gerencia o estado do recurso leitor de sites	`true` ou `false`
readerMode	Gerencia o estado do recurso modo de leitura	`true` ou `false`
readingMask	Gerencia o estado do recurso máscara de leitura	`true` ou `false`
magnifier	Gerencia o estado do recurso lupa de conteúdo	`true` ou `false`
pageStructure	Gerencia o estado do recurso estrutura de páginas	`true` ou `false`
hideImages	Gerencia o estado do recurso esconder imagens	`true` ou `false`
highlightHeadings	Gerencia o estado do recurso destacar cabeçalhos	`true` ou `false`
highlightLinks	Gerencia o estado do recurso destaque de links	`true` ou `false`
readingGuide	Gerencia o estado do recurso guia de leitura	`true` ou `false`
pauseAnimations	Gerencia o estado do recurso pausar animações	`true` ou `false`
disableSounds	Gerencia o estado do recurso Parar Sons	`true` ou `false`

📌 colorControl

Objeto responsável por agrupar recursos assistivos relacionados a controle de cores

Configurações	Descrição	Valores
contrastMode	Gerencia o estado do recurso contraste de cores	`true` ou `false`
saturationMode	Gerencia o estado do recurso saturação	`true` ou `false`
pageColors	Gerencia o estado do recurso modo daltônico	`true` ou `false`

Exemplo do uso dos parâmetros nos Recursos Assistivos

<body>
  <h1>Hand Talk</h1>
  <h2>
    Conte com a ajuda do Hugo e da Maya, nossos tradutores virtuais, para tornar
    a sua comunicação mais acessível.
  </h2>
  <p>
    Oferecemos tradução digital para acessibilidade em Libras, a Língua
    Brasileira de Sinais.
  </p>
  <!-- Pega a ultima versão do plugin Hand Talk -->
  <script src="https://plugin.handtalk.me/web/latest/handtalk.min.js"></script>
  <script>
    var ht = new HT({
      // Troque por seu token de acesso
      token: "TOKEN",
      // Objeto responsável por agrupar recursos assistivos
      addonsMap: {
        // Desativa recursos da seção controle de fonte individualmente
        fontControl: {
          fontSize: false,
          textStyle: false,
          highlightLetters: false,
          letterSpacing: false,
          lineHeight: false,
        },
        // Desativa recursos da seção de navegação individualmente
        navigation: {
          pageSpeech: false,
          readerMode: false,
          readingMask: false,
          magnifier: false,
          pageStructure: false,
          hideImages: false,
          highlightHeadings: false,
          highlightLinks: false,
          readingGuide: false,
          pauseAnimations: false,
        },
        // Desativa recursos da seção controle de cores individualmente
        colorControl: {
          contrastMode: false,
          saturationMode: false,
          pageColors: false,
        },
      },
    });
  </script>
</body>

Tradutor de Sites​

Exemplo do uso dos parâmetros no Tradutor de Sites​

Recursos Assistivos​

📌 fontControl​

📌 navigation​

📌 colorControl​

Exemplo do uso dos parâmetros nos Recursos Assistivos​