Sites acessíveis beneficiam a todos nós - visão geral com dicas práticas

Johannes Mairhofer Última atualização 08.05.2020
6 min.
Site acessível

Sites acessíveis não são mais um suposto tópico de nicho para pessoas com deficiência. Diz respeito a todos nós e até ajuda os fãs de SEO entre vocês - uma visão geral com dicas práticas de Johannes Mairhofer.

A acessibilidade no espaço digital é, na verdade, uma parte integrante da Internet e já está declarada nas suas diretrizes padronizadas. E, claro, também desempenha um papel importante no WordPress Codex. Todos os usuários devem ser capazes de usar WordPress , não importando a língua que falam, qual o seu status econômico ou quais as limitações físicas a que estão sujeitos. No entanto, o tema ainda não recebe a atenção que merece. Particularmente tendo em vista o desenvolvimento demográfico e a vontade de inclusão, a liberdade de barreiras digitais deve ser considerada com WordPress -WordPress - projetos, no entanto, significa Johannes Mairhofer. Porque: A acessibilidade também é importante do ponto de vista empresarial e de SEO.

A ideia de um site acessível não é nova

A fim de padronizar as técnicas na World Wide Web, o World Wide Web Consortium, ou W3C, foi fundado em 1994. Aqui são padrões particularmente importantes:

  • HTML (ainda a estrutura básica de quase todos os sites)
  • CSS (Cascading Style Sheets, e.g. usado em modelos WordPress )
  • WCAG (Web Content Accessibility Guidelines)

As diretrizes do WCAG são desenvolvidas pela Iniciativa de Acessibilidade na Web (WAI), que por sua vez é um grupo do W3C. Agora há aqui duas versões.

WCAG 1.0

  • Usando a marcação e as folhas de estilo
  • Design independente do dispositivo

WCAG 2.0

Os sites da Web devem

  • Perceptível (por exemplo, alternativas de texto para imagens)
  • Operável (por exemplo, controlável via teclado)
  • Compreensível (por exemplo, através de linguagem fácil)
  • Robusto (Compatível)

ser.

A ideia de um website sem barreiras não é, portanto, nova e está mesmo ancorada na Portaria sobre Tecnologias de Informação sem Barreiras (BITV) desde 2002. Isto significa que pelo menos os sites das autoridades públicas são obrigados a oferecer conteúdos sem barreiras.

Especialmente para novos projetos WordPress : Um site sem barreiras pode ser implementado com muito pouco esforço.

Como deve ser implementado um website sem barreiras? Muitos pontos não são tão complicados como você poderia pensar e podem ser implementados sem muito esforço.

A maneira mais fácil é, naturalmente, com uma página recém-criada e desenhada. Mas também os sites já existentes podem ser otimizados posteriormente. Há algumas regras básicas simples a seguir.

1) Utilizar correctamente o título da página, a navegação e as etiquetas

O título da página está na verdade no título e os cabeçalhos estão estruturados logicamente e também formatados como cabeçalhos, não apenas em negrito. As listas de balas são implementadas com pontos ou pontos de bala, não com um simples golpe negativo. Em WordPress isto pode ser especificado diretamente no editor. Dependendo do modelo e do editor utilizado, várias classes de cabeçalhos estão disponíveis aqui. Usando tags (por exemplo, H1 e H2 para cabeçalhos), a página pode ser mais fácil de experimentar e navegar para pessoas cegas usando um leitor de tela ou o teclado.

Site acessível: Listentag
Cabeça de Website Acessível
Trechos do editor de texto para este post: Acima você pode ver que as listas de tópicos foram definidas como tal. Também os subtítulos são definidos como H3.

2) Não usar JavaScript e Flash no design

Para o design é melhor usar HTML e CSS. Javascript e Flash não devem ser usados. O Javascript, como o nome sugere, é uma linguagem de scripting. Independentemente do facto de ser inseguro, nem todos os dispositivos e browser conseguem lidar com o código. Como o site deve estar disponível em tantos dispositivos quanto possível, o Javascript não é recomendado.

3) Separar conteúdo e design

O conteúdo (texto) e o design (layout) devem ser considerados completamente separados um do outro. Através de diferentes variantes CSS, por exemplo, o contraste da página pode ser ajustado ou as cores podem ser alteradas com um simples clique do utilizador. Isto pode ajudar pessoas com deficiências visuais ou cegueira de cor. Isto também é feito por grandes empresas como a Pfizer.

Em princípio, isto já é feito automaticamente em WordPress . Por exemplo, um modelo também pode ser alterado sem que seja necessário alterar o conteúdo. Se o site for acessado com um smartphone ou tablet, o layout também é automaticamente adaptado.

4) Observar o princípio dos dois sentidos

O conteúdo deve ser preparado de tal forma que possa ser percebido por dois sentidos diferentes. Desta forma, o site pode ser experimentado pelo maior número possível de pessoas sem muito esforço. Isto pode ser conseguido, por exemplo, através das seguintes medidas:

  • Adicionar descrição da imagem às imagens (pode ser feito diretamente através do editor WordPress )
  • Adicionar legendas aos vídeos (por exemplo, o Youtube faz isto automaticamente)
  • Estruturar texto com títulos (pode ser feito no editor)

A minha dica para uma melhor compreensão de um site acessível: ganhe experiência você mesmo

Em teoria, o assunto nem sempre é tão fácil de entender. Falei com Heiko Kunert, Diretor Geral da Associação para Cegos e Deficientes Visuais, sobre sites sem barreiras. Heiko está cego e navega na rede com um leitor de ecrã. Heiko fala sobre suas experiências com sites e redes sociais e compartilha como ele navega na web com seu smartphone e um display em Braille.

Muitas coisas que são abordadas aqui teoricamente também podem ser experimentadas por si mesmo sem muito esforço. Para que você possa ter uma sensação de como a sua página é realmente percebida.

acessibilidade-site-braille-reading
Uma linha braille - Fonte: Wikimedia Commons. Licença: https://creativecommons.org/licenses/by-sa/3.0/

O leitor de ecrã e o ecrã Braille são os dois suportes de navegação mais comuns

Um leitor de ecrã é um software que reconhece o texto e o lê em voz alta. Para navegar através de páginas web e documentos, é importante que sejam utilizadas etiquetas para os cabeçalhos e imagens. Isto permite aos utilizadores navegar pela página web com um leitor de ecrã e teclado ou ecrã Braille.

Uma variante de um leitor de tela é, por exemplo, o NVDA. Esta variante é um software livre e gratuito. Recomendo que experimente e chame o seu próprio site com o monitor desligado e tente navegar através dos menus.

Um ecrã Braille traduz a linha actual no ecrã para Braille. Esta linha é hardware real que está conectado ao computador. O visor em braille funciona em combinação com um leitor de ecrã.

A capacidade de resposta é a base e o fim de tudo para um site acessível

Computadores, laptops, smartphones, tablets, smartwatches e navegadores de texto. O número de dispositivos que podem ser usados para acessar um site é enorme. Um dos pontos importantes do WCAG 2.0 é a disponibilidade do website no maior número de dispositivos possível.

A maioria dos modelos WordPress são agora mais ou menos responsivos e permitem o acesso ao site, pelo menos no computador e smartphone. Dependendo do modelo, por exemplo, os menus são adaptados, as barras laterais são mostradas e escondidas, mas também os desenhos são completamente adaptados. Isto é chamado de web design responsivo. Acessar seu próprio site em um dispositivo diferente é fácil e revelador.

A rede é óptima. E a rede é para todos!

A disponibilidade líquida e permanente já não é um território novo, mas do ponto de vista de uma geração ainda é novo. A geração dos actuais 30 anos de idade, mas o mais tardar as gerações seguintes, estão habituadas a saber que a rede está sempre e em todo o lado disponível. Não queremos passar sem as possibilidades de informação e comunicação que a rede traz consigo, mesmo na velhice.

A necessidade de sites acessíveis está, portanto, a aumentar e a crescer de ano para ano. Com a ajuda das possibilidades e ferramentas disponíveis integradas em WordPress (por exemplo, descrição da imagem, cabeçalhos, CSS) é possível tornar os websites pelo menos livres de barreiras sem muito esforço.

O fato de que isso está se tornando cada vez mais importante também pode ser visto no fato de que cada vez mais grandes corporações estão colocando mais e mais valor na participação digital. Além do exemplo acima mencionado da Pfizer, o Twitter, por exemplo, oferece há algum tempo a possibilidade de adicionar uma descrição da imagem às imagens, a Microsoft está lidando extensivamente com o tema e muitos outros estão gradualmente seguindo o exemplo. Uma visão detalhada dos sites positivos acessíveis pode ser encontrada aqui, por exemplo.

Em última análise, um site acessível também é melhor para o Google

Infelizmente, eu experimento com demasiada frequência que SEO é mais importante que um bom conteúdo, por isso não sou um grande fã de argumentos de SEO. Mas se as páginas web podem ser melhor lidas e interpretadas pelos leitores de tela, também é mais fácil para o bot do Google classificar corretamente a página visitada.

Apenas WordPress permite que já seja muito rápido e fácil criar um website sem barreiras de aproximadamente 80%.

É ainda um longo caminho até 100% de acessibilidade. E isso provavelmente não é viável para muitas pequenas empresas e blogs privados. Mas com as possibilidades oferecidas por WordPress é fácil alcançar cerca de 80 por cento de acessibilidade.

Através do uso de tags para manchetes e imagens e especialmente a descrição das imagens, muito já é alcançado com poucos benefícios. Uma vez que o próprio site com um navegador de texto para navegar dá uma idéia do que os parafusos devem e ainda podem ser girados.

Se você está administrando o site para uma empresa, é sempre uma boa idéia tê-lo testado por pessoas cegas para obter feedback profissional e dicas.

O Johannes é muito curioso e já atingiu vários patamares na sua carreira. De especialista em TI qualificado a fotógrafo freelancer, ele é bastante versátil e consegue, por isso, colocar as diferentes "lentes" dos seus clientes. Hoje ele trabalha como fotógrafo e consultor freelancer de WordPress e fotografia. [Foto: Dennis Weißmantel]

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *.