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):
TABA 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+TABA 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);SPACEA 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+SPACEA combinação das teclas Shift e Space faz você navegar para a parte anterior da tela (similar a tecla Page Up);ENDeHOMEAs teclas End e Home navegam diretamente para o fim da página ou o início dela respectivamente;Page UpePage DownAs 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;ENTERA tecla Enter aciona botões e links;northseta para cimaesouthseta para baixoeeastseta para direitaewestseta para esquerdaAs 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:
- VoiceOver, comandos e atalhos do VoiceOver open_in_newlink externo - abre em uma nova janela
- NVDA, comandos e atalhos do NVDA open_in_newlink externo - abre em uma nova janela
- Jaws, comandos e atalhos do Jaws (em inglês) open_in_newlink externo - abre em uma nova janela
- ORCA, comandos e atalhos do ORCA open_in_newlink externo - abre em uma nova janela
- Narrador, comandos e atalhos do Narrador open_in_newlink externo - abre em uma nova janela
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 direitaTem 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 esquerdaTem 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 toqueSeleciona um determinado elemento sem acioná-lo;2 toquesAciona 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:
- VoiceOver, gestos do VoiceOver no iOS open_in_newlink externo - abre em uma nova janela
- Talkback, gestos do Talkback no Android open_in_newlink externo - abre em uma nova janela
- Jieshuo (Android), gestos e comandos do Jieshuo (Commentary) no Android open_in_newlink externo - abre em uma nova janela
- Narrador, gestos do Narrador no Windows open_in_newlink externo - abre em uma nova janela
- Trackpad no MacOS, gestos para o Trackpad do MacOS open_in_newlink externo - abre em uma nova janela
- Tela e Touchpad no Windows, gestos para telas e touchpad no Windows open_in_newlink externo - abre em uma nova janela
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)
- Abra Utilitário do VoiceOver (no painel Ajuestes do Sistema);
- Selecione a aba "Atividades";
- Crie uma nova atividade com o nome de "Testes";
- Configure esta nova atividade para utilizar as configurações de fábrica;
- Durante os testes, pressione
CONTROL+OPTION+Xe selecione a atividade que criou; - 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
- Construção de abreviações
- Construção de accordion
- Construção de breadcrumb (conteúdo para estudantes)
- Construção de listas
- Construção de links
- Construção de parágrafos
- Construção de tabelas
- Construção de títulos
Exemplos relacionados a elementos de formulários
- Construção de campos diversos (de formulários)
- Construção de ajuda contextual para campos diversos (conteúdo para estudantes)
- Construção de botões
- Construção de campos de texto
- Construção de checkbox
- Construção de radio button
- Construção de menus do tipo "select" (combo)
Exemplos relacionados a testes funcionais
- Uso de "hashtags" no formato de camelCase e similares
- Configuração de tela para impressão (conteúdo para estudantes)
- Configuração de idioma das partes
- Foco visível em links
- Uso de linguagem neutra
- Zoom em elementos e textos
- Unidades de medidas
- Uso de Grid ou Flex (conteúdo para estudantes)
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.
- Estrutura
- Flexbox & Grid
- Header, Footer e Regiões
- Títulos (Cabeçalhos)
- Tabelas
- Listas
- Tabbar
- Mensagens
- Alertas e Dialogs
- Validação de formulários
- Toasts
- Navegação
- Breadcrumb
- Menu
- Links
- Paginação
- Carrossel
- Drag'n'Drop
- Elementos ocultos
- Accordion
- Detalhes e Mais informações
- Abas
- Tooltip e Popover (conteúdo liberado)
- Modal
- Formulários
- Botão (conteúdo liberado)
- Checkbox e Radio Button
- Inputs
- Select (Combo)
- Slider
- Switch