Barra de Acessibilidade Customizada

Você pode criar sua própria barra de acessibilidade usando classes CSS específicas. Isso permite integrar a Rybená perfeitamente ao design do seu site.

Classes Disponíveis

Use estas classes nos elementos desejados (botões ou links):

Classe	Funcionalidade
`btn-rybena-sign-language`	Tradução em LIBRAS
`btn-rybena-voice`	Texto para Voz
`btn-rybena-vision`	Acessibilidade Visual (+Acessibilidade)

Estrutura Básica

Todos os botões devem estar dentro de uma div com o ID custom-rybena-div:

<div id="custom-rybena-div">
  <button class="btn-rybena-sign-language">LIBRAS</button>
  <button class="btn-rybena-voice">Voz</button>
  <button class="btn-rybena-vision">+Acessibilidade</button>
</div>

Exemplo com Imagens

Você pode usar imagens personalizadas para os botões:

<div id="custom-rybena-div">
  <img
    src="/icons/libras.png"
    alt="Tradução em LIBRAS"
    class="btn-rybena-sign-language"
  />
  <img src="/icons/voice.png" alt="Texto para Voz" class="btn-rybena-voice" />
  <img
    src="/icons/accessibility.png"
    alt="Acessibilidade Visual"
    class="btn-rybena-vision"
  />
</div>

Exemplo com Links

Você também pode usar links em vez de botões:

<div id="custom-rybena-div">
  <a href="#" class="btn-rybena-sign-language"> Traduzir em LIBRAS </a>
  <a href="#" class="btn-rybena-voice"> Ouvir texto </a>
  <a href="#" class="btn-rybena-vision"> Acessibilidade </a>
</div>

Exemplo Completo com Estilização

<style>
  .custom-rybena-bar {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #316181;
    border-radius: 8px;
  }

  .custom-rybena-bar button {
    padding: 8px 16px;
    background: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    color: #316181;
    transition: background 0.3s;
  }

  .custom-rybena-bar button:hover {
    background: #f0f0f0;
  }
</style>

<div id="custom-rybena-div" class="custom-rybena-bar">
  <button class="btn-rybena-sign-language">🤟 LIBRAS</button>
  <button class="btn-rybena-voice">🔊 Voz</button>
  <button class="btn-rybena-vision">♿ Acessibilidade</button>
</div>

Atenção: Quando você usa uma barra customizada, os parâmetros de configuração da barra padrão (como positionBar, backgroundColorBar, offsetTopBar) não terão efeito.

Exemplo Completo de Customização

Aqui está um exemplo completo combinando barra customizada com outras configurações:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    {/* Rybená Script */}
    <script
      type="text/javascript"
      src="https://cdn.rybena.com.br/dom/master/latest/rybena.js"
    ></script>

    {/* Custom Styles */}
    <style>
      .custom-rybena-bar {
        display: flex;
        gap: 10px;
        padding: 10px;
        background: #316181;
        border-radius: 8px;
        margin: 20px 0;
      }

      .custom-rybena-bar button {
        padding: 8px 16px;
        background: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        color: #316181;
        transition: background 0.3s;
      }

      .custom-rybena-bar button:hover {
        background: #f0f0f0;
      }
    </style>
  </head>
  <body>
    {/* Custom Accessibility Bar */}
    <div id="custom-rybena-div" class="custom-rybena-bar">
      <button class="btn-rybena-sign-language">🤟 LIBRAS</button>
      <button class="btn-rybena-voice">🔊 Voz</button>
      <button class="btn-rybena-vision">♿ Acessibilidade</button>
    </div>

    {/* Your Content */}
    <h1>Bem-vindo ao Meu Site</h1>
    <p>Este é um exemplo de site com Rybená customizada.</p>
  </body>
</html>