WebSite X5 Help Center  - Criando barra de acessibilidade no x5

WebSite X5Help Center

 
Adriano Neves O.
Adriano Neves O.
User

Criando barra de acessibilidade no x5  pt

Autor: Adriano Neves O.
Besucht 2711, Followers 2, Geteilt 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.

Gepostet am
3 ANTWORTEN
W. MARLES
W. MARLES
User

Obrigado Adriano,

Estava a procura de um código como este.

Vou testarlaughing

Valeu!

Mehr lesen
Gepostet am von W. MARLES
Adriano Neves O.
Adriano Neves O.
User
Autor

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

Mehr lesen
Gepostet am von Adriano Neves O.
Bubus G.
Bubus G.
User

O que é "barra de acessibilidade"?

Mehr lesen
Gepostet am von Bubus G.