Page 7 of 8

Ignore a WCAG: teste com usuários


Se você está tentando tornar seu site ou aplicativo acessível, você provavelmente se atrapalhou nas Diretrizes de Acessibilidade para o Conteúdo da Web (WCAG). Mas não desperdice sua energia tentando compreendê-la. Sério, não!

Texto original: Skip the WCAG escrito por Hampus Sethfors.

Teste com pessoas reais

Eu sei que é uma declaração ousada. Mas o WCAG irá confundi-lo. E provavelmente assustá-lo. É realmente um documento longo e difícil de compreender.

O quê mais? Bem, peguei as WCAG, coloquei no Microsoft Word e baixei todo o documento. Voilà, aqui estão as 98 páginas:

98 páginas da documentação do WCAG 2.0

Além disso, existem as técnicas reais para o sucesso - os links azuis na segunda metade das páginas acima levam a essas técnicas. Provavelmente mais 1.000 páginas ou mais.

Então, em vez de mergulhar na WCAG, opte por permitir que as pessoas com deficiência. testem seu site ou app.

Eu fiz isso muito no meu papel como designer de interação em empresas com foco em acessibilidade. E não há dúvidas em minha mente: o teste com usuários com deficiência irá ajudá-lo a melhorar a acessibilidade muito mais do que ler qualquer checklist ou web standard.

Usuários “normais” não são bons o suficiente

Testar com usuários com deficiência também irá ajudá-lo a melhorar sua usabilidade muito mais do que testar com seus usuários “normais”. Por quê?

Bem, por exemplo, uma pessoa com deficiência cognitiva, como o autismo, reagirá às mesmas coisas que outro usuário. Mas eles vão mais longe. Eles são muito melhores em detectar inconsistências no design, problemas com navegação e conteúdo desnecessário.

Coisas que outros usuários vão achar irritantes, para eles podem auxiliar. Da mesma forma, uma pessoa com baixa visão reagirá ao pequeno texto ou ao baixo contraste, o que tornará difícil a leitura de qualquer pessoa no sol com um smartphone.

Se você quiser testar com pessoas com deficiência, criei uma lista de dicas para você ir em outro artigo:

Não me mate…

E, finalmente, volto para as pessoas incríveis da comunidade de acessibilidade: por favor, não me mate por sugerir que as pessoas ignorem as WCAG. O fato é que eu amo as WCAG! Provavelmente é um dos documentos mais importantes em torno de todas as categorias.

Mas deve ser usado por pessoas que amadureceram ainda mais em sua carreira de acessibilidade ou mentalidade.

Primeiro, você deve testemunhar pessoas em ação, caso contrário, você não entenderá como usar as WCAG, por que está por aí e são pontos fortes e limitações. Espero que você entenda o que quero dizer!

Review: Global Accessibility Awarenss Day 17


Introdução

Fala pessoal, nesse post vou contar um pouco de como foi participar no Global Acessibility Awarenss da edição de Belo Horizonte promovido pelo IXDABH

Objetivos do evento

Divulgar/Disseminar/Discutir/Pensar/Aprender práticas ou experiências com metodologias usadas no mercado ou desenvolvidas por conta própria, que promovam a acessibilidade e inclusão digital (web, softwares, celulares, etc) e pessoas com necessidades diferentes.

O Global Acessibility Awarness Day ou #GAAD2017 é um evento mundial na data de 18 de marco, sobre conscientização e promoção da Acessibilidade no meio digital.

História do evento

A ideia do GAAD começou com um post em um blog escrito pelo Joe Devonum desenvolvedor de web de Los Angeles, Jennison Asuncion, um profissional de acessibilidade de Toronto, descobriu o post do blog do Joe por acidente, através do Twitter. Depois de ler o post, Jennison contactou Joe imediatamente e eles uniram as forças, impulsionando a respeitada e extensa network de ambos para realizar o evento

Eventos Online

Países participantes

  • Belo Horizonte, Brasil
  • Itália
  • Estados Unidos
  • Índia
  • Suíça (17/05)
  • Alemanha
  • Austrália
  • Tchecoslováquia
  • África do Sul
  • Dinamarca
  • Holanda;
  • Canadá
  • Japão
  • Inglaterra
  • Suécia.

Acesse os locais atualizados do GAAD17

O convite

Eu entrei no grupo de IXDABH e vi sobre o evento é logo marquei minha presença. Uns dias depois, o Alan Vasconcelos me enviou um e-mail convidando para ministrar um Dojo de acessibilidade, obviamente aceitei de prontidão.

Apresentações

O Alan iniciou se apresentando e colocando em xeque o Design Universal excelente tema para se abordar nesse evento, visto que um dos conceitos mais fortes é perda do público alvo.

Logo após, fiz uma breve apresentação, comentando sobre alguns dados estatísticos da população com algum tipo de deficiência no Brasil e sobre leis federais para adequar os sites na questão da Acessibilidade.

O Dojo

Criamos duas personas para contar suas estórias sobre a dificuldade de navegação na web, possuem contextos diferente e necessidades diferentes.
O dojo se dividiu em duas etapas: análise do problema e resolução dos problemas encontrados.

Provocamos alguns erros na marcação do HTML, como por exemplo:

  • retirada do atributo Lang
  • ausência de atributo for nos formulários
  • hierarquia de títulos de forma errônea.

A seguir, vou compartilhar as estória das personas que criamos para aplicar o teste.

Estória da Beatriz

Beatriz adora ficar de bobeira na internet. Aos 36 anos de idade, às vezes ela passa horas no Facebook, ou mesmo, lendo textões no Medium. Ela também gosta de saber o que está acontecendo com o mundo, por meio dos grandes portais de notícias como El Paìs e BBC Brasil. Ou seja, Beatriz é uma internauta típica, exceto por um detalhe: Beatriz é cega.

Sendo uma internauta experiente (sim, ela já teve um email do BOL, usou internet discada e pesquisou no Cadê), Beatriz tem uma grande desenvoltura com as tecnologias assistivas como leitores de tela, teclas de atalho e até displays em Braile. Mas isso não quer dizer que sua vida na Web seja fácil. A grande parte dos sites de hoje são pesados e cheios de barreiras de acessibilidade.

Minha mão chega a doer de tanto apertar o Tab. Pra quê tanto menu, gente? Eu só quero chegar ao texto! Isso sem falar quando o texto não está estruturado corretamente:

Outro dia, eu tava com uma dúvida sobre imposto de renda e achei um site do governo com todas as instruções que eu queria. Mas aí, fui procurar o título do texto, porém só encontrava o nome do site.

Estória do Roberto

Roberto é um advogado de 61 anos que usa muito a internet para consultar leis, jurisprudências e demais casos que o auxiliam no seu trabalho. Mas, às vezes, Roberto tem muita dificuldade em clicar nos links do portal jurídico.

Fui fazer uma busca avançada e não conseguia acertar aquela “bolinha” para marcar a opção: “Buscar apenas os Decretos-lei”. Será que não dava pra ser maior?

Roberto também não fica muito satisfeito com o contraste:

Poxa… um texto cinza, em cima de uma caixa cinza-claro, não ficou legal… E que letrinha miúda é essa, gente?

Desenvolvimento

Trabalhamos em cima dessas duas estórias e analisamos e propusemos as soluções corretas, no meio do Dojo, os irmãos Fot que estavam palestrando sobre inclusividade no mercado de trabalho, desceram e participaram do Dojo conosco, um detalhe ambos são cegos, o que foi muito enriquecedor para o momento.
Eles testaram o site juntamente conosco mostrando as dificuldades que encontram no dia a dia para navegar em sites da web.

Conclusão

Para mim foi uma experiência única e enriquecedora, pois percebi que é possível tornar a web mais inclusiva e acessível a todos os públicos.

3 ferramentas para validar acessibilidade web


layout: post
title: “3 ferramentas para avaliar a acessibilidade web”
date: 2017-10-02
author: pulis
image: assets/images/posts/tools.jpg
image_description: “Um notebook ao centro da mesa com diversas ferramentas ao seu redor, representando sua utilidade”
categories: Acessibilidade
tags:

  • dicas
  • tools
  • a11y
    excerpt: “”

Os avaliadores de acessibilidade, tem como função, testar de forma automática a estrutura do seu código para checar se atende as conformidades dos webstandards propostos pela W3C. Estes validadores não testam a semântica, isto é, testam a síntaxe do seu código.

Vou mostrar três validadores que utilizo com maior frequencia, num próximo post eu ensino a como corrigir os erros apontados

WAVE

Foi desenvolvido pela WebAIM em 2001, com o intuito de auxiliar nos testes de acessibilidade. Este vídeo demonstra o funcionamento dele e o tipo de relatório que ele gera.

Access Monitor

Desenvolvido em 2009 pela Fundação para a Ciência e a Tecnologia (FCP), atualmente é o que eu mais tenho utilizado, ele gera um relatório bastante simples e com tips para corrigir os bug’s. Permite testar com as duas versões da WCAG a 1.0 e 2.0, recomendo usar a mais atual 2.0 para realizar os testes. Além de dar uma pontuação para o site de 0 a 10 no quesito de acessibilidade.

Tota11y

O Tota11y é para mim um dos melhores se você quer algo rápido e não muito técnico. Ele é um bookmarklet para ser salvo na sua barra de favoritos.

Ele tem as seguintes opções para verificação:

  • Heading’s: permite visualizar a estrutura dos heading’s da página demarcando as areas de forma visual;
  • Contraste: exibe se os elementos possuem contraste e se estão com baixo contraste e ainda dá uma sugestão de um bom contraste;
  • Label’s: exibe as label’s dos formulários e acusa aonde não existe as mesmas;
  • Images alt text: exibe o alt das imagens;
  • Landmark’s: mostra as landmark’s da WAI-ARIA.

Meu conselho:

testem e testem essa ferramentas e deixe suas experiências nos comentários.

Teologia e tecnologia: o que elas tem em incomum?



image: assets/images/posts/talk.webp
image_description: “Uma bíblia com foco e duas velas próximas e um corredor ao fundo da

Antes de mais nada, me vejo no dever de deixar claro que este post não é uma forma de doutrinar ninguém a fé cristã ou qualquer outra. Apenas estou fazendo um paralelo entre o estudo teológico e seus desdobramentos e o que isso contribuiu para mim.


Introdução

Há poucos dias decidi retornar ao Twitter. Recentemente tinha deletado minha conta por um certo esgotamento de redes sociais. Por esse motivo, fiquei por fora de algumas novidades e vi a necessidade de retornar.

Uma das coisas que senti mais falta foi a interação da comunidade de desenvolvedores no Twitter que é algo lindo de se ver.

Retornando, me deparei com a iniciativa help4Papers que tem como objetivo auxiliar desenvolvedores que querem começar a palestrar, achei fantástico a disponibilidade e boa vontade dos fundadores em ajudar as pessoas. Eles têm algumas dicas bem legais e vale a pena segui-los.

Teologia?

Talvez você estranhou o título desse post, mas irei explicar. Para quem me conhece, sabe que sou apaixonado por duas coisas: teologia e frontend.

Minha história com teologia vem desde a adolescência, sempre fui uma pessoa curiosa que procurava conhecer os princípios e fundamentos de como o mundo funciona. Aprendi um pouco de grego e hebraico e fui tomando gosto pela coisa.

Na faculdade de TI me interessei mais pelo o frontend, pelo fato de lidar com problemas reais que os usuários passam com interfaces. O fascínio pela experiência do usuário e as possibilidades que o CSS oferecia me encantou na época e, mais tarde, me apaixonei por acessibilidade web.

Unindo paixões

Na teologia não estudamos somente a Bíblia, temos diversas matérias como: sociologia, psicologia, antropologia e filosofia. Uma das matérias que me ajudou foi a Homilética, que por definição é:

É a arte de pregar, ou seja, utilizar os princípios da retórica com a finalidade específica de falar sobre o conteúdo da bíblia sagrada cristã.
Este termo acabou por originar a palavra homilia, que quer dizer “discurso com a finalidade de agradar”[1].
Ela procura ajudar o pregador a comunicar a mensagem de forma clara e inteligível. No mundo do desenvolvimento, conheço diversas pessoas que tecnicamente são excelentes, mas como comunicadores ainda não são bons. Necessitamos de nos comunicar bem, afinal, nem só de código viverá o desenvolvedor, mas de uma comunicação efetiva e clara.

Vivemos em uma era onde a comunicação é essencial e não investir nisso seria um pecado capital.

Os princípios da homilética auxiliam na comunicação da mensagem. Já perdi as contas de quantas vezes o palestrante era um bom técnico e um péssimo comunicador. Fica aquela sensação de sair da palestra sem entender nada do que foi dito. Certamente algum ruído de comunicação ou despreparo ocorreram para que isso ocorresse.

Minha experiência

Me arrisquei como palestrante algumas vezes. Em 2017 palestrei em dois eventos: DevFest Nordeste e o DevFest Belo Horizonte (agradecimentos a: Jader Gomes, Marcus Silva, Yan Magalhães e Thiago Almeida).

Bruno Pulis segurando um microfone e apoiando um púlpito transparente, vestindo uma blusa preta e calça bonina. Ao fundo a platéia sentanda

Como eu tinha uma prévia experiência em pregar na igreja, encarar o público não foi o maior desafio, mas sim o preparo técnico das palestras. O que sempre vamos ter são o frio na barriga e a expectativa de como o público irá reagir e muito dessa expectativa começa através de você.

Bruno Pulis segurando um microfone, vestindo de blusa xadrez orando para as pessoas que estão ems sua frente

Você é o comunicador que irá transmitir uma mensagem e sua desenvoltura para isso pode te levar ao sucesso ou ao fracasso. O conteúdo pode ser excelente, porém se a forma de comunicar for ruim, todo o trabalho é levado água abaixo.

Me recordo da primeira vez que fui chamado pra falar uma mensagem pra igreja. A mensagem durou em torno de 15 minutos — tinha 45 minutos para gastar. Basicamente nessa ocasião, falei igual um foguete e terminei logo (rs).

Dicas

Tenha uma postura corporal positiva

A postura do palestrante no palco é de extrema importância, a linguagem corporal fala muito mais do que a verbal. Nossa postura é avaliada enquanto falamos, por isso é importante ter uma postura confortável que gere uma sensação de relaxamento em você e na plateia. Ficar travado, encurvado, com os ombros caídos, dá uma sensação ao ouvinte que o assunto é cansativo e enfadonho, ou até que você não está preparado, e isso não é o que queremos…

Expressões faciais

Evite expressões faciais muito fortes como: rosto franzido, olhar severo e um semblante fechado, procure sorrir sempre que possível e envolva a plateia em uma estória. A técnica de storytelling ajuda demais nesse sentido. Também utilizar GIF’s em momentos adequados ajuda a quebrar o gelo.

Outra dica: não fixe o olhar em uma única pessoa, olhe na altura dos olhos das pessoas e mire em um ponto distante. Assim, evitamos de sermos invasivos ou de ficarmos marcando as pessoas.

Falhas na emissão da voz

Existem certos padrões de vozes que se não tomarmos cuidado atrapalham na hora de comunicar a mensagem, dentre eles podemos citar:

  • Voz estridente;
  • Voz fanhosa;
  • Voz monótona;

Caso, você tenha algum tipo de voz citado acima não se desespere! Com treinamento e modulação da sua voz, você aumentará consideravelmente o alcance da mensagem.

Uma regra de ouro é: procure falar pausadamente, sem querer correr com o conteúdo. Seja paciente e fique tranquilo.

O vídeo abaixo mostra sobre a modulação da voz de maneira fenomenal:

Como falar de forma que as pessoas queiram ouvir

Se o tom de sua voz é baixo e tranquilo, procure aumentar o tom dando ênfase em partes importantes do seu conteúdo.

Ruídos na comunicação

No nosso dia a dia, utilizamos alguns ruídos de comunicação como: forças de expressão, clichês, gírias regionais e etc. E isso pode influenciar positivamente ou negativamente na sua apresentação.

Procure entender seu público, por exemplo, eu palestrei em Salvador (❤) tive o cuidado de perguntar aos organizadores se deveria evitar certas expressões, afinal o Brasil possui diversos dialetos regionais. Um exemplo, é o famoso “bolacha ou biscoito”.

Na minha talk como forma de descontração (mas com prevenção) também usei uma expressão que os baianos usam com frequência: o LÁ ELE (se você tem um amigo baiano pergunte a ele o significado).

Consegui fazer a plateia ficar à vontade e pude seguir em frente. Em um dos slides, usei gírias regionais que eles caíram em gargalhadas. No final, alguns elogiaram pelo o esforço de procurar essa “conexão”.

Devemos encontrar essa “conexão” ou contexto com o ouvinte e, assim, conseguimos prender a atenção deles de forma efetiva. O conteúdo fica muito mais rico quando criamos essa ponte entre o palestrante e o público.

Dicas finais

  • Melhore o som da sua voz: procure pronunciar as palavras corretamente, evitando falar com a boca fechada, falando em um tom adequado, alterando a potência de vez em quando para enfatizar coisas importantes;
  • Fale com os olhos: antes de falar qualquer palavra, cumprimente silenciosamente as pessoas com “um sorriso nos olhos”, procurando identificar cada pessoa, em lances rápidos de olhar.
  • olhe para as pessoas, comunique-se com elas através de expressões, transmita segurança e sinta o que elas estão sentindo enquanto ouvem suas palavras.
  • Seja zueiro, conte piadas, abuse dos gifs: não aborde de cara o assunto, use storytelling, descreva uma experiência, relate seu trajeto até o local. Aborde uma situação alegre. Lembre-se: até os grandes pregadores podem temer durante uma mensagem. O temor e tremor é natural. Encare isto com tranquilidade. É uma questão de tempo.
  • Atualize-se: estude sobre o assunto, invista tempo pesquisando, lendo, estudando, testando e codando principalmente. O hábito da leitura é primordial para ser um palestrante que sabe comunicar. Quem lê mais, sabe mais.
  • faça com amor: compartilhar conhecimento é uma das melhores coisas da nossa área, ver o crescimento das pessoas por algo que ensinamos não há dinheiro que pague. E também se divirta!
Várias pessoas em posições diferente fazendo caretas

Conclusão

Através de estudo e dedicação você vai conseguir palestrar de maneira agradável e segura.
Lembre-se, é um processo de contínuo aprendizado.
Usando essas dicas você conseguirá alcançar resultados interessante.
Tem mais alguma dica sobre o assunto? Compartilhe comigo.

Grande abraço.

Extras

Cursos no Udemy sobre oratória:

Bibliografia

SIGNIFICADOS. Significado de Homilética. Disponível em: https://www.significados.com.br/homiletica/ Acesso em: 16 de junho de 2018.

Criando botões acessíveis

Introdução

Botões e links são uma das estruturas mais básicas de páginas web. Uma de suas funções é a conversão de leads. que contribuem para o tráfego na web.

Porém, a maioria deles estão marcados incorretamente. Neste artigo, vou mostrar os pontos positivos e negativos e como realizar as correções necessárias.

Vamos lá?

Contexto

Em uma pesquisa rápida no Google, você pode encontrar um número muito grande de resultados com as frases: clique aqui, saiba mais, leia mais.

O problema

Os links “clique aqui”, “saiba mais” e etc, possuem algumas barreiras de acessibilidade como:

  • não informam o contexto da ação;
  • não exibem a finalidade clara para o link.

Um exemplo simples dessa situação seria:

<div class=”card-action”>
  <a href=”#”>Leia mais</a>
</div>

Pessoas que utilizam uma tecnologia assistiva, como um leitor de telas ficaria perdida pois os botões de “Leia mais” não tem em seu contexto ou nenhuma informação.

Geralmente usuários de leitores de tela, podem navegar em uma página com os seguintes atalhos:

  • através de cabeçalhos (h1,h2..h6);
  • através de links;
  • através da tecla TAB.

Ao chegar em um link de “Leia mais” o usuário não saberá porque ele deve clicar, e qual a finalidade daquele link.

Possível solução

Uma possível solução seria incluir uma tag span e colocar uma classe para ocultar a informação, sendo assim, ela ficará disponível somente para quem não pode enxergar.

O exemplo abaixo mostra de forma clara como fazer.

Marcação HTML

<div class="”card-action”">
  <a href="”#”" role="button">
    Leia mais
    <span class="”sr-only”">sobre Galo na libertadores</span>
  </a>
</div>

<button>
  Leia mais
  <span class="sr-only">sobre o Galo na libertadores</span>
</button>

CSS

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Conclusão

Construir botões acessíveis é de suma importância para todas as pessoas terem acesso as informações e como vimos é uma técnica muito simples.

A partir de hoje superamos mais uma barreira e poderemos fazer botões mais acessíveis para todos.

Gostou? Me conta se você conhecia essa técnica.

Como buscar tags do wordpress sem link


Esse artigo visa mostrar de forma clara como é possível retornar o nome das tags do WordPress sem o link padrão. É uma técnica relativamente simples uma consulta na documentação e resolvemos nosso problema, vamos lá!

O cenário

Estou desenvolvendo um site com meu amigo Jhonny Costa, onde temos uma determinada página que irá retornar a tag de um determinado post.

Após algumas conversas, entramos em um impasse onde não exisitiria a necessidade das tags virem com seus respectivos links.

Então eu recorri a documentação do WordPress para consultar a função que gera as tags a the_tags(), a documentação mostra que ela recebe três paramêtros por padrão: $before, $sep, $after.

$before

Paramêtro do tipo String, onde retornará um texto antes das tags serem exibidas. Seu padrão é a palavra “Tags”.

$sep

Paramêtro do tipo String, onde retornará um texto ou caractere que serão exibidos entre cada tag link, O padrão dele é (,) entre cada tag.

$after

Paramêtro do tipo String, onde retornará um texto após a última tag. Seu padrão não é exibir nada.

A função the_tags() não possui retorno.

Exemplo

Imagine o caso, o cliente me pediu que o texto que deve ser mostrado seria “Tags Sociais” e separados pelo sinal maior (>):

the_tags(‘Tags Sociais: ‘,’ > ‘);

Para exibir somente as tags sem o link devemos escrever o seguinte código:

foreach(( get_the_tags() ) as $tag):
  echo $tag->name;
endforeach;

Você deve colocar esse trecho de código no lugar apropriado do seu tema para retornar as tags sem os seus links.

Conclusão

Com esse trecho de código resolvi meu problema para retornar as tags, espero que possa ser útil para alguém que tenha a mesma dúvida ou similar.

Caso tenha alguma dúvida escreva um comentário.

« Older posts Newer posts »

© 2021 Bruno Pulis

Theme by Anders NorenUp ↑