(acessibilidade) telas mais adaptáveis/responsivas e acessíveis

[alchemist-developer]

Devemos lembrar que muitos não têm acesso suficiente à informação por causa de dificuldades de visão ou leitura.

Acessibilidade significa que pessoas com deficiência podem usar a web. Mais especificamente, a acessibilidade na web significa que pessoas com deficiência podem perceber, entender, navegar, interagir e contribuir para a web.

Então, como tornar um site mais acessível?

Incluindo texto alternativo, o famoso: alt=" "

Usando texto alternativo para imagens, logotipos, desenhos e outros itens. Sem o texto alternativo, os usuários do leitor de tela ouvirão apenas "imagem". Algumas imagens incluem texto alternativo automaticamente, por isso é recomendável verificar se ele é adequado.

Verificar alto contraste de cor

O alto contraste de cor facilita a leitura e a compreensão de textos e imagens. As Diretrizes de Acessibilidade para o Conteúdo da Web 2.0 (WCAG, na sigla em inglês) recomendam uma proporção mínima de 4,5:1 para textos grandes e 7:1 para outros textos e imagens. Por exemplo, evite usar texto cinza-claro em um plano de fundo branco.

Para verificar o contraste, use o verificador de contraste WebAIM.

Usar texto de link informativo

Os leitores de tela podem detectar links, por isso links com textos informativos são úteis. A melhor opção é usar o título da página como o texto do link. Por exemplo, no link para a página do seu perfil, adicione "meu perfil" como texto do link, e não "clique aqui" ou o URL completo.

Verificar o tamanho e o alinhamento do texto

Para facilitar a leitura do site, devemos usar textos grandes, alinhados à esquerda, quando possível. O texto justificado é mais difícil de ler devido ao espaço extra entre as palavras.

Usar texto além da formatação

Não podemos contar apenas com a formatação visual para comunicar o significado. É possível que os leitores de tela não anunciem alterações na formatação, como negritos ou destaques. Por exemplo, para marcar uma seção importante do texto, adicione a palavra "Importante".

Vamos ver agora alguns @BreakPoints comuns em termos de larguras dos dispositivos:

320px — 480px: dispositivos móveis

481px — 768px: iPads, tablets

769px — 1024px: telas pequenas, laptops

1025px — 1200px: desktops, telas grandes

1201px e acima —  telas muito grandes, TVs

Usar o design responsivo é uma obrigação nos campos de design e desenvolvimento para a web nos dias de hoje.
Media queries são uma das partes mais importantes na criação de layouts responsivos.

Devemos pensar que o poder da web está em sua universalidade.
Acesso para todos, independente de deficiência, é um aspecto essencial.

As possibilidades de ajuda a sociedade são infinitas pela ONG com as pessoas que participam e ainda podem ser alcançadas para participar.