WebSite X5Help Center

 
Adriano Neves O.
Adriano Neves O.
User

Criando barra de acessibilidade no x5  pt

Autore: Adriano Neves O.
Visite 2652, Followers 2, Condiviso 0  

Criando barra de acessibilidade no X5. Passo a passo.

1) No menu so site adicione o componente 'Código HTML'.

2) cole o códido abaixo.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style/contrast.css" media="screen,print" />
<style>
a:link {text-decoration: none; color: #fff;}
a:visited {text-decoration: none;}
a:hover {text-decoration: font style='font-weight:bold;}
a:active {text-decoration: none; color: #fff;}
</style>

</head>
<body>
<nav class="navbar navbar-light" style="color: #fff">
<ul>
<li>
<a href="acessibilidade.php" style="font-family: Tahoma; font-size: 13px">| Acessibilidade</a>
<a href="#imGoToCont" style="font-family: Tahoma; font-size: 13px">| Ir para o conteúdo</a>
<a href="#imGoToMenu"style="font-family: Tahoma; font-size: 13px">| Ir para o menu</a>&nbsp
<a href="#imHeader_imObjectSearch_01_field" classe="active" style="font-family: Tahoma; font-size: 13px">| Ir para a busca</a>
<a href="#imFooter" style="font-family: Tahoma; font-size: 13px">| Ir para o rodapé</a> &nbsp
<a href="#altocontraste" id="altocontraste" accesskey="3" onclick="window.toggleContrast()" onkeydown="window.toggleContrast()" style="font-family: Tahoma; font-size: 13px">| Alto contraste</a> &nbsp
<a href="imsitemap.html" style="font-family: Tahoma; font-size: 13px" style="color: #fff"> | Mapa do site</a>&nbsp
</li>
</ul>
</nav>
<script type="text/javascript" src="res/contrast.js"></script>
</body>

</html>

3) Crie um arquivo com o nome 'contrast.css', cole o código abaixo e envie para a pasta 'style' no servidor do site.

.contrast,
.contrast nav,
.contrast nav-tab,
.contrast nav-link,
.contrast div,
.contrast li,
.contrast li.active,
.contrast ol,
.contrast header,
.contrast footer,
.contrast section,
.contrast main,
.contrast aside,
.contrast panel,
.contrast article {
background: black !important;
color: white !important;
}
.contrast h1,
.contrast h2,
.contrast h3,
.contrast h4,
.contrast h5,
.contrast h6,
.contrast p,
.contrast label,
.contrast strong,
.contrast em,
.contrast cite,
.contrast q,
.contrast i,
.contrast b,
.contrast u,
.contrast font-face,
.contrast text,
.contrast span {
color: white !important;
}

.contrast a{
color: yellow !important;
}

.contrast btn,
.contrast button,
.contrast input[type=button],
.contrast input[type=reset],
.contrast input[type=submit] {
background: black !important;
color: yellow !important;
border: none !important;
}
.contrast input[type=text],
.contrast input[type=password],
.contrast input[type=url],
.contrast input[type=search],
.contrast input[type=email],
.contrast input[type=tel],
.contrast input[type=date],
.contrast input[type=month],
.contrast input[type=week],
.contrast input[type=datetime],
.contrast input[type=datetime-local],
.contrast textarea,


.contrast input[type=number] {
background: black !important;
border: 1px solid white !important;
color: white !important;
}

.contrast img.on-contrast-force-gray {
filter: grayscale(100%) contrast(120%);
}

.contrast img.on-contrast-force-white {
filter: brightness(0) invert(1);
}

.contrast header-cont container {
margin-left:0px;
width:90%;
height:30px;
margin-top:7px;
position:absolute;


}

4) Crie um arquivo com o nome 'contrast.js' cole o código abaixo e envie para a pasta 'res' no servidor do site.

(function () {
var Contrast = {
storage: 'contrastState',
cssClass: 'contrast',
currentState: null,
check: checkContrast,
getState: getContrastState,
setState: setContrastState,
toogle: toogleContrast,
updateView: updateViewContrast
};

window.toggleContrast = function () { Contrast.toogle(); };

Contrast.check();

function checkContrast() {
this.updateView();
}

function getContrastState() {
return localStorage.getItem(this.storage) === 'true';
}

function setContrastState(state) {
localStorage.setItem(this.storage, '' + state);
this.currentState = state;
this.updateView();
}

function updateViewContrast() {
var body = document.body;

if (this.currentState === null)
this.currentState = this.getState();

if (this.currentState)
body.classList.add(this.cssClass);
else
body.classList.remove(this.cssClass);
}

function toogleContrast() {
this.setState(!this.currentState);
}
})();

Pronto. Agora é só ajusta de acordo com sua necessidade.

Postato il
3 RISPOSTE
W. MARLES
W. MARLES
User

Obrigado Adriano,

Estava a procura de um código como este.

Vou testarlaughing

Valeu!

Leggi di più
Postato il da W. MARLES
Adriano Neves O.
Adriano Neves O.
User
Autore

Nós sites que eu dou suporte estão funcionando. 

Leggi di più
Postato il da Adriano Neves O.
Bubus G.
Bubus G.
User

O que é "barra de acessibilidade"?

Leggi di più
Postato il da Bubus G.