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

Eye-Able Adaptar 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 Eye-Able - para além do configurador - de acordo com o 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.

Eye-Able Adaptar 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 Eye-Able - para além do configurador - de acordo com o seu próprio sítio Web.

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 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?". Para efetuar estas personalizações, é necessário um conhecimento avançado de HTML e CSS. Por isso, oferecemos a opção de uma verificação completa e otimização do Eye-Able para cada sítio Web. No entanto, algumas opções de personalização estão disponíveis a qualquer momento para utilizadores não geridos de Eye-Able . 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 através de 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-Able também podem ser efectuadas 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>

É possível 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 do sítio 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 pelo 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: