Free for dev

Projeto pessoal do Addy Osmani com o objetivo de armazenar referências gratuitas para desenvolvedores.

Dei uma olhada e tem excelentes alternativas open-source e gratuitas.

Link do projeto: free-for.dev

Bookmarked

Como criar texto alternativo longo

Esse final de semana estava atualizando o site do meu casamento e me deparei com um problema. 

Minha noiva fez os textos alternativos longos e completos para a página de Galeria de fotos do nosso pré-wedding. 

Como utilizar esses textos alternativos de forma que pessoas não visuais possam ter a mesma experiência? 

Vem comigo nesse artigo, que vou te explicar como resolver esse problema de maneira prática. 

Entendendo o texto alternativo

A WCAG possui um critério de sucesso responsável por validar alternativas de texto. O critério é o 1.1.1 que nos informa: 

Todo conteúdo não textual que é apresentado ao usuário tem uma alternativa de texto que serve ao propósito equivalente

Existem algumas exceções, entretanto não é o objetivo esmiuçar elas. Esse critério tem a responsabilidade de dar uma experiência igualitária para as pessoas não-visuais ou de baixa visão.

Escrevi um guia completo sobre texto alternativo que pode ser muito útil para compreender todo o contexto. 

Meu cenário

Primeiramente tentei incluir os textos alternativos longos da forma que minha noiva fez, mas percebi que essa informação poderia ficar muito confusa. 

Dessa forma, optei por pesquisar outras soluções, graças a Deus a WCAG tem recursos muito interessantes que podem nos auxiliar para essa tarefa. 

Além dos critérios de sucesso, ela conta com o apoio das técnicas de sucesso. Basicamente são técnicas que orientam para que o conteúdo seja feito de forma acessível. 

No documento auxiliar Entendendo o Critério de Sucesso 1.1.1 (em inglês), existe uma sessão chamada técnicas, vamos basear nossos esforços nela. 

Entendendo a técnica de suficientes

O critério de sucesso 1.1.1 fornece diversas técnicas suficientes, atualmente existem 6 situações para seu uso, por exemplo:

  • Situação A: Se uma breve descrição pode servir ao mesmo propósito e apresentar o mesmo informações como o conteúdo não textual;
  • Situação B: Se uma breve descrição não puder servir o mesmo propósito e apresentar as mesmas informações que o conteúdo não textual (por exemplo, um gráfico ou diagrama);
  • Situação C: Se o conteúdo não textual for um controle ou aceitar a entrada do usuário;
  • Situação D: conteúdo não textual for mídia baseada em tempo (incluindo somente vídeo ao vivo e somente áudio ao vivo); um teste ou exercício que seria inválido se apresentado em texto; ou Destina-se principalmente a criar uma experiência sensorial específica;
  • Situação E: Se o conteúdo não textual for um CAPTCHA
  • Situação F: o conteúdo não textual deve ser ignorado pela tecnologia assistiva.

No meu caso, a situação que mais se encaixa era a Situação B: se uma breve descrição não puder servir o propósito e apresentar as mesmas informações que o conteúdo não textual. 

Analisando essa situação, encontramos a técnica alternativa para texto longo:

Pra minha solução vou precisar recorrer a um atributo ARIA chamado aria-describedby. O objetivo de usar essa técnica é garantir as descrições de imagens quando um texto alternativo curto não transmite adequadamente a função ou as informações fornecidas.

Basicamente o que iremos fazer é associar um texto descritivo a uma sessão com o auxilio do atributo ID. Isso é semelhante quando precisamos rotular um <label> com um <input>.

Compreendendo o aria-describedby

O atributo aria-describedby é um atributo global que identifica um elemento ou (elementos) que descrevam o elemento no qual o atributo é definido. 

Parece ser algo bem complexo não é mesmo? Vai por mim, é bem mais tranquilo do que parece. 

Descrição do aria-describedby

O atributo aria-describedby lista os id’s dos elementos que descrevem o objeto. Ele é usado para estabelecer uma relação entre widgets ou grupos e o texto que os descrevem.

Também podemos destacar uma semelhança com o atributo aria-labelledby, porém, isso fica para um próximo artigo.

Dessa forma, pensei que poderia usar uma descrição sucinta no atributo ALT e utilizar do aria-describedby para dar um suporte mais detalhado. 

Minha solução

Ao invés de colocar um texto alternativo extremamente grande no atributo ALT eu irei fazer da seguinte forma: 

<picture> 
   <source srcset="./images/couple.webp" type="image/webp"    <source srcset="./images/couple.jpg" type="image/jpeg">    <img src="/images/couple.jpg" alt="Bruno e Mari fazendo careta para a câmera." aria-describedby=”desc1”>
</picture>
<div class="visually-hidden id="desc1">
<p>Bruno é um homem branco, olhos escuros, usa gorro preto de lã e óculos de grau com armação preta arredondada e barba grande escura, está de casaco de zíper cinza escuro. Mariana é uma mulher branca, cabelos castanho claro longos, está com os olhos fechados apertados, está usando casaco preto e gola de lã cinza. Os dois estão com os rostos colados fazendo bico pra foto.</p> 
</div> 

Explicando o código:

Da linha 1 a 5 defino as imagens que serão carregadas, usando a tag <picture> o navegador irá decidir qual imagem será carregada, note que uso dois formatos: webp (um formato mais leve e novo) e o nosso velho conhecido jpg. 

Dessa forma, permito o browser decidir qual recurso ele irá carregar. 

Na linha 4, utilizo o atributo aria-describedby e passo o valor “desc1” para ele. 

Na linha 7 defino uma <div> que irá servir como um container para as informações ela possuí uma classe visually-hidden que permite que essa informação seja lida somente pelo leitor de telas e um id referenciando o mesmo valor que define no aria-describedby. 

Na linha 8, coloco a descrição longa que desejo. 

Leitura com o NVDA

O NVDA irá ler as duas informações, primeiramente o ALT curto e complementar com a descrição longa. 

Conclusão 

O uso do aria-describedby é uma técnica extremamente simples, porém, muito eficaz para esses cenários com um texto alternativo longo. 

Sempre é bom lembrar que usar atributos ARIA deve ser com muita cautela, pois, com grandes poderes vem grandes responsabilidades. 

Mudanças de layout

Há tempos não estou satisfeito com a aparência visual do meu site. Já pensei e pesquisei diversas referências mas sempre empacava na mesma coisa perfeccionismo.

O perfeccionismo em certos aspectos podem ajudar, mas na grande parte do tempo atrapalha muito.

Minha ideia nesse layout é simples, ser acessível e prática sua navegação.

Com isso tenho algumas coisas em mente:

  • Reduzir números de dependências;
  • Usar pouco ou nada de Javascript;
  • Dar uma experiência minimalista aos usuários.

Aos poucos essa nova cara vai tomando forma e espero que você acompanhe e curta essa nova fase da minha jornada.

 

11 Perguntas frequentes sobre acessibilidade

Acessibilidade é um tema em alta, por isso, traduzi as perguntas frequentes sobre acessibilidade.

Ele vai te ajudar em questionamentos básicos e clarear sua trajetória nesse universo de possibilidades.

Esse artigo é uma tradução livre com permissão do autor. O artigo original encontra-se em Answers to common (web) accessibility questions.

Inspirado nas respostas de Chris Coyier às perguntas comuns sobre design (web), que por sua vez foram inspiradas no post anterior de Dan Mall, aqui está uma lista de perguntas comuns sobre acessibilidade.

Sim.

Usamos links quando queremos levar o usuário a algum lugar, botões quando queremos que ele realize alguma ação.

Também usamos botões se a ação for enviar um formulário (mesmo se o usuário for redirecionado a algum lugar depois). Tentando evitar nuances neste post, mas aqui estão algumas nuances sobre botões e links.

2. Temos usuários com deficiência?

Sim.

É improvável que você conheça cada um de seus usuários e exatamente como eles usam a web. É ainda mais improvável que o grupo e as pessoas dentro dele permaneçam exatamente da mesma forma para sempre.

3. O que é uma auditoria de conformidade de acessibilidade?

Alguém verificará se o seu site atende a cada um dos 56 Critérios de Sucesso no WCAG (contando a versão 2.2, Níveis A e AA) ou não.

Escrevi um artigo falando sobre os novos critérios e seu uso.

Idealmente, eles também explicam quais são os problemas e como resolvê-los (para que você possa fazer isso). Isso também é chamado de avaliação de conformidade.

4. Quem deve “fazer” acessibilidade em nosso time?

Todos. Copywriters, desenvolvedores, designers e gerentes de produtos têm tarefas de acessibilidade a fazer.

5. Quais são alguns testes rápidos que posso fazer?

Use sua interface com as teclas Tab/ Shift Tab no teclado (verifique as configurações se estiver usando um Mac), você consegue acessar tudo sem um mouse? A ordem faz sentido?

Clique em rótulos para campos de formulário, eles devem focar no campo ao qual pertencem.

Verifique se seus vídeos e áudios (podcasts?) têm legendas/transcrições.

6. A acessibilidade já foi implementada?

Não. É um processo contínuo, mesmo que sua auditoria diga que você atende a todos os Critérios de Sucesso hoje, é comum deixar de atendê-los depois.

Os sites mudam. Você deve monitorar continuamente a acessibilidade, assim como faz com segurança e privacidade.

7. Temos obrigações legais para tornar nossos produtos acessíveis?

Muito provavelmente. Mesmo se você não for um órgão governamental (por exemplo, consulte a Lei de Acessibilidade Européia).

Existem políticas e leis em todo o mundo.

No Brasil, temos a Lei Brasileira de Inclusão.

8. É tudo culpa do meu site?

Não, alguns problemas podem ser resolvidos pelos navegadores, tecnologias assistivas e/ou ferramentas de autoria, como por exemplo, um CMS.

9. WCAG 3.0 será lançado em breve, certo?

Pouco provável. Os objetivos são bons e eu os apoio há muito tempo (ainda apoio), mas levará muitos anos para que isso se torne realidade.

A WCAG 3.0 ainda está em uma fase muito inicial. O algoritmo de cores que está sendo considerado é interessante para tentar atender desde já, pois atende melhor às necessidades do usuário do que o algoritmo atual do WCAG.

10. A “IA” melhorará a acessibilidade?

A aprendizagem de máquina ou Machine Learning, pode ser uma ótima ferramenta para automatizar parte do processo de legendagem em muitos idiomas, e várias outras coisas.

Mas é improvável que as Large Language Models ou LLMs, frequentemente chamadas de “IA”, gerem código acessível.

Para treinar uma LLM assim, seria necessário um conjunto enorme de código muito acessível (o que não existe).

A construção de componentes e a semântica de acessibilidade também exigem intencionalidade, que esses sistemas especificamente não são bons em fazer.

11. O score do Axe ou Page Insights é tudo o que importa para o meu site? Ou o resultado da auditoria WCAG?

Não. Qualquer sistema que pontue seu site e retorne um número (incluindo auditorias WCAG) não descreve completamente sua situação de acessibilidade.

A acessibilidade é, em última análise, sobre pessoas e se elas podem usar seu site. Trata-se de reconhecer e remover barreiras.

As métricas podem ajudar de várias maneiras, mas não são o objetivo final. E o mais facilmente mensurável nem sempre é o mais impactante.

Postagens de acessibilidade mais detalhadas podem ser encontradas em outros lugares no blog do Hidde.

O método Bullet Journal

Se você está procurando uma maneira criativa e simples de organizar sua rotina, o método bullet journal é ideal para você!

Neste post vamos abordar uma resenha simples sobre o método para aqueles que desejam se organizar de forma prática.

Descubra como organizar sua vida com o método bullet journal, de uma forma divertida e criativa. Aprenda como criar, usar e aproveitar as vantagens desse método para se tornar mais produtivo!

O livro em 3 frases

  • Não se preocupe com a forma, mas sim com funcionalidade do seu Bullet Journal;
  • Limite seu poder decisão, senão será escravo da fadiga da decisão;
  • Tenha um registro de sua vida, ele pode salvar sua vida.

Impressões

Sua leitura é prazerosa, Carroll tem um cuidado ímpar de sintetizar o conteúdo e falar numa linguagem simples e de fácil compreensão. Dessa forma, o livro é acessível para um público bem extenso.

O livro é dividido basicamente em duas partes: teoria e prática. Os exemplos são didáticos, aconselho a não querer “colocar a mão na massa” assim que ler a parte prática. Termine a leitura para depois fazer seu Journal.

Um ponto de atenção importante, evite procurar sobre “Bullet Journal” no Youtube, você irá encontrar diversos vídeos, desde os minimalistas até os artísticos.

Seu Bullet Journal não precisa ser lindo, ele deve ser funcional e cumprir com o propósito.

Além disso, existe uma comunidade que pode ajudo, caso haja dúvidas.

Como eu descobri esse livro?

Eu já conhecia o livro e vi o episódio do Ryder com o Tiago Forte no Youtube. Achei fascinante como Carroll organiza suas notas e pensamentos através de um simples caderno e transporta as coisas mais importantes para o digital. Desde então estava namorando esse livro a distância.

Você pode conferir na íntegra o vídeo.

https://youtu.be/DZVaVav8lGo?si=l38hCxgGsr8lqISO

Em Novembro de 2022, viajei para São Paulo para a festa de final de ano da firma e me hospedei na casa da minha amiga Gabriela Eufrásia.

Vasculhando a estante de livros dela, me deparei com O Método Bullet Journal. Comecei a folhear ele, confesso que fiquei empolgando.

A Gabi vendo meu interesse, me presenteou com ele. 😍

Praticamente devorei o livro, ele foi o primeiro livro de 2023 que finalizei. Também, foi o primeiro livro com mais de 300 páginas que consegui ler.

Quem deve ler?

No meu ponto de vista, essa obra é indicada para todos que necessitam de colocar ordem no seu caos digital.

O livro me ajudou a ter clareza mental em diversas escuras pelo excesso de informação. Entretanto, sei que existe um caminho a ser percorrido para ser “craque” no Bullet Journal.

Outro ponto importante, o livro ajuda você recordar momentos que valem a pena e são esquecido devido a fluidez de nossa comunicação.

Com o Bullet Journal é possível registrar e recordar posteriormente de cada experiência vivida.

Além disso, ele é recheado de exercícios que podemos fazer para identificar o que realmente merece nossa atenção, confesso me assustei com a quantidade de itens que achava que precisavam da minha atenção.

Como o livro me mudou

Hoje percebo que precisava me desconectar estava com uso excessivo e estava me fazendo mal.

Necessitava de um limite, uma barreira, não de forma restritiva, mas consciente. O Bullet Journal te ajuda nesse sentido, ter a informação a um palmo de distância faz termos uma sensação de pertencimento e controle das nossas atividades.

Outro aspecto interessante, Carroll mistura diversas áreas do conhecimento e uma delas que me chamou atenção foi o princípio filosófico do estoicismo.

O Estoicismo é extremamente interessante e, acredito que, possa ser um grande aliado para pessoas que lutam com ansiedade e algum outro tipo de transtorno cognitivo.

Um certo trecho me marcou profundamente, ele conta sobre uma mãe que tinha um filho que teve um crise convulsiva muito forte. Ela ficou apavorada frente aquela situação, entretanto seu Bullet Journal continha todas as informações sobre:

  • quantidade de crises que ele teve;
  • quais remédios toma;
  • quem são os médicos.

Por causa de um uso consciente do Bullet Journal, essa mãe pode ajudar a salvar a vida de seu filho. Não foi atoa que usei a citação que ele pode salvar vidas. 😉

A minha forma de pensar e sistematizar meu método de produtividade pessoal vai mudar consideravelmente. Irei criar um Bullet Journal para ontem.

Minhas 3 melhores citações

Essa liberdade de escolha é uma faca de dois gumes. Cada decisão que você toma exige foco, e o foco é um investimento de tempo e energia. Ambos são recursos limitados – e, portanto, extremamente valioso.

Temos que reduzir o número de decisões que nos sobrecarregam para poder nos concentrar no que importa.

O caderno funciona como um templo mental onde somos livres para pensar, refletir, organizar e nos concentrar

Resumo e Notas

Bullet Journal um método para recordar de momentos significativos de sua vida. Chega de viver em uma cultura estressada que exige a cada dia que sejamos mais dinâmicos, conectados e virtuais.

O BuJo nos convida para retroceder, desacelerar e viver a vida em ritmo saudável e significativo. Revisitar os escritos é algo mágico, pois nos auxilia a exercitar nossas mentes e refletir o quanto a vida importa e ela é valiosa.

Se poderia resumir o BuJo em algumas palavras seria: um método atemporal para trazer um autoconhecimento.

  • Parte I — Preparação
  • Parte II — O sistema
  • Parte III — A prática
  • Parte IV — A arte
  • Parte V — Conclusão
Reviewed

WCAG 2.2: As últimas atualizações e como elas afetam a acessibilidade

Se você descobriu a WCAG a pouco tempo, vim te contar que irá acontecer grandes mudanças da WCAG 2.2.

Semana passada, a WCAG 2.2 mudou de status e passou para Proposed Recommendation.

O objetivo nesse estágio é garantir que o documento tenha qualidade suficiente para se tornar um Padrão da W3C.

Iremos percorrer por suas novidades e o que irá impactar de forma prática nos testes de acessibilidade. De forma resumido:

Vamos lá?

Comparação com a WCAG 2.1

A WCAG 2.2, vai continuar o bom trabalho da sua versão anterior. Dessa forma, a nova versão concentrou seus esforços em três grandes grupos:

  • usuários com dificuldades cognitivas ou de aprendizagem;
  • usuários com baixa visão;
  • usuários com deficiências em dispositivos mobile.

Curiosidades

A nova versão é compatível com a anterior, ou seja, um site que está em compliance com a WCAG 2.2 estaria também com a WCAG 2.1.

Um ponto interessante, o critério 4.1.1 Parsing foi descontinuado na WCAG 2.2.

Bem como, o critério 2.4.7 – Foco visível se tornou uma técnica obrigatória de implementação.

WCAG 2.2 e seus novos critérios

A WCAG 2.2 incluiu 9 novos critérios de sucesso. Eles são:

  • 2.4.11 Foco não obscurecido (mínimo) (Nível AA)
  • 2.4.12 Foco não obscurecido (aprimorado) (Nível AAA)
  • 2.4.13 Aparência do Foco (Nível AAA)
  • 2.5.7 Movimentos de Arrasto (Nível AA)
  • 2.5.8 Tamanho do Alvo (Mínimo) (Nível AA)
  • 3.2.6 Ajuda consistente (Nível A)
  • 3.3.7 Entrada Redundante (Nível A)
  • 3.3.8 Autenticação Acessível (Nível AA)
  • 3.3.9 Autenticação Acessível (aprimorado) (Nível AAA)

Vamos explicar cada critério de sucesso e como atendê-lo.

2.4.11 Foco não obscurecido (mínimo)

O critério 2.4.11 diz que o elemento que recebe foco não seja obscurecido pelo desenvolvedor. Embora existam algumas exceções como do sistema operacional e navegadores.

O foco será aplicado somente nos conteúdos que estão de fato focados. no momento.

Como atender 2.4.11

Para atender esse critério se faz necessário que o foco esteja visível e perceptível ao usuário, dessa forma, ele conseguirá interagir com os componentes.

O público mais beneficiado seria pessoas que utilizam o teclado, em especial, usuários com algum tipo de deficiência cognitiva ou de memória. Garantindo assim, que seja fácil de identificar os elementos focados.

2.4.12 Foco não obscurecido (aprimorado)

O critério 2.4.12 é o mesmo que o 2.4.11, exceto que é menos permissivo. O critério falha se qualquer parte do elemento focado esteja obscurecido.

2.4.13 Aparência do Foco

O critério 2.4.13 exige que o “indicador de foco” seja visualmente claro e conciso.

Possui relação com os critérios: 2.4.7 – Foco visível e 1.4.11 – Contraste não textual. Entretanto, possui algumas diferenças:

  • Critério 2.4.7: valida a existência de um indicador de foco;
  • Critério 1.4.11: define o nível mínimo de visibilidade.

Como atender 2.4.13

De maneira prática, uma vez que, podemos pensar em soluções como, usar contornos sólidos para a indicação de foco.

Entretanto, existem outras possibilidade para atendê-lo.

Recomendo verificar as técnicas de sucesso para cumprir esse critério. Um exemplo seria a imagem abaixo:

Critério 2.4.13 da WCAG 2.2, existem 2 botões azuis com um retângulo de foco de deslocamento escuro de 1 pixel de espessura ao redor do segundo.
Figura 1 Passes: Um retângulo de foco sólido em torno do segundo de dois botões.

2.5.7 Movimentos de arrastar

O critério 2.5.7 lida com interfaces que possibilitam arrastar os componentes. Semelhantemente, podemos citar alguns exemplos:

  • um mapa permite que os usuários arrastem sua visualização;
  • um board de Kanban que permite o usuário movimentar os cards.

Interfaces que possuem a funcionalidade de movimentos de arrastar, tem quatro ações distintas:

  • toque ou clique para estabelecer um ponto de partida e, em seguida,
  • pressionar e manter esse contato enquanto…
  • realizar o reposicionamento do ponteiro;
  • liberar o ponteiro no ponto final.

Não cumprir esse critério, prejudica pessoas com mobilidade reduzida, ou deficiências cognitivas. Contudo o ideal é fornecer outros meios de entrada para o usuário interagir com a interface.

Como atender 2.5.7

Para atender esse critério, se faz necessário ter outros meios de entrada para o usuário.

Um componente, por exemplo, color picker se enquadra nesse critério. Ele é acionado pelo movimento de arrasto.

Mas possui campos de texto para a entrada numérica de valores de cor permitem a definição de uma cor sem a necessidade de movimentos de arrastamento.

2.5.8 Tamanho do Alvo (mínimo)

A princípio o critério 2.5.8 tem como premissa garantir que os usuários possam ativar elementos sem clicar acidentalmente em outro elemento próximo.

Entretanto, existem algumas exceções:

  • Espaçamento: O deslocamento do alvo é de pelo menos 24×24 pixels para cada alvo adjacente;
  • Equivalente: A função pode ser alcançada através de um controle diferente na mesma página que atenda a esse critério.
  • Inline: O alvo está em uma frase ou bloco de texto;
  • Controle do agente do usuário: O tamanho do destino é determinado pelo agente do usuário;
  • Essencial: Uma apresentação particular do alvo é essencial.

Como atender 2.5.8

A princípio, podemos usar técnicas básicas para cumprir esse critério. O recomendável é utilizar um espaçamento entre os elementos seja 24×24 pixels.

Não necessariamente o elemento deve ter 24×24 pixels, mas a soma do alvo tenha esse tamanho.

Curiosidade: Ao cumprir o critério 2.5.5, automaticamente o 2.5.8 é satisfeito.

3.2.6 Ajuda consistente

O critério 3.2.6, exige que, os usuários consigam ajuda para concluir uma tarefa em um website.

O acesso aos mecanismos de ajuda pode ser diretamente pela página onde o usuário se encontra, ou através de um link para uma outra página com as informações de ajuda.

Dessa forma, o usuário tem opções para encontrar possíveis soluções.

Como atender 3.2.6

O website deve ter um modelo de design consistente, com hierarquia das informações de modo claro.

Se você for oferecer esse tipo de recurso, tenha em mente, de colocá-lo no mesmo local para manter conformidade.

3.3.7 Entrada Redundante

O critério 3.3.7 exige que informações previamente inseridas ou fornecidas pelo usuário sejam preenchidas de maneira automática, ou estejam disponíveis para que o próprio usuário as selecione, se for necessário.

Como atender 3.3.7

É extremamente simples implementar a lógica de sessão para pré-preencher campos usando informações que o usuário já inseriu.

Dessa forma, conseguimos manter a entrada redundante das informações.

3.3.8 Autenticação Acessível

O critério 3.3.8 está preocupado com testes de função cognitiva que são usados para autenticar usuários, como por exemplo, CAPTCHA onde devemos digitar uma série de caracteres, ou identificar um tipo específico de objeto.

Dessa forma, usuários com deficiência cognitiva ou problemas de memória, dislexia, discalculia serão extremamente beneficiadas com ele.

Como atender 3.3.8

Primeiramente atender esse critério é garantir que todas as formas de entrada de autenticação (como campos de nome de usuário e senha) suportem a cópia de seus valores.

Contudo, é uma boa ideia incluir um atributo em todos os campos que pedem as próprias informações de um usuário (conforme descrito no critério 1.3.5, embora isso não seja estritamente exigido pelo 3.3.8.

3.3.9 Autenticação Acessível (aprimorada)

Esse critério é idêntico ao 3.3.8, exceto que não possui exceções para testes de reconhecimento de objetos ou conteúdo pessoal.

3 dicas de produtividade para se organizar

Cada vez mais somos cobrados sobre produtividade, entretanto é muito comum nos encontramos perdidos, não é mesmo?

Por isso, quero trazer para vocês pequenas dicas sobre produtividade e como podemos melhorá-la.

Com esse pequeno guia, você vai conseguir ficar mais organizado e focado em seu cotidiano.

Vamos lá?

Por que isso é importante

Antes de mais nada, precisamos entender que nossa vida digital é extremamente exaustiva.

E realizar uma faxina digital torna-se necessário. Para se organizar de forma otimizada iremos basicamente de três tipos de softwares.

  1. Compromissos;
  2. Gerenciador de tarefas;
  3. Anotações.

Compromissos 📆

Tela de um smartphone com o Proton Calendar instalado
Proton Calendar

Compromissos são todos eventos que possuem data, hora e local para acontecer, por exemplo:

  • aniversários;
  • reuniões de trabalho;
  • casamentos;
  • palestras e etc.

Eu utilizo o Proton Calendar, que é integrante da suíte do Protonmail, mudei a um tempo do Google para o Proton por razões de privacidade de dados.

Nesse calendário, anoto todos os meus compromissos, dessa forma tenho uma visão geral. Isso me ajuda bastante a ter uma clareza dos meus compromissos.

A agenda digital funciona muito bem, porém, se você tem familiaridade com uma agenda manual não tem problema.

A ideia é organizar nossos compromissos de forma clara e otimizada.

Se esqueço de algum compromisso, recorro ao calendário e num fração de segundos tenho a resposta que preciso.

Gerenciador de tarefas 📌

Todoist

Além de um calendário, necessitamos de ter um local para armazenar nossas tarefas. O gerenciamento de tarefas é essencial para tirarmos de nossa cabeça preocupações desnecessárias.

Atualmente utilizo o Todoist na versão Pro, o valor da assinatura é baixo e seus benefícios são excelentes.

Uma das razões por assiná-lo é devido a suas integrações com outras ferramentas e uma inteligência artificial embutida. Percebo que, consigo ser mais produtivo utilizando ele.

Organizo minhas tarefas por ordem de prioridade, dessa forma quando olho para o Todoist seu que preciso de realizar algumas atividades antes de outras.

Mais uma vez a sensação de clareza e tranquilidade retorna em minha mente.

Anotações ✍

Para anotações digitais existem diversos softwares, entre os mais famosos estão: Evernote e o Notion.

Já utilizei ambos, mas me encontrei usando o Obsidian. Gosto dele pela escrita ser em markdown e outras funcionalidades.

Cada vez que anoto alguma ideia ou projeto, organizo de forma que consigo rastrear de forma rápida. Até então, tem em atendido prontamente.

Considerações finais

Com esses três softwares você irá conseguir sair de um caos completo para um ambiente organizado e controlado.

Lembrando que, foi essa forma que funcionou para mim. Pode ser que você precise de adaptar alguns pontos e está tudo bem. 😄

Arrume sua cama: Pequenas coisas que podem mudar a sua vida 

Arrume sua cama é um best-seller do Almirante William H. McRaven, com 10 princípios ele deve uma carreira de sucesso na marinha americana ao longo de mais de 30 anos.

Nesse artigo te conto a minha experiência de leitura e como ele me impactou positivamente.

Capa do livro Arrume a sua cama: pequenas atitudes que podem mudar sua vida e talvez o mundo.

O livro em 3 frases

  • Grandes mudanças começam com pequenas coisas, isto é, comece arrumando a sua cama;
  • Dias ruins virão, entretanto, encare eles com todas as suas forças;
  • Trabalhe duro, mas trabalhe em equipe se quiser chegar mais longe.

Impressões

Arrume a sua cama é a transcrição de uma palestra ministrada pelo Almirante William H. McRaven, em uma faculdade do Texas. Esse discurso foi realizado para aproximadamente 8 mil alunos.

O livro é um compilado mais denso dos princípios apresentados na palestra aos alunos. Dessa forma, temos em mãos mais de 30 anos de experiência e vida militar.

Ao todo são dez princípios citados, que nortearam sua vida militar. Contudo eles podem ser aplicados a qualquer pessoa.

Honra, liderança, companherismo, misericórida são encontrados do início ao fim.

Sua leitura é agradavél e prazerosa, terminei em algumas horas. Seus capítulos são curtos e objetivos, assim, torna a leitura simples.

Como eu descobri esse livro?

A princípio, descobri ele sem querer estava andando na Leitura e o título me chamou a atenção. Aliás, o preço também foi bem atrativo.

A razão por comprá-lo foi por meus estudos sobre produtividade e gestão de tempo. Eu me recordo de ter visto ele online, mas não tinha dado a devida atenção.

Quando olhei na livraria li a sinopse e decidi levar para casa. Para minha surpresa, li ele todo no mesmo dia.

Quem deve ler?

Primeiramente recomendo para pessoas que querem otimizar seu tempo, serem mais produtivas. Mas é uma excelente pedida para pessoas que se encontram perdidas em um rotinha caótica.

Através das lições desse livro podemos encontrar sentido para prosseguir com a vida e ser mais produtivo e intencional.

Também pode ajudar a pessoas que tem problemas e não enxergar como sair de certas situações da vida.

Como o livro me mudou

Esse livro me ajudou a perceber que devo comemorar com entusiasmo as minhas pequenas vitórias diárias.

Depois da leitura, decidi fazer um experimento, escrever a cada tarefa do meu dia que foi finalizada. Para minha surpresa, ao final do dia tinha executado cerca de quase 20 tarefas.

Ver essas atividades concluídas me ajudou a refletir que posso fazer muito mais, se me organizar e ter um objetivo intencional para minha vida.

Também me fez repensar sobre o valor da amizade e construir um futuro cercado de pessoas que me amam.

Aprendi também que devo encarar a vida de frente, pois como, o autor diz, a vida é uma luta e não é justa. Quanto mais cedo acostumar com essa ideia melhor é.

Minhas 3 melhores citações

Arrumar a cama corretamente não seria motivo de elogio. Era o que se esperava de mim. Era minha primeira tarefa do dia, e executá-la bem era importante. Demonstrava a minha disciplina. Revelava minha atenção ao detalhe e, no fim do dia, seria um lembrete de que eu havia feito uma coisa da qual poderia me orgulhar, não importa quão pequena fosse

Ninguém consegue remar sozinho. Encontre alguém para compartilhar sua vida. Faça tantos amigos quanto possível e nunca esqueça que seu sucesso depende dos outros.

Tiranos são sempre iguais. Não importa onde estejam: no pátio da escola, no local de trabalho ou governando um país por meio do terror. Eles prosperam onde há medo e intimidação. […] Se você não encontra coragem para enfrentá-los, eles atacam.

Resumo e Notas

O tema principal do livro é demonstrar que podemos muito mais do que imaginamos. Com honra, companheirismo, heróismo, bravura chegamos a lugares que não imaginaríamos.

Cada capítulo trata de um princípio que McRaven usou ao longo de sua carreira de mais de 30 anos na marinha americana, abaixo todos os capítulos do livro:

  • Capítulo 1 – Comece o dia com uma tarefa feita
  • Capítulo 2 – Você não vai conseguir sozinho
  • Capítulo 3 – Tudo o que importa é o tamanho do coração
  • Capítulo 4 – A vida não é justa: Siga em frente!
  • Capítulo 5 – O fracasso pode tornar você mais forte
  • Capítulo 6 – Você precisa ousar mais
  • Capítulo 7 – Enfrente os tiranos
  • Capítulo 8 – Mostre-se à altura da ocasião
  • Capítulo 9 – Dê esperança as pessoas
  • Capítulo 10 – Nunca, jamais, desista!

Se você ficou curioso, vou deixar meu link de afiliado na Amazon. Você não paga nada a mais, mas me ajuda a produzir mais conteúdo.

Conclusão

Não espere por grandes atitudes, comece hoje mesmo a arrumar a sua cama e talvez, você quem saiba revolucionará o mundo.

Como no efeito borboleta, tudo em nossas vidas se inicia em pequenas gotas, devemos abraçar pequenas atitudes como grandes atos de bravura.

Assim, conseguiremos avançar e sermos intencionais em nossas vidas.

Se você gostou assine minhas cartas.

Reviewed

10 dicas de acessibilidade para desenvolvedores

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.

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/