#PraCegoLer #PraCegoVer
Uma imagem com fundo preto simulando um editor de código, mostrando textos e exemplos HTML de como fazer os links serem mais descritivos para usuários de leitores de tela.

Mostra um link HTML com pouca informação do tipo "Leia mais" sem nenhum texto adicional para descerver o link.

Depois mostra uma boa prática para prover mais descrição no link inserindo uma tag "span" com uma classe que não deixa a informação visível, mas disponível para leitores de tela.

Além de colocar um exemplo de código CSS (recomendado) para esconder o elemento.

E você costuma utilizar <div> para tudo?
Ele é uma mão na roda, mas como um elemento genérico, é mais recomendado utilizar as tags que fazem sentido para aquele contexto.

#html5 #htmlmoderno #semantica #html

#PraCegoLer #PraCegoVer
Uma imagem com fundo preto simulando um editor de código, mostrando textos e exemplos de como utilizar da melhor maneira o elemento div.

Mostra também que no html5 surgiram diversos elementos como a tag article, section, aside, header, footer e etc.

Ao invés de utilizar a tag div com a class article, seria mais interessante usar a tag article para dar mais semântica no código.

E com dicas tipo:
Se seu bloco de elementos não tiver nenhum elemento semântico para usar, então utilize div.

A div pode ser usado criar um "wrapper" para seu código

E Usar em algumas tags por questão de suporte, por exemplo a tag main que tem suporte no internet explorer somente a partir da versão 12. Recomenda-se também utilizar o atributo role com o valor main para que mantenha o mapeamento de Landmarks da ARIA.

Parece besteira, mas tem muito mais para falar sobre o button ainda.

#html5 #htmlmoderno #semantica #html #button

#PraCegoLer #PraCegoVer
Uma imagem com fundo preto simulando um editor de código, mostrando textos e exemplos de como utilizar o element button (tag).

Mostra exemplos que funciona, porém que devem ser evitados quando possível de como criar buttons através de outros elementos como input do tipo submit, div com a landmark role=button e link sem href com a landmark role=button, tabindex e um atributo aria chamado aria-pressed que informa a alternância do botão quando pressionado.

E também utilizando o elemento button para mostrar que não precisa de tanta configuração e que tem a semântica e acessibilidade de maneira nativa.

Observações:
O elemento button sem o atributo type, assume o type automaticamente como submit;
Os types são importantes para definir sua ação e os disponíveis são (button, reset e submit)

button = Sem comportamento padrão (Muito usado fora dos forms)
reset = Quando usado em forms, redefine para valores iniciais
submit = Envia dados (Normalmente encontrado em forms)

E para deixar mais acessível usar "aria-label" ou "aria-labelledby" quando o <button> não tiver uma descrição (usado normalmente quando utilizamos ícones), essa abordagem atende a técnica (ARIA14) da WCAG 2.0

Existem diversos elementos semânticos inline que podem ser usados no lugar do <span> quase sempre.

https://developer.mozilla.org/pt-BR/docs/Web/HTML/Inline_elemente

#htmlmoderno #html5 #semantica #acessibilidade #a11y

#PraCegoLer #PraCegoVer
Uma imagem com fundo preto simulando um editor de código, mostrando textos e exemplos de que as vezes existem um elemento semântico inline para ser usado no lugar do span.

O não traz nenhum sentido ao conteúdo interno e nenhum
estilo, com isso muitos devs cometem erros usando esse
elemento de maneira inadequada.

Mostra um exemplo a ser evitado com o span em pedaços de texto usando classes para estilizar visualmente.

E mostra um exemplo utilizando o elemento strong e o elemento em, para usar semântica e acessibilidade que cada um desses elementos tem nativamente (Uma coisa leva a outra! A semântica leva a acessibilidade)

Algumas dicas extras são:
1º Sempre opte por elementos semânticos;
2º Use span quando não for necessário dar sentido ao conteúdo interno ou que não tenha outra tag para o lugar;
3º Se quiser estilizar, pode atribuir normalmente uma "class" e customizar

Facilitar a vida do usuário é nossa missão e simplificar os forms para os dispositivos móveis não é tão complicado assim.

#FingerFriendly #htmlmoderno #whatwg #usabilidade #ux

#PraCegoLer #PraCegoVer
Uma imagem com fundo preto simulando um editor de código, mostrando textos e exemplos de que podemos informar para os dispositivos qual tipo de dado será inserido para ser o dispositivo mostrar o teclado da melhor forma para uso.

Nesse caso estamos informando que o input só receberá números e com isso indicamos através do atributo inputmode=numeric que o dispositivo abra o teclado numérico do smartphone ou tablet.

É especificação da WhatWG e não é ainda um HTML válido.

E o suporte ainda se limita a família webkit com o Chrome e Opera, no Firefox somente habilitando a flag dom.forms.inputmode.