Forem: Geovana Ribeiro(AKA Raveenita)

Garantindo a proteção de dados financeiros com PCI-DSS

Geovana Ribeiro(AKA Raveenita) — Sun, 05 Nov 2023 13:53:04 +0000

O Padrão de Segurança de Dados da Indústria de Cartões de Pagamento ou PCI-DSS (Payment Card Industry Data Security Standard) foi criado a partir da união das principais bandeiras de cartão de crédito (American Express, Visa, Mastercard) para definir um padrão de segurança para o mercado.

O que é a certificação PCI DSS?

A certificação PCI DSS visa definir regras e requisitos rígidos para garantir a proteção de informações sobre cartões em todas as transações online.

Essa auditoria deve ser contratada anualmente pelas empresas que armazenam ou transmitem dados de cartão de crédito dos clientes. Dessa forma, um auditor irá realizar a auditoria em todo o ambiente para certificar-se que a empresa está segura. Caso a organização cumpra todos os pré requisitos, ela é aprovada pela certificação PCI DSS.

Todas a empresas precisam realizar essa certificação?

Empresas que utilizam de gateways de pagamento, como pagseguro ou mercadopago não precisam realizar essa auditoria, pois os dados sensíveis não são lidados diretamente por ela, mas sim por um terceiro, que muitas vezes já cumprem este requerimento.

Caso a empresa realize o armazenamento e processamento de pagamentos online em sua própria infraestrutura, deve ser realizada a certificação PCI DSS para garantir a segurança do ambiente e dos dados de seus clientes.

Quais são os requisitos para a certificação PCI DSS?

Para que uma empresa esteja apta a certificação PCI DSS, ela deve cumprir os seguintes requisitos:

Realizar análises de vulnerabilidade trimensais ou sempre que ocorrer alguma mudança.
Realizar pentest interno e externo
Corrigir todas as vulnerabilidades de nível alto ou risco.
Não deve existir nenhuma vulnerabilidade com o score 4, com base no CVSS (Common Vulnerability Scoring System)

Como posso certificar minha empresa?

Caso você não utilize um gateway terceirizado de pagamento que já atende todos os pré-requisitos solicitados pela PCI DSS, você deve seguir os procedimentos para certificação.

Sobrevivência para devs cansados - Parte 1

Geovana Ribeiro(AKA Raveenita) — Sat, 25 Mar 2023 11:34:29 +0000

Saudações, devs piratas dos mares abertos! 🏴‍☠️🤘🏼

Realizei no mês passado um treinamento de sobrevivência básico na selva, através do Overborder Rescue, e foi incrível como os aprendizados ressoaram em mim no ambiente de trabalho.

Resolvi traduzir essa experiência dentre outras, numa série que chamarei de “tantantan para devs cansados”, trazendo um pouco de sabedoria e outras práticas que me auxiliam no meu dia a dia como desenvolvedora e como espírito encarnado. Essa é a parte um!

Espero que gostem. Irei atualizar esse índice conforme novos forem surgindo =)

Outros artigos desta série:

Sobrevivência para devs cansados - Parte 1 (Você está aqui!)

🏕️ Introdução

A sobrevivência vai muito além de superar a escassez ou um desastre natural.

Ela nos apresenta a essência sobre viver. Um chamado para o desejo de perdurar.

Se não acendemos essa chama inata em nosso coração, não estamos sobre vivendo, apenas existindo.

Quando acendemos essa chama, uma sensação de segurança e confiança desperta em nós, pois nos colocamos como guardiões de nossas vidas, assim como das pessoas ao nosso redor.

Sobreviver nos leva ao núcleo de nossos instintos e de nossa humanidade.

🎖️A Sigla ESAON

A sigla ESAON está presente no exército militar e no corpo de bombeiros. Este protocolo no guia diante de uma situação onde estejamos perdidos numa floresta:

O significado de cada letra é:

[E]stacionar: Ao notar que está perdido, ao invés de continuar caminhando sem rumo, apenas estacione e poupe seus recursos (corpo, mente)
[S]entar: Repouse por alguns minutos, tendo em vista que você andou por muito tempo e está cansado.
[A]limentar: Dê a seu cérebro e a si um pouco de tranquilidade. Coma algo para dizer ao seu corpo que está tudo bem e aumentar sua saciedade.
[O]rientar: Retome as atividades e busque refazer o caminho mentalmente, se lembrando de qual direção veio e para onde vai em seguida.
[N]avegar: Após ter mapeado bem os próximos passos, meta marcha e que a sorte esteja ao seu favor!

💻 ESAON orientada a devs cansados

Após retomar do curso, realize o experimento de aplica-las no dia a dia do trabalho e acabei adaptando alguns termos:

[E]stacionar

Ao se sentir perdido, pare de bater a cabeça no que está fazendo. Esse é o conceito de estacionar: poupar energia mental num problema onde não estamos progredindo em sua resolução.

[S]air

É a instrução oposta de sentar, pois já passamos o dia inteiro sentados nessa vida sedentária de desenvolvedor(a). Aproveite para levar seu cachorro para passear, pegar sol ou tomar um café. Alongue seu corpo ou simplesmente movimente-se!

[A]limentar

Dê a seu cérebro um pouco de combustível: leia um artigo sobre algum assunto relacionado ao problema em que está enfrentando. Tenha as ferramentas necessárias para lidar com grandes tragédias!

[O]rientar

Consulte fóruns e tudo o que já faz normalmente para corrigir erros, mas agora com uma mentalidade diferente: você está no meio de uma mata. As vezes é preciso abrir seus próprios caminhos!

[N]avegar

Depure o código, como se estivesse literalmente cortando toda a vegetação a sua frente. Olhe para o problema como um território totalmente desconhecido e fascinante, porém hostil e cheio de armadilhas. Assim como estar em contato com a natureza também é. Confie em seus instintos!

Conclusão

Esse protocolo vem sendo um guia para cenários catastróficos (na minha cabeça), ancorando minha firmeza ao lidar com situações onde o desconhecido muitas vezes desperta gatilhos e sensações negativas.

Agora que vocês já possuem essa instrução, é necessário a prática! Para entender como isso ressoa em sua vida profissional e pessoal.

Me siga para acompanhar as próximas partes deste post e os demais artigos da série “Para devs cansados”.

That’s all folks! 🏴‍☠️

💻 Configurando o Ubuntu para acessar a deep web

Geovana Ribeiro(AKA Raveenita) — Sat, 25 Feb 2023 03:42:20 +0000

Saudações, cyber piratas 🏴‍☠️

Resolvi compartilhar como configurar seu navegador preferido no Ubuntu para acessar qualquer site da deep web de forma privada, sem a necessidade de instalar o Tor Browser.

Segue o fio:

Instalando o tor e proxychains

Primeiramente, instale os pacotes proxychains e o tor:

sudo apt install tor proxychains

E depois inicie o serviço do tor, através do comando:

sudo service tor start

Configurando o arquivo proxychains.conf

Abra o arquivo /etc/proxychains com o nano:, um editor de texto muito utilizado no Linux:

sudo nano /etc/proxychains.conf

E abaixo da linha socks4, informaremos que **o protocólo **socks5 também funcionará com a porta 9050, utilizada pelo tor:

socks4 127.0.0.1 90250
+ socks5 127.0.0.1 90250

No ínicio do arquivo, comentaremos a linha strict_chain e descomentaremos a linha dynamic_chain, que define a forma na qual os proxys serão tratados. Desta forma, caso algum proxy esteja offline, será pulado.

Feito isso, podemos fechar o arquivo com CTRL + X e apertar Y para salvar as alterações.

No final, seu arquivo deve ficar parecido com:

proxychains.conf

# proxychains.conf  VER 3.1
#
#        HTTP, SOCKS4, SOCKS5 tunneling proxifier with DNS.
#   

# The option below identifies how the ProxyList is treated.
# only one option should be uncommented at time,
# otherwise the last appearing option will be accepted
#
dynamic_chain
#
# Dynamic - Each connection will be done via chained proxies
# all proxies chained in the order as they appear in the list
# at least one proxy must be online to play in chain
# (dead proxies are skipped)
# otherwise EINTR is returned to the app
#
#strict_chain
#
# Strict - Each connection will be done via chained proxies
# all proxies chained in the order as they appear in the list
# all proxies must be online to play in chain
# otherwise EINTR is returned to the app
#
#random_chain
#
# Random - Each connection will be done via random proxy
# (or proxy chain, see  chain_len) from the list.
# this option is good to test your IDS :)

# Make sense only if random_chain
#chain_len = 2

# Quiet mode (no output from library)
#quiet_mode

# Proxy DNS requests - no leak for DNS data
proxy_dns 

# Some timeouts in milliseconds
tcp_read_time_out 15000
tcp_connect_time_out 8000

# ProxyList format
#       type  host  port [user pass]
#       (values separated by 'tab' or 'blank')
#
#
#        Examples:
#
#               socks5  192.168.67.78   1080    lamer   secret
#       http    192.168.89.3    8080    justu   hidden
#       socks4  192.168.1.49    1080
#           http    192.168.39.93   8080    
#       
#
#       proxy types: http, socks4, socks5
#        ( auth types supported: "basic"-http  "user/pass"-socks )
#
[ProxyList]
# add proxy here ...
# meanwile
# defaults set to "tor"
socks4 127.0.0.1 9050
socks5 127.0.0.1 9050

Configurando o navegador

Agora configuraremos seu navegador padrão (browser) para utilizar o Tor.

Google Chrome

Abra o Google Chrome, vá até a sessão Settings (Configurações) e busque por Proxy.

As opções de configuração de Network (Rede) do Ubuntu será aberta. Clique em Network Proxy e selecione a opção Manual. Preencha o campo Socks Hosts com 127.0.0.1 e defina a porta como 9050, a mesma realizada configuração realizada no arquivo proxychains.conf.

Confira as informações e feche a janela.

Mozilla Firefox

Abra o Firefox, vá até a sessão Settings (Configurações) e busque por Proxy.

Clique no botão Settings e selecione a opção Manual. Preencha o campo Socks Hosts com 127.0.0.1 e defina a porta como 9050, a mesma realizada configuração realizada no arquivo proxychains.conf.

Aqui selecionaremos as opções “SOCKS v5” e “Proxy DNS when using SOCKS v5”.

E por fim, clicaremos em OK para salvar.

Acessando a deep web

Acesse o site https://ipaddress.my/.

Observe que o IP acima corresponde a Amstardem, na Holanda, mas eu moro no Brasil! :o

Isso significa que nosso proxy deu certo e que podemos nos aventurar na deep web.

Por fim, tente acessar http://qrtitjevs5nxq6jvrnrjyz5dasi3nbzx24mzmfxnuk2dnzhpphcmgoyd.onion/

Se algo parecido com um pug muy loko brotar na sua tela, você está dentro! =)

That's all folks! 🏴‍☠️

🚀The one secret of web performance

Geovana Ribeiro(AKA Raveenita) — Fri, 14 Aug 2020 11:16:24 +0000

I have been seen many articles on the internet about web performance and they have titles like “Top 5 secrets to boost your PHP performance” and “15 tips to improve the performance of your site” and yeah, they are really helpful, but we need to stop looking for hacks and quick tips and start to look deeper for what is performance.

Why are you looking for performance?

Your boss came with some explicit orders from the client to test the web performance of a project that you just finished recently.

They are like “OMG, the SEO tool requires a good site performance. What we do??” And there is where you enter. You need to test your own site performance and is faced with something like that:

This really hurts, don’t?

You have a long way to go now. And to think that you would never touch this site again…

What is performance?

If you are a runner, you always do your best to improve yourself. You don’t just buy a new pair of shoes and think that you’re the fastest runner on the planet.

How the development cycle of your applications is? Do you pay attention to what decisions you take off while programming or go back to any part of your code that doesn’t really like the implementation?

Do you like refactoring your code and always are searching for ways to increase the quality or you just make some configurations in your webserver to cache faster and that’s enough?

Performance is a culture.

When you code something that works but don’t stop to overthink how that can affect your application in production scenarios, this can blow off all those articles about performance.

These articles can’t help you with structural issues. This is something much deeper. For that, you need to understand that programming language you are coding and the best solution gave by her based on your knowledge about data structured and requirements of the project.

Performance can be hard. There so many skills involved, like browser and network performance, web server, and… I’m getting sleepy.

Doing this, you can apply performance culture in every project and learn a lot with this. I know, sometimes can be really boring, but when you understand why you are doing this, became so much acceptable (I say this because still boring, but now you know that you are saving the user’s life and 3G, for sure).

I can say for myself, performance can be a topic really interesting.

🎯 CHALLENGES

Choose one project and start to analyze it. There is something that can be done in a different way?
Take metrics from different methods in a programming language that do similar things (a for loop, while and forEach), compare them and find the best one for your implementation
Code the way you know first and then spend some time refactoring your code

Acessibilidade: O guia para uma web universal

Geovana Ribeiro(AKA Raveenita) — Sat, 07 Dec 2019 14:41:15 +0000

Muito me encanta a internet. Quando me aventurei neste universo pela primeira vez, era apenas uma padawan. Ela não era tão vasta e rica como hoje e muito dos conceitos que temos atualmente não eram nem sequer uma preocupação, afinal, a web consistia apenas de links envoltos de layouts tabelados e cores extremamente toscas.

Hoje em dia tudo é diferente e a internet está disponível para grande parte da população, mas a acessibilidade ainda não.

Quando consegui meu primeiro emprego como desenvolvedora front-end junior, não conhecia nenhum destes conceitos. Até que um dia ligaram na agência em que trabalhava procurando pelo meu chefe, pois um cliente deficiente visual de um site de leilões online tinha ligado e reportado que no antigo site era possível navegar no site através dos leitores de tela, mas no atual não. O novo site não tinha sido desenvolvido levando a acessibilidade em mente.

Aquilo de certa forma me marcou. Até aquele em dia em questão, não fazia ideia de como pessoas portadoras de deficiência faziam para acessar a internet e muito menos como poderia transformar sua experiência. Me senti responsabilizada por impedir que outras ligações como aquela ocorressem. Inevitavelmente, aprendi outros conceitos muito importantes ao longo do caminho e que se complementam: usabilidade e performance web.

Estudar e aplicar esses conceitos me fizeram uma desenvolvedora melhor e mais empática. Foi quando entendi que a internet é universal e deve ser desenvolvida para todos.

Após finalizar as próximas seções, você está apto à:

codificar de forma semântica e otimizada para leitores de tela e navegadores;
escrever conteúdo de forma mais simples e compreensível;
tornar seu site mais performático;
melhorar o posicionamento em mecanismos de buscas;
aplicar conceitos de usabilidade em projetos pessoais e profissionais;

📗 Código semântico

Nos primórdios da web, o HTML (Hypertext Markup Language) era uma terra sem lei. Os elementos table e div eram como pais de santo que faziam todo tipo de milagre. Loja virtual? Taca uma tabela aí. E-mail marketing? Tabelas fazem todo o sentido, é claro! (neste caso em específico ele permanece até hoje, infelizmente).

Era nesse caos em que viviamos até o surgimento do HTML5. Ele veio pra revolucionar a forma como escrevemos páginas web, trazendo semântica para cada novo elemento inserido e significado a informação.

Apesar disso, a semântica reside na web desde sempre. Elementos como os cabeçalhos (h1, h2...h6) e buttons estão desde a primeira especificação do HTML.

Como dito anteriormente, não existiam tags que diferenciassem um header de um footer, ou dissessem ao navegador que uma página possui um menu de navegação, mas hoje com a nova especificação do HTML5, elas existem!

Legenda: marcação antiga VS marcação atual com HTML5

Com as novas tags do HTML5, podemos demarcar quando uma sessão de uma página é um footer, header, navou mesmo comportará um artigo. Desta forma, o navegador também terá conhecimento do tipo de conteúdo que ele está renderizando.

Listas ordenadas e não-ordenadas

Um erro comum que cometemos é esquecermos da existência das listas ordenadas. Não é apenas uma questão de escolher entre <ul> e <ol> e sim sobre qual atende melhor a necessidade do projeto.

<ul class="breadcrumbs>
    <li><a href="/home">Home</a></li>
    <li><strong class="current>Contato</strong></li>
</ul>

Semânticamente, seria melhor representado:

<ol class="breadcrumbs>
    <li><a href="/home">Home</a></li>
    <li><strong class="current>Contato</strong></li>
</ol>

Idioma do documento com `[lang]`

Nas versões anteriores ao HTML5 era possível definir o conteúdo do documento através da metatag nativa.

<meta http-equiv="Content-Language" content="pt-br">

O atributo langfoi introduzido no HTML5 e informa ao navegador qual o idioma do documento.

<html lang="pt-br">

Ele pode ser usado como atributo em qualquer elemento, informando a linguagem do conteúdo demarcado:

<p lang="en-us">
    Augusta Ada King, Countess of Lovelace was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and one of the first computer programmers.
</p>

Gerenciando visibilidade com `[hidden]`

O atributo hidden é uma alternativa semântica ao display: none.
Para tornarmos nosso desenvolvimento mais otimizado para leitores de tela, precisamos fixar o seguinte conceito: tudo o que fazemos no CSS é puramente visual. Nunca estaremos atingindo tecnologias assistivas com folhas de estilo. Por isso o CSS é o lugar ideal para colocar imagens decorativas e firulas criadas pelos designers (que particularmente, eu adoro).

Navegação sequencial pelo teclado com `[tabindex]`

Uma página acessível deve poder ser navegada unicamente através do teclado. O atributo tabindex é muito útil neste quesito. Ele permite que controlemos a ordem dos elementos que serão navegados por meio da teclada tab. Os valores aceitos para essa propriedade são:

[tabindex="1"] (valor positivo): o elemento deve ser focável e que pode ser acessado através da navegação sequencial do teclado. O valor atribuído será a posição dentro da sequência;
[tabindex="-1"] (valor negativo): o elemento deve ser focável, mas não será acessível por meio da navegação sequencial, ou seja, não será acessado através da tecla tab;
[tabindex="0"] (zero): o elemento deve ser focável, poderá ser acessado através da navegação sequencial, mas sua posição será definida pela ordem em que se encontra no código-fonte;

💬 Descritivos em imagens com `[alt]`

Imagens são ilustrativas e esclarecedoras por si só, certo? (não entraremos no assunto obras de arte, no entanto).
Claro, se você puder vê-las. Mas muita gente por aí não pode.

O atributo alt existe desde sempre no HTML e serve para fornecermos a descrição de uma mídia visual presente no documento.

<img src="https://http.cat/202" alt="Gatinho comendo de boca aberta">

Além de ser valiosa para leitores de tela, o atributo alt é utilizado quando, por algum motivo, uma imagem não foi carregada na página. Pode ser um problema de conexão, o servidor na qual ela foi hospedada ficou fora do ar ou o usuário simplesmente desabilitou-as para ter uma experiência mais rápida.

SVGs semânticos com `[title]` e `[desc]`

A internet não é composta só de imagens. Na verdade, uma das grandes evoluções da web foi o surgimento do SVG Scalable Vector Graphics, tornando-a mais adaptável e leve.

Assim como imagens, o SVG possui atributos que aumentam a acessibilidade de nossos vetores escaláveis: [title] e [desc]. Elas servem para informar um título ao nosso vetor e uma descrição mais detalhada do mesmo.

<symbol id="icon-close" viewBox="0 26 100 48">
    <title>Título do ícone</title>
    <desc>Descritivo do ícone</desc>
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>

Legendas e subtítulos com `<track>`

Com o HTML5 também é possível inserir arquivos de áudio e vídeo de forma nativa, sem a necessidade de plugins, utilizando as tags: <video> e <audio>.
Além disso, ele também disponibiliza a tag <track> que incorpora legendas e subtítulos em nosso arquivo de mídia, no formato WebVTT (Web Video Text Tracks Format).

Fala sério, a internet é demais.

<video controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <track label="English Captions" kind="captions" srclang="eN" src="captions.vtt" default>
  <track label="Subtitulos en español" kind="captions" srclang="es" src="subs.vtt">
</video>

♿️ WAI-ARIA

A WAI-ARIA Especificação dos Aplicativos Ricos Acessíveis de Internet da Iniciativa para Acessibilidade da Web é um consórcio internacional, que define formas de tornar o conteúdo da web mais acessível para deficientes.

Com a criação dessa especificação, ganhamos mais uma ferramenta dentro de nosso arsenal, sendo elas as chamadas ARIA roles.

Roles são alguns bytes de código adicionais ao nosso código padrão, que não machucam, nem mesmo aumentam o tempo de desenvolvimento, mas que em contrapartida trazem informações preciosas para leitores de tela.

Digamos que por falta de conhecimento (ou bom senso), alguém crie um botão desta maneira:

<div>I'm a button!</div>

Visualmente, isso não nos diz nada, certo? E adivinhem: para os leitores de tela e navegadores também não. A única evidência de que se trata de um botão é seu próprio texto, que em muitos casos, pode ser insuficiente.

<div role="button">I'm a button!</div>

Os roles são atributos incorporados no próprio HTML que servem para explicitar o tipo de conteúdo que está sendo fornecido para leitores de tela. Existem diversos tipos de roles e na sessão sobre semântica podemos ver dois exemplos interessantes: banner e content-info.

Roles devem ser incorporados em elementos que não fornecessem uma semântica padrão. Eles são redundantes em elementos nativos, como <button> e <checkbox>, pois os mesmos já possuem as características que seriam fornecidas pelo atributo.

Talvez esse exemplo não pareça ser muito eficiente, afinal de contas, já existe um elemento button que fornece essa semântica para nós.

Vamos dar uma olhada num conhecido framework: nosso querido boostrap.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Grupo de itens colapsável #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Eu sou um body! #1
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Grupo de itens colapsável #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Eu sou um body! #2
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">
          Grupo de itens colapsável #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Eu sou um body!#3
      </div>
    </div>
  </div>
</div>

Esse é o código padrão para inserir um accordion em nossa página. Ele é composto inteiramente por elementos div e possui um comportamento complexo. Para descrever tal comportamento em leitores de tela e tecnologias assistivas, são utilizadas as seguintes roles:

aria-labelledby: informa o ID do elemento correspondente ao rótulo;
aria-expanded: informa o estado atual do elemento colapsável;
aria-controls: informa qual o elemento sendo atingido pelo controle;

A WAI-ARIA possui uma vasta documentação para implementação em diversos tipos de casos. Neste repositório do github podemos encontrar um WAI-ARIA cheatseet com todas as roles possíveis para se utilizar durante o desenvolvimento.

🚥 Precisamos falar sobre Daltonismo

Cores são muito bonitas e esclarecedoras, para quem pode enxergá-las. Mas alguns simplesmente não podem (não da maneira na qual enxergamos). Venho falar dos daltônicos, que compõem 8,5% da população masculina mundial e também precisam que a internet seja desenvolvida para eles!

Uma diretriz que resume a acessibilidade para daltônicos:

A cor não é usada como o único meio visual de transmissão de informações (Nível A) - Web Content Accessibility Guidelines 2.0

Legenda: Imagem com a mensagem “Razões pelas quais eu odeio gráfico de pizza”, e abaixo um gráfico de pizza com a legenda “porque eu sou daltônico”

Segue algumas diretrizes:

Não dependa apenas de cores para informar algum dado ao usuário. Utilize de rótulos e ícones para complementar a informação:

Utilize mensagens de erro para transmitir feedback ao usuário:

Não use apenas cores para diferenciar um link do resto do texto. Por padrão, o elemento <a> possui a propriedade text-decoration:underline, que define um sublinhado para hyperlinks e torna sua identificação independente da cor.

Legenda: Do lado esquerdo uma página com o link destacado em azul e do lado direito a mesma página em preto e branco, demonstrando que a cor não serve mais como um indicativo e que a informação de que é um hyperlink se perde.

Existe muito mais sobre acessibilidade e daltonismo. Utilizei alguns exemplos do artigo Acessibilidade para Daltônicos e recomendo fortemente sua leitura.

🔗 Conteúdo

Não é atoa que SEO e semântica são praticamente bffs. Um código semântico e uma linguagem de fácil entendimento são essenciais para uma boa acessibilidade. E usabilidade. E SEO. E tudo.

A verdade é que: seres humanos são extremamente inteligentes, possuem uma alta capacidade cognitiva, mas não gostam de pensar muito e odeiam linguagens complexas.

Se comunicar de maneira simples faz toda a diferença quando não sabemos quem é o usuário - e dada as infinitas possibilidades - devemos tornar nosso conteúdo acessível, pensando que nosso avô de 86 anos pode estar acessando um site nosso.

Abreviações

Caso seja possível, evite-as. Caso não seja, explique seu significado. Aplico essa premissa enquanto escrevo este artigo.
Algumas maneiras de fazer isto:

Explicar o significado da abreviação logo após usá-la pela primeira vez. Na sessão sobre semãntica, pode notar que cito o HTML pela primeira vez e logo em seguida lhe entrego o significado da informação. O resultado será parecido com este: HTML (Linguagem de Marcação de Hipertexto)
Linkar a abreviação à uma página que explique sobre o conteúdo ou mesmo adicionar notas no rodapé, como nos livros!. Exemplo: HTML
Utilizar a tag <abbr> e aplicarmos em seu atributo [title]a explicação referente à abreviação: Exemplo: HTML

📝 Formulários

Acessibilidade em formulários é um tópico sensível. Afinal, se um usuário não sabe com exatidão o que precisa ser inputado, como ele irá fornecer qualquer tipo de informação ao nosso site?

Pegaremos como exemplo um formulário de login que pede usuário e senha.

Qual das opções torna a ação do usuário mais clara? Tenho certeza que você respondeu a segunda. Ela diz, implicitamente: sei que você pode ser meio leigo, logo estou me adiantando.

Nosso site precisa ser um guia para o mais iniciante da internet. Se uma criança de 5 anos conseguir navegar por ele, estamos fazendo um bom trabalho.

Segue algumas dicas para melhorar a acessibilidade de seus formulários:

Organização de formulários com `<fieldset>`, `<legend>` e `<optgroup>`

Imagine uma página de cadastro onde o usuário precisa fornecer informações pessoais, de cobrança e entrega e de login para acessar sua conta. Agora imagine que esse formulário não tivesse nenhum tipo de separação, sendo apenas uma linguiça gigante.

O <fieldset>serve para dividir nosso formulário em seções, tornando mais fácil a identificação dos diferentes tipos de dado que o usuário precisa fornecer. Sendo assim, teriamos um <fieldset> para cada bloco de informação e usariamos o <legend> para fornecer um título para cada uma dessas sessões.

Também temos o elemento <optgroup>, utilizado para agrupar elementos <option>por categorias de dentro de um select.

<select>
  <optgroup label="Front-end">
    <option>HTML5</option>
    <option>CSS3</option>
    <option>Javascript</option>
  </optgroup> 
  <optgroup label="Back-end">
    <option>Python</option>
    <option>Node.JS</option>
    <option>Ruby on Rails</option>
  </optgroup>
</select>

Fornecendo orientações com `[placeholder]`

O atributo [placeholder] faz exatamente o que vimos no exemplo anterior. Ele fornece uma instrução ao usuário sobre que tipo de informação ele precisa preencher. Pode ser aplicado de algumas formas:

modo imperativo: Insira sua usuário...;
fornecer uma máscara padrão: exemplo@seudominio.com.br ou 00/00/0000;
sugerir através de respostas comuns: Google, indicação de amigos, anúncios...

Fornecendo rótulos com `<label>` e `[aria-labelledby]`

A tag <label> serve para relacionar um elemento com um rótulo, através do atributo [for] e passando o ID do elemento.
Outra forma de referenciar um rótulo ao elemento é através do atributo [aria-labelledby], inserido na própria tag de formulário.

<label for="password">Senha:</label>
<input name="password" type="password" placeholder="Insira sua senha..." aria-labelledby="password" />

Dando feedback de interação com `:hover` e `:focus`

Fornecer um feedback ao usuário é cruciadl para usabilidade e acessibilidade. Uma cor de borda diferenciada enquanto o usuário digita a informação é suficiente para que ele não se perca durante a navegação de seu site.

🔧 Ferramentas para desenvolvedores

Apresentarei algumas ferramentas que auxiliarão você na hora do desenvolvimento de sites mais acessíveis:

tota11y: fornece informações a respeito de violações de acessibilidade que seu documento possui;
goodUI: não é um projeto sobre acessibilidade e sim sobre usabilidade. Sua leitura é importante e seguir as diretivas indicadas antes de desenvolver interfaces para seu projeto também. Assim, teremos uma internet mais padronizada e familiar aos nossos usuários;
webDevChecklist: checklist para desenvolvimento de projetos web. Além de acessibilidade, possui outros tópicos, como: performance, semântica, boas práticas e outros;
webDevChecklist for chrome: extensão da ferramenta acima para google chrome;

Conclusão

Estou longe de abordar todos os assuntos referentes a acessibilidade web. É um campo de estudo abrangente e crucial para uma web mais inclusa.

Espero ter fornecido com este artigo um caminho das pedras de como e porque começar.

Leituras adicionais

Web accessibility for developers: acessibilidade para desenvolvedores web;
Web Content Accessibility Guidelines: guia oficial da W3C para desenvolvimento de documentos acessíveis;
WAI-ARIA no MDN: documentação do mozilla sobre WAI-ARIA;
Acessibilidade na Google: documentação de acessibilidade da Google.

Forem: Geovana Ribeiro(AKA Raveenita)

Garantindo a proteção de dados financeiros com PCI-DSS

O que é a certificação PCI DSS?

Todas a empresas precisam realizar essa certificação?

Quais são os requisitos para a certificação PCI DSS?

Como posso certificar minha empresa?

Sobrevivência para devs cansados - Parte 1

Outros artigos desta série:

🏕️ Introdução

🎖️A Sigla ESAON

💻 ESAON orientada a devs cansados

[E]stacionar

[S]air

[A]limentar

[O]rientar

[N]avegar

Conclusão

💻 Configurando o Ubuntu para acessar a deep web

Instalando o tor e proxychains

Configurando o arquivo proxychains.conf

Configurando o navegador

Google Chrome

Mozilla Firefox

Acessando a deep web

🚀The one secret of web performance

Why are you looking for performance?

What is performance?

Acessibilidade: O guia para uma web universal

📗 Código semântico

Listas ordenadas e não-ordenadas

Idioma do documento com [lang]

Gerenciando visibilidade com [hidden]

Navegação sequencial pelo teclado com [tabindex]

💬 Descritivos em imagens com [alt]

SVGs semânticos com [title] e [desc]

Legendas e subtítulos com <track>

♿️ WAI-ARIA

🚥 Precisamos falar sobre Daltonismo

🔗 Conteúdo

Abreviações

📝 Formulários

Organização de formulários com <fieldset>, <legend> e <optgroup>

Fornecendo orientações com [placeholder]

Fornecendo rótulos com <label> e [aria-labelledby]

Dando feedback de interação com :hover e :focus

🔧 Ferramentas para desenvolvedores

Conclusão

Leituras adicionais

Idioma do documento com `[lang]`

Gerenciando visibilidade com `[hidden]`

Navegação sequencial pelo teclado com `[tabindex]`

💬 Descritivos em imagens com `[alt]`

SVGs semânticos com `[title]` e `[desc]`

Legendas e subtítulos com `<track>`

Organização de formulários com `<fieldset>`, `<legend>` e `<optgroup>`

Fornecendo orientações com `[placeholder]`

Fornecendo rótulos com `<label>` e `[aria-labelledby]`

Dando feedback de interação com `:hover` e `:focus`