Guia Dev
6.94K subscribers
3.73K photos
233 videos
7 files
1.52K links
< ! - - Guia para Desenvolvedores @FrontEndBR e @BackendBrasil. - - >
✔️ Dicas
✔️ Downloads
✔️ Tutoriais
✔️ Vagas e muito mais.

Parceiros:
👉🏻 https://telegra.ph/Parceiros-Guia-Dev-02-04

PARCERIA:
@roberth_p
Download Telegram
Guia Dev
Photo
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