Olá, pessoal!
Recentemente para um site precisei adicionar as funções de acessibilidade, 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 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!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?