Web Standards + acessibilidade em (quase) 5min

Você com certeza já ouviu esse termo — mas, sabe o real significado dele?

O termo Web Standards deve ser um mantra para todo desenvolvedor front-end.

Utilize corretamente as linguagens e você terá um resultado final com qualidade, simplicidade e acessibilidade.

1 — Formulários

Labels + Inputs

<label for="form_name">Nome</label>
<input type="text" id="form_name" name="form_name" />

Submit

<input type="submit" id="form_submit" name="form_submit" value="Enviar" /><!-- ou --><button type="submit" id="form_submit" name="form_submit">Enviar</button>

2 — Heading Tags

3 — Listas

Apesar de visualmente o conteúdo estar ajeitado e até mesmo validado por um designer (ou um PM/PO), o código estará verdadeiramente correto se você utilizar a marcação correta.

4 — Imagens

<img src="imagem.jpg" alt="" />

5 — Emojis

<span role="img" aria-label="bandeira do Brasil">🇧🇷</span>

6 — ARIA

Os atributos ARIA podem (e devem) ser utilizados com as definições do HTML5!

Human, front-end developer, amateur musician, writer and speaker; problem solver. https://jlozovei.dev

Human, front-end developer, amateur musician, writer and speaker; problem solver. https://jlozovei.dev