Recursos de Acessibilidade

A API Rybená oferece uma ampla gama de recursos de acessibilidade para melhorar a experiência de usuários com diferentes necessidades. Os recursos estão organizados em categorias para facilitar o uso.

Ajustes Visuais

Altura da Linha

Controla a distância entre as linhas de texto para melhorar a legibilidade.

RybenaApi.getInstance().toggleLineHeight()

RybenaApi.getInstance().nextLineHeight()

RybenaApi.getInstance().previousLineHeight()

RybenaApi.getInstance().startLineHeight()

RybenaApi.getInstance().stopLineHeight()

Espaçamento de Letras

Controla a distância entre as letras para melhorar a legibilidade.

RybenaApi.getInstance().toggleLetterSpacing()

RybenaApi.getInstance().nextLetterSpacing()

RybenaApi.getInstance().previousLetterSpacing()

RybenaApi.getInstance().startLetterSpacing()

RybenaApi.getInstance().stopLetterSpacing()

Zoom

Permite aumentar ou diminuir o tamanho dos elementos exibidos na tela.

RybenaApi.getInstance().toggleZoom()

RybenaApi.getInstance().nextZoom()

RybenaApi.getInstance().previousZoom()

RybenaApi.getInstance().startZoom()

RybenaApi.getInstance().stopZoom()

Contraste

Alterna entre diferentes modos de contraste para melhorar a visibilidade.

// Toggle
RybenaApi.getInstance().toggleDarkContrast()

// Ativar
RybenaApi.getInstance().startDarkContrast()

// Desativar
RybenaApi.getInstance().stopDarkContrast()

// Toggle
RybenaApi.getInstance().toggleLightContrast()

// Ativar
RybenaApi.getInstance().startLightContrast()

// Desativar
RybenaApi.getInstance().stopLightContrast()

// Toggle
RybenaApi.getInstance().toggleInvertedContrast()

// Ativar
RybenaApi.getInstance().startInvertedContrast()

// Desativar
RybenaApi.getInstance().stopInvertedContrast()

Saturação

Controla a intensidade das cores na página.

// Toggle
RybenaApi.getInstance().toggleHighSaturation()

// Ativar
RybenaApi.getInstance().startHighSaturation()

// Desativar
RybenaApi.getInstance().stopHighSaturation()

// Toggle
RybenaApi.getInstance().toggleLowSaturation()

// Ativar
RybenaApi.getInstance().startLowSaturation()

// Desativar
RybenaApi.getInstance().stopLowSaturation()

// Toggle
RybenaApi.getInstance().toggleNoSaturation()

// Ativar
RybenaApi.getInstance().startNoSaturation()

// Desativar
RybenaApi.getInstance().stopNoSaturation()

Auxílios de Leitura

Cursor

Ajusta o tamanho e comportamento do cursor para facilitar a visualização.

// Toggle
RybenaApi.getInstance().toggleCursorSize()

// Ativar
RybenaApi.getInstance().startCursorSize()

// Desativar
RybenaApi.getInstance().stopCursorSize()

// Toggle
RybenaApi.getInstance().toggleCursorGuide()

// Ativar
RybenaApi.getInstance().startCursorGuide()

// Desativar
RybenaApi.getInstance().stopCursorGuide()

// Toggle
RybenaApi.getInstance().toggleAmplifyCursor()

// Ativar
RybenaApi.getInstance().startAmplifyCursor()

// Desativar
RybenaApi.getInstance().stopAmplifyCursor()

Fonte de Dislexia

Ativa uma fonte especializada para ajudar pessoas com dislexia a ler melhor.

RybenaApi.getInstance().toggleDislexiaFont()

RybenaApi.getInstance().startDislexiaFont()

RybenaApi.getInstance().stopDislexiaFont()

Dica: O modo de dislexia usa uma fonte mais legível com espaçamento maior entre as letras, facilitando a leitura para pessoas com dislexia.

Destaques

Destaca elementos específicos da página para facilitar a navegação.

// Toggle
RybenaApi.getInstance().toggleLinkHighlight()

// Ativar
RybenaApi.getInstance().startLinkHighlight()

// Desativar
RybenaApi.getInstance().stopLinkHighlight()

// Toggle
RybenaApi.getInstance().toggleTitleHighlight()

// Ativar
RybenaApi.getInstance().startTitleHighlight()

// Desativar
RybenaApi.getInstance().stopTitleHighlight()

Ferramentas de Leitura

Ferramentas para auxiliar na leitura de conteúdo.

// Toggle
RybenaApi.getInstance().toggleReadingMask()

// Ativar
RybenaApi.getInstance().startReadingMask()

// Desativar
RybenaApi.getInstance().stopReadingMask()

// Toggle
RybenaApi.getInstance().toggleReadingMode()

// Ativar
RybenaApi.getInstance().startReadingMode()

// Desativar
RybenaApi.getInstance().stopReadingMode()

Dica: A máscara de leitura destaca uma linha de texto conforme o usuário lê, ajudando a manter o foco e evitar distrações.

Navegação e Outros

Dicionário

Ativa um dicionário interativo para traduzir palavras na página.

RybenaApi.getInstance().toggleDictionary()

RybenaApi.getInstance().startDictionary()

RybenaApi.getInstance().stopDictionary()

Descrição de Imagem

Adiciona legendas às imagens para melhorar a acessibilidade.

RybenaApi.getInstance().toggleImageDescription()

RybenaApi.getInstance().startImageDescription()

RybenaApi.getInstance().stopImageDescription()

Dica: A legenda de imagem é exibida em um balão de texto quando o usuário toca na imagem, fornecendo contexto adicional.

Pausar Animações

Permite pausar todas as animações da página para reduzir distrações.

RybenaApi.getInstance().togglePauseAnimations()

RybenaApi.getInstance().startPauseAnimations()

RybenaApi.getInstance().stopPauseAnimations()

Navegação por Teclado

Ativa navegação aprimorada por teclado para usuários que não usam mouse.

RybenaApi.getInstance().toggleKeyboardNavigation()

RybenaApi.getInstance().startKeyboardNavigation()

RybenaApi.getInstance().stopKeyboardNavigation()

Exemplos Completos

Exemplo 1: Painel de Acessibilidade

Este exemplo cria um painel completo de acessibilidade com todos os recursos:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rybená - Painel de Acessibilidade</title>
    <script
      type="text/javascript"
      src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api"
    ></script>
    <style>
      .accessibility-panel {
        position: fixed;
        top: 20px;
        right: 20px;
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        max-width: 300px;
        max-height: 80vh;
        overflow-y: auto;
      }
      .accessibility-panel h3 {
        margin-top: 0;
      }
      .accessibility-section {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
      }
      .accessibility-section:last-child {
        border-bottom: none;
      }
      .accessibility-section h4 {
        margin-bottom: 10px;
      }
      .accessibility-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
      }
      .accessibility-buttons button {
        padding: 5px 10px;
        font-size: 12px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>Exemplo de Painel de Acessibilidade</h1>
    <p>Use o painel à direita para ativar os recursos de acessibilidade.</p>

    <div class="accessibility-panel">
      <h3>Acessibilidade</h3>

      <div class="accessibility-section">
        <h4>Texto</h4>
        <div class="accessibility-buttons">
          <button onclick="RybenaApi.getInstance().toggleLineHeight()">
            Altura Linha
          </button>
          <button onclick="RybenaApi.getInstance().toggleLetterSpacing()">
            Espaçamento
          </button>
          <button onclick="RybenaApi.getInstance().toggleDislexiaFont()">
            Dislexia
          </button>
        </div>
      </div>

      <div class="accessibility-section">
        <h4>Zoom</h4>
        <div class="accessibility-buttons">
          <button onclick="RybenaApi.getInstance().toggleZoom()">Zoom</button>
          <button onclick="RybenaApi.getInstance().nextZoom()">+</button>
          <button onclick="RybenaApi.getInstance().previousZoom()">-</button>
        </div>
      </div>

      <div class="accessibility-section">
        <h4>Contraste</h4>
        <div class="accessibility-buttons">
          <button onclick="RybenaApi.getInstance().toggleDarkContrast()">
            Escuro
          </button>
          <button onclick="RybenaApi.getInstance().toggleLightContrast()">
            Claro
          </button>
          <button onclick="RybenaApi.getInstance().toggleInvertedContrast()">
            Invertido
          </button>
        </div>
      </div>

      <div class="accessibility-section">
        <h4>Saturação</h4>
        <div class="accessibility-buttons">
          <button onclick="RybenaApi.getInstance().toggleHighSaturation()">
            Alta
          </button>
          <button onclick="RybenaApi.getInstance().toggleLowSaturation()">
            Baixa
          </button>
          <button onclick="RybenaApi.getInstance().toggleNoSaturation()">
            Nenhuma
          </button>
        </div>
      </div>

      <div class="accessibility-section">
        <h4>Cursor</h4>
        <div class="accessibility-buttons">
          <button onclick="RybenaApi.getInstance().toggleCursorSize()">
            Tamanho
          </button>
          <button onclick="RybenaApi.getInstance().toggleCursorGuide()">
            Guia
          </button>
          <button onclick="RybenaApi.getInstance().toggleAmplifyCursor()">
            Ampliar
          </button>
        </div>
      </div>

      <div class="accessibility-section">
        <h4>Destaques</h4>
        <div class="accessibility-buttons">
          <button onclick="RybenaApi.getInstance().toggleLinkHighlight()">
            Links
          </button>
          <button onclick="RybenaApi.getInstance().toggleTitleHighlight()">
            Títulos
          </button>
        </div>
      </div>

      <div class="accessibility-section">
        <h4>Leitura</h4>
        <div class="accessibility-buttons">
          <button onclick="RybenaApi.getInstance().toggleReadingMask()">
            Máscara
          </button>
          <button onclick="RybenaApi.getInstance().toggleReadingMode()">
            Modo
          </button>
        </div>
      </div>

      <div class="accessibility-section">
        <h4>Outros</h4>
        <div class="accessibility-buttons">
          <button onclick="RybenaApi.getInstance().toggleDictionary()">
            Dicionário
          </button>
          <button onclick="RybenaApi.getInstance().toggleImageDescription()">
            Imagens
          </button>
          <button onclick="RybenaApi.getInstance().togglePauseAnimations()">
            Animações
          </button>
          <button onclick="RybenaApi.getInstance().toggleKeyboardNavigation()">
            Teclado
          </button>
        </div>
      </div>
    </div>

    <script>
      RybenaApi.getInstance().handleLoaded(() => {
        console.log("Rybená carregada");
      });
    </script>
  </body>
</html>

Exemplo 2: Ativação Automática

Este exemplo mostra como ativar recursos de acessibilidade automaticamente baseado em preferências do usuário:

RybenaApi.getInstance().handleLoaded(() => {
  // Carrega preferências salvas
  const savedPreferences = JSON.parse(
    localStorage.getItem("rybenaPreferences") || "{}"
  );

  // Ativa recursos baseados nas preferências
  if (savedPreferences.highContrast) {
    RybenaApi.getInstance().toggleDarkContrast();
  }

  if (savedPreferences.largeText) {
    RybenaApi.getInstance().toggleLineHeight();
    RybenaApi.getInstance().toggleLetterSpacing();
  }

  if (savedPreferences.dislexiaFont) {
    RybenaApi.getInstance().toggleDislexiaFont();
  }

  if (savedPreferences.largeCursor) {
    RybenaApi.getInstance().toggleCursorSize();
  }

  if (savedPreferences.readingMask) {
    RybenaApi.getInstance().toggleReadingMask();
  }
});

// Salva preferências
function savePreferences(preferences) {
  localStorage.setItem("rybenaPreferences", JSON.stringify(preferences));
}

Exemplo 3: Atalhos de Teclado

Este exemplo mostra como criar atalhos de teclado para recursos de acessibilidade:

RybenaApi.getInstance().handleLoaded(() => {
  // Atalhos de teclado
  document.addEventListener("keydown", (e) => {
    // Alt + Z: Toggle Zoom
    if (e.altKey && e.key === "z") {
      e.preventDefault();
      RybenaApi.getInstance().toggleZoom();
    }

    // Alt + C: Toggle Contraste Escuro
    if (e.altKey && e.key === "c") {
      e.preventDefault();
      RybenaApi.getInstance().toggleDarkContrast();
    }

    // Alt + D: Toggle Fonte de Dislexia
    if (e.altKey && e.key === "d") {
      e.preventDefault();
      RybenaApi.getInstance().toggleDislexiaFont();
    }

    // Alt + M: Toggle Máscara de Leitura
    if (e.altKey && e.key === "m") {
      e.preventDefault();
      RybenaApi.getInstance().toggleReadingMask();
    }

    // Alt + L: Toggle Destaque de Links
    if (e.altKey && e.key === "l") {
      e.preventDefault();
      RybenaApi.getInstance().toggleLinkHighlight();
    }
  });
});

Boas Práticas

Dica: Salve as preferências de acessibilidade do usuário em localStorage para que elas persistam entre sessões.

Atenção: Alguns recursos de acessibilidade podem afetar o desempenho da página. Use-os com moderação e teste em diferentes dispositivos.

Sugestão: Forneça atalhos de teclado para os recursos de acessibilidade mais usados para melhorar a usabilidade.

Dica: Considere criar um painel de acessibilidade que permita aos usuários ativar/desativar recursos facilmente.

Resumo dos Métodos

Ajustes Visuais

Categoria	Método	Descrição
Altura da Linha	`toggleLineHeight()`	Alterna altura da linha
Altura da Linha	`nextLineHeight()`	Próximo nível de altura
Altura da Linha	`previousLineHeight()`	Nível anterior de altura
Espaçamento	`toggleLetterSpacing()`	Alterna espaçamento de letras
Espaçamento	`nextLetterSpacing()`	Próximo nível de espaçamento
Espaçamento	`previousLetterSpacing()`	Nível anterior de espaçamento
Zoom	`toggleZoom()`	Alterna zoom
Zoom	`nextZoom()`	Aumenta zoom
Zoom	`previousZoom()`	Diminui zoom
Contraste	`toggleDarkContrast()`	Alterna contraste escuro
Contraste	`toggleLightContrast()`	Alterna contraste claro
Contraste	`toggleInvertedContrast()`	Alterna contraste invertido
Saturação	`toggleHighSaturation()`	Alterna saturação alta
Saturação	`toggleLowSaturation()`	Alterna saturação baixa
Saturação	`toggleNoSaturation()`	Alterna sem saturação

Auxílios de Leitura

Categoria	Método	Descrição
Cursor	`toggleCursorSize()`	Alterna tamanho do cursor
Cursor	`toggleCursorGuide()`	Alterna guia do cursor
Cursor	`toggleAmplifyCursor()`	Alterna ampliar cursor
Fonte	`toggleDislexiaFont()`	Alterna fonte de dislexia
Destaques	`toggleLinkHighlight()`	Alterna destaque de links
Destaques	`toggleTitleHighlight()`	Alterna destaque de títulos
Leitura	`toggleReadingMask()`	Alterna máscara de leitura
Leitura	`toggleReadingMode()`	Alterna modo de leitura

Navegação e Outros

Categoria	Método	Descrição
Dicionário	`toggleDictionary()`	Alterna dicionário
Imagens	`toggleImageDescription()`	Alterna descrição de imagem
Animações	`togglePauseAnimations()`	Alterna pausar animações
Teclado	`toggleKeyboardNavigation()`	Alterna navegação por teclado

Recursos de Acessibilidade

Ajustes Visuais

Altura da Linha

Espaçamento de Letras

Zoom

Contraste

Saturação

Auxílios de Leitura

Cursor

Fonte de Dislexia

Destaques

Ferramentas de Leitura

Navegação e Outros

Dicionário

Descrição de Imagem

Pausar Animações

Navegação por Teclado

Exemplos Completos

Exemplo 1: Painel de Acessibilidade

Exemplo 2: Ativação Automática

Exemplo 3: Atalhos de Teclado

Boas Práticas

Resumo dos Métodos

Ajustes Visuais

Auxílios de Leitura

Navegação e Outros

Conteúdo Relacionado

Controle do Player

Controle de Tradução

Exemplos

Nesta página