WebSite X5Help Center

 
Adriano Neves O.
Adriano Neves O.
User

Criando barra de acessibilidade no x5  pt

Автор: Adriano Neves O.
Просмотрено 2654, Подписчики 2, Размещенный 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.

Размещено
3 Ответы
W. MARLES
W. MARLES
User

Obrigado Adriano,

Estava a procura de um código como este.

Vou testarlaughing

Valeu!

Читать больше
Размещено От W. MARLES
Adriano Neves O.
Adriano Neves O.
User
Автор

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

Читать больше
Размещено От Adriano Neves O.
Bubus G.
Bubus G.
User

O que é "barra de acessibilidade"?

Читать больше
Размещено От Bubus G.