Criando barra de acessibilidade no x5
Autore: Adriano Neves O.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> 
<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>  
<a href="#altocontraste" id="altocontraste" accesskey="3" onclick="window.toggleContrast()" onkeydown="window.toggleContrast()" style="font-family: Tahoma; font-size: 13px">| Alto contraste</a>  
<a href="imsitemap.html" style="font-family: Tahoma; font-size: 13px" style="color: #fff"> | Mapa do site</a> 
</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.
Obrigado Adriano,
Estava a procura de um código como este.
Vou testar
Valeu!
Autore
Nós sites que eu dou suporte estão funcionando.
O que é "barra de acessibilidade"?