Nessa carta quero te mostrar como garantir a acessibilidade em um dos componentes mais usados na web: o <button>.Vamos ao que interessa.
Anatomia do componente
O botão é um widget que permite os usuários realizarem uma ação ou evento, como por exemplo:- Enviar um formulário;
- Abrir uma modal;
- Cancelar uma ação.
- Botão de alternância (toggle button);
- Botão de menu.
Botão de alternância (toggle button)
Um botão que recebe dois estados que pode ser desligado (não pressionado) ou ligado (pressionado).Para as tecnologias assistivas identificarem seu estado, deve-se usar o atributo aria-pressed.Por exemplo, um botão rotulado (texto do botão) como Mute em um player de áudio pode indicar que o som está silenciado, definindo o estado pressionado true.<!-- Botão não pressionado -->
<button aria-pressed="false">Desligar som</button>
<!-- Botão pressionado -->
<button aria-pressed="true">Desligar som</button>Importante: é fundamental que o rótulo em uma alternância não mude quando seu estado muda. Neste exemplo, quando o estado pressionado é verdadeiro, o rótulo permanece como Desligar som.
Botão de menu
Conforme descrito no padrão do botão do menu, um botão é revelado para tecnologias assistivas como um botão de menu se tiver a propriedade aria-haspopup definido para qualquer um menu ou true.Geralmente esse tipo de botão é usado em editores WYSWYG.Por que isso importa? Existe uma confusão na web, muitos não sabem quando usar umbutton e um a. Suas funções são diferentes e sua aparência e papel, devem permanecer com à função que fornecem.Esse artigo da Marcy Sutton, esclarece essa confusão.Interação com teclado
Existem duas formas de ativar um <button> via teclado, através das tecla:- Space;
- Enter.
- Um botão que abre uma modal, quando clicado o foco deve ir para dentro da modal;
- Um botão de Fechar de uma modal quando pressionado, deve ser direcionado ao botão que originou a ação.
Considerações sobre WAI-ARIA, roles, states e properties
- O botão deve ter a role=button, por padrão o elemento <button> vem com ela implícita não precisa de inserir;
- O botão deve ter um rótulo acessível. Por padrão, o nome acessível é o conteúdo de texto dentro do elemento do botão;
- Se o botão é um botão de alternância, deve conter um aria-pressed. Quando ativado, o valor do estado é true, desativado: false.