Um ano de novidades


Fala pessoal, tudo certo?

Hoje quero contar um pouco sobre algumas mudanças que aconteceram em 2021. Sim, o ano mal começou e já considero um ano de novidades importantes.

Canal do YouTube

Decidi tirar do papel meu canal do YouTube, tenho como objetivo mostrar ferramentas, dicas e técnicas para deixar as aplicações mais acessíveis. Também irei falar sobre qualidade de software e desenvolvimento frontend.

Filiação ao IAAP

Finalmente me tornei membro da International Association of Accessibility Professionals (IAAP), era algo que queria ter feito há muito tempo e sempre postergava, porém, esse ano me dei um ultimato.

O propósito da organização é promover, melhorar a acessibilidade através de certificações, materiais didáticos e networking para possibilitar a criação de produtos, conteúdos, serviços e ambientes acessíveis.

Como membro, você tem algumas vantagens como:

  • desconto para membros que residem em países de economia emergente;
  • descontos nas certificações oferecidas;
  • conteúdos exclusivos;
  • fóruns de discussões com profissionais renomados.

Inclusive ela possui certificações internacionais sobre o tema, provavelmente irei escrever sobre esse assunto.

Novos ares

Em dezembro me despedi da Monetizze e topei fazer parte do time da Concrete. Não foi uma decisão fácil, porém, chega um momento que precisamos de encarar novas oportunidades e desafios que possam surgir.

Testes mobile e agora?

Na Concrete, fui informado que atuaria como QA num time mobile. Num primeiro momento fiquei preocupado, porém, o capítulo de QA me auxilio num onboard específico.

Minha intenção é compartilhar com vocês meu processo de aprendizagem no mundo mobile. Irei seguir um conselho do Elton Minetto, onde orienta escrever se algo demorou mais de 30 minutos para aprender escreva um post por dois motivos:

  • ajuda a fixar o conteúdo;
  • contribui com pessoas que tiveram a mesma dificuldade.

Para essa e mais dicas na carreira de um desenvolver, você pode fazer o download do e-book de forma gratuita.

Acessibilidade mobile

Outro ponto interessante, comecei a estudar alguns conteúdos sobre essa nova perspectiva e, em breve, devo começar alguma série ou conteúdo relacionado.conteúdo relacionado.

Conclusão

O ano já iniciou cheio de coisas novas e estou contente com isso, ao longo do ano quero desenvolver muitas coisas bacanas e espero que vocês possam desfrutar disso.

E você, como foi o primeiro mês do seu ano? Compartilha ai nos comentários.

Grande abraço,
Pulis.

Como validar links externos

Introdução

Em projetos open source, usamos o arquivo README escrito em markdown, que é uma forma simples e flexível de documentar informações importantes.

Usamos o markdown para criar as famosas Awesome Lists, como o Awesome A11y.

Uma Awesome List geralmente possuí diversos links externos.

Como tratamos com várias referências, será que existe uma forma de garantirmos que aquele link não está quebrado?

Pensando nisso, nesse artigo vou te ensinar uma forma prática de validar os links no padrão markdown.

Anatomia de um hyperlink

A função principal de um link é promover conexão entre páginas web, essas ligações pode ser através de:

  • uma página a outra;
  • arquivos;
  • telefones;
  • endereços eletrônicos (e-mail);
  • âncorar locais em uma mesma página.

Para maiores informações consulte a documentação do elemento <a>.

Links quebrados

É bem comum ouvir a expressão “link quebrado”, mas o que ela quer dizer?

Um link quebrado, é um recurso que o servidor tentou localizar e não encontrou, gerando o famoso 404 - Page not found

Links quebrados vs Markdown

Hoje, estava estudando algumas referências sobre qualidade de software em um repositório no Github e me deparei com alguns links quebrados no Markdown.

Fiquei pensando como poderia corrigir isso, resolvi procurar uma solução que permitisse percorrer todos os links e retornar o status de cada um.

Encontrei o Markdown link check, ele é um pacote no npm de fácil utilização.

Usando o Markdown Lint Check

Para usar o Markdown link check, devemos ter um arquivo package.json configurado. Caso seu projeto não tenha, execute o seguinte comando:

# cria uma estrutura padrão do package.json
npm init -y

# cria uma estrutura padrão do package.json
npm init -y

Instalando a dependência

Após ter o package.json configurado, iremos instalar ele localmente no projeto com o comando:

npm install --save-dev markdown-link-check

Validando os links

Existem duas alternativas de validar os links:

  • através da linha de comando;
  • através de um comando script definido no package.json.

Linha de comando

Pela linha de comando é recomendável para poucos arquivos, assim você tem um feedback bem rápido.

markdown-link-check https://github.com/tcort/markdown-link-check/blob/master/README.md

No exemplo acima, validamos o README do Markdown link check

Tarefa no package.json

Eu utilizei esse formato, encontrei no blog do Gleb Bahmutov.

Abra seu arquivo package.json e configure:

{
  "scripts": {
    "check:markdown": "find *.md -exec npx markdown-link-check {} \;"
  }
}
Dessa forma ele irá percorrer todos os arquivos com a extensão *.md

Digite no terminal:

npm run check:markdown

Nessa solução pode demorar um pouco, visto que, percorrerá todos os arquivos do projeto.

Considerações finais

Esse pacote me auxiliou e economizou um tempo consideralvél.

Ele é uma ótima alternativa para detectar possíveis problemas e resolvê-los de forma rápida e dinâmica.

Existe a possibilidade de usar com o Docker e também incluir ele numa pipeline de desenvolvimento. Legal né?

E você como usaria ele para auxiliar seu trabalho?

8 Princípios da Qualidade de Software

🔆 Conceito

O modelo de qualidade é a base de um sistema de avaliação da qualidade do produto. O modelo de qualidade determina quais características de qualidade serão levadas em consideração ao avaliar as propriedades de um produto de software.

Foi definido na ISO/IEC 25010 compreende as oito características de qualidade mostradas abaixo:

Adequação funcional

Representa o grau em que um produto ou sistema fornece funções que atendem às necessidades declaradas e implícitas quando usado sob condições especificadas.

  • completude funcional;
  • correção funcional;
  • adequação funcional.

Eficiência de desempenho

Representa o desempenho em relação à quantidade de recursos usados nas condições estabelecidas. Possui as seguinte subcaracterísticas:

  • Comportamento temporal;
  • Utilização de recursos;
  • Capacidade.

Compatibilidade

Representa a forma de como um produto, sistema ou componente pode trocar informações com outros produtos, sistemas ou componentes e/ou executar suas funções necessárias. Possui as seguinte sub características:

  • Coexistência;
  • Interoperabilidade.

Usabilidade

Representa como os usuários utilizam o produto para atingir objetivos específicos com eficácia, eficiência e satisfação. Possui as seguinte subcaracterísticas:

  • Reconhecimento de adequação;
  • Aprendizagem;
  • Operabilidade;
  • Proteção contra erros do usuário;
  • Estética da interface do usuário;
  • Acessibilidade.

Confiabilidade

Representa como um produto ou componente executa funções especificadas sob condições especificadas por um período de tempo especificado. Possui as seguinte subcaracterísticas:

  • Maturidade;
  • Disponibilidade;
  • Tolerância a falhas;
  • Recuperabilidade.

Segurança

Representa como o sistema protege informações e dados para que pessoas ou outros produtos ou sistemas tenham o grau de acesso aos dados apropriado aos seus tipos e níveis de autorização. Possui as seguinte subcaracterísticas:

  • Confidencialidade – grau em que um produto ou sistema garante que os dados sejam acessíveis apenas para aqueles autorizados a ter acesso.
  • Integridade – grau em que um sistema, produto ou componente impede o acesso não autorizado ou modificação de programas de computador ou dados.
  • Não-repúdio – grau em que ações ou eventos podem ser comprovados como tendo ocorrido de forma que os eventos ou ações não possam ser repudiados posteriormente.
  • Responsabilidade – o grau em que as ações de uma entidade podem ser atribuídas exclusivamente à entidade.
  • Autenticidade – grau em que a identidade de um sujeito ou recurso pode ser comprovada como reivindicada.

Capacidade de Manutenção

Representa o grau de eficácia e eficiência com que um produto ou sistema pode ser modificado para melhorá-lo. Possui as seguinte subcaracterísticas:

  • Modularidade;
  • Reutilização;
  • Analisabilidade;
  • Modificabilidade;
  • Testabilidade.

Portabilidade

Representa a eficácia e eficiência com que um sistema, produto ou componente pode ser transferido de um hardware, software ou outro ambiente operacional ou de uso para outro. Possui as seguinte subcaracterísticas:

  • Adaptabilidade;
  • Instalabilidade;
  • Capacidade de substituição.

Conheça os 3 níveis de conformidade

Introdução

No drops anterior comentei sobre os princípios da acessibilidade web. Dessa vez, iremos falar sobre os níveis de conformidade.

Se você já realizou algum teste de acessibilidade com certeza encontrou os níveis de conformidade. Confesso que no meu primeiro contato com eles, fiquei sem entender, pois não são nada intuitivos.

Os níveis de conformidade são divididos em três categorias:

  • Nível A;
  • Nível AA:
  • Nível AAA

Nível A

Representa barreiras mais significativas de acessibilidade.

Exemplos do nível A:

Nível AA (duplo A)

Contempla maior numero de usuários e garante acesso à maioria dos conteúdos.

Exemplos do nível AA:

Nível AAA (triplo A)

Engloba as anteriores, são mais específicas e complexas.

Exemplos do nível AAA:

Iniciando em acessibilidade

Antes de aprofundar em ferramentas e recomendações é necessário entendermos os princípios. Eles regem todas as outras coisas que virão ao longo do tempo.

Existem quatro princípios, são conhecidos pelo acrônimo POUR, a sigla está em inglês, porém, irei usar em português.

🎉 Perceptível

O usuário pode identificar o conteúdo e os elementos da interface por meio dos sentidos (tato, audição, visão, fala).

Veja exemplos do princípio “Perceptível”:

  • Um vídeo de um meme super engraçado, caso esteja sem legenda fica inacessível para usuários surdos ou com deficiência auditiva;
  • As informações de contato de um site com um contraste insuficiente;

🎉 Operável

Um usuário pode usar com sucesso controles, botões, navegação, clicando, tocando, deslizando ou identificando por voz, exemplos:

  • Menu de navegação que contém um submenu sendo exibido via mouse. Ao receber foco com o teclado o submenu não é exibido;
  • Pesquisa de um site ser ativada por controle de voz.

🎉 Compreensível

Os usuários devem ser capazes de compreender o conteúdo, aprender e lembrar como usar a interface, exemplos:

  • Navegação inconsistente entre páginas. Se cada página o usuário precisar reaprender a navegação, como ele poderá navegar no site?
  • formulários que não informam o usuário quando acontece um erro de entrada de dados, como o usuário poderá corrigi-los?
  • um site técnico utiliza inúmeras abreviações, acrônimos e jargões. Se eles nunca são definidos, como os usuários com deficiência (e outros) podem entender o conteúdo?

🎉 Robusto

Produtos digitais desenvolvidos nos padrões e usando tecnologias apropriadas, exemplos:

  • um site que requer uma versão específica de um navegador para ser usado. Se o usuário não usa versão fica impossibilitado de consumir o conteúdo;
  • um formato de documento está inacessível para um leitor de tela em um sistema operacional específico.

🏁 Conclusão

Os princípios do POUR foram desenvolvidos para descrever a acessibilidade da Web, mas podem ser aplicados a praticamente qualquer questão de acessibilidade.

Os fornecedores de tecnologia devem garantir que todos os usuários possam perceber, operar e entender sua tecnologia, e seja robusta o suficiente para funcionar em um espectro de tecnologias, incluindo a tecnologia assistiva.

Font awesome do jeito certo

Ícones do Font Awesome 5.

O Font Awesome, talvez seja a biblioteca de ícones mais famosa do mundo. Ele facilita o desenvolvimento e contribui para dar uma consistência visual, porém, a marcação no HTML dele em sua grande maioria está incorreta.

Neste artigo, irei mostrar outra abordagem para utilizarmos o Font Awesome.

Como usamos

Após realizado o download da biblioteca e incluído ela em nossos assets,

Geralmente usamos o Font Awesome assim em nossos projetos:

<i class="fas fa-camera"></i>

Semanticamente a marcação está incorreta, a especificação da tag i, diz:

O elemento HTML <i> representa uma parte do texto que é destacada do restante por algum motivo, por exemplo, termos técnicos, expressões de outros idiomas ou pensamentos de personagens fictícios. Normalmente, é apresentado com o uso do tipo “itálico”.

Fonte: MDN

Do jeito certo

A forma semântica é usando a tag <span>, atrelada a um atributo aria o aria-hidden=true. Dessa forma o elemento fica “oculto” para tecnologias assistivas, como um leitor de telas.

<span class="fas fa-camera" aria-hidden="true"></span>

« Older posts

© 2021 Bruno Pulis

Theme by Anders NorenUp ↑