Adicionando acessibilidade a um site já criado
Veja as possibilidade para se adicionar funções de acessibilidade à um site já existente.
Olá, pessoal!
Recentemente para um site precisei adicionar as funções de acessibilidade↳Acessibilidade11 conteúdosO que é Acessibilidade Web e como tornar seu site mais acessívelDev (Back & Front) · mar 2019Design para veteranos digitais: acessibilidade para nós mesmosProduto & UX · jan 2020Dicas de Front-End para usabilidade, acessibilidade, performance e responsividadeProduto & UX · fev 2025Ver tudo em Produto & UX →, para aumentar e diminuir a fonte. Se fosse algo que eu tivesse começado a desenvolver, seria muito fácil. Bastaria trabalhar com todas as fontes em medidas proporcionais (porcentagem (%), por exemplo.)
p.s.: se quiser saber mais sobre as unidades de medida.
Exemplo do CSS↳CSS31 conteúdosArquitetura CSS: CSS FuncionalDev (Back & Front) · set 2019Entendendo posicionamento com CSS de uma vez por todasDev (Back & Front) · jul 2025Sites que combinam estética e usabilidade: reflexos da evolução do CSSDev (Back & Front) · fev 2025Ver tudo em Dev (Back & Front) → de acessibilidade para um site com medidas em porcentagem:
CSS
body { font-size: 15px; }
h1 { font-size: 200%; }
.sub-titulo { font-size: 150%; }
Javascript
function increaseFont(){
var body = document.getElementsByTagName("body")[0];
var old_font_size = getFontSize(body);
var new_font_size = old_font_size+1;
updateFont(body, new_font_size);
}
function decreaseFont(){
var body = document.getElementsByTagName("body")[0];
var old_font_size = getFontSize(body);
var new_font_size = old_font_size-1;
updateFont(body, new_font_size);
}
function updateFont(element, new_font_size){
element.style.fontSize = new_font_size+"px";
}
function getFontSize(element){
var style = window.getComputedStyle(element).getPropertyValue("font-size");
var old_font_size = parseFloat(style);
return old_font_size;
}
Não fui eu quem desenvolvi o site, então não poderia usar essa técnica acima. Ainda existe um outro problema: o cliente não queria mudar algumas fontes do site, por exemplo, dentro de botões que o background era uma imagem, para não quebrar o layout.
Dessa forma tive que fazer uma maneira de pegar os elementos que ele queria atualizar de todas as páginas e aumentar/diminuir o tamanho da fonte. Abaixo segue a solução que executei. Caso alguém tenha alguma maneira mais eficiente de executar a acessibilidade no site, deixe um comentário para discutirmos as vantagens e desvantagens dessas abordagens.
Javascript
elements_to_update = new Array();
elements_to_update.push( "h1" );
elements_to_update.push( ".content" );
elements_to_update.push( "body #container p" );
elements_to_update.push( ".content span a.last" );
// aqui você continua com a lista de todos os elementos que desejar
// os que coloquei acima são apenas exemplos
function accessibility(operation){
for( index in elements_to_update ){
var elements = document.querySelectorAll(elements_to_update[index]);
if( elements && elements.length > 0 ){
for(var i=0; i < elements.length; i++ ){
var element = elements[i];
if( operation == "increase" ){
increaseFont(element);
} else if( operation == "decrease" ){
decreaseFont(element);
}
}
}
}
}
function increaseFont(element){
var old_font_size = getFontSize(element);
var new_font_size = old_font_size+1;
updateFont(element, new_font_size);
}
function decreaseFont(element){
var old_font_size = getFontSize(element);
var new_font_size = old_font_size-1;
updateFont(element, new_font_size);
}
function updateFont(element, new_font_size){
element.style.fontSize = new_font_size+"px";
}
function getFontSize(element){
var style = window.getComputedStyle(element).getPropertyValue("font-size");
var old_font_size = parseFloat(style);
return old_font_size;
}
function increase(){
accessibility("increase");
}
function decrease(){
accessibility("decrease");
}
HTML
<!DOCTYPE HTML> <html> <head> <title>Acessibilidade by Paulo</title> </head> <body> <div class="acessibilidade"> <span onclick="increase()">A+</span> | <span onclick="decrease()">A-</span> </div> <h1>Acessibilidade eh legal</h1> <p class="sub-titulo">Sub titulo de acessibilidade</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </body> </html>
Abraços e até o próximo!
Pós Graduado em Engenharia de Software pela PUC-SP. Formado em Tecnologia em Banco de Dados. Trabalha desde 2005 com TI. Na área de programação, trabalha com as linguagens PHP, JAVA no Server Side e se diverte no Front-End :)
