Exemplos utilizados no curso
AccessBoost

Todos os materiais presentes nesta página, fazem parte do curso AccessBoost link externo - abre em uma nova janela.

Importante: Os materiais presentes nesta página são referentes a exemplos de aula utilizados no curso AccessBoost.

  • Esta página é uma obra autoral de Marcelo Sales exclusivamente utilizada para exercícios de cursos ministrados em diferentes situações (gravados, ao vivo, etc);
  • Este material pode e deve ser utilizado para fins didáticos, mas leve em consideração que na maioria dos casos há um contexto explicado em sala de aula que este material isolado pode não trazer;
  • Os códigos aqui apresentados não necessariamente são os melhores a serem criados para todos os diferentes contextos de uso. Lembre-se de que se trata de um material de aula e que possuem explicações que podem não estar presentes aqui;
  • Qualquer utilização destes códigos fora desta página, deve possuir os devidos créditos e também as observações de que se tratam de materiais utilizados em sala de aula dentro de um contexto específico;
  • Os exemplos apresentados nesta página foram criados em HTML, CSS e Javascript. A biblioteca Bootstrap (versão 5.0.1) é utilizada em alguns exemplos deste material.

obs: Os exemplos listados a seguir não estão organizados em seu formato final e este documento está em constante desenvolvimento.

Comandos de teclado e gestos para interfaces de toque

Comandos básicos de navegação por teclado (SEM leitor de telas habilitado):

  • TAB A tecla Tab faz você navegar pelo próximo item clicável/tocável em uma interface (link, botão, campo de formulário, etc);
  • SHIFT+TAB A combinação das teclas Shift e Tab faz você navegar pelo item anterior clicável/tocável em uma interface (link, botão, campo de formulário, etc);
  • SPACE A tecla espaço tem diferentes funções. Ela serve para selecionar/desselecionar itens em um conjunto de checkbox e acionar botões (similar a tecla Enter, mas ela não funciona com links). Ela também é utilizada para "rolar" para a próxima parte da tela (similar a tecla Page Down);
  • SHIFT+SPACE A combinação das teclas Shift e Space faz você navegar para a parte anterior da tela (similar a tecla Page Up);
  • ENDeHOME As teclas End e Home navegam diretamente para o fim da página ou o início dela respectivamente;
  • Page UpePage Down As teclas Page Up e Page Down navegam para a próxima parte visível de uma página (também conhecida como "dobra de página") rolando para cima ou para baixo respectivamente;
  • ENTER A tecla Enter aciona botões e links;
  • seta para cimaeseta para baixoeseta para direitaeseta para esquerda As setas direcionais são utilizadas para navegação em controles específicos. Em agrupamentos de Radio buttons elas servem para ir de um elemento ao outro. Em elementos do tipo "aba", caso tenha sido codificado corretamente, serve para navegar entre as abas. Entre outros elementos cujos controles interativos exigem navegação espacial;
  • Textos e outros elementos estáticos, como imagens, não são navegáveis por teclado (sem que se habilite um leitor de telas).

Comandos básicos de navegação por teclado (COM leitor de telas habilitado):

Quando o leitor de telas é habilitado, novos atalhos são adicionados aos comandos apresentados anteriormente. Combinações de teclas fazem com que você vá direto a um determinado ponto da tela. Como há variações entre sistemas operacionais e suas respectivas versões, utilize os links a seguir para acessar os respectivos comandos dos leitores de tela que irá utilizar:

Dica para treinar os comandos do VoiceOver do MacOS:
Acesse as Preferências de Sistema, vá no menu do VoiceOver e em seguida procure pelo botão "Abrir Treinamento do VoiceOver...". Em média você levará cerca de 40 minutos para concluir o treinamento completo.

Comandos básicos de navegação por toque (COM leitor de telas habilitado):

  • Arrastar para a direita Tem efeito similar ao Tab quando se navega por teclado em um desktop. Vai para o próximo item da tela (neste caso, interativo ou estático);
  • Arrastar para a esquerda Tem efeito similar ao Shift + Tab quando se navega por teclado em um desktop. Vai para o item anterior da tela (neste caso, interativo ou estático);
  • 1 toque Seleciona um determinado elemento sem acioná-lo;
  • 2 toques Aciona o elemento selecionado, caso ele seja interativo (botão, link, etc.);
  • Arrastar o dedo na tela É o que chamamos de "navegação exploratória". Após soltar o dedo, o leitor de telas lerá o elemento selecionado.

Assim como há atalhos de teclados adicionais, há também gestos específicos para se navegar por alguns elementos em tela. Como há variações entre sistemas e suas respectivas versões, utilize os links a seguir para acessar os respectivos comandos dos leitores de tela que irá utilizar:

Configuração ideal para testes com leitores de tela:

É ideal que os testes realizados com leitores de tela não incluam configurações e definições de preferências. Dessa forma, é importante "limpar" as configurações efetuadas mesmo que de forma temporária. Os comandos a seguir são dicas de como alternar (sem perder) as configurações entre modo de fábrica e prédefinidas pelas pessoas.

JAWS (Windows)

Pressione INSERT+SPACE+Z para alternar entre configurações personalizadas e padrões de fábrica.

NVDA (Windows)

Pressione INSERT+CTRL+R 3 vezes rapidamente para remover as configuraçõs personalizadas. Pressione apenas uma vez a mesma combinação para reativar as configurações personalizadas.

VoiceOver (MacOS)

  1. Abra Utilitário do VoiceOver (no painel Ajuestes do Sistema);
  2. Selecione a aba "Atividades";
  3. Crie uma nova atividade com o nome de "Testes";
  4. Configure esta nova atividade para utilizar as configurações de fábrica;
  5. Durante os testes, pressione CONTROL+OPTION+X e selecione a atividade que criou;
  6. Pressione a mesma combinação de tecla 2 vezes para retornar as configurações persinalizadas.

Índice de exemplos utilizados em sala de aula

Exemplos relacionados a elementos estruturais

Exemplos relacionados a elementos de formulários

Exemplos relacionados a testes funcionais

Exemplos de componentes apresentados no módulo 14 (Design System)

O foco destes componentes é no Design de Interação a se pensar para cada elemento. Este material é essencial para a criação de Critérios de Aceite, elaboração de casos de uso para testes e também para a preparação de documentação (handoff). Tudo é tratado de forma completa em diferentes módulos do curso.

Importante:
Este material é apresentadode forma parcial.
Neste momento, apenas TOOLTIP, POPOVER e BOTÃO estão disponibilizados.
O seu conteúdo completo é disponibilizado, apenas para estudantes do curso AccessBoost.