Baixa Visão e Daltonismo

Baixa Visão

A deficiência física de baixa visão ou de visão subnormal é aquela em que o indivíduo não consegue corrigir a sua visão por óculos convencionais, medicação ou cirurgia.(DOURINA, 2022) Pode ser uma perda de visão ou enfraquecimento visual que causa incapacidade funcional e diminui desempenho visual, podendo ser adquirida no nascimento, através da genética familiar ou por doenças, como o diabetes descolamento de retina, glaucoma, catarata, degeneração senil de mácula, traumas oculares. (FCM UNICAMP, 2022)

Representação da cegueira por degeneração muscular

Representação da cegueira por retinopatia diabética

Uma das melhores formas de gerar acessibilidade para pessoas com baixa visão, é a ampliação de letras, números, imagens e carácteres no geral (FCM UNICAMP, 2022).

Daltonismo

Daltonismo é um distúrbio da visão que interfere na percepção das cores, também por discromatopsia ou discromopsia, a principal característica deste distúrbio é a dificuldade para distinguir o vermelho e o verde e com menos frequência o azul e o amarelo, e uma pequena porcentagem de pessoas enxergam tudo em tons de cinza, preto e branco. O Daltonismo na maioria das vezes é causado geneticamente, poucos casos são causados por trauma nos órgãos da visão, deslocamento da retina, tumores cerebrais ou lesões neurológicas. Até agora não existem curas nem tratamentos específicos, mas as lentes com filtro de cor podem ajudar o portador a melhorar um pouco o contraste. (VARELLA, 2022)

Tipos de Daltonismo:

Protanopia – diminuição ou ausência do pigmento vermelho, nesse caso, a pessoa enxerga em tons de azul, marrom, verde ou cinza;
Deuteranopia – ausência ou diminuição dos cones verdes, a pessoa enxerga em tons de marrom e azul;
Tritanopia – dificuldade para enxergar os diferentes tons de azul e o amarelo, que adquire tons rosados (VARELLA, 2021).

Para tornar um site acessível para pessoas daltônicas você deve tomar cuidado com alguns pontos, como existe diversos tipos de daltonismo devemos nos atentar a escolha de cores, como recomendado pela cartilha de acessibilidade nunca se deve transmitir informações por meio de cores. Para destacar uma informação de um texto, por exemplo, podemos apenas sublinhar a frase ou palavra e nos atentar no contraste entre o fundo da página e a fonte, pois pode dificultar a leitura (HANDTALK, 2021).

Documentação

Desenvolvemos nossa ferramenta usando códigos Html, Css e Java Script. Para construir a ferramenta que aumenta e diminui a fonte do site, construímos um botão usando Html, e demos sua funcionalidade através do Java Script.

Código:

Html:


          <div class="btn-container">

          <button name="increase-font" id="increase-font" title="Aumentar fonte">A+ < /button >

          <button name="decrease-font" id="decrease-font" title="Diminuir fonte">A-  < /button >

          </div >

Javascript:


          window.onload = function() {

          var elementBody = document.querySelector('body');

          var elementBtnIncreaseFont = document.getElementById('increase-font');

          var elementBtnDecreaseFont = document.getElementById('decrease-font');

          
          var fontSize = 100;

          var increaseDecrease = 10;

         
          elementBtnIncreaseFont.addEventListener('click', function(event) {

          fontSize = fontSize + increaseDecrease;

          elementBody.style.fontSize = fontSize + '%';

          });

         
          elementBtnDecreaseFont.addEventListener('click', function(event) {

          fontSize = fontSize - increaseDecrease;

          elementBody.style.fontSize = fontSize + '%';

          });
          }

Para desenvolver a funcionalidade que se adapta a deficiência que nos foi proposta, montamos três botões no html, um que mantinha a página em sua versão original, outro que tornava as cores adaptadas para pessoas com daltonismo, e outro que dava a página alto contraste.

Código:

 <button id="Contraste" style="margin: 15px" padding="8px">Contraste Escuro <button>

          
          <button id="Daltonismo" style="margin: 15px" padding="8px">Daltonismo </button>

          
          <button id="Normal" style="margin: 15px" padding="8px"> Visão Normal </button>

          
          <script>

          
          $("#Contraste").on("click", function () {

          
          $("body").css("background", "#080101");

          
          $("p").css("color", "#ffffff");

          
          $("h1").css("color", "#ffffff");

          
          $("h2").css("color", "#ffffff");

          
          $("h3").css("color", "#ffffff");

          
          $("li").css("color", "#ffffff");

          
          $("a").css("color", "#ffffff");

          
          $(".botoes").css("color", "#FFFF00");

          
          $("div").css("background", "#080101");

          
          $("button").css("background", "#ffffff");

          
          $("button").css("color", "#080101");

          
          });
          

          $("#Daltonismo").on("click", function () {

          
          $("body").css("background", "#FF7F00");

          
          $("h1").css("color", "#0000FF");

          
          $("h2").css("color", "#0000FF");

          
          $("h3").css("color", "#0000FF");

          
          $("li").css("color", "#0000FF");

          
          $("p").css("color", "#0000FF");

          
          $("a").css("color", "#0000FF");

          
          $(".botoes").css("color", "#FF7F00");

          
          $("button").css("background", "#FF7F00");

          
          $("button").css("color", "#0000FF");

          
          $("div").css("background", "#ff7f00");

          
          });
          

          $("#Normal").on("click", function () {

          
          $("body").css("background", "#e2e2e2");

          
          $("h1").css("color", "#000000");

          
          $("h2").css("color", "#000000");

          
          $("h3").css("color", "#000000");

          
          $("li").css("color", "#");

          
          $("p").css("color", "#000000");

          
          $("a").css("color", "#000000");

          
          $(".botoes").css("color", "#FFFFFF");

          
          $("button").css("background", "#FFFFFF");

          
          $("button").css("color", "#080101");

          
          $("div").css("background", "#e2e2e2");

          
          $("title").css("background", "#373737")

          
          });
          
          < script >

          
          <nav>

          
          <div class="btn-container">

          
          <button name="increase-font" id="increase-font" title="Aumentar fonte">A+</button>

          
          <button name="decrease-font" id="decrease-font" title="Diminuir fonte">A-</button>

Referências

DOURINA, Fundação. O que é deficiência

Disponível em http://fundacaodorina.org.br/a-fundacao/pessoas-cegas-e-com-baixa-visao/o-que-e-deficiencia/?gclid=EAIaIQobChMIuN3b54j99gIVGT-RCh0LhQA8EAAYASAAEgIHYfD_BwE

Acesso em: 05 de abr 2022

FCM UNICAMP. Baixa visão

Disponível em https://www.fcm.unicamp.br/fcm/auxilios-opticos/baixa-visao#:~:text=O%20que%20%C3%A9%20baixa%20vis%C3%A3o,e%20diminua%20o%20desempenho%20visual

Acesso em: 05 de abr 2022

HANDTALK. Tornar o seu site acessível para daltônicos

Disponível em https://www.handtalk.me/br/blog/acessibilidade-daltonicos/

Acesso em: 05 de abr 2022

VARELLA, Bruna. Daltonismo (2021)

Disponível em https://drauziovarella.uol.com.br/doencas-e-sintomas/daltonismo/#:~:text=Daltonismo%20%C3%A9%20um%20dist%C3%BArbio%20da,o%20azul%20e%20o%20amarelo"

Acesso em: 05 abr 2022