Botões com `cursor: pointer;` x Acessibilidade

[frontendbr]

Botões com `cursor: pointer;` x Acessibilidade

[deividmarques]

Lembrando que em um link é importante utilizar o atributo role="", bem lembrado pelo @wgcdaflita .

Por exemplo <a href="" role="button">um botão</a> ou sendo um menu <a href="" role="menuitem"> um link de menu</a> isso ajuda aos leitores de tela a identificarem que tipo de link é esse, dando semântica a tag.

Pegando carona nisso, o atributo é bem rico, da pra se aplicar em tab, dropdown, e em outros.

Para mais detalhes: https://www.w3.org/TR/wai-aria/usage

[reinaldoferraz]

Para acessibilidade existem dois pontos:

Pessoas com baixa visão podem compreender de forma mais simples que aquilo é um elemento interativo com a mudança do cursor. Acho valido usar (até porque hoje em dia nem todo botão se parece com botão).

Para usuários de leitor de tela isso não impacta. O que importa é que o foco seja possível de se feito via teclado.

[felipefialho]

Eu acho que faz sentido, apesar de nunca ter usado, dificilmente o button não será pointer.

Normalmente adiciono direto na classe .btn.

[evansantos]

Vou adicionar um post que li hoje e achei interessante compartilhar Buttons shouldn’t have a hand cursor by Adam Silver

[williamgcd]

Sobre a acessibilidade, utilizar o cursor-pointer pouco afeta os usuários.

A maioria das tecnologias assistivas não usam o mouse e quando usam, eles
acabam passando o mesmo peso de usabilidade que os Mouses comuns, nesse
cenário.

O que impacta mais é utilizar os atributos role="" corretos para os botões
e links.

Eu acho válido aplicar para botões essa propriedade. 👍🏻

Em quinta-feira, 7 de julho de 2016, Bernardo Dias [email protected]
escreveu:

Concordo com o @felipeuntill https://github.com/felipeuntill, acho que
uma mãozinha com um dedo remete ao gesto de clique/touch, vou mais por essa
linha pra representar qualquer coisa que possa ser interagida dessa forma.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#212 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AAuV6aMDVWqvP_-qe_Sd7SoAbyGn4PiYks5qTVzbgaJpZM4JHHfs
.

William Daflita

[camilatigre]

Não vejo por que não também. Concordo bastante com o comentário JasonAtco na discussão

I do definitely think that buttons should have cursor: pointer; you'll never have a button that shouldn't be clicked (aside from :disabled, and the cursor is a good indication of its action

Pensando sobre isso, alguém sabe se isso tem algum impacto em acessibilidade além de usabilidade?

[felipeuntill]

Considerando o fator semântico, a afirmação de que o cursor deveria ser somente atribuído a links é correta mas trazendo para o mundo real...
É fato que interfaces pouco intuitivas não deveriam existir mas infelizmente elas estão por ai e o cursor pointer tem sido um aliado vital para expor aos usuários quais elementos possuem uma ação.

Remover este recurso implica em uma exigência muito maior com usabilidade nos elementos acionáveis.

[bernardodiasc]

Concordo com o @felipeuntill, acho que uma mãozinha com um dedo remete ao gesto de clique/touch, vou mais por essa linha pra representar qualquer coisa que possa ser interagida dessa forma.

[deividmarques]

Pra mim faz sentido tanto botões quanto links terem o cursor: pointer, costumo usar assim.

[filipelinhares]

Obrigado pessoal. Acabei adicionando a feature - filipelinhares/ress@f8946e8 🎉

[barbier]

Olha, até que faz sentido, já que em aplicações desktop o cursor não muda em botões, mas eu acho que a mudança no cursor é mais visível para o usuário de que alguma coisa irá acontecer...

[Mendrone]

@camilatigre Pesquisei um pouco e não encontrei nenhuma referência ou pesquisa a respeito da mudança do cursor impactar ou não na acessibilidade.

Talvez o @deividmarques ou o @reinaldoferraz possam nos ajudar essa dúvida

[Carlosxell]

Eu sei que a mudança do cursor não altera a usabilidade, o que altera é o 'gatilho' visual para o usuário em aparelhos não touch...mas esses dias também estava com essa dúvida sobre o Cursor de pointer ser aquele que usamos para indicar ao usuário essa mudança que se ele clicar acontecerá algo, com isso achei essa matéria[https://www.sitepoint.com/css3-cursor-styles/] que fala sobre os vários tipos de cursores que evoluíram desde o CSS2 e até mesmo sobre a customização própria deles atualmente, o que me fez baixar uma pacote de cursores em PNG/SVG. A minha dúvida é, o que indicaria melhor um click em um botão do que o cursor pointer se fossemos mudar isso a partir desse momento...
Para drag and drop teria a 'mãozinha' segurando ou soltando o item, tem o 'not-allowed' para itens não clicáveis, mas não me vejo com outro icone que simbolize melhro a ação de click que o cursor pointer....