DEV Community: giselylucas

O poder da semântica em aplicações Web - parte 1

giselylucas — Wed, 21 Oct 2020 21:09:45 +0000

" simulando o fechamento de uma tag HTML"/>

Um olhar sobre o HTML

Esse é um artigo baseado em uma palestra que eu fiz para o TDC de São Paulo - 2020, na Trilha Web/Front-end. O foco principal, é trazer um olhar para entender melhor o HTML e o motivo de se olhar para a semântica em aplicações Web.
Convido você a continuar a leitura e entender melhor sobre o HTML e como podemos melhor a semântica e as nossas aplicações, em diferentes aspectos.

O que é o HTML?

HTML, ou HyperText Markup Language, é uma linguagem de marcação para hiperTexto que define um significado e cria uma estrutura para conteúdos na Web. Os conteúdos criados utilizando o HTML são usados pelos navegadores para renderizar as páginas web, baseando a criação do DOM conforme as marcações definidas dentro desse conteúdo.

O HTML cria marcações no conteúdo, permitindo a definição e formatação de texto, imagens, links, dentre outros. Essas marcações são conhecidas como "elementos" ou "tags"

<html> <head> <body> <p> <a> <img> <footer> <title> <video>

Revisão rápida 💡

Uma marcação possui uma palavra chave que está entre os símbolos "<" e ">" e pode ter atributos que são características que podem modificar ou personalizar esse elemento. Podemos ter tags de abertura, fechamento e tags sem retorno (ou fechamento automático).
A diferença entre elementos de abertura/fechamento e sem retorno é que elementos sem retorno não permitem que outros elementos sejam adicionados como elementos filhos dele, mas os elementos de abertura iniciam um bloco de hierarquia e os de fechamento, finalizam o bloco aberto.
<body> abertura
   <img src="image1.jpg" /> sem retorno
</body> fechamento

A utilização correta dos elementos e estruturação dos mesmos influência diretamente na construção do DOM por parte dos navegadores. Os conteúdos gerados com HTML puramente são páginas estáticas sem estilo, para modificar o estilo e criar comportamentos utilizamos modificadores como JS e CSS.

Qual o motivo de se falar de semântica do HTML?

Poderia colocar vários motivos, mas pra mim os principais são:

Acessibilidade

Sim, isso mesmo, acessibilidade digital está muito ligada a semântica do HTML, mas por quê?

As marcações do HTML são conhecidas pelos navegadores e elas possuem um significado e comportamento pré-estabelecido, ou seja, quando utilizamos uma tag, o navegador entende qual é o significado da mesma e cria comportamentos e estilos de forma automática, para o conteúdo dessa tag, reduzindo a manipulação e modificação do DOM, que é algo muito custoso.

Acessibilidade Digital está muito ligada a desenvolver aplicações utilizando as boas práticas. Sabendo disso, muitos comportamentos e informações necessárias podem ser simplificadas utilizando apenas as tags corretas do HTML para cada tipo de conteúdo.
Por exemplo:

Podemos ampliar a área de toque de campos em formulário:

<input type="checkbox">
<label for="text-id">
  Aceito os textos e condições
</label>

Associando um elemento label a um input, os navegadores automaticamente permitem que ao usuário clicar na label, o input receba o foco/seja selecionado.

SEO

O SEO, Search Engine Optimization, é uma otimização para mecanismos de busca. O SEO possui uma série de técnicas para otimização, permitindo que os sistemas de busca consigam indexar e definir um ranking das páginas publicadas na web.
Está bem, mas o que a semântica do HTML tem a ver com o SEO?
Uma das técnicas que são utilizadas busca informações baseadas em tags, por exemplo:

Título e Meta descrição;
Heading tags;
Imagens;
URLs; Lembre-se os motores de busca não visualizam o estilo e o comportamento da sua página, ou seja, se você definiu um título apenas de forma visual, sem utilizar as tags corretas para isso, o seu título não é um título para o motor de busca, o mesmo acontece para links, imagens, dentre outros.

Você pode estar perdendo visualizações, simplemente por não possuir uma boa semântica do HTML.

Para saber mais sobre SEO, recomento o post O que é SEO? do blog da RockContent.

Código limpo

" com estrelas"/>

Narrativa
Simplificação
Fácil Manutenção
Redução de Bugs

Sim, isso mesmo, esses quatro itens podem ajudar a entender a relação entre a semântica e a codificação limpa.
Mas Gisely, HTML não é uma linguagem de programação. De fato, isso é verdade, mas podemos aproveitar algumas das definições utilizadas em programação para melhorar o desenvolvimento das nossas estruturas em HTML.

Uma delas é a narrativa da nossa página. Sim, utilizando os elementos corretos, é fácil identificar o que faz parte do cabeçalho, do rodapé, de alguma sessão específica do seu documento, e entender a estrutura e ordem que esses elementos vão aparecer na tela.

Outro item é a simplificação, eu não vou precisar utilizar muitos elementos HTML ou criar muitos comportamentos adicionais em modificadores para que o conteúdo aparece em uma determinada área da tela ou tenha um comportamento/estilo específico, aumentando a complexidade do meu código.

Um outro item importante é a manutenção, conhecendo a narrativa e a estrutura da nossa página, fica fácil fazer ajustes em pontos específicos, sem precisar daquele entendimento inicial sobre: "Onde que está aquele botão de logar?", Se eu sei que existe um bloco para o Login, eu preciso apenas ir até o bloco e fazer as modificações necessárias.

E para finalizar, a tão sonhada "Redução de Bugs" ligados a estrutura do HTML, juntando todos os itens acima é possível perceber que bugs serão reduzidos, pois alterações e até a identificação de possíveis problemas na estrutura HTML se torna mais assertiva e direta.

Não quero extender muito esse artigo, por isso vou quebrá-lo em duas partes. Na parte 2, vamos entender melhor sobre os elementos, principais utilizações e como aproveitar o máximo dos recursos do HTML em aplicações web.

Comenta o que você achou, se concorda, discorda, o que você complementaria.
Ahh e não deixe de compartilhar e curtir ;)

Um grande abraço.

Isolamento e acessibilidade digital

giselylucas — Thu, 21 May 2020 11:17:04 +0000

O que existe de comum e quais os impactos que estamos tendo.

Gostaria de propor algumas reflexões que tenho vivenciado nesse período de isolamento. Além de apresentar dicas simples e rápidas que podemos aplicar para amenizar problemas no acesso e uso de aplicações digitais. O objetivo desse artigo não é descrever de forma detalhada o que é acessibilidade digital, os diferentes grupos de usuários, quais os impactos a falta de acessibilidade promove, mas sim apresentar uma breve descrição de alguns dos problemas comuns e algumas dicas de como evitá-los.

Para contextualizar…

Enquanto escrevo esse artigo, o mundo passa por uma pandemia causada pelo COVID-19, um vírus que vem causando muitas mortes e uma forte crise nos sistemas de saúde. Governos de diferentes países buscam no isolamento social a sua melhor arma para achatar a curva de contágio e conseguir reduzir a crise na saúde, reduzindo assim o número de mortes, impactos sociais e econômicos que esse vírus vem causando, por consequência.

Isolamento social causado pela COVID-19 e a Acessibilidade Digital

Com o isolamento social, empresas estão buscando formas de se manterem vivas. E um dos meios mais atraentes e promissores é o digital. Consultas, aulas, compras, encontros, shows, publicações em redes sociais, dentre outros, estão sendo realizados através de plataformas digitais. Uma alternativa válida? Sim. Necessária? Também. Mas que nos faz refletir o seguinte: o quanto as nossas aplicações digitais são acessíveis para todas as pessoas?

De um forma muito rápida a intensidade dos acessos a sites e aplicativos aumentou e vem aumentando, mas todos estão conseguindo utilizar essas aplicações?

Impactos com a falta de Acessibilidade Digital

A acessibilidade digital está muito ligada a necessidade de garantir uma aplicação que diferentes usuários consigam usar de diferentes formas, tendo experiências semelhantes. Sabendo disso, se antes do período de isolamento social, de acordo com a pesquisa realizada em 2019 pelo MWPT - Movimento Web Para Todos e a pesquisa realizada em 2020 pelo MWPT, apenas 1% dos sites brasileiros eram acessíveis. Embora na segunda pesquisa ocorreu um aumento em relação a acessibilidade nos sites brasileiros, o percentual ainda continua baixo. Imagina o impacto que essa falta de acessibilidade não está causando durante este período de isolamento social.

Sites difíceis de navegar, contrastes baixo dificultando a localização de ícones e outros elementos dentro da página, imagens sem descrição, botões e links sem referência, rótulos de campos em formulários sem associação, textos longos com alinhamentos diferentes. Nenhum desses itens precisam de tratamentos absurdos ou de muita experiência para desenvolver, o que na verdade é preciso apenas utilizar corretamente os recursos disponíveis durante o desenvolvimento.

Vou tentar ser breve e objetiva. Para mais informações, vou deixar links de artigos e referências legais. A ideia dessas dicas não é apontar o grupo de usuários que o problema impacta diretamente, farei outros textos com esse intuito. Então vamos lá:

Contraste:

Imagem com texto

Problema	Solução

É muito comum adicionarmos imagens ao fundo e texto em cima, mas esse comportamento pode gerar uma dificuldade na leitura de textos com imagens ao fundo. Imagens no fundo de um conteúdo textual, são realmente necessárias? Se sim, podemos colocar uma tarja na área do texto, permitindo um aumento do contraste naquela sessão. Esse problema foi resolvido adicionando os seguintes estilos de css:

background: rgba(0,0,0, 0.9);
border-radius: 20px;
padding: 20px;

A recomendação da WCAG para a diferença de contraste é de 4.5:1. Podemos usar validadores online e gratuitos para garantir que as cores utilizadas possuem um bom contraste.

Imagens

Text Alternativo

Primeiro de tudo, você está usando a tag img para adicionar imagens? Então já coloca o atributo alt. Pode deixar ele vazio por enquanto. Mas sempre que você usar essa tag, o atributo alt é necessário.

<img src="sorriso.png" alt="Rosto sorrindo" >

Vamos analisar algumas situações:

A imagem possui algum significado importante para a compreensão de algum recurso/texto? Se sim, a descrição dessa informação deve ser adicionado como um valor do atributo alt, como o exemplo acima.

⚠️ Imagens informativas não devem ser adicionadas pelo CSS

A imagem possui texto, botões, ou informações importantes? Se sim, é extremamente necessário que estes elementos(texto, botões, dentre outros) estejam dentro da imagem? Se sim, vamos adicionar essas informações dentro do atributo alt. Agora se não for extremamente necessário, devemos separar estes elementos e utilizar o CSS para reposicioná-los na página?
A imagem é apenas decorativa e não acrescenta nenhuma informação a mais para o que está sendo descrito, que tal colocar ela via CSS? Mas se essa mudança for muito custosa, devemos deixar o atributo alt sem valor. Sempre que o atribute alt estiver vazio, a imagem passa a ser tratada apenas como decoração.

<img src="ceu-estrelado.jpg" alt="" >

Botões com ícone/imagem de carrinho, de telefone, redes sociais. Ele possui descrição? Não!? Então já sabe, precisamos adicionar o atributo alt dentro da tag img.

⚠️ Importante!
Você está querendo inovar e usar ícones muito diferentes para recursos já conhecidos e familiar para as pessoas? Cuidado! Muitos ícones já são familiares para as pessoas, tentar mudar o sentido desses ícones ou forçar um novo entendimento dentro da sua aplicação, pode oferecer uma experiência bem ruim para os seus usuários. Então vá com cuidado.

Botões e links

Construindo botões e links

//Problema
<div class='button' onClick='() => {}'> Botão </div>
//Solução
<button class='button' onClick='() => {}'> Botão </button>

É muito comum criar elementos interativos, como botões e links, de maneira errada. Utilizando tags que não existem para essa finalidade.
Devemos sempre dar preferência aos elementos nativos do HTML. Se vai criar um botão, use a tag button, se é um link, use a tag A.

Área de toque

Definição	Aplicação

Imagem retirada da documentação de Acessibilidade do Web Developers Google

Permitir uma boa área de toque é evitar que botões/links fiquem bem próximos. O recomendado é que cada elemento tenha no mínimo um tamanho ou espaçamento interno (padding, no CSS) total de 48dp, ou seja, cerca de 9mm. Isso permite que diferentes usuários vão conseguir interagir com aquele elemento de diferentes formas, sem correr o risco de clicar em outro elemento ou não conseguir clicar com o elemento desejado devido ao tamanho da área.
É importante também adicionar um espaçamento mínimo de 8dp entre um elemento e outro. Por exemplo: entre dois botões/links.

Links genéricos

Problema	Solução

Textos genéricos devem ser evitados: "Clique Aqui", "Saiba mais", "Leia mais", "Acesse e confira". Links genéricos são links com informações soltas, durante a navegação por teclado eles podem ter o seu sentido perdido, devido a falta de contexto e maiores informações. Como demonstra a imagem de problema.
Os links devem estar associados ao conteúdo que será redirecionado, ou seja, se é um link para comprar um produto, a imagem do produto, as informações devem estar no link. De forma que quando o usuário navegar até o link, independente da forma de navegação, será mais fácil entender qual o comportamento daquele link. Como demonstra a imagem de solução.

Ao corrigir problemas de links genéricos, muitas das vezes a área de toque acaba ficando maior. O que proporciona uma experiência ainda melhor para os usuários.

💡 Dica É importante entender a diferença entre quando usar um link e quando usar um botão.

Formulários

Campos sem rótulos associados

// Prática Ruim
<div for="idName"> Nome: </div>
<input id="idName" type="text" >

// Boa Prática
<label for="idName"> Nome: </label>
<input id="idName" type="text" >
//ou
<label>
   Nome:
   <input id="idName" type="text" >
</label>

É necessário utilizar a tag label, como nos exemplos, para associar o rótulo ao elemento input. Essa associação além de tornar possível a fácil identificação do rótulo do campo pelos diferentes usuários, também aumenta a área de toque. Como assim? O usuário não precisa clicar apenas em cima do campo para que o foco seja direcionado para ele. Se o usuário clicar no rótulo, o campo já recebe o foco.

Informar o rótulo apenas pelo placeholder

Muitas vezes escolhemos pela praticidade, o problema de escolher esse tipo de abordagem está principalmente relacionado ao esquecimento do significado do campo. O ideal é sempre ter um rótulo que continue sendo exibido, mesmo após o preenchimento.

Erros sendo reportados apenas por cores

Erros em vermelho, alertas em amarelo ou laranja, sucesso em verde. Quase uma regra básica e muito intuitiva pelos usuários. Mas será que apenas cores são suficientes para passar alertas e mensagens? Não. Não devemos passar uma informação apenas por cores, é necessário inserir algo a mais para que o usuário perceba aquela informação. Isso vale para links, botões, dentre outros.

Texto

Alinhamento de texto: O recomendado é utilizar o alinhamento a esquerda, pois é o nosso formato de leitura. Alinhamentos centralizados, a direita ou justificados, podem ser utilizados, mas com moderação. Devem conter textos pequenos e apenas para pequenos destaques.
Evite colocar textos em itálico: Assim como alinhamento, o ideal é não utilizar itálico em textos para criar a ideia de destaque. Esse tipo de formatação, dificulta a leitura de diferentes grupos de usuários. Se for extremamente necessário, utilize sempre com moderação e em pequenos trechos.
Textos longos: o ideal é sempre quebrar em parágrafos e tentar simplificar o vocabulário utilizado.
Evite textos com espaçamentos muito longos/pequenos, espaçamento longos ou pequenos podem causar dificuldades na compreensão do conteúdo.

Estas são apenas algumas dicas bem rápidas sobre como podemos melhorar e oferecer experiências melhores a diferentes usuários. São ajustes pequenos e que considero com resultados efetivos. Claro que as dicas de boas práticas para desenvolvimento de aplicações digitais para todas as pessoas são muito mais ricas.
Prometo escrever mais para compartilhar de outras formas os conhecimentos que venho aprendendo ao longo dos anos.

Abraços,
Por uma web mais inclusive e para todas as diversidades de usuários.

⚠️ Referências das Imagens e exemplos É importante dizer que as imagens que foram usadas nos exemplos de problema e solução, foram retiradas de aplicações digitais reais. E as correções foram aplicadas no navegador, utilizando apenas alterações na estrutura do HTML e CSS.

Desenvolvendo aplicações digitais acessíveis - Parte 1

giselylucas — Wed, 18 Dec 2019 20:44:33 +0000

A ideia é criar uma série de artigos que vão seguir uma ordem cronológica com o objetivo de ajudar as pessoas a desenvolverem aplicações acessíveis. Estou compartilhando o que eu tenho estudado e aprendido na prática. Então caso tenham dúvidas e sugestões de melhoria, podem me falar. 😍🤗
Então vamos lá…

Uma breve Introdução

Antes de desenvolver uma aplicação acessível é preciso entender pelo menos um pouco o que é acessibilidade e como ela impacta a vida de inúmeras pessoas. Parece até um exagero falar de "inúmeras pessoas", mas é verdade. Ainda existem várias pessoas que desconhecem o poder de aplicações digitais acessíveis, como a acessibilidade influencia na performance, usabilidade, nas boas práticas de desenvolvimento, dentre outros.

O que é Acessibilidade?

O que vem primeiro na sua cabeça quando escuta a palavra: Acessibilidade?
Deficiência? Cadeirantes? Rampas de acesso? Vagas especiais? (Se quiser deixar nos comentários, fique a vontade) 😄
Pois bem, o significado de acessibilidade vai muito além disso. Mas não se julgue se esse foi o seu primeiro pensamento, pois a acessibilidade ainda é vista como e para pessoas com deficiência.
Então, se olharmos no dicionário, por exemplo o Michaelis:

"1 Facilidade de acesso; qualidade do que é acessível.
2 Facilidade de aproximação, de procedimento ou de obtenção."

Já no dicionário da Cambridge o significado é ainda mais interessante:

"Facilidade de acesso.
Permitir a acessibilidade a todos"

As primeiras definições, dizem mais sobre garantir um espaço, recurso, produto que seja acessível a diferentes pessoas, do que propriamente específico para um determinado público. Isso me faz lembrar da ligação direta que existe entre acessibilidade e inclusão.

Acessibilidade e Inclusão

Esta imagem retrata de forma clara 4 etapas que se vistas como uma sequência, podem demonstrar um processo evolutivo ao tratar de Acessibilidade.
De uma forma breve o que seriam estas etapas:

Exclusão: quando as pessoas não podem fazer parte do meio ou espaço. Muitas vezes se dá quando não reconhecendo os direitos e necessidades de todas as pessoas, privando direta ou indiretamente a participação das pessoas com deficiências da sociedade.
Segregação: são espaços reservados separadamente e especiais para as pessoas com deficiência, onde os direitos e necessidades são diferenciados entre as pessoas com e sem deficiência. Esses espaços criam barreiras no contato social e a mostram importância da integração de todos em um mesmo espaço.
Integração: costumo dizer que é a falsa sensação de inclusão, pois as pessoas com deficiência agora podem acessar os mesmos espaços, possuem algumas necessidade e direitos atendidos, porém existem espaços exclusivos e específicos para elas. As diferenciando das demais pessoas, dentro de um mesmo espaço.
Inclusão: essa etapa traz a necessidade de aceitação e valorização da diversidade e colaboração entre as diferentes pessoas. As pessoas com e sem deficiência participam do mesmos espaços, compartilham de direitos e as suas necessidades são atendidas conforme a sua diversidade. Esta etapa exige uma maior cooperação e colaboração da sociedade para que as pessoas com deficiência participem de forma ativa desses meios.

💡 [Dica] Existe um artigo publicado na SciELO pela Maria Odete, que relata de forma clara e precisa, como a educação para pessoas com deficiência caminhou e caminha sobre essas quatro etapas. Em seu artigo: Da Exclusão à Inclusão: Concepções e Práticas, contextos e períodos históricos são descritos de forma simples e rica sobre como o período escolar passou por essas etapas. Vale a pena ler depois, para se ter exemplos reais e históricos. 😉

Sendo assim, a verdadeira inclusão é quando os espaços se tornam acessíveis de maneira natural. Ou seja, todas as pessoas possuem facilidade de acesso e a informação é passada de diferentes formas a fim de incluir as diversidades.

Entendendo isso, fica mais fácil de compreender o que é e os impactos que a acessibilidade promove.

Acessibilidade Digital

A acessibilidade digital diz mais sobre a diversidade de usuários. Isto é, os usuários são respeitados quanto a sua diferenças e características, buscando harmonizar o uso, de forma que todos possam ter condições de aproveitar as informações apresentadas pela aplicação.
Para entender a diversidade de usuários, precisamos entender sobre as limitações que existem. As limitações podem ser temporárias ou permanentes e ambas impactam diretamente a forma de acesso à informação.

Deficiências temporárias: são todas as limitações que acontecem por um período definido. Como por exemplo: você quebrou algum membro como, mão, perna, possui sensibilidade a luz e está em um ambiente muito iluminado, dentre outros.
Deficiências situacional: são todas as ocorrências que colocam uma pessoa em uma situação momentânea, não ligadas as suas atribuições físicas. Por exemplo: você está em um ambiente barulhento e precisa assistir a um vídeo; você está com o mouse quebrado e precisa acessar as aplicações pelo teclado, ou até mesmo, você prefere navegar por ele; dentre outros.
Deficiências permanentes: são de fato as deficiências permanentes. Por exemplo: visual (cegueira, baixa-visão), auditiva (surdez, perda parcial), mobilidade reduzida, cognitivas.

Se pegarmos dados sobre a quantidade de pessoas que se auto-declara como deficientes, vamos ter um número X, mas se considerarmos todas as outras limitações que não são consideradas como deficiências, mas dificultam ou tornam o acesso a informação mais complexo, esse número tende a crescer de forma absurda. Tirando assim toda a ideia de que acessibilidade é apenas para pessoas com deficiência. E o que estamos fazendo para reter essas pessoas em nossas aplicações? Parece que não é muita coisa, visto que pesquisas recentes (2019) realizadas pela Web Para Todos e a BigData Corp, mostram que menos de 1% dos sites brasileiros são acessíveis. Sim, isso mesmo, 99% dos sites não passaram nos testes de acessibilidade. Sinta o impacto.

E qual o motivo de não desenvolvermos nossas aplicações acessíveis?

Complexidade? Desconhecimento? Preguiça?

Bom eu diria que está mais para os dois últimos. Se começarmos a pensar e inserir a acessibilidade desde o começo, seria fácil notar como toda boa prática de desenvolvimento, que ela simplifica e muito o nosso desenvolvimento e produto. Nos fazendo pensar, criar, testar e corrigir uma aplicação muito melhor e que sim pode transformar vidas. Desenvolvimento com acessibilidade diz muito sobre desenvolver de forma correta as nossas aplicações. Mas isso é assunto para um próximo artigo.

Bom se eu ainda não te convenci que a presença e a falta da acessibilidade digital te impacta também, precisamos conversar um pouco 😄 topa um papo?

Até breve pessoal 😉🤗