DEV Community: Matheus Oliveira

Introdução à Acessibilidade Web

Matheus Oliveira — Wed, 09 Nov 2022 21:13:36 +0000

Acessibilidade na web significa que pessoas com deficiência podem usar a web. Mais especificamente, a acessibilidade na web significa que pessoas com deficiência podem perceber, entender, navegar, interagir e contribuir para a web. E mais. Ela também beneficia outras pessoas, incluindo pessoas idosas com capacidades em mudança devido ao envelhecimento - World Wide Web Consortium

Existe uma importância enorme em projetar aplicações que sirvam para todos, pois a Web está em constante progresso no meio social. Torna-se impossível de achar um campo da atividade humana em que não haja influência da Web. Hoje a utilizamos para nos conectarmos com outras pessoas, para aprendermos novos conhecimentos, saúde etc. Para a W3C, a acessibilidade sustenta a inclusão social de pessoas com deficiência, idosas, residentes em áreas rurais, em países em desenvolvimento, entre outras. Logo, torna-se evidente que seja um tema que mereça uma ampla atenção em seu estudo.

Design Universal

O Design Universal é o fundamento teórico mais relevante quando tratamos de acessibilidade. Esse fundamento é o desenvolvimento de produtos e ambientes para serem usáveis por todas as pessoas, na maior extensão possível, sem a necessidade de adaptação ou design especializado.

O Design Universal possui sete princípios:

Equiparação nas possibilidades de uso: pode ser utilizado por qualquer usuário em condições equivalentes.
Flexibilidade de uso: atende a uma ampla gama de indivíduos, preferências e habilidades individuais.
Uso simples e intuitivo: fácil de compreender, independentemente da experiência do usuário, de seus conhecimentos, aptidões linguísticas ou nível de concentração.
Informação perceptível: fornece de forma eficaz a informação necessária, quaisquer que sejam as condições ambientais/físicas existentes ou as capacidades sensoriais do usuário.
Tolerância ao erro: minimiza riscos e consequências negativas decorrentes de ações acidentais ou involuntárias. 
Mínimo esforço físico: pode ser utilizado de forma eficiente e confortável, com um mínimo de fadiga.
Dimensão e espaço para uso e interação: espaço e dimensão adequados para a interação, o manuseio e a utilização, independentemente da estatura, da mobilidade ou da postura do usuário.

Dica: Para garantir que sua aplicação está seguindo o caminho de uma boa aplicação acessível, você pode acessar ir na aba de propriedades de acessibilidade por meio da inspeção da sua página, direto do seu navegador. É possível simular e checar erros de acessibilidade no painel.

WAI-ARIA

Para melhorar a acessibilidade de uma aplicação é possível utilizar WAI-ARIA Web Accessibility Initiative - Accessible Rich Internet Applications, uma especificação criada pela W3C, que permite que você adicione mais semântica em sua aplicação, fazendo que os navegadores ou tecnologias assistivas consigam reconhecer melhor os seus elementos e permitir o usuário saber o que está acontecendo em sua aplicação.

Essa é uma postagem introdutória sobre acessibilidade, portanto uma explicação mais aprofundada sobre WAI-ARIA será criada em um outro momento. Me siga para que você não perca futuras atualizações.

Referência
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics
https://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-web-fasciculo-I.html

HTML Semântico: DIV nunca mais.

Matheus Oliveira — Wed, 09 Nov 2022 02:30:40 +0000

<div>
  <div>
    <div>
        Eu não possuo valor semântico!
    </div>
  </div>
</div>

Essa postagem tem o intuito de discorrer sobre a reflexão do que é HTML semântico e o motivo por qual você deveria começar adotá-lo. O título dá uma sugestão radical de que você não deve nunca mais usar DIVs no seu documento HTML, mas irei me contradizer: a missão é usar cada vez menos e de maneira consciente.

Em primeira instância, é importante sabermos o significado de semântica. Na linguística ela possui o seguinte significado:

Entretanto, quando falamos de semântica em HTML estamos interessados em saber que finalidade ou função um elemento HTML possui. Por exemplo, o <h1> é um elemento semântico, que fornece um título, ou se preferir "um cabeçalho de nível superior". Essa é sua finalidade, sua função. Você poderia fazer qualquer outro elemento se parecer com um título, como por exemplo:

<span style="font-size: 32px; margin: 21px 0;">Título</span> <! – Não Semântico –>

Porém, o elemento <span> é considerado semânticamente neutro, ele não possui um significado, logo não expressa nenhum valor para o navegador. Assim como o <span>, o elemento <div> que costuma ser intensamente usado, também não possui um valor semântico.

É importante que você se acostume a utilizar elementos semânticos, pois o bom desempenho de sua página depende desse fator também. Além do mais que a falta de elementos semânticos causa problemas de acessibilidade. Tornar sua página adaptativa e informativa é crucial para que pessoas com deficiência consigam navegar por ele.

O poder da WEB está em sua universalidade — Tim Berners-Lee

Ademais, um documento HTML com valor semântico forte possui um desempenho melhor em otimização para mecanismos de busca (SEO) e se tornam mais fáceis de manter!

Na minha postagem anterior você consegue achar elementos para substituir o acúmulo de divs que você possuir em seu documento HTML.

Estrutura Básica do HTML

Uma dica para compreender HTML semântico: As tags são responsáveis para dizer ao seu navegador o que ele está renderizando. É um texto? Um título? Um parágrafo? Pergunte a si mesmo "quais elementos melhor descrevem/representam os dados que vou preencher".

Referência
https://developer.mozilla.org/pt-BR/docs/Glossary/Semantics
https://medium.com/adalab/the-importance-of-semantic-html-78e74fb75ff0

Estrutura Básica do HTML

Matheus Oliveira — Wed, 02 Nov 2022 20:02:20 +0000

O documento HTML possui algumas tags que são consideradas como tags estruturais, importantes para que seu HTML funcione e haja um bom desempenho com o navegador. Iremos passar por algumas definições e convenções básicas.

Entendendo as tags

O HTML5 há em torno 8 grupos de tags:

estruturais
metadados
formulário
formatação
lista
tabela
script
conteúdo embutido

As tags são formadas por uma estrutura única, iniciam com o sinal de "menor que" (<) e se encerram com o sinal de "maior que" (>) <h1>Olá!</h1>. É importante destacar que há tags que é opcional haver uma tag de fechamento para si, elas são chamadas de optional closing tag <html>, enquanto há tags que podem fechar em si mesmas ou haver uma tag de fechamento, as self closing tags <br />

As tags podem ser definidas como block-level ou inline. Respectivamente, uma tag block-level ocupa toda a largura do seu elemento pai, criando assim um bloco, enquanto a tag inline ela se posiciona em linha. sem alterar sua largura.

Tags Estruturais Básicas

Existe ao menos 19 tags estruturais no HTML5, mas nem todas elas são realmente utilizadas. Você pode tentar decorá-las, mas não há muita necessidade de depositar tanta energia assim. As mais importantes que você deveria saber além das <html>, <head>, <body> são as:

cabeçalho: <header>
barra de navegação: <nav>
conteúdo principal: <main>, com elementros filhos representados por <article>, <section>, <div>
barra do canto: <aside>; geralmente inserido dentro do elemento <main>
rodapé: <footer>

Vamos para suas definições

<header> Representa um conteúdo introdutório. Pode conter elementos de título, mas também logos, uma barra de pesquisa, nome do autor, etc.
<nav> Representa uma seção da página cujo objetivo é prover navegação de links. Podendo ser links internos (dentro da página) ou externos (fora da página)
<main> Reresenta o conteúdo dominante dentro do <body>. Consiste no elemento que está diretamente relacionado com o tópico central do site.
<article> Representa uma composição independente, destribuitiva e reusável. Exemplos: uma postagem, um artigo, um comentário de um usuário.
<section> Representa uma seção genérica de um site. Seções devem sempre possuir um título (heading), com poucas exceções.
<div> Elemento genérico. Não possui nenhum efeito no conteúdo ou layout até que seja estilizado com algum CSS. Geralmente usado com flexbox.
<aside> Representa uma porção do documento que está indiretamente relacionado com o conteúdo principal da página. Geralmente são representadas por barras laterais.
<footer> Representa um rodapé. Normalmente possui informação sobre o autor, dados de copyright e links para documentos relacionados.

SGML e sua relação com HTML

Matheus Oliveira — Wed, 02 Nov 2022 00:39:43 +0000

Tim Berners-Lee teve um grande desafio para tornar sua ideia sobre a Web e o HTML aceita no mundo. Nessa postagem você aprenderá o porquê de tratarmos de tags quando vamos escrever em HTML. Siga comigo e não se esqueça de me seguir caso goste do conteúdo.

O SGML (Standard Generalized Markup Language) era a linguagem de marcação preferida dentro da comunidade de documentação. O SGML é uma metalinguagem que é usada como base para a criação de outras linguagens. Para a criação de tags era necessário um DTD (Document Type Definition) que criava instruções para o SGML, assim era possível definir uma gramática. Era uma linguagem muito utilizada na CERN, empresa que Berners-Lee trabalhava, logo, ele viu isso como uma vantagem, pois poderia convencer seus colegas de adotar sua ideia.

A linguagem, para Tim, havia muitos detalhes estranhos e de difícil compreensão por parte das pessoas, apesar disso, ele viu como uma boa oportunidade. Pois, ela utilizava um sistema único para a criação de instruções AKA "tags", quais eram colocar palavras entre o sinal de menor que (<) e sinal de maior que (>) <main>Exemplo</main> para denotar o conteúdo principal de uma página ou cabeçalho, por exemplo. Levando isso em consideração, ele decidiu criar o HTML para se parecer com o SGML. Tim só não esperava que as pessoas aprenderiam tão facilmente as tags e escreveriam seus próprios documentos em HTML.

A diferença entre o SGML e HTML é que o HTML é uma aplicação do SGML, enquanto o SGML é usada para a criação de linguagens de marcação para documentos, um metadata.

Referência
Berners-Lee, Tim, Weaving The Web, 1999
UFF, Instituto de Computação, Linguagens de Especificação

Tim Berners-Lee e a criação da World Wide Web

Matheus Oliveira — Mon, 31 Oct 2022 22:54:59 +0000

Se você é um desenvolvedor web, talvez seja importante você saber a história de Tim Berners-Lee e um pouco de sua jornada para a criação da famosa WWW World Wide Web . Essa postagem tem o intuito de introduzir pontos importantes sobre a criação da Web e como toda a ideia surgiu. Portanto, pegue um biscoito, sirva-se um café e venha comigo para essa leitura.

Por volta dos anos 1950, os pais de Tim Berners-Lee, quais eram matemáticos, estavam alegres com a idéia de que, em princípio, uma pessoa poderia programar um computador para realizar qualquer tarefa e também sabiam que computadores eram ótimos em organização lógica e processamento, mas não em associações aleatórias. Após voltar da escola, Berners-Lee encontrou seu pai tentando achar pistas de como tornar um computador intuitivo, apto a completar conexões como o cérebro faz. Eles discutiram sobre. mas acabou não dando em nada. Porém, Tim manteve a ideia em sua cabeça por anos, até mesmo em 1976, quando se graduou em física na Universidade de Oxford.

Computadores poderiam se tornar muito poderosos se programados para conectar informações desconexas Tim constantemente pensava.

Então, em 1980, conseguiu uma vaga como consultor de software na CERN European Particle Physics Laboratory em Genebra, Suiça. Enquire, a primeira versão da Web, foi programada para ajudá-lo a lembrar das diversas pessoas, computadores e projetos no laboratório. O nome do projeto foi baseado no livro Enquire Within Upon Everything, livro vitoriano que abordava um portal para o mundo da informação, onde você poderia aprender sobre tudo.

Suponha que todas as informações guardadas em computadores por todo canto estivessem ligadas, eu pensei. Suponha que eu pudesse programar meu computador para criar um espaço onde tudo pudesse estar ligado a qualquer coisa. Haveria um espaço único e global de informações._

Tim-Berners-Lee começou a tentar convencer as pessoas na sua empresa a usar o Enquire, todos achavam uma boa idéia, porém nunca usavam. Até que, após sair da sua vaga na CERN, o disco que guardava o projeto foi perdido. Isso não o desmotivou de começar novamente após voltar para a CERN.

Muitas pessoas, segundo Tim, acreditam que ele simplesmente teve um momento onde a idéia sobre a criação facilmente surgiu em sua cabeça, porém, é necessário entender que foi um processo contínuo e de muita colaboração. Ted Nelson, por exemplo, foi o inventor do que hoje chamamos de hypertext. Doug Engelbert, inventou o mouse e demonstrou usando email eletrônico e hypertext links. Com a criação da internet, havia o ambiente perfeito para a criação da Web. Berners-Lee só tinha que juntar todos esses elementos.

Em março de 1989, ele escreveu uma proposta para validar a Web na CERN. Nada aconteceu. Ele continuou trabalhando. Em maio de 1990 ele enviou novamente. Foi ignorado. Ele continuou trabalhando e tentando convencer todos. Até que ele conheceu Robert Cailliau e juntos trabalharam aperfeiçoando a Web. Escreveram mais uma proposta, mas foi ignorada.

Em março de 1991, Louisa Addis, que atuava como bibliotecária, achou toda a Web fantástica e encorajou seus colegas a subirem o primeiro servidor web da Europa. Após um tempo, a Web foi construindo uma comunidade, mas foi apenas após uma conferência sobre a web em San Antonio, nos Estados Unidos, que todos aderiram a ideia.

Na mesma conferência, dois anos depois, na mesma parede, todos projetos teriam algo a ver com a Web.

Referência
Berners-Lee, Tim, Weaving The Web, 1999