Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou desenvolvendo um site em html/css e esse site deve ter links de acessiblidade, dentre eles um link para alto contraste onde o usuário poderá clicar neste link e visualizar o site em alto contraste, porém, já procurei em alguns sites e não consegui achar nenhum material que realmente me ajudasse, agradeço desde já.
Eu posso fazer isso utilizando só HTML/CSS?
Sim, pode. Não precisa nem trabalhar no HTML, você só precisa criar um novo CSS, por exemplo, e fazer um JS/JQ mudar a folha de estilo quando o botão Alto Contraste for clicado.
JQ:
$('#id_do_seu_botao').click(function(){
$('link[href^=seu-css-atual.css]').attr('href', '/css/seu-estilo-altocontraste.css');
});Você também pode inserir uma condição SE, na verdade, deve inserir a condição para que o usuário possa retornar pra visualização normal, caso ele deseje.
De uma maneira mais complicada de criar, você pode fazer a condição em JS puro e precisa criar um CSS que sobreponha todas as classes do CSS anterior (override).
JS:
// 1*
var altoContraste = document.createElement('link');
// 2*
altoContraste.rel = 'stylesheet';
altoContraste.href = '/css/seu-estilo-altocontraste.css';// 3*
document.body.appendChild(altoContraste);
1*: Crie uma variável pra facilitar.
2: Essa parte é a responsável por criar o que você já deve conhecer como: <link rel="stylesheet" href="css/style">*
3: Adiciona um elemento filho ao body*, que no caso, é seu novo CSS.
Você precisa ter classes CSS definidas para alto contraste. Ao clicar no botão de acessibilidade, só alterar essas classes.