Web Standards + acessibilidade em (quase) 5min

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

Photo by michael podger on Unsplash

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

  • <ol>
    Por definição, esse tipo de lista é indicado para listas ordenadas (Ordened Lists), onde a ordem dos itens é importante; Por exemplo, uma receita.
  • <ul>
    Listas não-ordenadas (Unordered Lists) são indicadas em casos onde a ordem dos itens não é obrigatória — por exemplo, uma linha do tempo, ou até mesmo essa lista.
  • <dl>
    Listas de definição (Definition Lists) são indicadas para conteúdos como um glossário, onde temos os pares de chaves e definições.

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

  • se a imagem faz parte do conteúdo, seja um banner ou um hero, ela obrigatoriamente deve estar dentro de uma tag <img>;
  • se a imagem é apenas um recurso visual, um ícone ou ilustração, ela pode estar como background-image.
  • falar o nome da imagem para o usuário (xpto123abc.png)
  • falar "imagem"
<img src="imagem.jpg" alt="" />

5 — Emojis

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

6 — ARIA

  • Roles
    roles, ou funções, irão definir como um elemento irá se comportar;
  • States
    states, ou estados, irão informar sobre possíveis estados do elemento — enabled, disabled, open, selected, expanded, checked…
  • Properties
    properties, ou propriedades, são informações adicionais sobre o elemento — labels, descriptions, referências…

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Julio Lozovei

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