Categories: Tecnologia

Acessibilidade Web – Parte I

Acessibilidade Web quer dizer que todos os conteúdos ou serviços devem estar acessíveis, com fácil acesso, da forma mais intuitiva e com o menor esforço, para o maior número possível de usuários, independente de sistemas ou dispositivos utilizados, mas sem esquecer que também deve ser independente a suas culturas, experiências e deficiências.

A dois anos, eu tenho percebido e com certeza você também, uma grande preocupação com o Design Responsivo.

Hoje se entende que não é mais uma opção, e sim obrigação dos sites serem responsivos (utilizável nos mais diferentes dispositivos e suas resoluções).

Mas porque desenvolver um site responsivo? Não é apenas porque é bonitinho, ou para cobrar mais do cliente. A necessidade da responsividade é a preocupação em tornar a Web um mundo mais flexível e realmente utilizável a qualquer tipo de pessoa, seja ela deficiente visual, deficiente auditivo, ou com monitor com baixa resolução ou com pouca velocidade de internet.

Então, na minha humilde opinião, o Design Responsivo, nada mais é do que o início da Acessibilidade, mas é só a pontinha.

  1. Início
  2. Necessidades
  3. Tecnologias de Assistência Usadas
  4. CSS Acessível

Início

Pra começo de conversa Projeto os padrões desenvolvidos devem ter um código HTML e CSS válidos, ele deve estar separado em camadas (conteúdo, apresentação e comportamento) e claro, deve-se utilizar o HTML Semântico.

Necessidades

A Acessibilidade Web, pretende abordar as seguintes necessidades:

  • Visual (Cegueira, baixa visão, daltonismo…);
  • Mobilidade/Motora (Tremores, lentidão muscular, Parkinson, paralisia…);
  • Auditivos (Surdez, pouca audição…);
  • Convulsões (Existem convulsões visuais causadas pelos efeitos de pisca-pisca, por exemplo);
  • Intelectual/Cognitiva (Dislexia, Discalculia, problemas de memória…).

Tecnologias de Assistência Usadas

Pra você ter uma noção melhor, do número de possibilidades que temos que pensar, quando o assunto é Acessibilidade, aqui está uma lista de tecnologias de assistência que pessoas com deficiência podem usar para ajudar ou permitir a navegação na web e acessar conteúdos nela:

  • Software Leitor de Tela (Ledores) – normalmente lê o conteúdo textual usando um sintetizador de voz;
  • Software de Ampliação de Tela – Amplia o que é exibido no monitor;
  • Software de Reconhecimento de Fala – Utilizado por quem tem dificuldade com mouse ou teclado, ele aceita comandos de voz;
  • Teclado com Superposições – Torna mais fácil e precisa a digitação;
  • Terminais Braille – Transforma os caracteres de texto para caracteres em Braille.

CSS Acessível

Um ponto importante, e não muito abordado é que softwares leitores de tela são capazes de ler o CSS também, como a cor ou tipo da fonte.

Uma das grandes preocupações deve ser em não causar convulsões, como foi citada acima. Com a possibilidade de várias animações em CSS3, é necessário ficar atento. Para mais informações clique aqui.

Links também são uma importante preocupação. Cor diferente para links visitados e não retirar o sublinhado dos links são boas práticas.

Uma prática importante, mas que acredito ser obrigatória para os designers é o contraste. O contraste do fundo com os elementos sobrepostos deve ser adequado (4,5:1).

Também existem preocupações com os elementos :before e :after. Neste caso é o inverso. Nem todas as tecnologias de assistência conseguem ler esses conteúdos inseridos antes ou depois do texto. Então estes elementos devem ser utilizados apenas para uso estético mesmo, nada de conteúdo importante dentro deles!

Pra não ficar extenso demais, essa primeira parte sobre a Acessibilidade Web termina aqui, mas se inscreva na newsletter aqui do lado para receber e-mail quando sair a Parte II.

André Felizardo

Share
Published by
André Felizardo

Recent Posts

Blockchain & Cripto

Desvendando o Potencial da Blockchain e Criptomoedas através da Criptografia Em um mundo onde a…

2 semanas ago

Automatize o deploy de uma aplicação React com Github Actions e FTP

O deploy de uma aplicação React é uma etapa crucial para disponibilizar sua criação na…

10 meses ago

Github Satellite 2020 – Muitas novidades

Satellite 2020 foi a primeira conferência virtual do Github. O Github já tinha sido liberado…

4 anos ago

Web Components – Guia Geral

Neste guia veremos o que são web components, quando usar, sua estrutura e também um…

4 anos ago

Tipos de Frontend

A alguns anos atrás escrevi um texto sobre o que é o frontend, também palestrei…

4 anos ago

SVG – Guia definitivo

O que é SVG é a sigla para Scalable Vector Graphics que traduzindo seria gráficos…

4 anos ago