Acessibilidade Web: como começar do jeito certo

A acessibilidade web é um assunto cada vez mais importante para as pessoas interessadas em tornar a internet mais inclusiva. É essencial compreender como criar conteúdo acessível para que todos possam contar com a mesma experiência de navegação.


Neste artigo, vamos discutir sobre o que é acessibilidade na web e como você pode tornar seu conteúdo disponível para todos.

Vamos começar?

O propósito da web

Desde sua fundação, a web tem como propósito ser universal e acessível para todos. Tim Berns-Lee possuí uma frase que exemplifica isso:

O poder da Web está em sua universalidade.
O acesso por todos, independentemente da deficiência, é um aspecto essencial.

Tim Berns-Lee, fundador da web.

O fato curioso é que as especificações e princípios adotados pela W3C, eram e são extremamente passíveis de serem usados

Um deles é o princípio da interoperabilidade, que nada mais é do que sua aplicação conseguir funcionar para todas as pessoas independente do seu hardware, software, idioma, localização ou capacidade.

Quando isso acontece conseguimos incluir pessoas que foram excluídas ao longo de sua vida.

Dessa forma, as pessoas com deficiência são beneficiadas com o acesso, promovendo inclusão digital e autonomia para realizarem tomadas de decisões.

Mas para isso ocorrer necessitamos da acessibilidade, ela é essencial para desenvolvedores e organizações que desejam criar sites e ferramentas da web de alta qualidade e não excluir as pessoas de usar seus produtos e serviços.

Afinal, o que é acessibilidade na web?

Acessibilidade na web significa que nossos sites e aplicativos estejam preparados para serem acessados por qualquer pessoal, independente de sua necessidade específica.

Esses usuários devem poder perceber, compreender, navegar e interagir com o conteúdo sem restrição.

Ela abrange todas as deficiências que afetam o acesso, incluíndo:

  • auditivo;
  • cognitivo;
  • neurológico;
  • físico;
  • discurso;
  • visual.

Acessibilidade então é somente para pessoas com deficiência?

Esse é um mito extremamente comum quando somos leigos no assunto. Em uma explicação bem resumida é: NÃO.

Eu escrevi um artigo sobre 5 mitos de acessibilidade: conceitos incorretos e como corrigí-los, que reforça essa ideia que acessibilidade é para todos.

A acessibilidade traz muitos benefícios para pessoas que não possuem alguma deficiência também, por exemplo:

  • usuários de smartphones, smartwatch, outros dispositivos inteligentes como assistentes virtuais;
  • pessoas idosas que necessitam de uma nova forma de aprendizado devido a idade;
  • pessoas com deficiência temporárias, por exemplo, alguém que quebrou o braço;
  • pessoas que necessitam ver um vídeo e não conseguem habilitar o aúdio;
  • pessoas com “limitações situacionais”, como enxergar o conteúdo da tela do smartphone contra a luz solar;
  • pessoas que utilizam uma internet com conexão lenta.

Técnicas para deixar nossos produtos e serviços mais acessíveis

Diversos aspectos da acessibilidade são extremamente simples de serem implementados, outras são mais complexas.

Por isso a acessibilidade deve ser pensando no início do projeto para evitar retrabalho.

Descreve suas imagens

Carinha sorridente amarela utilizando um óculos escuros pretos. Ela exemplifica o uso do texto alternativo em imagens

Imagens são um dos elementos mais utilizados para transmitir informação na web. Dessa forma, devemos permitir que pessoas com deficiência visual possam compreender a informação da mesma maneira que nós.

Para deixarmos as imagens acessíveis devemos utilizar o atributo alt nas imagens. Ele permite que a imagem forneça um texto alternativo equivalente a sua representação visual.

Assim, os não-visuais conseguem compreender o conteúdo da mesma forma.

Você pode conferir o Guia Definitivo de texto alternativo que traduzi, nele contém dicas e informações valiosas sobre descrição de imagens.

Teclado de um iMac, com as teclas mais baixas. Sua estrutura é prata e as teclas brancas.
Foto de Clay Banks na Unsplash

Quando projetamos conteúdo para web, devemos pensar que as pessoas tem diversos tipos de entrada, como, por exemplo:

  • navegação através da fala;
  • navegação através do mouse;
  • navegação através do teclado;
  • navegação com leitores de telas.

Todos esses tipos de navegação conseguimos contemplar quando projetamos pensando em várias entradas.

O que devemos ter em mente: todos os recursos disponíveis via teclado devem estar disponíveis para o teclado.

Evite o baixo contraste

Existem 6 círculos na imagem conteúdo números ao centro de cada círculo. Devido ao daltonismo algum deles não são exibidos. Isso exemplifica o uso correto de contraste

Contraste é o campeão quando se trata de problemas de acessibilidade. Para garantir um bom contraste podemos utilizar ferramentas como o Color Contrast Analyzer.

Esssa ferramenta analisa o contraste e traz o resultado se possuí um baixo contraste ou não.

Pessoas que possuem daltonismo e baixa visão são extremamente prejudicadas quando não cumprimos isso.

Nesse sentido, gravei um vídeo usando o Accesible Colors. Ele é uma alternativa para o Color Contrast Analyzer.

Defina rótulos para os formulários

Formulário HTML que possuí os campos de: primeiro nome, último nome, data de nascimento, email e telefone celular. Existem dois botões um para enviar e outro para limpar o formulário
Foto de TutorialBrain

Um leitor de telas necessita que os inputs de um forrmulário estejam atrelados a um rótulo.

Esse rótulo deve representar o propósito do input.

Para resolver esse problema é extremamente simples, confira o trecho de código abaixo:

<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" />

Com o uso do atributo for, criamos um vínculo entre a label e o input. Dessa forma, quando o leitor de telas navegar pelo campo irá identificar corretamente qual é o seu objetivo de preenchimento.

Pode parecer extremamente trivial, entretanto, é bem comum vermos formulários sem esse atributo.

Minha dica é adota hoje mesmo o uso dos atributos corretos para uma melhor navegação nos seus formulários.

Defina o idioma da sua página

Talvez esse seja o defeito mais ignorado de acessibilidade. O atributo lang, é um aliado extremamente poderoso, contudo poucas pessoas utilizam ele da maneira correta.

Já escrevi sobre o uso correto do atributo lang. Basicamente, precisamos definir o idioma padrão do documento, para que, os leitores de tela e outras tecnologias assistivas possam ler da maneira correta.

Conclusão

Acessibilidade é um direto de todas pessoas para promover autonomia e facilidade no assim. Nesse sentido, devemos trabalhar para que os ambientes digitais sejam cada vez mais democráticos e inclusivos.

Desenvolver um produto ou serviço sem pensar em acessibilidade e dar um tiro no pé.

Referências

Algumas informações neste artigo são do documento Web Accessibility Initiative (WAI): Introduction to Web Accessibility. Shawn Lawton Henry. Copyright © 2010 W3C® (MIT, ERCIM, Keio). Status: Atualizado em 31 Março de 2022. https://www.w3.org/WAI/fundamentals/accessibility-intro/

Categoria: Acessibilidade Deixe um comentário

Reset: Vivendo no ritmo da graça em uma cultura estressada

Como é que eu cheguei nesse ponto? Esta é a pergunta que muitos homens cristãos estressados que estão perto de um “burnout” se fazem. Eles estão exaustos, deprimidos, ansiosos e sem alegria. Seu tempo é gasto fazendo muitas coisas boas, mas seu ritmo é insustentável – não descansam adequadamente e precisam recalibrar as forças com urgência. Este livro oferece uma boa notícia para quem está vivendo estressado.

Acompanhe comigo, os pontos importantes desse livro e como ele mudou a minha vida.

 

O livro em 3 frases

  • Nossa cultura é estressada e tem sugado nossas energias sem percebemos;
  • Somos demasiadamente distraídos e cremos que mais 5 minutos de trabalho não vão fazer diferença.
  • Investir tempo em coisas preciosas, como: relacionamento com Deus, cônjuges, família, amigos e essencial para uma vida equilibrada.

Impressões

Reset: vivendo no ritmo da graça em uma cultura estressada é um guia para melhorar nossa relação com Deus, nosso próximo e nossos relacionamentos. Ele é pautado no ritmo da graça de Deus, onde é oposto a cultura estressada em que vivemos.

Ela nos leva a entrar em um ritmo descontrolado sem ordem. Creio que a intenção do Dr. Murray ao escrever foi dar esse sentido de ordem que outrora foi perdido e demonstrar como necessitamos de um ritmo pautado na graça divina.

Como eu descobri esse livro?

Descobri esse livro em uma pesquisa na Amazon, estava procurando sobre o Ego Transformado do Tim Keller e me deparei com ele. Comprei em 2021 mas consegui lê-lo somente em 2022.

Quem deve ler?

Reset: vivendo no ritmo da graça em uma cultura estressada é definitivamente recomendado para homens cristãos que andam estressados e bem próximos a um burnout. Se você se encontra deprimido, ansioso, sem alegria e energia, esse livro é como um bálsamo para nossas almas aflitas.

Além de trazer pontos importantes sobre o autocuidado, também, remete questões relacionais e como lidamos com o inesperado. O Dr. Murray, oferece a nós uma esperança para o presente e o futuro, ajudando-nos a identificar sinais de estresse e oferecendo ajuda e estratégias práticas para que vivamos no ritmo da graça e consigamo recuperar a alegria e a leveza de uma vida pautada na graça de Deus.

Como o livro me mudou?

Após a leitura, sinto que, estou mais leve comigo mesmo e não estou me cobrando como fazia antes. Nos primeiros dias de leitura, foi assustador identificar na primeira Oficina de reparos chamada de “Verificação da realidade”, quantos itens negativos da lista eu tinha. 😥

Percorrendo os capítulos algo ficou extremamente claro para mim, preciso desacelerar a minha vida, viver no ritmo de uma cultura estressada irá nos leva ao fundo do poço bem rápido.

Ideias que mudaram ao longo da leitura

Várias ideias mudaram ao longo da leitura, irei sintetizar as principais em tópicos:

  • Devo usar meu tempo mais sabiamente, com coisas que realmente importam;
  • Dedicar uma vida mais generosa perante a Deus e aos outros;
  • Perder, às vezes, é melhor do que ganhar;
  • O ritmo da graça traz conforto a nossa alma barulhenta;
  • O silêncio fala, na verdade, berra.

Minhas 3 melhores citações

Cuide de si mesmo

Cuidar de si mesmo é o primeiro passo para cuidar dos outros, por amor ao próximo como a ti mesmo

Sobre a nossa identidade em Cristo

Se você tiver a resposta errada à “pergunta” quem sou eu, terá consequências profundas, prolongadas e abrangentes. É por isso que recuperar a nossa identidade verdadeira, pensar corretamente a nosso próprio respeito, é um dos principais componentes de reconfigurar nossa vida, voltará a pista certa e viver uma vida pautada pela graça.

Sobre nossos fracassos

O fracasso pode ser um composto enriquecedor. Na verdade, o ministério é chão fértil para o fracasso, e o fracasso é terra fértil para o ministério. Aprender a fracassar bem é parte essencial da vida cristã.

Resumo e Notas

A mensagem central do livro é: você não é dono da sua vida. Quando temos esse pensamento egoísta, entramos em um loop de autossuficiência.

Todos os malefícios de uma cultura estressada do mundo moderno gira em torno do egoísmo pecaminoso é certo que às vezes não percebemos devido sempre estar no automático.

Acredito que, o Dr. Murray acerta em cheio em explicar isso, todo esgotamento e cansaço é gerado por uma tendência de querermos ter os melhores resultados possíveis em todas as áreas de nossas vidas.

Conclusão

Se assim como eu, você precisa urgentemente de desacelerar este livro será como um descanso para seu coração.

Devemos viver de modo que a rotina, o trabalho e tantas coisas não sufoquem nossas vidas.

Lembre-se, existem coisas muito mais importantes do que nosso trabalho, carreira e realizações pessoais.

Compre o livro através do meu link de associado da Amazon, assim, você me ajuda a manter o blog e meu trabalho e eu ganho uma comissão pela venda.

O mais legal é que o livro não sai mais caro para você, o valor permanece o mesmo. 😉

Categoria: Indicações Deixe um comentário

5 atalhos do NVDA para testar acessibilidade

O NVDA é um leitor de tela gratuito para Windows. Ele foi projetado para ajudar pessoas com deficiência a usar computadores e navegar na web.

Você pode realizar o download gratuitamente dele. Acima de tudo é uma tecnologia assistiva perfeita para testar acessibilidade. ferramenta para fazer testes de acessibilidade.

Neste artigo irei mostrar 5 atalhos que ajudaram nesse sentido.

Ligando/desligando o NVDA

Ilustração de um home com muletas apertando um botão de liga e desliga
Imagem por storyset em Freepik

O leitor de telas fornece a possibilidade de ligar e desligar o sintetizador de voz. Esse é um recurso muito interessante quando precisamos que ele se silencie completamente.

Para ligar ou desligar o NVDA, devemos usar o comando Insert + S. Usando esse comando o leitor de telas será desligado.

Quando desligamos o leitor dá o feedback ao usuário Modo de fala desativado.

Para ligar novamente, pressione `Insert + S` duas vezes, o leitor irá dizer Modo de fala ativado.

Seu NVDA estará apto para ler o conteúdo novamente.

Dica bônus

Você pode alterar a tecla modificadora do NVDA, por exemplo, uso o Caps Lock no lugar do Insert, por achar mais prático.

Navegando por títulos

Ilustração das letras do alfabeto, representando a navegaçã por títulos
Imagem por rawpixel.com em Freepik

Títulos, são estruturas simples, entretanto, existem muitos erros relacionado a eles.

Recomendamos usá-los pois, fornecem uma organização textual e semântica, além de contribuir o SEO.

Para navegar por títulos use a tecla `H`, o leitor de telas irá verbalizar da seguinte forma: “Portal de notícias, título nível 1”.

Descobrindo links pela página

Ilustração de um cursor mouse conectando com outros recursos na rede
Imagem por rawpixel.com em Freepik

Hiperlinks tem um papel crucial na web, eles são a base da internet.

Sua função é gerar conexões entre assuntos e promover navegabilidade para os usuários. Por exemplo, quando clicamos num link externo estamos gerando uma conexão na rede de computadores.

Para navegarmos com o NVDA através de links usamos a tecla de atalho `K`, com ela iremos percorrer todos os links da página.

Ao ler o conteúdo o leitor traz a seguinte informação “Relatório de vendas do primeiro trimestre, link”.

Navegando por botões

Diversos botões de redes sociais
Imagem por starline em Freepik

A navegação por botões infelizmente é uma das mais problemáticas.

Em contrapartida, os problemas são simples de corrigir. Para navegarmos pelos botões devemos usar a tecla de atalho B.

Semelhantemente os links, iremos navegar em todos os botões declarados na página.

Navegando por listas

Ilustração de uma lista de tarefas ao lado um avatar de uma mulher segurando a lista e no outro lado outra mulher segurando um lápis e marcando os itens da lista
Imagem por starline em Freepik

Listas são extremamente úteis para agrupar informações como, por exemplo:

  • menu de navegação;
  • itens de uma lista de compras;
  • sequência de passos pré-determinados;
  • etc.

Para navegar através de listar em uma página web, usamos a tecla de atalho L.

Ela irá navegar entre as listas que foram definidas na página. Dessa forma, conseguimos identificar as listas facilmente.

dica bônus

Para navegarmos entre os itens de uma lista, podemos usar a tecla de atalho I.

Em conclusão, a tecla L navega pelas listas e a tecla I pelos itens das listas.

Conclusão

Usar os atalhos contribuem para uma exploração mais abrangente.

Quanto mais cedo usarmos, melhor. Além disso, temos uma experiência mais real de uso.

E você conhecia algum desses atalhos? Conta para mim nos comentários.

Categoria: Testes de acessibilidade Deixe um comentário

Como criar gráficos acessíveis

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.

Gráfico sobre Páginas iniciais com falhas WCAG mais comuns (% de páginas iniciais), Existe uma relação entre o tipo de erro com a porcentagem que foi encontrado.

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

Categoria: Desenvolvimento acessível Deixe um comentário

5 motivos para testar acessibilidade com leitor de telas

Testar acessibilidade é quase uma arte, ela encontra-se nos detalhes. Alguns comportamentos são reconhecidos somente com muita prática e experiência.

Os leitores de telas, de modo geral, tem comportamentos padrões para determinados componentes e as pessoas que os utilizam identificam de forma natural.

Neste artigo irei mostrar 5 motivos para testar com um leitor de telas. Vamos lá?

O que são leitores de telas?

Notebook preto em cima de uma mesa branca. Sua tela está desfocada e existe uma linha braille acopla para o uso da tecnologia assistiva
Foto por Elizabeth Woolner em Unsplash

Bom, se você nunca ouviu falar sobre leitores de telas eles são softwares construídos para auxiliar pessoas com deficiência visual para utilizar um computador/smartphone e navegar na web.

Sua função básica é converter a informação, através de um API que lê a estrutura do HTML e converte o texto em aúdio.

Existem diversos leitores de telas no mercado, podemos citar alguns:

  • NVDA;
  • Jaws;
  • Talkback;
  • VoiceOver.

Tendo em vista que, definimos o que são os leitores de tela irei apresentar para vocês, os 5 motivos para testar acessibilidade com leitor de telas.

Se você gostou do meu conteúdo e quer receber em primeira mão, assine a minha newsletter.

Prevenção de bugs

Uma joaninha com seu corpo vermelho e pintinhas pretas, ela está em cima de uma folha verde. Ao fundo a vegetação da floresta está desfocada. A joianinha é usada para representar os bugs que encontramos nas aplicações
Foto por Neringa Hunnefeld

Pode parecer óbvio, entretanto, uma interface impecavél visualmente, pode conter erros grotescos de acessibilidade.

Na grande maioria das vezes, esses bugs são erros de marcação HTML que poderiam ser evitados.

Um exemplo banal são botões sem rótulo. Por padrão todo elemento HTML deve ser usado para seu propósito.

Cada elemento possuí duas informações extremamente importantes: rótulo e semântica adequada.

No exempo a seguir, temos um botão que representa a ação de fechar, porém, ele não está rotulado corretamente.

<button>X</button>

Dessa forma compromete drasticamente a experiência de quem usa leitor de telas. O leitor iria verbalizar algo como: botão X.

Mas afinal o que seria o botão X?

Além disso, esse inocente botão fere as diretrizes da WCAG 2.1:

A 1.3.1 nos diz:

A organização estrutural de uma tela deve ser construída de forma que sua arquitetura de informação faça sentido tanto para quem vê, quanto para quem ouve o conteúdo.

A 2.5.3 nos diz:

Rótulos em botões, ícones acionáveis ou qualquer controle interativo, devem ter uma descrição significativa tanto para quem vê, quanto para quem apenas ouve a informação.

Fica nítido que o descumprimento de uma diretriz afeta a outra proporcionalmente.

Como resolvemos?

Uma das possíveis soluções é adicionar um atributo da WAI-ARIA o aria-label, dessa forma o leitor de tela receberá o feedback apropriado.

O exemplo a seguir adotamos a técnica com o uso do aria-label

<button aria-label="Fechar">X</button>

Cobrir áreas não mapeadas

É bem comum desenvolvermos um componente é esquecermos algumas ações, como por exemplo:

  • teclas de atalho para acionar o componente;
  • navegação via teclado;
  • ordem de foco.

Esses itens diversas vezes são ignorados pelos desenvolvedores, costumo chamar isso de programação orientada a mouse. Com isso, precisamos de “descobrir” certos comportamentos.

Foto por Dariusz Sankowski em Unsplash

Dessa forma pessoas que utilizam somente o teclado ficam extremamente prejudicadas e ignoradas.

Dica: sempre pense na possibilidade de navegar somente via teclado. Afinal quando utilizamos um smartphone, usamos somente o teclado.

HTML semântico

Trecho de código HTML com um fundo preta e letras coloridas

O leitor de telas é amigo íntimo do HTML, como um fiel amigo ele informa exatamente como foi escrito.

É de extrema importância desenvolvedores escreverem um HTML decente. Já cansei de realizar testes e identificar um problema: a grande maioria dos desenvolvedores ignoram uma escrita correta de HTML.

Como podemos construir uma casa sem um bom fundamento? O primeiro temporal leva nosso esforço aos ares.

Estude HTML semântico, caso você tenha dúvidas entre em contato comigo.

Feedback em tempo real

Foto por Claudio Schwarz em Unsplash

Usando leitores de telas para testes de acessibilidade eu aprendi uma coisa:

de feedback ao usuário o mais rápido possível.

Imagina a seguinte situação, um formulário para aplicar em uma vaga de emprego. Esse formulário possuí 20 campos que não informam em tempo de preenchimento se os dados estão corretos.

Somente no momento do envio e também não possui mensagens claras dos erros. Uma pessoa que usa um leitor de telas provavelmente vai tentar novamente ou desistir da candidatura.

Possibilidades

Dar o feedback enquanto as informações são preenchidas é uma excelente prática. Mensagens contextuais e concisas auxiliam bastante.

Existem técnicas que podemos usamos em alguns casos, como o atributo aria-live.

A experiência do usuário final

Foto por Amélie Mourichon em Unsplash

A acessibilidade está intimamente ligada com a experiência de uso das pessoas. Escrever um HTML semântico e adotar boas práticas de desenvolvimento podem contribuir muito para usuários de leitor de telas.

Usando leitores de telas para testes de acessibilidade, conseguimos captar a experiência dos usuário, assim, podemos corrigir de forma preventiva possíveis problemas.

Conclusão

Recomendo fortemente você desenvolvedor, enquanto estiver fazendo suas interfaces use algum leitor de telas para identifcar possíveis problemas.

Dessa forma, você irá “sentir na pele” como é uma navegação com tecnologia assistiva. E isso pode contribuir significamente em sua carreira.

Com esses conhecimentos, poderá explorar novos horizontes e quem sabe se tornar um especialista em desenvolvimento acessível.

Tudo depende de você e como diria o Tio Ben:

Com grandes poderes, vem grandes responsabilidades

Bruno Pulis

Consultor de acessibilidade, apaixonado por HTML e Qualidade de Software. Nas horas vagas toca flamenco e é fã de Star Wars

Categoria: Testes de acessibilidade 2 Comentários

5 mitos sobre acessibilidade que você precisa esclarecer

Ao longo da minha carreira já ouvi muita bobagem sobre acessibilidade.
Hoje vou mostrar os 5 mitos sobre acessibilidade.

Vamos lá…

1. Acessibilidade é somente para deficiente

O objetivo da acessibilidade é garantir que o conteúdo da web seja acessível por todos.
Um grupo de pessoas são mais beneficiadas, como por exemplo:

  • alguém com mãos ocupadas;
  • canhotos (como eu);
  • idosos;
  • crianças;
  • pessoas com baixo letramento.

Ou seja, todos.

Entretanto, Tim Berns-Lee certa vez comentou sobre o tema:

O poder da Web está em sua universalidade. O acesso de todos, independentemente da deficiência, é um aspecto essencial.
Tim Berns-Lee, citado em 1989.

Quando contemplamos acessibilidade, pensamos em todos.

2. Ninguém liga para isso

Não quer dizer que você ou sua empresa não se importa que todos seguem o mesmo fluxo.

Segundo o censo do IBGE de 2010, 45 milhões brasileiros necessitam de acessibilidade diariamente, para interagir com seus produtos e serviços na web.

Além disso, é constatado por uma pesquisa que menos de 1% dos sites brasileiroso são acessíveis.

A pandemia, aumentou drasticamente o pensamento de produtos e serviços acessíveis.

3. Não é meu público alvo

A web é multidisciplinar e extremamente diversa, pensar em um público específico é limitar o poder que emana dela.

Pense de forma universal, uma das formas de alcançar isso é utilizar o Design Universal para alcançar esse objetivo.

Não devemos setorizar as pessoas, muito menos pela sua deficiência.

4. Vou criar um site específico para acessibilidade

Lembro como se fosse hoje quando ouvi isso em um meetup. Algo que deve ficar claro: acessibilidade não é vilã dos padrões web.

Soluções como: Flexbox, CSS Grid e propriedades CSS3 contribuem para um site mais acessível.

Além de não fazer sentido, teríamos um custo a mais para desenvolver e segregaríamos as pessoas com deficiência.

5. Acessibilidade é perda de tempo

Ela em si não é perda de tempo, pois iria beneficiar possíveis clientes e novos usuários para nossas aplicações.

Também, iríamos alcançar diversas pessoas. O que pode ocorrer e ter um trabalho a mais devido um mau planejamento.

Outro ponto importante, cumprimos legislações nacionais e diretrizes internacionais.

Categoria: Acessibilidade Deixe um comentário

WordPress vs. Eleventy: Qual é a melhor opção para o seu blog?

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

É 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:

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.

Categoria: Desenvolvimento acessível Deixe um comentário

4 dicas imperdíveis para palestrantes

Me recordo como se fosse hoje, uma das primeiras apresentações que fiz. Foi no DevInCompany, uma ação promovida pela comunidade de desenvolvedores de Minas Gerais, o Minas Dev.

O intuito era simples, levar para as empresas as tendências e boas práticas que o mercado aplicava e almejava no momento.

De lá para cá, se passaram uns bons anos e olhando para trás percebo o quanto melhorei, como palestrante e como pessoa também.

Ao longo da caminhada já presenciei diversas palestras muito boas e outras nem tanto, mas a grande maioria delas peca em um quesito: acessibilidade.

Com o acesso a internet, a maioria dos produtos e serviços migraram para o ambiente digital, podemos verificar nosso saldo bancário, comprar coisas, conversar com nossos amigos, enviar um e-mail para um ente querido, entre outras coisas tudo na comodidade do nosso lar. Algo maravilhoso não é mesmo?

Porém, os ambientes digitais pecam com as pessoas com deficiência, quando palestramos estamos inseridos neste contexto. Segundo o censo do IBGE de 2010, existem 45 milhões de brasileiro com algum tipo de deficiência.

Criamos barreiras quando não pensamos nessa parcela da população e privamos os mesmos ao acesso a informação. Por isso, irei te dar 4 dicas para usar em suas apresentações e garantir que seu conteúdo seja mais acessível.

1. Se descreva para as pessoas

Ao palestrar você deve ter em mente algo muito importante: você desconhece a totalidade do seu público.

Pelo o fato de desconhecer, podem existir pessoas com graus de deficiência leve a severo na plateia. Para quem enxerga, por exemplo, a identificação com o palestrante é bem natural, pois ela tem contato visual com o mesmo.

Essa realidade se torna diferente, quando existem pessoas com deficiência visual na plateia. Para você gerar identificação, o ideal e descrever suas características, como cor dos cabelos, tom da pele, a blusa que está vestindo e etc.

Abaixo um exemplo de como você poderia fazer isso:

Me chamo Bruno Pulis, tenho 32 anos, meus cabelos são pretos, uso um óculos retangular pretos. Sou branco usa uma camisa do Star Wars. Estou sentado numa cadeira gamer e ao fundo existem diversos livros.

Um dos eventos que tive a oportunidade de participar, onde todos os palestrantes fizeram isso foi o TSPI e o DTAR Conference. Ambos idealizados pelo o Júlio de Lima.

Foi de encher os olhos vendo as pessoas se descrevendo. Tivemos diversos elogios por essa atitude, confesso que me emocionei quando li os comentários.

2. Slides acessíveis

Devemos ter um cuidado com os slides que produzimos. A ideia primoridal dos slides é comunicar algo que queremos, por isso nossa comunicação deve ser clara e concisa.

Uma boa prática é utilizar a tipografia dos slides no de 18pt ou maior, outro ponto importante é oferecer um bom contraste entre o texto e o fundo dos slides. Aconselho a utilizar o Accessible Colors para verificar o contraste.

Caso esteja utilizando o Power Point, ele possuí um recurso para verificar a acessibilidade dos slides, abuse e use dele.

Outro ponto de atenção seria descrever as imagens pelo o que elas representam no contexto do slide. O exemplo abaixo é da minha palestra com o Gabriel Santos no DTAR Conference

Poderíamos descrever o slide como:

Na imagem temos uma criança branca, loira com um blusa de mangas compridas montando várias peças de um quebra cabeças, fazendo alusão ao endpoints de uma API.

3. Tamanho da fonte e contraste nos snippets

Se sua apresentação tiver trechos de códigos é importante se atentar em dois conceitos: contraste e tamanho de fonte.

Além disso, apresente somente trechos relevantes do que você quer exemplificar, não precisa mostrar a classe inteira.

Dê preferência por usar as fontes no tamanho de 24pt e ao utilizar trechos de código você pode usar um serviço como o Carbon, ele ofereceu boas opções com um contraste bem interessante.

4. Utilize linguagem clara

Foto de Skylar Kang

A linguagem dos seus slides e sua deve ser a mais clara possível, se atente para alguns pontos como:

  • você deve ser claro no que quer comunicar;
  • ser sucinto;
  • evitar expressões idiomáticas sem prover explicação;
  • fale pausadamente, existem pessoas surdas que fazem leitura labial;
  • evite vícios de linguagem como: né, tipo, então.

Conclusão

Com essas dicas, podemos alcançar um número muito maior de pessoas e promover a acessibilidade por um outro aspecto.

Me conta quais dessas dicas você já conhecia e quais ainda não.

Categoria: Carreira Deixe um comentário

Conhecendo o Web Accessibility Initiative

Se você é desenvolvedor web, ter conhecimento sobre o Web Accessibility Initiative (WAI) é essencial. Neste artigo, vamos explorar sobre a iniciativa e os recursos que ela disponibiliza para tornar a web um local mais acesssível e inclusivo para todas as pessoas.

O que é o Web Accessibility Initiative?

O Web Accessibility Initiative (WAI) é uma iniciativa conjunta entre o W3C e diversas empresas e grupos de usuários que trabalham com foco em acessibilidade digital. O objetivo do WAI é a criação de recursos e recomendações para ajudar desenvolvedores web a criarem conteúdos e websites que contribuam para melhorar acessibilidade digital.

Em outras palavras, é o local ideal para iniciarmos nossa jornada quando o assunto é acessibilidade na web.

Apesar disso, poucos profissionais conhecem o WAI e todos os recursos que ele pode oferecer. Portanto, conhecer a iniciativa é um grande diferencial para nossa carreira como desenvolvedor.

Quais recursos podemos encontrar?

O site é repleto de recursos que irão te auxiliar sobre acesssibilidade, contando com as seguintes categorias:

Fundamentos de acessibilidade

Essa sessão é um guia introdutório sobre acessibilidade, nela podemos encontrar uma breve introdução, os objetivos da acessibilidade, os princípios e recomendações de cursos.

Em outras palavras, esse é o lugar para dar seus primeiros passos no assunto.

Planejamento e políticas de acessibilidade

O planjemanto e as políticas são recursos para a visão empresarial. Se você quer adequar sua empresa em acessibilidade aqui é um excelente ponto de partida.

Conta com uma visão ampla de como implementar e os passos que podem ser tomadas para isso. \

Design e Desenvolvimento

Às vezes, é bem difícil encontrar um conteúdo de qualidade sobre acessibilidade. Nessa sessão temos excelente recursos que irão ajudar a desenvolver soluções acessíveis.

Em contrapartida, essa sessão não se destina somente para programadores e designers. Existem recursos para redatores e copywriters também.

Além disso, conta com diversos tutoriais para melhorar a acessibilidade das páginas, como:

  • estrutura de uma página;
  • construção de menu;
  • imagens acessíveis;
  • tabelas acessíveis;
  • formulários acessíveis;
  • carousels acessíveis.

Testes e avaliação

Uma das etapas mais importantes na construção de um software e sua testabilidade. Essa sessão concentra seus esforços em oferecer ferramentas para essa tarefa.

Em suma, você encontrará diversos recursos desde um checklist básica a uma validação mais avançada.

Guias de ensino

A princípio, essa parte é dedicada para pessoas que querem ser porta vozes da causa da acessibilidade. Nela contém referências e guias para evangelizar as pessoas e empresas em relação a acessibilidade.

Acredito que, é um excelente ponto de partida para pessoas que querem produzir conteúdo.

Padrões e diretrizes

Na estrutura do WAI, penso que, essa é a parte mais importante de todo o conteúdo. Nela temos as diretrizes e normas de acessibilidade para tornar o conteúdo acessível.

Dessa forma, temos a documentação oficial e demais recursos para auxiliar nossa jornada.

Recursos extra

Além de todos esses recursos, a iniciativa conta com outras frentes bem interessantes, como, por exemplo:

Conclusão

O Web Accessibility Initiative (WAI) é uma fonte de recursos voltados para acessibilidade, ativo a mais de 20 anos que auxilia a melhorar a acessibilidade digital em todo o mundo.

Se você é desenvolvedor web, então você deve considerar aprender as ferramentas e recursos do WAI para ajudar a tornar o seu conteúdo mais acessível para todos.

Acesse o site da Web Accessibility Initiative e descubra mais sobre o que eles fazem para ajudar a melhorar a acessibilidade digital.

Referências

Categoria: Acessibilidade Deixe um comentário

Primeiros passos com Flutter

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.

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?

Categoria: Desenvolvimento acessível Deixe um comentário

Texto alternativo: o guia definitivo

Esta publicação contém tudo o que você precisa saber sobre texto alternativo! Quando usá-los e como desenhá-los perfeitamente. Por mim, Daniel, um desenvolvedor web com deficiência visual que usa um leitor de tela no meu dia-a-dia.

Texto postado originalmente em https://axesslab.com/alt-texts/ escrito por Daniel Göransson, adaptado e traduzido por Bruno Pulis.

Minhas experiência com imagens na web

Eu uso uma combinação de ampliação e leitores de tela ao navegar na web.

Como princípio básico, uso ampliação em telas maiores e leitores de tela em dispositivos menores.

Eu, como qualquer um, encontro várias imagens surfando na web. Se eu estiver usando um leitor de tela e depender de obter uma descrição da imagem — o texto alternativo — mostra essa informação.

Muitas vezes o texto alternativo não ajuda, sendo um desperdício do meu tempo porque não transmite qualquer significado.

Deixe-me ilustrar isso na página inicial do The Verge. Isto é o que exibe para pessoas com visão:

Listagem de notícias com imagem e título do artigo.

Abaixo é o que eu vejo. Eu substituí as imagens com o que meu leitor de tela lê:

Nomes de arquivos estranhos em balões de fala em vez de imagens na lista de notícias.

Não ajuda muito, não é?

Aqui estão algumas falhas comuns de texto alternativo que encontro:

  • “cropped_img32_900px.png” ou “1521591232.jpg” — o nome dos arquivos, provavelmente porque a imagem não tem o atributo alt definido.
  • “ — em todas as imagens do artigo, provavelmente para melhorar o ranking de busca (SEO).
  • “Fotografa: Emma Lee” — provavelmente porque o editor da redação não sabe para que serve um texto alternativo

Os textos alternativos nem sempre são tão ruins, mas geralmente há muito a melhorar. Então, se você é um iniciante ou quer levar o seu “jogo” para o próximo nível, aqui está o nosso guia final para textos alternativos!

O que é um texto alternativo

Um texto alternativo é uma descrição de uma imagem mostrada para pessoas que por alguma razão não conseguem ver a imagem. Entre outros, textos alternativos auxiliam:

  • pessoas com baixa visão ou cegas;
  • pessoa que desabilitaram imagem para economizar dados;
  • motores de busca (ex: Google, Bing).

O primeiro grupo — pessoas com baixa visão ou cegas — é o grupo que mais se beneficia com os textos alternativos. Eles utilizam algo chamado leitores de tela para navegar na web. Um leitor de tela transforma uma informação visual em fala ou braile. Para fazer isso com precisão, as imagens do seu site precisam ter textos alternativos.

Textos alternativos são super importantes! Tão importantes que o WCAG tem textos alternativos como sua primeira guideline a ser seguida:

Todo o conteúdo não textual que é apresentado ao usuário tem um texto alternativo com o propósito de ser equivalente.

– WCAG guideline 1.1.1

Como eu adiciono um texto alternativo?

No HTML, um texto alternativo é um atributo em um elemento de imagem:

<img src="cachorro.png" alt="Cachorro brincando no prado." />

A maioria dos gerenciadores de conteúdo, como WordPress, permite a você criar um texto alternativo quando subir a imagem:

Campo de descricao alternativa do WordPress

Esse campo geralmente é chamado de Texto Alternativo mas em algumas interfaces é chamado de “descrição da imagem” ou algo similar.

6 passos para criar textos alternativos fabulosos

1. Descreva a imagem

Pode parecer óbvio, mas um texto alternativo deve descrever uma imagem. Por exemplo:

“Grupo de pessoas em uma estação de trem.”
“Bebê feliz brincando numa caixa de areia.”
“Cinco pessoas na fila do supermercado.”

As coisas que não pertencem a um texto alternativo são:

  • O nome do fotógrafo. Isso é bem comum, mas não faz sentido.
  • Palavras chave para SEO. Não preencha o texto alternativo com palavras irrelevantes que você espera classificar no page rank do Google. Não é para isso que os textos alternativos servem e só irá confundir seus usuários.

2. Conteúdo do texto alternativo depende do seu contexto

Como você descreve a imagem depende do seu contexto. Deixe-me dar-lhe um exemplo:

Homem de meia idade parecendo tenso na chuva. Fotografia em tons de cinza com fundo fora de foco.

Se essa imagem fosse exibida em um artigo sobre fotografia, o texto alternativo poderia ser algo ao longo das linhas de:

“Close, fotografia em tons cinza de homem em ambiente externo, rosto em foco, fundo desfocado”.

Se a imagem estiver em um site sobre uma série de TV, um texto alternativo apropriado pode ser completamente diferente:

“Estrela do show, Adam Lee, parecendo tenso, lá fora na chuva”.

Então, escreva um texto alternativo que seja o mais significativo possível para o usuário no contexto em que eles estão.

3. Mantenha-o conciso

Lendo a sessão anterior, você pode estar pensando consigo: “Eu como um usuário vidente, posso perceber vários detalhes das imagens, como quem é, como é fotografado, tipo de jaqueta, idade aproximada do cara e muito mais.

Por que não escrever um texto alternativo detalhado e longo para que um usuário com deficiência visual obtenha tanta informação quanto eu?

Fico contente por ter perguntado!

Francamente, você pode obter as informações necessárias da imagem num piscar de olhos, e é isso que estamos tentando conseguir, também, para usuários com leitores de tela.

Dê as informações necessárias no texto alternativo, mas torne-o o mais curto e conciso possível.

Uma das poucas vezes que você deve escrever textos alternativos longos é quando você está descrevendo uma imagem contendo texto importante. Idealmente, você não deve ter imagens de texto, mas às vezes você precisa. Como em algumas capturas de tela ou fotos.

Mas a regra geral é mantê-lo conciso e evitar uma experiência prolixa.

4. Não diga isso é uma imagem

Não inicie um texto alternativo com “Imagem de”, “Foto de” ou similar. O leitor de tela adiciona isso por padrão. Então se você escrever “Imagem de” no texto alternativo, o leitor de tela dirá “Imagem Imagem de…” e bom, isso não é muito agradável.

Uma coisa que você pode fazer é encerrar o texto alternativo afirmando se é um tipo especial de imagem, como uma ilustração.

“Cão pulando através de um aro. Ilustração.”

5. Finalize com a pontuação

Sempre termine um texto alternativo com pontuação .

Isso fará com que os leitores de tela, utilizem pausas após a última palavra no texto alternativo, o que cria uma experiência de leitura mais agradável para o usuário.

6. Não utilize o atributo title

Muitas interfaces têm um campo para adicionar textos no title a imagens próximas de onde você pode adicionar um texto alternativo.

Ignore o texto no atributo title! Ninguém os usa — eles não trabalham em telas sensíveis ao toque e no desktop eles exigem que o usuário passe o cursor sobre a imagem por algum tempo, o que ninguém faz.

Além disso, adicionar um atributo title faz com que alguns leitores de tela leiam o title e o texto alternativo, que se torna redundante. Então, não adicione um atributo title.

Quando não usar um texto alternativo

Na maioria dos casos você deve usar um texto alternativo para imagens, mas existem algumas execeções onde você deve deixar o atributo alt em branco.

Nota importante: nunca remova o atributo alt, pois irá quebra o padrão html.

Mas você pode defini-lo como uma string vazia, ou seja: alt=””. Faça isso nos seguinte casos.

Imagens repetidas em feeds

Imagine que você está percorrendo seu feed do Twitter. Toda vez que quiser ler um novo tweet, primeiro você deve ouvir “Foto de perfil do usuário <nome de usuário da pessoa que postou>”. Na minha opinião, isso seria super irritante!

Outros exemplos de feeds são:

  • Uma lista de links para artigos. Como o da página Artigos;
  • Chat ou feed de mensagens;
  • Feeds de comentários.

Portanto, para uma experiência de usuário ideal, deixe o texto alternativo em branco para imagens que são usadas repetidamente em feeds.

Ícones em labels

Você sempre deve ter labels ao lado de ícones. Supondo que você faça, o ícone não deve ter um texto alternativo. Deixe-me explicar o porquê!

Vamos dar um exemplo de mídia social como exemplo:

Ícones do Facebook e twitter com rótulos de texto.

Se você escrevesse um texto alternativo para o ícone do Facebook, um leitor de tela diria algo ao longo da linha: “Facebook Facebook”. Muito redundante!

OK, isso não é tecnicamente sobre textos alternativos, mas ainda é importante: certifique-se de que tanto o ícone quanto o texto do link estão no mesmo atributo de link, para obter uma experiência fluída. Como isso:

<a href="...">
  <img src="fb_icon.png" alt="" />
  Facebook
</a>

Outro erro comum está nos botões de menus:

Ícone do menu com e sem rótulo.

Se o botão de menu não tiver um label visual — o que, de maneira direta, é realmente ruim para a experiência do usuário, ele precisa de um texto alternativo (ou outra maneira de descrever sua função no código, como aria-label).

Explique a função do ícone, como “Menu”. Não escreva “Três linhas horizontais” ou “Hambúrguer principal”, que infelizmente são exemplos reais em que eu tropecei.

Se o ícone do menu tiver um label, você deve deixar o texto alternativo em branco. Muitas vezes eu encontro botões de menu que são lidos como “Menu Menu”. Uma vez, encontrei um “menu menu hambúrguer”. Um pouco confuso, não diria?

Imagens em links

Geralmente, uma imagem com um link é acompanhada com um texto. Como o exemplo abaixo:

Imagem acima de um link em um site de notícias.

Nesse caso, a imagem e o link devem estar na mesma tag de link no HTML. Você pode simplesmente deixar o texto alternativo em branco. O importante para o usuário é ouvir o texto do link.

Um texto alternativo da imagem só distrai, adicionando informações que o usuário não achará necessário. A imagem provavelmente é encontrada na página que está vinculada, e então você pode dar uma boa explicação sobre ela no atributo alt.

Se você realmente, precisar ter uma imagem em um link sem um texto de acompanhamento, então o texto alternativo deve descrever o destino do link, e não a imagem.

Imagens decorativas

De preferência, imagens decorativas que não transmitam nenhum significado ao usuário devem ser colocadas como imagens de fundo em CSS. Provavelmente nem é preciso dizer, mas isso significa que você não precisa de textos alternativos nelas.

Eu classificaria a maioria das imagens em que você coloca texto como decorativas. Você não precisa de um texto alternativo nelas. Um exemplo é a imagem de fundo na página inicial do Netflix:

Página inicial do Netflix com texto no topo de uma imagem de fundo mostrando capas de filmes.

Casos especiais

Logos no banner

Logos no banner quase sempre ligam para a página inicial do site. As opiniões variam um pouco sobre o tema de textos alternativos para logotipos.

Alguns dizem que deve incluir o nome da empresa, o fato de ser um logotipo e o destino do link. Como tal:

“Axess Lab, logotipo, ir para página inicial.”

Na minha opinião, isso é um pouco detalhado. Muito barulho! Como meu leitor de tela já me diz que é uma imagem e um link, só sinto que preciso ouvir o nome da empresa. Pelo fato de ser uma imagem, suponho que seja um logotipo e, pelo fato de ser um link, suponho que siga as convenções e os links para a página de início.

SVG

Gráficos vetoriais escaláveis (SVG) é um formato de imagem que está se tornando cada vez mais popular na web. E eu amo eles! Eles mantêm sua nitidez enquanto fazem zoom e ocupam menos espaço para que os sites carregem mais rápido.

Existem dois caminhos principais para adicionar um SVG a uma página HTML.

  1. Dentro de um elemento img.
    Nesse caso, basta adicionar um texto alternativo como de costume:
<img src="dog.svg" alt="Cachorro brincando na grama." />

2. Usando uma tag svg. Se você usar esse método, não pode adicionar um atributo alt porque não há suporte para isso.

No entanto, você pode contornar isso adicionando dois atributos WAI-ARIA: role=“img” e aria-label = “texto alternativo”.

Na verdade, para o segundo caso, você deve ser capaz de adicionar seu alt-text como um elemento de título no svg, mas não há suporte suficiente para isso em navegadores e tecnologias assistivas no momento.

O computador não pode fazer isso por mim?

Embora a Machine Learning e a inteligência artificial melhorem rapidamente e possam descrever algumas imagens com bastante precisão, elas não são suficientemente boas para entender o contexto relevante no momento.

Além disso, as máquinas não são suficientemente boas para decidir o que é “conciso”, e muitas vezes descreverão demais ou muito pouco da imagem.

Facebook e Instagram, atualmente incluíram uma feature que descreve imagens automaticamente. Mas eu percebo que as descrições são muito genéricas. Uma imagem no meu feed agora é descrita como: “Gatos dentro de casa”. A foto atual exibe um gato caçando um rato de brinquedo.

Então me desculpe, você ainda deve escrever textos alternativos!

Obrigado por criar uma web melhor!

Estou feliz por você ter lido até aqui! Isso quer dizer que você se importa em tornar a web um lugar melhor para todos os usuários. Compartilhe o conhecimento e continue sendo incrível!

Categoria: Acessibilidade Tags: texto alternativo 6 Comentários

Afinal, o quê significa A11y?

Talvez você já tenha visto pessoas utilizando o termo a11y ou até mesmo a hashtag #a11y e não compreendeu a correlação dele com acessibilidade. Este termo refere-se a palavra inglesa accessibility.

Os dois caracteres do meio são o número um, não ” L” s minúsculos . Diga como “A-um-um-Y” ou “A-onze-Y”. Pode ser pronunciado também como, ally ou aliado em português.

Qual o sentido e significado de A11y?

O termo, representa a ideia de ser aliado das pessoas com deficiência, afim de, reivindicar, promover e celebrar o direito ao acesso a informação.

Quando utilizamos, dizemos que somos aliados de uma causa tão nobre e em contrapartida, referenciando a acessibilidade digital em si.

Sigla A11y exemplificada

Existem outros termos que utilizam a mesma lógica, por exemplo:

  • A internacionalização é representado pela sigla i18n;
  • A localização é representada pela sigla i10n;
  • World Wide Web, pode ser representado por W3

Voce conhecia esse termo?

Comente abaixo e se esse artigo te ajudou considere me apoiar.

Categoria: Acessibilidade Deixe um comentário