Autor: Bruno Pulis

Você sabia que a web pode ser um lugar incrível para todos independentemente de suas habilidades ou deficiências?

Vamos explorar as 10 dicas de acessibilidade que você pode incluir para tornar a web um lugar melhor para todos.

Vamos lá!

1. Pense na Acessibilidade desde o início

Ao iniciar um projeto, tenha a acessibilidade em mente desde o princípio. Incorporar práticas de acessibilidade desde o início economiza tempo e esforço no longo prazo.

PORQUE ISSO É IMPORTANTE: adotando boas práticas de design e desenvolvimento seus resultados serão muito melhores do que tentar corrigir depois.

2. Conheça a WCAG

Familiarize-se com as diretrizes de acessibilidade web, como o WCAG (Web Content Accessibility Guidelines). Além disso, essas diretrizes fornecem uma estrutura sólida para garantir que seu conteúdo seja acessível.

Você pode encontrar informações detalhadas sobre como tornar sua página acessível, desde contraste de cores até navegação por teclado.

Em outras palavras, a WCAG é seu guia para uma web mais acessível. 😊

3. Crie conteúdo claro e significativo

A clareza do conteúdo é essencial para a acessibilidade web. Escreva em linguagem simples e evite jargões desnecessários.

Mantenha suas sentenças curtas e claras, destacando as informações mais importantes. Certifique-se de que o significado seja compreendido mesmo sem o contexto visual.

Assim, seu conteúdo será disponibilizado para um público muito maior.

4. Garanta um contraste adequado

O contraste de cores é fundamental para uma boa acessibilidade visual. Certifique-se de que o texto seja facilmente legível em diferentes fundos.

Use ferramentas online para verificar o contraste das cores e faça ajustes, se necessário. Lembre-se de que nem todos os usuários têm a mesma capacidade de distinguir cores.

Gravei um vídeo que pode ajudar nesse sentido.

5. Não confie apenas em cores

Evite utilizar apenas cores para transmitir informações importantes. Algumas pessoas têm dificuldades em distinguir certas cores ou são daltônicas. Utilize também elementos adicionais, como ícones ou textos descritivos, para garantir que as informações sejam compreendidas por todos.

Assim, prover outras alternativas é essencial para o conteúdo ser acessível.

6. Torne as Imagens Acessíveis

Ao usar imagens em seu site, inclua descrições alternativas utilizando o atributo “alt”. Essas descrições permitem que usuários com deficiência visual entendam o conteúdo da imagem por meio de tecnologias assistivas, como leitores de tela. Se a imagem for puramente decorativa e não adicionar informações relevantes, você pode deixar o atributo “alt” vazio.

7. Garanta uma navegação intuitiva

Facilite a navegação em seu site para todos os usuários. Certifique-se de que o conteúdo seja acessível através de teclado, permitindo a navegação por meio das teclas Tab, Shift+Tab e Enter. Isso é fundamental para pessoas que não podem usar um mouse ou possuem dificuldades motoras.

Forneça também informações claras sobre a localização atual do usuário, como destaques em links e cabeçalhos.

Em suma, o conteúdo desse ser acessível via teclado.

8. Teste em diferentes navegadores e dispositivos

A acessibilidade pode variar entre diferentes navegadores e dispositivos. Portanto, teste seu site em várias combinações para garantir uma experiência consistente e acessível para todos. Considere também testar em dispositivos móveis, pois muitos usuários navegam na web usando smartphones e tablets.

9. Faça uso de legendas e transcrições

Legendas em vídeos e transcrições de áudio são recursos valiosos para tornar seu conteúdo acessível a pessoas com deficiência auditiva. Forneça opções de legenda em vídeos e transcrições para conteúdos de áudio, como podcasts. Isso permite que todos os usuários acessem e entendam o conteúdo, independentemente de suas habilidades auditivas.

10. Mantenha-se atualizado

A tecnologia e as diretrizes de acessibilidade web estão em constante evolução. Mantenha-se atualizado sobre as melhores práticas e tendências atuais. Esteja aberto a aprender com a comunidade de acessibilidade e a implementar novas técnicas e recursos em seus projetos.

Conclusão

Lembre-se, pequenas ações podem ter um grande impacto na acessibilidade web. Ao seguir essas dicas, você estará contribuindo para um ambiente online mais inclusivo, onde todos têm a oportunidade de se envolver e aproveitar ao máximo o conteúdo disponível.

Gráficos, mapas e infográficos estão presentes em nossas vidas, mas é quando essas informações não estão acessíveis?

Pessoas com deficiência, não conseguem compreender eles devido a falta de acessibilidade.
Nesse artigo, vou te mostrar duas técnicas que podem melhorar isso.

Vamos lá?

O que são imagens complexas?

São representações visuais que contêm informações que não podem ser transmitidas através de uma sentença ou frase curta, como por exemplo:

• fluxogramas;
• organogramas;
• diagramas e ilustrações em que o texto da página depende da capacidade do usuário de compreender a imagem;
• infográficos;
• mapas mostrando locais ou outras informações como sistemas climáticos;
• os famosos CAPTCHAs.

Nesses cenário o atributo ALT não funciona bem, Dessa forma precisamos encontrar outras soluções.
Escrevi um guia completo sobre como escrever textos alternativos.

Criando gráficos acessíveis

Como exemplo, vou usar o gráfico da pesquisa WebAim Million. Seu objetivo é mostrar os erros de acessibilidade das páginas na web.

Para criar gráficos acessíveis, podemos usar duas técnicas: tabelas semânticas e atributos ARIA.

Solução 1: usando tabelas

Essa solução é simples, basicamente vamos representar o gráfico em uma tabela HTML. Vale lembrar que marcar a tabela de forma semântica é importante.

Devemos colocar a tabela logo abaixo do gráfico, leitores de tela leem o HTML por ordem de declaração no DOM.

Dessa forma, usuários de leitores de tela terão várias formas de acesso, possibilitando assim, a navegabilidade nas informações.

Vamos usar duas abordagens com tabelas, a primeira será manter ela visível para todos, e a segunda exibiremos somente para os leitores de tela.

Exibindo a tabela

Para fins didáticos vou considerar somente o erro de baixo contraste e texto alternativo no exemplo. A estrutura HTML da nossa tabela será da seguinte forma:

<table>
    <caption>Home pages with most common WCAG 2 failures</caption>
    <tbody>
       <tr>
         <th scope="col">WCAG Failure Type</th>
         <th scope="col">% of home pages in 2022</th>
         <th scope="col">% of home pages in 2021</th>
         <th scope="col">% of home pages in 2020</th>
         <th scope="col">% of home pages in 2019</th>
       </tr>
       <tr>
         <th scope="row">Low contrast text</td>
         <td>83.9%</td>
         <td>86.4%</td>
         <td>86.3%</td>
         <td>85.3%</td>
       </tr>
       <tr>
         <th scope="row">Missing alternative text for images</td>
         <td>55.4%</td>
         <td>60.6%</td>
         <td>66%</td>
         <td>68%</td>
       </tr>
    </tbody>
</table>

Detalhe importante estou usando o atributo <strong><em>scope</em></strong>, ele define o cabeçalho de uma coluna ou linha. Iremos usar os seguintes valores:

• row: o cabeçalho refere-se a todas as células da linha a que pertence;
• col: o cabeçalho refere-se a todas as células da coluna a que pertence.

Quando navegamos com o leitor de telas ele identifica esses atributos e conseguimos ter uma navegação mais linear e fluída dentro da tabela.

Ocultando tabela visualmente

A única diferença da tabela anterior é uso de uma classe CSS para ocultar a tabela visualmente, dessa forma somente o leitor de tela irá consumir a informação.

<table class="visually-hidden">
    <caption>Home pages with most common WCAG 2 failures</caption>
    <tbody>
       <tr>
         <th scope="col">WCAG Failure Type</th>
         <th scope="col">% of home pages in 2022</th>
         <th scope="col">% of home pages in 2021</th>
         <th scope="col">% of home pages in 2020</th>
         <th scope="col">% of home pages in 2019</th>
       </tr>
       <tr>
         <th scope="row">Low contrast text</td>
         <td>83.9%</td>
         <td>86.4%</td>
         <td>86.3%</td>
         <td>85.3%</td>
       </tr>
       <tr>
         <th scope="row">Missing alternative text for images</td>
         <td>55.4%</td>
         <td>60.6%</td>
         <td>66%</td>
         <td>68%</td>
       </tr>
    </tbody>
</table>

Solução 2: usando atributos ARIA

Outra técnica interessante é utilizar o atributo aria-describedby, ele é utilizado para estabelecer um relacionamento entre widgets ou grupos e o texto que o descreve.

Também pode ser usado uma sequência de ids ou somente um. Ele não está limitado a controles de formulários. Pode ser usado em contextos globais dentro de um documento HTML.

<img src="grafico.png" aria-describedby="description" alt="Representação dos erros mais comuns da WCAG 2.1 nas Home pages mais famosas"  />

<div id="description"> 
  <h2>Taxa de falhas de baixo contraste em porcentagem por ano</h2> 
  <ul>
     <li>Em 2019: 85.3%</li> 
     <li>Em 2020: 86.3%</li> 
     <li>Em 2021: 86.4%</li>
     <li>Em 2022: 83.9%</li>
  </ul>
</div>

Com o aria-describedby aplicado, o leitor de telas irá ler o atributo alt e logo após será direcionado ao conteúdo da <div> que contém o ID com valor de description.

Dessa forma as duas informações se complementam e conseguimos passar uma informação com maior relevância para todos os usuários.

Conclusão

Percebemos que as adequações de acessibilidade para tornar a experiência mais acessível são simples. Entretanto, vale salientar que essas são algumas de várias soluções que podemos utilizar.

Tanto as tabelas como os atributos ARIA tem suas vantagens, devemos olhar o nosso contexto e tentar adequar a nossa realidade.

Me conte nos comentários as dificuldades que já teve nesse tema.

Referências

• https://accessibility.psu.edu/images/charts/
• https://www.w3.org/TR/WCAG21/#text-alternatives
• https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html
• https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111#non-text-content
• https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
• https://www.w3.org/WAI/WCAG21/Techniques/general/G95.html#examples
• https://www.w3.org/WAI/WCAG21/Techniques/general/G73
• https://webaim.org/projects/million/
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th

Um ano novo começou e seguimos o velho mantra de todos os anos, aquele famoso ditado popular:

Ano novo, vida nova.

Nesse artigo, irei contar para vocês algumas mudanças que fiz no meu site.

Se você me acompanha há um tempo percebeu que o layout mudou, não é mesmo?

Além da parte visual, algumas coisas na arquitetura também foram modificadas. Então, vem comigo que vou detalhar todo o processo.

Início de tudo

Em meados de 2017, decidi criar um blog para escrever sobre diversos assuntos, ainda não tinha uma linha editorial definida. Na maior parte do tempo, utilizei o WordPress hospedado em um domínio próprio.

Dessa forma, eu tinha controle do código de ponta a ponta, a stack que utilizei por muito tempo foi:

• WordPress;
• MySQL;
• Hospedagem compartilhada;
• FTP 🤣

Nunca tive problemas com essa stack, porém, em 2022 queria algo mais minimalista.

Comecei a perceber que estava com certas burocracias no WordPress, as quais impediam de ser mais criativo e produtivo com o conteúdo.

Escolhendo a stack

Existem várias tecnologias as quais ficamos pensando “um dia vou experimentar “, o meu namoro com a Jamstack durou muito tempo. Entretanto, esse ano decidi usar.

O que é a JamStack?

Segundo o próprio site da JamStack,é:

Uma arquitetura projetada para tornar a Web mais rápida, mais segura e mais fácil de dimensionar. Se baseia em muitas das ferramentas e fluxos de trabalho que os desenvolvedores adoram e que trazem o máximo de produtividade.

Existem diversas vantagens ao utilizar essa arquitetura, dentre elas, podemos destacar:

• segurança;
• escalabilidade;
• performance;
• manutenbilidade;
• portabilidade;
• experiência de desenvolvimento (DX).

Pontos positivos

A experiência de usar a stack é bem agradável, o desenvolvedor se sente confortável, no meu caso, senti bem mais produtivo.

Além disso, o nível de controle de código é total, facilitando assim a sua privacidade.

Tecnologias utilizadas

Para realizar essa transição escolhi três tecnologias que contribuíram bastante:

• Eleventy;
• Netlify;
• Github.

Eleventy

É um gerador de sites estáticos bastante famoso, open source e prioriza a privacidade dos dados, onde alguns projetos de empresas de renome utilizam.

Podemos destacar:

• Chrome Dev Summit;
• A11y Project;
• CSS Tricks;
• ESlint;
• Google V8;
• web.dev.

Sua flexibilidade e praticidade me impressionaram, me lembrou bastante o Jekyll que é escrito em Ruby.

Netlify

O Netlify utilizo como ferramenta de deploy, com ele conseguimos subir um site estático em questão de segundos.

Além disso, conta com diversas ferramentas que valem muito a pena experimentar.

GitHub

Na minha stack utilizo o GitHub como uma “hospedagem” tradicional.

Tenho controle total do código e posso criar Actions para automatizar diversas tarefas que posso julgar necessárias.

Privacidade

Depois do escândalo da Cambridge Analytica, comecei a prestar mais atenção na questão de privacidade.

Minha meta é cada vez utilizar menos o Google e suas ferramentas, existe até um tutorial passo a passo de como fazer isso.

Pensando nesse sentido, resolvi testar o Plausible Analytics, um serviço de Analytics para sites com a promessa de não perseguir os usuários com propagandas e coletar dados.

Aproveitando o gancho, troquei de serviço de newsletter também, estou experimentando o Buttondown Email.

Bom, acredito que isso seja tudo (por enquanto) novas modificações serão comentadas posteriormente.

Algo que almejo é experimentar o uso de WebMentions, porém, isso é assunto para um próximo post.

Até lá,
Pulis.

Recentemente fiquei com vontade aprender sobre desenvolvimento mobile. Vários fatores contribuíram para isso, um deles foi entender o contexto de desenvolvimento mobile, pois trabalho diaramente com mobile.

E também, como aplicar de modo efetivo a acessibilidade em aplicações mobile que noto uma carência de conteúdos práticos. Não é uma promessa, mas provavelmente vou começar a escrever sobre. ✨

Resumidamente, Flutter é um framework multiplataforma da Google, dentre suas características principais, as que saltam aos olhos são: sua flexibilidade, rapidez e produtividade.

Flexibilidade

Em minhas pesquisas, tinha um critério bem específico: queria algo multiplataforma. Conversando com alguns amigos, dentre, eles: Beto Muniz, Marcus Vinicius e Matheus Godoi que me incentivaram a utilizar o Flutter, pois atendia esse critério.

Há princípio tinha pensando em React Native, mas depois que o Beto me mostrou o Listtta um app que ele desenvolveu em Flutter dei uma chance.

Flutter tem a promessa de escrever um único codebase e executar em múltiplos ambientes, dentre eles:

• mobile;
• web;
• desenvolvimento desktop;
• pequenos widgets.

Produtividade

O Flutter tem um hot reloading nativo, isso facilita bastante, conseguimos visualizar em tempo de execução as alterações na interface.

Em outras palataformas, seria necessário gerar uma nova versão para identificar as modificações. Nesse ponto o Flutter fica em grande vantagem.

Rapidez

Além dessa característica fantástica, o código Flutter é compilado para ARM 64, x86 e Javascript, garantindo desempenho nativo. Desta forma, temos um ganho bem alta de performance.

Por onde começar

Como todo novo desafio, devemos ter boas referências para nos auxiliar. Vou compartilhar os recursos que encontrei que me ajudaram.

• documentação oficial;
• comunidade Flutterando;
• Curso completo de Flutter Gratuito.

Conclusão

Flutter me parece ser uma boa escolha, estou querendo testar diversas coisas relacionadas a acessibilidade com ele. E também, desenvolver alguns apps para uso pessoal.

E você já experimentou o Flutter?