Nem todos os botões são iguais!
Não faça da sua interface uma caixinha de surpresas! Ajude o utilizador a preparar-se para o tipo de ação que vai despoletar.
Os botões podem revelar e antecipar o tipo de ação que vai acontecer se os utilizadores os pressionarem. Isso ajuda o utilizador a preparar-se para a ação.
Dividir as ações dos botões pela sua tipologia é o objetivo deste apontamento. Não me conseguem vender que, por exemplo num Player, ou leitor multimédia, o botão para ativar a reprodução de um vídeo ou parar a reprodução de um vídeo é, em tudo, igual ao botão de voltar atrás 10 segundos. Não me parece ser difícil perceber que o primeiro botão tem 2 ações enquanto que o segundo tem apenas uma ação.
Claro, podemos simplificar, e dizer que o botão "ativar reprodução" ativa o vídeo e configura o Player para um outro estado - algo como estado de reprodução - e que no lugar do botão "ativar reprodução" está agora o botão "parar reprodução". Então não é um botão com 2 ações, mas dois botões com uma ação. É verdade, mas isto das metáforas da vida real ajudarem a construir objetos de interação digitais levam-nos a pensar que no mundo real podemos ter dois botões ou um botão com dois estados/modos.
Fig. xx: Botão "Reproduzir" sem estar pressionado.
Fig. xx: Botão "Pausa" ou botão "Reproduzir, pressionado"?
- Um botão toggle (interruptor)
Num botão do tipo "toggle" (interruptor), os dois botões anteriores podem passar a apenas um, mantendo o mesmo nome acessível, "Play" ou "Reproduzir". O estado "pressionado" ou "não pressionado", ou, na linguagem do leitor de ecrã VoiceOver, "selecionado" quando o botão está pressionado, será suficiente para o utilizador antever o que se vai passar quando pressionar no botão.
Para o botão Play/Pause em concreto há uma nota no site da MDN que diz:
Do not change the contents of the label on a toggle when the state changes. If a button label says "pause", do not change it to "play" when pressed. In this example, when the pressed state is true, the label remains "Pause" so a screen reader would say something like "Pause toggle button pressed".
Ou seja, o botão Play não deve mudar o seu nome acessível de "Reproduzir" para "Pausar". Neste caso é o mesmo que dizer que o valor do atributo aria-label não deve ser alterado de "Reproduzir" para "Pausar". Deve permanecer aria-label="Reproduzir".
Ver exemplo no CodePen "Botão Play/Pause".
O que diz o leitor de ecrã VoiceOver?
Fig. xx: O que diz o VoiceOver quando lê o botão reproduzir?
Fig. xx: O que diz o VoiceOver quando lê o botão reproduzir ativo?
No botão Play/Pause fica demonstrado o efeito do atributo de ARIA aria-pressed, o qual, quando aplicado a botões faz com que este deixe de ser um botão normal e passe a ser um "Interruptor".
Mas se o exemplo anterior é complexo e pode levantar dúvidas há outros botões que podem revelar o que se vai passar após pressionar o botão. Ao pressionar em "partilhar" vai surgir uma "caixa de lista" - listbox - (p.e. uma lista com várias opções). Ao pressionar em "Legendagem" vai surgir uma "caixa de diálogo" - modal dialog.
É possível, mesmo antes de ativar a ação, tipificar os botões de acordo com a tipologia de ação que vai ocorrer?