Nova ferramenta: Linguagem simples. Clique no botão e experimente ao vivo

Adaptar o Eye-Able manualmente ao seu próprio sítio Web

A imagem mostra um computador portátil com um programa de computador aberto. Pode ver-se o código informático.

Partilhar post:

Se verificar a configuração por si próprio, pode personalizar o Eye-Able para o seu próprio sítio Web - para além do configurador.
A imagem mostra um computador portátil com um programa de computador aberto. Pode ver-se o código informático.

Adaptar o Eye-Able manualmente ao seu próprio sítio Web

Partilhar esta publicação:

A imagem mostra um computador portátil com um programa de computador aberto. Pode ver-se o código informático.
Se verificar a configuração por si próprio, pode personalizar o Eye-Able para o seu próprio sítio Web - para além do configurador.

Créditos das fotos: Any IP Ltd, o link para o autor é https://anyip.io/ e Simplex - Web Design Sydney 

Se verificar a configuração por si próprio, pode personalizar o Eye-Able - para além do configurador - de acordo com o seu próprio sítio Web. As vantagens desta personalização são descritas no artigo "Quais são as vantagens da personalização inicial?". É necessário um conhecimento avançado de HTML e CSS para efetuar estas personalizações. Por isso, oferecemos a opção de uma verificação e otimização Eye-Able completa para cada sítio Web. No entanto, algumas destas opções de personalização estão disponíveis para utilizadores não geridos do Eye-Able em qualquer altura. As definições disponíveis são apresentadas abaixo.

Nota: As configurações seguintes são apenas um subconjunto dos parâmetros disponíveis numa otimização completa pelo Eye-Able.

Para alargar a configuração do Eye-Able, devem ser adicionados pares de valores chave adicionais à variável eyeAble_pluginConfig. Pode encontrar um exemplo de configuração aqui(https://www.eye-able-cdn.com/example.js)

Para além de integrar a configuração diretamente em linha, as alterações à configuração do eye-ble também podem ser feitas utilizando uma função separada. Recomenda-se, portanto, a utilização do método eyeAble_updateConfig()para poder efetuar alterações à configuração:

<script type="text/javascript" >
    function eyeAble_updateConfig() {
        eyeAble_pluginConfig.topPosition = "200px"; //Verändere die Top-Position des Icons
        eyeAble_pluginConfig.maxMagnification = 10;
        if(eyeAble_pluginConfig.blacklistContrast){
            //append to the existing rules, otherwise they get overwritten
            eyeAble_pluginConfig.blacklistContrast += ".myClass";
        } else {
            eyeAble_pluginConfig.blacklistContrast = ".myClass";
        }
    }
</script>

Pode comentar os parâmetros que não devem ser alterados.

Ampliação:

Existem os seguintes parâmetros para limitar a ampliação:

  • maxMagnification: [int] Descreve a ampliação máxima (predefinição: 21)
  • maxMobileMagnification: [int] Descreve a ampliação móvel máxima (predefinição: 3)

Posição:

Existem os seguintes parâmetros para alterar a posição do ícone principal:

  • topPosition: [String] Define a posição superior do ícone no ambiente de trabalho em % ou px (predefinição: "10%")
  • rightPosition: [String] Define a posição direita do ícone no ambiente de trabalho em px. Se sidePosition estiver definido para "left", a posição esquerda é definida (predefinição: "10px")
  • mobileBottomPosition: [String] Define a posição inferior do ícone móvel em % ou px (predefinição: "15%")
  • mobileRightPosition: [String] Define a posição direita do ícone móvel em px (predefinição: "10px")
  • sidePosition: [String] Define o lado em que o ícone aparece "esquerda" ou "direita" (predefinição: "direita")

Aparência:

Existem os seguintes parâmetros para alterar o aspeto:

  • mainIconAlt: [int] Altera o ícone principal entre três variantes 0, 1 ou 2 (predefinição: 0)
  • iconSize: [int] Altera o tamanho do ícone no ambiente de trabalho, valores recomendados entre 50-70 pixéis (predefinição: 70px)
  • mobileIconSize: [int] Alterar o tamanho do ícone móvel, valores recomendados entre 35-50 pixéis (predefinição: 50px)

Leitor de ecrã:

As classes CSS de personalização podem ser alteradas com os seguintes parâmetros:

  • customSrBlacklistCSS: [String] Altera a classe CSS dos elementos a excluir (predefinição: eyeAble_SrSkip)
  • customSrStartCSS: [String] Altera a classe CSS para o novo elemento inicial (predefinição: eyeAble_SrStart)
  • customSrTextCSS: [String] Altera a classe CSS do bloco a ser pré-lido (predefinição: eyeAble_SrText )

Excluir elementos das funções:

Os parâmetros seguintes podem ser utilizados para excluir determinados elementos das funções Eye-Able. Isto é útil para texto que sai do seu contentor quando ampliado, ou para elementos cujas cores não devem ser ajustadas pelo contraste ou modo noturno. Os elementos podem ser seleccionados através de selectores CSS nativos (mais informações aqui(https://www.w3schools.com/cssref/css_selectors.asp). Os selectores CSS múltiplos são separados por vírgulas. A exceção também se aplica a todos os filhos dos elementos seleccionados!

  • blacklistContrast: [String] Excluir elementos do ajuste de cor do contraste ou do modo noturno.

por exemplo.

Exemplo de como excluir elementos do contraste
  • blacklistFontsize: [String] Excluir elementos da ampliação do tipo de letra

por exemplo.

Exemplo de como excluir elementos da ampliação

 

  • forceWhiteBackground: [String] Força um fundo branco quando o modo noturno ou de contraste está ativado

 

Fácil para todos

Está interessado? Teremos todo o gosto em ajudá-lo.

Com mais de 25 funções relacionadas com a acessibilidade digital, o Eye-Able também o ajuda a reduzir as suas barreiras a longo prazo. Pode tornar as suas informações acessíveis a todos e não excluir nenhum visitante - em suma, pode aceder a um novo grupo-alvo sem grandes volumes de marketing.

O ícone mostra a figura de acessibilidade

Entrevista de aconselhamento

Consulta não vinculativa sobre acessibilidade digital em geral

O ícone mostra a figura de acessibilidade

Análise

Discussão de possíveis potencialidades de otimização do seu sítio Web

O ícone mostra a figura de acessibilidade

Demonstração em direto

Apresentação do software de assistência diretamente no seu sítio Web

Outras contribuições

Se quiser um pouco mais: