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
#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