Barra de Acessibilidade Universal

Título h1

Busca

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non saepe, voluptas excepturi iste qui aspernatur ad eius praesentium. Distinctio reprehenderit debitis, sunt reiciendis error consequuntur, voluptatibus omnis inventore quidem magnam.

Emphasis classes

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, ullam, autem. Ab, voluptatibus fugiat iusto itaque nesciunt repellendus vitae, cupiditate voluptates minus in quisquam officia eos, est vel iure earum!

Formulário para teste

Formulario teste
A longer block of help text that breaks onto a new line and may extend beyond one line.

Conteúdo

Edições anteriores

Links de acessibilidade

Acessibilidade

A url não pode ser encontrada ...

Documentação

Chamadas

Chamada básica
Chamada completa

Configurações

Lista das opções configuráveis do plugin.

nomeCookieFiltro

tipo: String

Padrão: BarraAcessibilidadeFiltro

Caso precise alterar o nome do cookie utilizado para guardar o filtro.

nomeCookieZoom

tipo: String

Padrão: BarraAcessibilidadeZoom

Caso precise alterar o nome do cookie utilizado para guardar o zoom.

caminhoCss

tipo: String

Padrão: css/

Caso o caminho dos CSS sejam diferentes de css/

zoomEscala

tipo: boolean

Padrão: true

Utilizado para usar o zoom por escala, o valor "false" define o zoom por fonte.

zoomMaximo

tipo: integer

Padrão: 8

É a quantidade máxima de zoom permitido ( quantidade de cliques no botão A+ ). Essa opção só funcionará caso zoomEscala estiver como false

zoomPorcentagem

tipo: integer

Padrão: 25

Porcentagem aplicada a cada clique no botão zoom, valor inteiro de 0 a 100. Essa opção só funcionará caso zoomEscala estiver como false

elementosMudancaFonte

tipo: string

Padrão: h1, h2, h3, h4, h5, h6, p, a, span, label, input, textarea, li, pre

elementos afetados na mudança de fonte, normalmente elementos html, valor é uma string separada por vírgula. Essa opção só funcionará caso zoomEscala estiver como false

excluirElementos

tipo: array

Padrão: ['.nofilter, img, iframe']

Elementos e classes que receberão a negação na aplicação dos filtros cor invertida e cinza invertida

excluirElementosAP

tipo: array

Padrão: ['img, iframe']

Elementos e classes que receberão a negação na aplicação do filtro de preto, branco e amarelo. Com isto, eles serão mantidos com as propriedades de cores originais.

codOrigem

tipo: String

Padrão: 4

Alterar o código de origem de acordo com o projeto em que a barra for implementada.

Dependências:

Bibliotecas necessárias para funcionamento da barra de acessiblidade.

jQuery Plugin

Implementação

Arquivos necessários da barra

Abaixo os códigos para serem incluidos nos projetos.

Estrutura

BarraAcessibilidade/
├── css/
|   └── santillanaAcessibilidade.css
|   └── santillanaAcessibilidadeCustom.css
|   └── sa.altocontraste.css
|   └── sa.amarelopreto.css
|   └── sa.cinzainvertida.css
|   └── sa.corinvertida.css
|   └── sa.monocromatico.css
|
├── js/
|   └── jquery.santillanaAcessibilidade.min.js
|   └── jquery.santillanaAnalytics.min.js
|
├── images/
|   └── contraste.png
|   └── icon-libras.png
|   └── icon-mapadosite.png
|
└── html-barra-acessibilidade.txt

Arquivo html

Copie o código e insira após a tag de abertura do body.

Caso o seu site não possua busca, basta retirar este atalho do HTML.

Caso o id dos elementos esteja diferente dos utilizados por padrão, será necessário alterar os ids do seu site. Caso isto não seja possível, este HTML pode ser alterado para utilizar os ids já existentes, desde que eles sigam um padrão.

Estilo CSS

Copiar os 2 arquivos para a mesma pasta.

O arquivo santillanaAcessibilidadeCustom.css é o que contém o arquivo de configuração das larguras da barra e do caminho da imagem de contraste.

O arquivo santillanaAcessibilidade.css é o que contém toda estilização da barra. Este arquivo não deve ser alterado, pois em caso de atualização do plugin, as alterações serão perdidas.

Edição do arquivo santillanaAcessibilidadeCustom.css

Esse arquivo contém quatro linhas para serem editadas.

1 - Caminho do icone, de acordo com a estrutura de página do projeto.

2 - Tamanho da resolução e do conteúdo no tablet

3 - Tamanho da resolução e do conteúdo no desktop com resolução média

4 - Tamanho da resolução e do conteúdo no desktop com resolução grande

Por default, estes tamanhos seguem o tamanho das coleções da Moderna, desenvolvidas no Liferay.

Script JS

Chamada JS

A chamada do plugin deve estar dentro de document.ready() do seu arquivo de scripts

Analytics JS

Para realizar o tracking dos eventos do Analytics, é necessário incluir a chamada acima. Caso o seu projeto não possua o plugin do Google Analytics, será necessário inclui-lo também (https://analytics.google.com). Recomendamos que seja utilizada a versão universal do plugin.

Alteração CSS Amarelo/Preto

Em alguns casos, pode haver um conflito com o contraste e o css original do site, fazendo com que esta opção não funcione corretamente. Uma solução é inserir a tag "important", para forçar a aplicação do contraste em certos elementos.

Alterar o arquivo barraAcessibilidade/css/sa.amarelopreto.css

Importante: pela natureza desta mudança, não é possível prever os impactos deste tipo de alteração. Além disto, deve-se tomar cuidado ao realizar uma atualização do plugin.

Aplicação das opções do usuário

Marcação para evitar que a tela seja alterada enquanto é montada (comportamento de "piscar" a tela)

Para evitar este comportamento, é necessário que no cabeçalho do site seja incluido o estilo do filtro aplicado via cookie, durante a montagem da página. Nos exemplos abaixo, a inclusão é feita em implementações Liferay e PHP.

Implementações PHP

Implementações Liferay (alteração no tema do site)

Conteúdos de acessibilidade

Serviço que retorna os conteúdos de acessibilidade

Conteúdos são cadastrados por uma adminsitração no Liferay e são recuperados em qualquer plataforma chamando um serviço JSON que será explicado adiante.

Serviço JSON

Exemplo de chamada Ajax

Exemplo de chamada via curl

Exemplo de chamada via url

Dependências:

Bibliotecas necessárias para funcionamento da barra de acessiblidade.

jQuery Plugin

Compatibilidade

A compatibilidade da barra com os navegadores.

A barra de acessibilidade não é compatível com versões muito antigas dos navegadores, normalmente as versões que não oferecem suporte a CSS3 Filters. Referência: https://www.w3schools.com/cssref/css3_pr_filter.asp

Testamos a barra nos seguintes navegadores

  • Win Chrome
  • Win Firefox
  • Win IE 10/11 ( Funciona apenas o filtro Preto, branco e amarelo )
  • Win Edge
  • Mac Safari

Arquivos incluidos na versão simples

BarraAcessibilidade/
├── css/
|   └── santillanaAcessibilidade.css
|   └── santillanaAcessibilidadeCustom.css
|   └── sa.altocontraste.css
|   └── sa.amarelopreto.css
|   └── sa.cinzainvertida.css
|   └── sa.corinvertida.css
|   └── sa.monocromatico.css
|
├── js/
|   └── jquery.santillanaAcessibilidade.min.js
|   └── jquery.santillanaAnalytics.min.js
|
├── images/
|   └── contraste.png
|   └── icon-libras.png
|   └── icon-mapadosite.png
|
└── html-barra-acessibilidade.txt