Melhorias de UX para acessibilidade do teclado

Como podemos fornecer uma experiência de usuário acessível para usuários apenas de teclado e de tecnologia assistiva sem afetar a experiência de outros usuários? Pedimos gentilmente a Aaron Pearlman, Principal UX Designer da Deque Systems, para compartilhar algumas ferramentas e técnicas práticas para garantir que todos estejamos fornecendo uma experiência inclusiva e acessível para nossos usuários.

Como parte da nossa Associação Smashing, realizamos a Smashing TV, uma série de webinars ao vivo, todas as semanas. Sem enrolação - apenas webinars práticos e acionáveis ​​com perguntas e respostas ao vivo, ministrados por profissionais respeitados do setor. De fato, a programação da Smashing TV já parece bastante densa, e é gratuita para os membros do Smashing, junto com as gravações – obviamente .

Esperamos que você aproveite o webinar tanto quanto nós!

Aaron Pearlman: Você deve conseguir ver minha tela. Ok, agora, deixe-me apenas… Lá vamos nós, muito bom. Bem, olá a todos. Como eu disse, sou Aaron Pearlman, o principal designer de experiência do usuário da Deque. E eu acho... Uh, deixe-me ir... O zoom tende a atrapalhar um pouco a interface do usuário, então peço desculpas se pareço estar me movendo freneticamente e o mouse esperançosamente não está aparecendo. E assim, hoje vamos falar sobre os tipos de otimizações que você pode fazer para usuários de tecnologia assistida e somente teclado. Como mencionei há pouco, esse tipo de otimização, esse tipo de coisa não impedirá ninguém de usar seu... eles não serão inutilizados por outras pessoas também. Eles apenas tendem a ser coisas que serão mais vantajosas para os usuários que usam predominantemente um sistema com teclado Only User Assistive Technology.

Aaron Pearlman: Para aqueles que não estão familiarizados com o que isso significa, o que é uma Tecnologia Assistiva de Usuário Somente Teclado – um usuário apenas de teclado seria alguém que normalmente usa seu teclado para percorrer um sistema. Então eles vão usar muito tab e Shift tab e as teclas de seta para percorrer seu sistema, então o foco é muito importante para eles. Você pode descobrir que esse indivíduo pode ter problemas de habilidades motoras, também pode ter deficiências de visão, os usuários apenas de teclado e, em seguida, os usuários de tecnologia assistiva também usam um teclado para percorrer seu sistema, eles podem usar outras tecnologias assistivas, como tela medidores como VoiceOver ou um leitor de braille ou algo assim.

Aaron Pearlman: Então, é nisso que estamos focando – nossos usuários dessa natureza, porque uma boa parte dos indivíduos com deficiências tendem a se enquadrar nesse campo. Isso não significa todo mundo. Certamente, há uma miríade de diferentes deficiências e gradações entre elas, mas, para este propósito, é nisso que vamos nos concentrar hoje.

Aaron Pearlman: Então, um pouco de uma visão geral do que vamos cobrir: vamos falar um pouco do processo de design com muito talvez fazendo um pouco de exercício do tipo de coisa que nós pode entrar, talvez não, antes de irmos para os links de salto. E, em seguida, pular links será um dos recursos que abordaremos, maneiras de otimizar seu modal e como lidar com o foco. Então, essas serão as três grandes categorias que vamos cobrir e então teremos tempo para perguntas quando terminarmos.

Aaron Pearlman: Para começar, pensei que poderíamos fazer um pouco da visão geral do processo de design de UX. Eu estava em diferentes workshops e outras coisas, acho que há uma infinidade de indivíduos diferentes que estão lá de muitas disciplinas diferentes, nem todo mundo é um designer de experiência do usuário, então eles podem não estar tão familiarizados com o processo que muitos designers de UX empregam. Então, para isso, pensei que iríamos apenas revisar brevemente, não vamos gastar uma quantidade enorme de tempo nisso, mas acho que vale a pena revisar apenas brevemente. Também porque vai se vincular ao design acessível também. Então, a maior parte do design de UX tende a passar por um processo chamado descoberta, nem sempre é chamado de descoberta, às vezes é chamado de ideação rápida, iteração rápida. Muitas pessoas têm nomes diferentes para isso, mas o ponto é que é a parte do processo de design em que grande parte da fabricação acontece.

Aaron Pearlman: Muitas vezes também temos ideias diferentes e coleta de requisitos, é um momento em que muita pesquisa e sintetiza isso com seus objetivos organizacionais e filtra isso com todas essas informações, e o que sai disso são tipicamente artefatos que nos permitem construir o sistema que vamos fazer ou os recursos que vamos fazer. Esses tendem a ser – nem sempre são – mas tendem a ser coisas como protótipos, às vezes você verá modelos mentais que sairão deles também. Mas um protótipo em algum nível de fidelidade que é um reflexo de como seu usuário-alvo atingirá seus objetivos. O TLDR é aquele projeto reiterado e nós testamos com usuários e reiteramos, testamos com usuários, reiteramos, testamos com usuários e, no final, ele acaba sendo construído.

Aaron Pearlman: Você acha que isso é importante, é que as considerações sobre acessibilidade são que queremos pensar e fazer acessibilidade ao longo desse processo de design. E diferentes níveis de fidelidade podem merecer, pensando em diferentes tipos de coisas, depende muito. Não vamos entrar muito nisso, mas em geral, queremos incorporar essas heurísticas e métodos, e vamos, à medida que os designers aumentarem nossos poderes de acessibilidade ao longo do tempo, assim como aumentarmos nossos poderes de ser um bom designer de experiência do usuário ao longo do tempo. Não há uma expectativa no começo de que você vá ler as WCAG 2.1, então você vai ler a especificação ARIA, e então você estará pronto e não cometerá mais erros, ou você não vai perder nada quando se trata de seus projetos e design acessível. Isso não é necessariamente razoável por qualquer extensão da imaginação.

Aaron Pearlman: Apenas saiba que você aprenderá com o tempo. Certamente ainda erro em acessibilidade, e em tudo em que trabalho e tudo se resume a melhorar. Então, [inaudível] porque estou sempre projetando de forma acessível. Portanto, um pequeno plugue relevante para o que vamos trabalhar hoje é chamado Trane. É a nossa biblioteca de padrões totalmente acessível na Deque, nós a usamos para construir nossos próprios produtos. É um framework front-end HTML, CSS e JavaScript, bastante semelhante ao Bootstrap, se você já usou algo assim. Também temos uma biblioteca de reação que também é uma biblioteca irmã. Nossa equipe se desenvolve em reagir. Mas vamos ver algumas das coisas aqui hoje como exemplos. Mas isso é open source, está disponível, haverá um link para ele no final deste deck, que vou disponibilizar para todos.

Aaron Pearlman: E é grátis para você usar e obter ramos e usá-lo para o conteúdo do seu coração ou contribuir para isso, nós adoraríamos ver uma contribuição para isso também. Portanto, apenas um pequeno plugue, mas estaremos nos referindo a ele à medida que avançamos. Então, a primeira coisa que vamos ver é pular links. E para aqueles que podem não estar familiarizados com o que é um link de salto, links de salto são pequenos links que tendem a aparecer como a primeira parada de tabulação em um aplicativo da web ou site. E o que eles permitem que você faça é que você ignore partes do site. Por que você gostaria de fazer isso?

Aaron Pearlman: Bem, se você tem um site que tem um menu muito rico, que pode ser um grande menu de outdoor ou apenas um monte de coisas, se você é um usuário de apenas teclado ou tecnologia assistiva, quando você chegar a isso site e seu VoiceOver começa a ler a partir dele, ou mesmo não, talvez você seja um usuário com visão, apenas use apenas o teclado, você terá que percorrer todos esses itens diferentes para chegar ao o conteúdo ou para o espaço de trabalho que você deseja iniciar qualquer que seja a atividade que você está fazendo lá. E assim, o que um link de salto permite que você faça é ignorar normalmente, normalmente a navegação para chegar à área de espaço de trabalho desse aplicativo.

Aaron Pearlman: Às vezes, pode haver vários links e, normalmente, apenas um, mas temos alguns exemplos. Mostrarei um exemplo de onde você também pode usar vários links de pular. Então eu pensei que poderíamos olhar para alguns tipos diferentes de links para pular ou alguns tipos diferentes de links para pular, e então nós vamos olhar para outra página que não tem um link para pular, e talvez falar um pouco sobre onde um pode ser útil lá. O primeiro que vamos ver, espero que você possa ver minha tela. O primeiro que veremos é este link de salto que usamos no deque.com e o que ele é, é o que eu chamaria de elemento de deslocamento, pois desloca a página. Então, quando eu abro aqui, posso ver que o link para pular está lá e ele me dirá para pular para o conteúdo.

Aaron Pearlman: E quando eu selecionar isso, ele me enviará para o conteúdo abaixo, e eu chamo isso de deslocamento porque ele literalmente se insere e se esconde e se insere lá e o desloca. Esse foi o link de pular que escolhemos usar para nosso conteúdo, mas é muito comum. Você o verá se inserir na parte superior de um site ou aplicativo da web. O próximo que veremos é um de um site que tenho certeza que muitos de vocês usaram ou usaram com bastante frequência. É a Amazon, vamos dar uma olhada no link de pular. Quando eu abro lá, se você olhar no canto superior esquerdo lá, você verá sobreposto, este é um estilo de sobreposição, isso é muito, muito comum onde ele sobrepõe o conteúdo e, portanto, geralmente pula o que está atrás dele para mostrar a você o pulo para o conteúdo principal.

Aaron Pearlman: Os prós e contras entre deslocamento versus sobreposição são insignificantes. Se você achar que seu conteúdo é algo que você nunca quer ofuscar, então você pode querer inserir algo e apenas usá-lo, deslocando um, vice-versa, não importa, tudo bem também. Se você está criando um conteúdo que lê da direita para a esquerda, como conteúdo em árabe, você pode colocar o link para pular no canto superior direito, isso pode valer a pena. Realmente se resume ao que é apropriado. Mas, em última análise, essa discrição será para o designer em sua equipe. Então, este é um exemplo de dois links de pular que eram um único link de pular, e eu pensei em mostrar um onde há várias opções dentro do link de pular.

Aaron Pearlman: Vou pegar esse exemplo, isso é da nossa biblioteca de padrões. Agora, para este exemplo em particular, eu não projetaria algo que tivesse vários links de pular porque realmente não o merece, mas apenas o fizemos com o objetivo de demonstrá-lo. Então, eu vou tabular e no canto superior esquerdo, nós usamos uma sobreposição que mostra dois links para pular aqui. E estas são paradas de tabulação dentro daqui, então se eu apertar tab novamente, vamos tabular na próxima e se eu afastar, ela vai. Se eu guiar novamente, ele sairá e entrará no cabeçalho no topo. Eu vou mudar a guia para trás, mudar a guia para trás para que possamos ver que podemos entrar e sair daqui.

Aaron Pearlman: E então eu vou entrar em um desses apenas para que você possa vê-lo. E o que acontece neste momento quando eu o seleciono, ele me envia para a área do espaço de trabalho e realmente foca nessa área do espaço de trabalho. O que você verá em muitos aplicativos da Web é que eles não mostram o foco em si, queríamos mostrar isso em nossos aplicativos, isso não é um foco de elementos, por assim dizer, mas é algo que pode levar foco. E a partir daqui, vamos focar e então podemos ir para os diferentes itens dentro de lá que são o foco de todos os elementos que estão dentro de lá, os elementos [inaudível 00:12:28]. Então, esses são exemplos de algumas maneiras diferentes de pular links.

Aaron Pearlman: Como eu disse, há um exemplo dentro da biblioteca de padrões, você pode usá-lo, também temos uma versão dele, acredito que aqui tenha erros. Também temos um exemplo de link de salto único, e você também pode usá-lo. Então, temos alguns exemplos diferentes aqui. Mas esses são exemplos de maneiras comuns de usar links para pular. E eles são principalmente benéficos para indivíduos que usam apenas o teclado para percorrer o sistema quando usam uma tecnologia de sistema como resultado disso.

Aaron Pearlman: Mas, às vezes, pode haver outros casos em que um link para pular pode ser benéfico. Eu vi que pode ser potencialmente benéfico. Você pode imaginar uma instância em que o grande espaço de trabalho do seu site talvez seja um monte de resultados de pesquisa e faça uma pontuação preguiçosa na qual você rola até o final e depois carrega mais resultados, e rola até o final e ' vai carregar mais resultados, você rola até o final, e ele vai carregar mais resultados.

Aaron Pearlman: Bem, como você chega ao rodapé? E eu já tive esse problema antes, onde eu fui para os mecanismos de busca e nunca consegui chegar ao rodapé. E o que teria sido bom é o link de pular que realmente me permite pular para o rodapé, porque eu estava procurando informações no rodapé. Portanto, há maneiras de pular links que podem ser benéficos para isso. Não é a única maneira que você pode resolver esse problema. Certamente, você também pode usar teclas de hardware ou menus de atalho. Existem muitas técnicas diferentes para atingir esses objetivos, mas essa é a que os links para pular tendem a ser muito bons em [inaudível 00:14:13]. Algumas coisas a serem lembradas ao projetar um link de pular é que, normalmente, ele será a primeira parada de tabulação no aplicativo da web do seu site.

Aaron Pearlman: E geralmente é onde ele é encontrado, então, se eu estiver gritando ou um usuário apenas de teclado, posso chegar a ele imediatamente. É a primeira coisa que posso fazer quando entro. Portanto, se for algo que um aplicativo da Web que uso com frequência, posso ir direto ao que estou tentando fazer. Ele também deve ser representado visualmente onde deveria estar nas informações, basicamente na IA, para que você possa colocar links de pular e outras partes do seu aplicativo também, como eu poderia colocar um aqui se quisesse, encontrar um longo site de pilha de rolagem e eu queria fazer isso, e queria ter um link para pular dentro de algo. Tenho certeza de que você pode ancorar em coisas diferentes como essa, mas deve ser representado visualmente onde deveria estar, dentro do aplicativo.

Aaron Pearlman: Em geral, isso é extremamente incomum. A maioria dos links de salto estão sempre nas primeiras paradas de tabulação. Em geral, não faça isso. Eu acho que você tecnicamente pode, mas eu diria que não. E então a última coisa é que é um elemento interativo e é o contraste de cor do passado, então certifique-se de que isso aconteça, se você decidir usar como uma imagem ou algo nela, eu usaria, mas se você usasse, precisa ter o nome acessível apropriado junto com ele também. Em geral, a maioria das pessoas usa textos e links, por isso será marcado como um link. Apenas certifique-se de que está passando contraste de cores para que [inaudível 00:16:07]. Muito bom. Então, isso é tudo o que temos para pular links.

Aaron Pearlman: É um padrão bastante sucinto, mas muito comum que você vê em todos os lugares e é algo que você pode adicionar razoavelmente, é bastante simples de adicionar ao seu aplicativo da web, mas pode fazer uma grande diferença para indivíduos que usam seu teclado ou tecnologia do sistema. Então deixe-me ir em frente e fechar isso e vamos passar para otimizações modais. Optei por fazer isso porque os modais são muito, muito, muito, muito comuns entre a maioria dos aplicativos da web e vêm em muitos fóruns diferentes, muitas maneiras diferentes de moldar e criar os modais.

Aaron Pearlman: Mas algumas coisas comuns que vejo aparecem em mais coisas que podemos corrigir, até que haja algumas otimizações que podemos fazer para tornar a experiência melhor para usuários de tecnologia assistida e somente teclado. E, em geral, acho que seu modal é muito melhor. Uma coisa que pensei que mostraria aqui muito rapidamente é que uma coisa importante que um Modal precisa fazer é ser capaz de prender o foco dentro dele. Eu queria mostrar um exemplo de... está bem aqui. A propósito, eu amo dribles, então isso não é uma piada contra eles. Este é provavelmente apenas um pequeno descuido aqui. Eu os usei o tempo todo como um site delicioso e tem coisas maravilhosas nele.

Aaron Pearlman: Então, se eu apertar o sinal, oops, me desculpe, o sinal. Aqui está um modal aqui e algo que pode acontecer às vezes. Se você observar com atenção, estou apertando tab, tab, tab, tab, tab. Como você pode ver por trás da tela, é um pouco difícil de ver. Você pode ver que o foco não ficou preso dentro do Modal e isso pode acontecer às vezes. Então, se eu fosse um usuário que usa tecnologia assistiva ou apenas teclado, seria muito difícil para mim voltar a isso.

Aaron Pearlman: É algo que acontece muito, muito, muito, muito comumente, e certamente pode acontecer quando você está inserindo diferentes coisas interessantes no Modal. Então, algo que queremos ter certeza, e a razão pela qual estou trazendo isso, a razão que é realmente muito, muito importante é quando um modal é evocado, ele precisa se anunciar para o indivíduo que o evocou, saber o que eles basicamente apenas abriram, mas na verdade abriram a coisa correta.

Aaron Pearlman: E assim, a maneira como ele pode se anunciar é que, ou o corpo do modal precisa ser focado ou potencialmente o cabeçalho do modal pode ser focado para que possamos dizer ao indivíduo que está evocando o modal, que ele é o que está acontecendo. Então, se eles têm voz, eles estão usando, por exemplo, o VoiceOver, ele vai dizer o que eles estão vendo. Então eu pensei em dar alguns exemplos de como o corpo pode ser focado e então um exemplo de como o modelo pode focar o cabeçalho e então o que podemos fazer com isso.

Aaron Pearlman: Vou abrir isso bem rápido aqui. Muito bom. E então o modal que eles têm para isso, acho que é um site de roupas aqui mesmo. E o que aconteceu é que ele focou o corpo e eu posso mostrar isso melhor… Vou ativar o VoiceOver bem rápido. Eu vou puxar para cima.

VoiceOver: VoiceOver no Chrome.] Bonobos, [inaudível 00:20:10]-

Aaron Pearlman: E você não será capaz de ouvir...

VoiceOver: Google Chrome, [email protected]

Aaron Pearlman: Mas você poderá ver.

VoiceOver: Feche o cartão, seu cartão está vazio, o grupo tem foco no teclado. Você está no grupo em abrir seu cartão, feche o cartão, seu cartão está vazio. Você está atualmente no grupo dentro do conteúdo da web, VoiceOver desativado.

Aaron Pearlman: Então ali mesmo quando eu foquei, ele leu um pouco de tudo que estava acontecendo no seu cartão fechado e seu cartão está vazio porque a compra estava focada naquele ponto. E isso é perfeitamente válido. Essa é uma maneira perfeitamente válida de focar seus modais. Não é um problema. E a partir daí você pode percorrer tudo o que está dentro dele. Outra maneira comum de quando um modal é evocado é focar o cabeçalho.

Aaron Pearlman: E é isso que fazemos nos modais que usamos para nossos aplicativos é focar no cabeçalho. Então, vou evocar o modal, e como você pode ver aqui, o foco está bem aqui onde diz modal com formulário, o foco está bem ali no cabeçalho. Na verdade, em vez de indicar isso como um índice, focamos isso programaticamente. E a razão pela qual focamos programaticamente que, conforme eu percorro a tabulação por aqui, agora está indo para o botão Fechar, também no cabeçalho, depois para o primeiro elemento interativo, que é campo para o próximo campo, para o próximo campo, para o próximos campos, tabulando novamente para salvar, tabulando novamente para cancelar.

Aaron Pearlman: E a partir daqui, quando eu apertei tab, se esse cabeçalho fosse uma parada de tabulação, iria para lá, mas optamos por não fazer isso. Em vez disso, vamos até o final e a razão de fazermos isso é apenas se alguém estivesse usando Voice Over, como você pode ter visto um pouco do que estava sendo escrito e estava entrando em meus ouvidos ao mesmo tempo, na verdade foi um pouco distrai porque fala muito rápido, é um pouco tagarela. E, portanto, uma das otimizações que queríamos fazer para a experiência aqui era torná-la um pouco menos tagarela. Então, sim, nós anunciamos, vamos, programaticamente focamos modal com forma quando eles chegam lá pela primeira vez, para que eles saibam que o modal que eles evocaram é de fato o que eles estão focados no momento.

Aaron Pearlman: Mas não precisamos anunciar isso de novo e de novo e de novo se eles passarem por esses turnos alternando por esse modal. Portanto, é uma pequena otimização que provavelmente seria completamente invisível para a maioria dos usuários de mouse citados. Mas essa pequena otimização, você pode imaginar se eu usasse muito os modais para preencher formulários com frequência e fosse um usuário que usasse apenas teclado ou tecnologia assistiva, essa otimização aumentaria com o tempo. Então, pequenos usuários experimentam coisas que podemos fazer, que podem fazer uma diferença significativa no cuidado que podemos colocar em nossos projetos, para que sejam a experiência mais frequente que podemos fornecer.

Aaron Pearlman: Falando em lidar com o foco, o último que vamos abordar é o controle do foco em si. E vimos um exemplo disso, o que pode acontecer se o foco pode se perder em certos tipos de manuseio? Mas, em vez de ser apenas algo que pode ser um problema significativo, a maneira como você lida com o foco pode mudar significativamente a experiência que um indivíduo teria. Realmente a regra sobre como lidar com o foco, especialmente com as duas instâncias que veremos agora, que são, remover e adicionar elementos ao seu espaço de trabalho ou o que quer que você esteja trabalhando é que... interage com ele. E, portanto, queremos fazer com que siga a experiência esperada que você teria para alguém que é um usuário apenas com mouse ou um usuário com visão, um usuário apenas com mouse, devo dizer.

Aaron Pearlman: Neste caso, vamos olhar... pois aqui vamos olhar... Ok, deixe-me arrastar. Espere um segundo. Vou ter que tirar isso daqui temporariamente. Aqui vamos nós. Então você não deve ser capaz de ver um exemplo de um modal que eu projetei, na verdade é um único modal, temos dois tipos de imagens dele e apenas uma mostra o que está abaixo da dobra, em vez de fazer uma realmente , realmente errado ou eu apenas dividi para que você pudesse ver o que estava abaixo na dobra. E no lado direito, se você olhar, há um ícone de lixeira que está sendo focado no momento. E então, quando clicamos no ícone da lixeira, supondo que não haja um diálogo que diga: "Tem certeza de que deseja excluí-lo?"

Aaron Pearlman: Vamos apenas supor que esse não é o caso. A verdadeira questão então é: o que acontece com o foco lá? Porque quando o ícone da lixeira é atingido ou selecionado, ele removerá as instruções que estão aqui e também removerá a si mesmo. Então, para onde vai o foco? Então, como designers, queremos escolher para onde o foco vai porque, caso contrário, os navegadores que escolherão o foco vão se você estiver criando um aplicativo da Web dentro de um aplicativo da Web e não queremos que o navegador escolha para onde o foco vai porque tende a jogar coisas para o corpo. Então, neste caso, onde realmente queremos que o foco vá é que queremos que o foco vá para o próximo elemento focalizável, não necessariamente o... o que eu chamaria de analógico para isso, que será focar na próxima lixeira, a lixeira para instruções para, em vez disso, focar as instruções em si mesmo.

Aaron Pearlman: E a razão pela qual gostaríamos de fazer isso, é que você pode imaginar se alguém acidentalmente batesse, usando apenas o teclado, eles pressionavam o botão de retorno, e então o botão de retorno novamente. Teria apenas apagado dois conjuntos de instruções em vez de um. E gostaríamos de evitar isso para um usuário apenas de mouse, literalmente, tendo essas coisas fisicamente distantes. Mas também queremos evitar isso porque o foco é o que eles estão usando para atravessar isso. Então pensei em mostrar outro exemplo do que fazemos quando estamos excluindo o último item da seção inteira aqui.

Aaron Pearlman: Agora temos instruções de culinária, a instrução final para a instrução um, onde o foco vai aqui? Agora, para este em particular, ele seguirá o exemplo do anterior, que vai realmente para o próximo foco, mas preenchido novamente, que é o ingrediente um pela mesma razão que não queremos jogar para a lixeira novamente, porque então se alguém novamente apertasse selecionar novamente ou voltasse novamente, nós estaríamos... Eles apagariam acidentalmente duas coisas que eles não queriam, não queriam.

Aaron Pearlman: Pela mesma razão, não necessariamente queremos jogar isso em um desses links aqui, porque teríamos o problema oposto, onde eles também estariam adicionando coisas acidentalmente. E não queremos necessariamente que vá para o corpo, porque vamos para o corpo e seu usuário de Voice Over, seu usuário do Assistente de Tecnologia, vai começar a tagarelar sobre o modal novamente ou, em vez de permitir que você continue interagindo e fazer o que você pretendia fazer.

Aaron Pearlman: E então, finalmente, o último exemplo que tenho aqui é o que fazemos quando vamos remover o último item neste caso, no modal aqui, não há mais nada. Para onde eu enviaria? E isso definitivamente fica a critério dos designers para onde deve ir. Não tem, não vai ficar inacessível se você optar por mandar para a roupa ou mandar para o foco talvez para cancelar. Não necessariamente o torna inacessível, é apenas isso, realmente se resume ao que você esperaria? Quais informações você gostaria de transmitir? Que narrativa você deseja transmitir a esse usuário e para onde escolhemos enviá-la, pois optamos por enviá-la de volta ao cabeçalho para informar ao usuário que ainda está no modal, ainda está lá, não temos t fechou sobre eles, por exemplo, lá.

Aaron Pearlman: E isso é realmente uma mudança programática porque, como eu disse, não é uma voz terrível. Não é tão terrível elemento focalizável como esse. Então, programaticamente, mudamos o foco para isso neste exemplo específico. Então, esses são alguns bons exemplos do que fazer talvez com foco ao remover itens. Então eu pensei que você poderia... Eu mostraria um exemplo do que você faz quando adiciona um item. Então eu tenho um exemplo bem rápido aqui para retenção de foco.

Aaron Pearlman: E aqui, vamos adicionar outro... você pode apenas focar aqui, adicionar outro ingrediente e o foco então muda para o ingrediente real neste caso, o campo que você adicionou por duas razões, uma, porque a suposição é adicionar o próximo campo que queríamos interagir com ele e que seria o comportamento esperado se eu fosse um usuário somente de mouse, eu estaria adicionando isso presumivelmente para que eu pudesse realmente começar a digitar texto nele.

Aaron Pearlman: E, novamente, não queremos necessariamente manter o foco em outro ingrediente pela mesma razão que, se eles apertarem o retorno novamente, não gostaríamos de adicionar dois ingredientes em vez de um. Deve ser problema oposto do exemplo anterior. E o último, o último exemplo que eu queria mostrar, porque acho que pode valer a pena mostrar é... na verdade, eu tenho esse exemplo, posso trazê-lo daqui a pouco. Mas posso descrevê-lo muito, muito apropriadamente, se você tiver o que você faz quando evoca um modal? Por exemplo, você salvou algo, o modal desaparece, para onde vai o foco agora e o que tendemos a fazer, mas a regra geral é que você deseja enviá-lo de volta para qualquer elemento [inaudível 00:31:03] recebe.

Aaron Pearlman: Então, se você imaginar se você tivesse um pequeno lápis de edição e selecioná-lo, abre o modal, preenche esse modal, clica em salvar, você gostaria de enviar o foco de volta para aquele elemento interativo que tende a ser … ou nós fazemos. Pode haver casos em que você deseja enviá-lo para outro lugar. Se é um mago e vai para outro lugar depois disso, novamente a critério do designer, para qual narrativa você está tentando nos dizer para onde ir. Mas para coisas que são como aquela... instância que acabei de descrever, o que é muito comum. Você evoca um modal, ou faz algo com ele e é descartado como resultado disso e o contexto não muda necessariamente.

Aaron Pearlman: E você não quer enviar esse foco de volta para onde estava. E a razão para fazer isso é para que um usuário apenas de teclado ou de tecnologia assistiva possa retomar onde está. Porque lembre-se que eles estão nesse espaço e esse espaço é um pouco linear em relação a como eles atravessam e especialmente quando você está usando a cidade para passar por tudo. Então, acho que estamos quase nos 40 minutos, estamos quase na hora para todos os exemplos e coisas que eu tive. Então, vou passá-lo de volta para Scott.

Scott: Obrigado Aaron. Isso foi incrível, e nós temos muitas perguntas do participante, bem como algumas de individualmente que não puderam vir hoje porque ele está viajando. Então, Poan, que é um participante regular de nossos webinars, pergunta: "Quando você está removendo itens, não deveríamos ter um reconhecimento da ação e mover o foco para lá e depois passar para o próximo elemento?"

Aaron Pearlman: ao remover um item, você deve ter um … você está se referindo a um aviso como um brinde ou está dizendo que deveria ter uma região ativa que informa o que está acontecendo? Se você estiver mudando o foco para remover um item, como os que acabei de mostrar nessa instância específica a evocação dessa exclusão, por exemplo, deve ser adequado o suficiente para que eles saibam que de fato foram excluídos.

Aaron Pearlman: Deve ter desaparecido. Além disso, se eles estiverem usando Voice Over, isso também será percebido. Se você está interagindo com algo e está fazendo alterações em outro lugar, por exemplo, como você fez algo e depois mudou algumas métricas em algum lugar, por exemplo, você provavelmente vai querer usar uma região ativa que faça algo educadamente para deixá-los saiba que isso aconteceu. Isso é algo que está fora do alcance de onde você está trabalhando especificamente. Espero que isso responda sua pergunta. Pode estar mergulhando em algo que é um pouco mais técnico. Talvez eu precise acompanhar um pouco mais disso, se quisermos entrar em coisas profundas de implementação técnica.

Scott: Perfeito.

Aaron Pearlman: Meu desenvolvedor, então eles não orientam você a chegar, mas em geral esse tende a ser o caso. O exemplo que mostrei deve ser adequado. Se você quiser porque é uma exclusão, você pode ter uma parte intermediária em que você lança um alerta e diz: "Tem certeza de que deseja que ele exclua isso?" Nesse caso você está apenas reforçando ainda mais o que está acontecendo.

Scott: Ótimo. Então, sim, tente manter as perguntas focadas na experiência do usuário. Então, do ponto de vista da experiência do usuário, como você gerenciaria o foco das mensagens de notificação?

Aaron Pearlman: Foco para uma notificação? Posso mostrar-lhe um se quiser ver.

Scott: Claro.

Aaron Pearlman: Podemos escolher aleatoriamente porque temos brindes, que são notificações. Então eu vou abrir brindes aqui. Então, isso está realmente sendo focado agora. Este brinde é evocado e está sendo focado agora e você pode realmente, como você pode ver, você pode entrar na cláusula aqui. Então, depende. So, if I finished something and I wanted to notify them that it's been finished and I toasted it, then I want to focus it so that they can see that it's been … that I'm communicating that information to them. So you want to shift focus to it.

Scott: Melanie is asking, “Do you have any tips for tips or resources for navigating slideshows?”

Aaron Pearlman: For navigating slideshows?

Scott: [crosstalk 00:36:00]. Very specific.

Aaron Pearlman: Yes. So navigating slideshows. We don't use them very often, so I'm going to answer this as best as I can. So one slideshows especially ones that are like carousels, they need to have a control so that you can stop them. I think that's an accessibility need, is that they have to have some control and a mechanism so that they can be stopped. Anything that's an animation wise can't animate for more than five seconds at a time and then the animation has to stop.

Aaron Pearlman: That may not be relevant to what you're doing, but it is moving. And those controls then need to be focusable most carousels have … A lot of fancy new ones. we'll have menus that can come up when they get hovered over or focused on, just consider that all those controls need to be traversable, and then their very image heavy. A lot of carousels and slideshows need to be, so that you're going to need to have proper alternative texts on them. Just the things that you would expect.

Aaron Pearlman: Off the top of my head, I don't know of any fully accessible carousel that I can think of. But let me see if I can find a better example and I will try and pass it along through smashing and have that available if I can find it. It's a great question because they come up a lot. I ended up tending to solve that problem in a slightly different way because I think they're tricky, but that doesn't mean that they can't be done.

Scott: Rebecca is asking, “Can you give a use case for skip links?” And then similar early related, Patricia's asking, “Do you know how to solve the issue with skip links in Safari plus the VoiceOver?” [crosstalk 00:38:18]. Again, maybe more technical than user experience related.

Aaron Pearlman: Yes. The second one, I'm not entirely sure what actually is going on that, that there may be an issue there. Again, I can try and see if that's something that our developers have encountered before and how they've gotten around it. So we'll make a note of that and I'll try and circle back. But for the first one what's a use case for Skip links? I want to avoid giant banner menus and I want to get straight to a sale that I heard that there is today and I don't want to have to do that.

Aaron Pearlman: If I was a sighted a mouse only user, I would just visually ignore it and then go move my mouse over and just click on the sale item. If I'm a keyboard only ora assisted technology user, I would have to tab through all of that menu, potentially bunch of banner items as well before I could finally get to the workspace. that has maybe the sale items. So that would be a great use for a Skip link to get right to the content. Skip to main content is a phrase you see very, very common. Ir para o conteúdo principal.

Scott: Okay. That's a good, good point. And I think in terms of all the user related questions from the attendees that covers them. We do have some general questions that we like to ask. So, low hanging fruit for people that are trying to build an accessible website. If somebody wants to put together a site in a few hours and make sure it's accessible, what are some the easy things that just they can check off the list right away.

Aaron Pearlman: Sure. So some things that you can do immediately with any site or application that you're working on, you can review your font choices for things like color contrast, there are plenty of color, if you put in color contrast, selector, picker or something like that, you'll get it and you'll just put it in the Hex value or the RGB value of what your font is and then what the background, whatever element the background color is sitting on and make sure that it's meeting at 4.5 to one.

Aaron Pearlman: So that's one that you can do immediately. Check your color Palette, you want to do color contrast where I see that color contrast fails a lot is when people use the endless shades of gray to have various levels of first class, second class, third class elements and things like that. Just make sure that if it's an interactive element that it's a passing color contrast.

Aaron Pearlman: Another thing, check your the images that are important, that are non decorative images. Make sure that they have all texts. Just one that you can add immediately. And then check your review, your heading structure, make sure that your h1 tags, h2 tags, h3 tags, h4 tags and so on. They all make sense with the structure of it and make sure that the content is properly paired with those heading tags.

Aaron Pearlman: That's things that you can do immediately. And then also you can just, this is a small blog but you can download AX, that's our accessibility engine. It's totally free. It's a little extension for chrome and Firefox and just hit the run button and see what you find. It's a lot of things that you can help alleviate immediately or change immediately. You can also turn on VoiceOver, for example, if you're on a Mac and start to go through your site and see what it sounds like for somebody who uses just a technology. It's a great thing that we can do immediately.

Scott: Okay. Janat, has a question here. So what is it about accessibility that interests you and how did you know you've been doing design and UX for so long, but you've only been doing accessibility for smaller period of time, so that catch your attention?

Aaron Pearlman: It had been something that had been on the purview of some of the design that I had done in a later part of my design career till I got here. In my design career, I've always wanted to work on things that I felt in some way tried to make the world a slightly better place and I felt that working. And accessibility was one way to make … Very much believe in the core value of universal design or more importantly adapted design. Design that adapts itself to two different types of individuals to provide what we call GQ like digital equality. We want everyone to be able to use everything as best as we can possibly provide that universal experience that we can have. I don't know as a person that very much appeals to me. And so it was just a good fit to learn design. That's really cool.

Aaron Pearlman: Designing accessibly is a one way street. Like once you start to design accessible, you never don't not design accessible anymore. It's like UX designers don't design unless you're being tongue in cheek, you're not going to design something to have a really poor user experience. It's going to be part of your vernacular from that point forward. And once you begin to design accessibly, it never goes away. I can't like not think about accessibility as I do designing and that's a really, really cool thing.

Aaron Pearlman: It also affords you to start to think about things that you didn't think you had access to. Like, did you know that your focus on your page, you can design focus to look differently for different elements on the page? That blew my mind when I found that out and I thought that was so cool that gave me a little bit more control, I knew you could create really cool Hover States, but I didn't know focus was a state that you had full control over as well.

Scott: Our industry there's always a new trend that's just kind of how it goes, that's the web. Are there any design trends right now that you know that are inhibiting accessibility? And if so, is there any recommendations you can make to avoid that?

Aaron Pearlman: I don't know if there's anything that's super trendy right now when I look at different sites and web applications that couldn't be designed excessively. I think there are pitfalls that that we've been falling into longer than any one trend as existed or at least has existed for some time. I just mentioned one, what I call the endless shades of gray. That's one. In general, just being mindful of the contrast for your text. It is rampant.

Aaron Pearlman: It is by an order of magnitude, the most accessibility issues, if you were to like run an engine against it, like AX, it'll be color contrast almost always. So just being really, really, really mindful of that regardless of where your text is on the page. Again, I mentioned it again, just being careful with your images. If you have an image that's conveying important information to a sited user, that information needs to be conveyed to the user. That is user as well.

Aaron Pearlman: And what I mean by information that's conveyed is if what's being conveyed is that the person is doing something that's, you wouldn't necessarily describe it as a man standing. It could be that they're playing baseball. Maybe that's the important part. So make sure that the, that the, the alternative text matches with the intended information that's trying to be conveyed, received out a lot too. Even when all texts is there, it just doesn't accurately describe what is trying to be portrayed.

Aaron Pearlman: And then the other one too is progressive disclosure menus, many times you see on Hover Menus and stuff like that. They don't do a great job of being evoked on focus as well. And they don't always do a good job of … So that is a trend I do see. I do see a lot of menus coming up on Hover, when you hover over something you get the secondary menu that was hidden before that now finds itself to the front.

Aaron Pearlman: Also making that be able to Hover or a mechanism that allows you to evoke it and that will properly capture focus inside there so that you can use it. Those are a few things off the top of my head that I can say I would see a lot.

Aaron Pearlman: So as a graphic designer, you obviously work with development teams and a lot of the times when we're doing wireframes and design of the onset of the project, they're inherently not inaccessible. It doesn't really become an issue, it seems until it comes to the development stage and people start taking that design and turning it into code. So how do you work with developers to make sure that the design that is being made from the start is going to be accessible when they're done with it. Do you do audits throughout the process, at the end of the process? Like what's the workflow with developers?

Aaron Pearlman: Sure. So the workflow for our development team is going to be, I think somewhat similar to a lot of other organizations. We work in scrum, so we work in sprints and scrum and I'll go through a discovery process. They're going to be privy to that, they're not going to see it when the design is fully finished.

Aaron Pearlman: They're going to see it throughout the design. I'll have opportunities to talk with them a little bit about what the intent of the design is. They will probably set in on some of the user research that I've done, some of these ability testing that I've done. So, hopefully at that point nothing's really new to them that I'm not going to get any 11th hour that we can't even do this thing. I still have to deal with all the other things outside of accessibility that every other designer has to deal with, like is this feasible? Is it valuable? Is it all of those things that we have to deal with.

Aaron Pearlman: With regards specifically to accessibility, sometimes I will annotate the designs in a particular way that will indicate where tab focus should go. At the end of the slide deck that I have, there's a great resource that one of the designers from Adobe put together. I know there's like a pdf, there may be. There's like a sketch file as well in there, there may be an XD file as well.

Aaron Pearlman: I don't think, maybe just sketch. But it shows you like all of these different ways that you can annotate things like, accessible names, tab order and basically are little objects that you can place on your design to indicate some of those things as you go through. It's a really, really wonderful resource. It's all included in here as well. That's a great way of saying, “Here's part of my prototype and here's the expected tab, order for it.” So that you have that as part of your artifact as part of the digital documentation or annotation that goes along with it.

Aaron Pearlman: Então, uma coisa que fazemos é anotar meus designs bastante. Tudo, desde o tamanho de como certas coisas deveriam ser até os códigos hexadecimais ou valores RGBA para o que deveria parecer e sentir. Mas também existem anotações de acessibilidade que você também pode adicionar.

Aaron Pearlman: E então apenas comunicar, olhar através das compilações à medida que elas passam, certificando-se de que coisas como se você fez algum foco personalizado que esses focos personalizados fiquem ótimos, verifique o contraste de cores, certifique-se de que está passando, que a fonte escolhas que você teve, existem algumas fontes que quando seu peso é maior e elas são maiores. Seu contraste de cores não precisa ser 4,5. Na verdade, pode ser um pouco mais baixo, mas você só vai querer ficar de olho nessas coisas. Assim como você ficaria de olho nas coisas da experiência também. Você vai querer ficar de olho nas coisas que você está atento e anotado em seus projetos.

Scott: Então temos alguns minutos restantes aqui. Então vou fazer mais uma pergunta. Algumas pessoas acham que a acessibilidade pode sufocar a criatividade ao longo do processo de design. Isso é algo que você se deparou? Como você acha que a criatividade se encaixa no design acessível?

Aaron Pearlman: Claro. Essa foi uma das minhas reações iniciais ao ter que projetar de forma acessível, foi que alguém basicamente colocou as algemas em mim e disse: “Há uma caixa muito menor na qual você precisa trabalhar”. É verdade que projetar de forma acessível significa que pode haver mais alguns desafios porque há mais regras que você precisa seguir. Mas no final, descobri que a experiência acaba sendo melhor e eu não… Depois que removi esse nome impróprio e comecei a fazer designs cada vez mais acessíveis que eram acessíveis ao WCAG 2.0 AA, percebi que posso fazer praticamente tudo que eu queria fazer.

Aaron Pearlman: Às vezes eu só precisaria expressar ou resolver problemas de uma maneira um pouco diferente do que eu fazia antes. Acho que muitas pessoas quando pensam em projetar de forma acessível... Vou dar um exemplo bem específico. Quando pensam em projetar acessibilidade, pensam: “Bem, não posso fazer todas essas visualizações sofisticadas, por exemplo. Não poderei fazer todas essas coisas porque elas não serão acessíveis, porque se um indivíduo não puder vê-las, não poderei fazer isso.”

Aaron Pearlman: Eu estava projetando uma visualização que era apenas básica, apenas uma espécie de gráfico de linhas e, sob eles, havia um gráfico de linhas, no eixo x, acho que era o tempo e no eixo y, era o uso ou algo como aquele. E havia esse pequeno gradiente agradável que descia e havia essas linhas de luz que ficavam por trás para delinear os meses e o tempo. E quando conversei com um dos meus especialistas no assunto sobre como torná-lo acessível, descobri que eu tinha certeza de que ele ia dizer “Não”. Mas ele disse que na verdade havia apenas algumas coisas que eu precisava fazer para tornar este gráfico realmente bonito acessível. Primeiro, essa linha no topo precisa passar contraste de cores porque é isso que está transmitindo as informações da tendência ao longo do tempo.

Aaron Pearlman: O material gradativo por baixo é apenas decoração e contanto que não interrompa a passagem do contraste de cores disso e das linhas do eixo y e x e acabou ficando bom. Essas linhas atrás dele estavam bem, mas acabei adicionando marcas de verificação na parte inferior para indicar isso. E então, quando eu passei o mouse e foquei, porque às vezes você pode passar o mouse e adicionar um ponto a parte do gráfico de linhas, apenas certificando-se de que o próprio ponto passaria de cor. contraste. Eu fiz isso fazendo o tipo de rosquinha onde você coloca um ponto branco com outro ponto ou devo dizer que tem como um grande traço do lado de fora também.

Aaron Pearlman: E então eu adicionei um pouco de tratamento lá que traria aquelas linhas que estavam desbotadas de volta para a frente. E tudo passou contraste de cores e acabou ficando bom. Foram visualizações realmente bonitas que passaram. Agora concedido, não estou entrando em todas as coisas de nomes acessíveis e sendo capaz de fazer isso. Muitas bibliotecas estão nisso. Deixando isso de lado, pelo menos chamamos de contraste porque é onde eu acho que muitos designers lutam. Você consegue.

Aaron Pearlman: Trata-se apenas de estar realmente atento a esses tipos de coisas, e obter mais exemplos e apenas tentar e tentar coisas diferentes, e ter outras pessoas com quem você possa apresentar essas ideias e repassá-las e verificar novamente, apenas realmente faça isso. Eu não acho que isso realmente inibe nada. Isso só faz com que você tenha que pensar um pouco mais claro sobre como você vai fazer isso e ter certeza de que está olhando através das lentes de como um indivíduo se envolveu com isso se tivesse baixa visão ou se não pudesse Não conseguia ver ou não conseguia ouvir se você estivesse criando um aplicativo de mídia.

Scott: Mais uma pergunta, mas acho que deveríamos ter abordado isso. Em que etapa do seu processo você começa a pensar em acessibilidade? Vou assumir durante todo o processo.

Aaron Pearlman: Sim, é durante todo o processo. Eu vou ser um pouco mais do que... Eu sei a quem digo isso e soa um pouco irreverente. Então, no início, quando você está fazendo coisas como prototipagem de baixa fidelidade, você vai pensar em coisas como algumas coisas de ordem de tabulação. Você vai estar pensando em talvez títulos e estrutura, coisas assim. Esse é o tipo de material de acessibilidade que você pensa. Mais tarde, à medida que a fidelidade aumenta, você pensará em coisas mais como cores e paletas que escolheu, talvez nomes acessíveis, texto alternativo para qualquer coisa que possa merecer isso, você pode estar pensando, se você estiver fazendo algum foco personalizado, por exemplo, provavelmente é aí que você começará a pensar sobre isso.

Aaron Pearlman: Isso não significa que você não pode pensar sobre isso quando você está fazendo baixa fidelidade apenas significa em geral, quando eu passo pelo meu processo, essas coisas tendem a se enquadrar nessas categorias. Você está pensando em acessibilidade o tempo todo, mas nem sempre está pensando em tudo com isso, pois está em coisas de baixa fidelidade, e você está idealizando, e apenas pensando em ideias, e você está apenas trabalhando com ideias, deixe que essas coisas criativas passem à medida que você se torna mais sintonizado com a acessibilidade, isso vai intrinsecamente entrar e haverá menos uma coisa consciente.

Scott: Sim. Justo. Bem, falando nisso, estamos sem tempo, Aaron. Muito obrigado pelo seu tempo e—

Aaron Pearlman: Isso foi ótimo. Eu tive um tempo maravilhoso.

Scott: Você estará nas próximas conferências do Smashing, eu acho.

Aaron Pearlman: Estarei no de Nova York. Estarei no de Nova York.

Scott: Ok. E vocês estão fazendo um workshop lá?

Aaron Pearlman: Sim, estamos.

Scott: Ok. Impressionante. Bem, obrigado novamente pelo seu tempo e apenas para mostrar aos membros que ainda estão assistindo, teremos dois webinars na próxima semana. O primeiro é Power of Digital People, com Kristina Podnar. E então temos um número três em nossa série com Andrew Clarke, Inspired Designs Decisions, número três inspirado no Ernest Journal. Muito obrigado a todos pela presença hoje. E, novamente, essa gravação estará disponível no painel de membros de despacho assim que terminarmos de editá-la e esperamos ver todos vocês na próxima semana. Então, obrigado novamente Erin.

Isso é um envoltório!

Agradecemos gentilmente aos membros do Smashing do fundo de nossos corações por seu apoio contínuo e gentil - e mal podemos esperar para hospedar mais webinars no futuro.

Não poderíamos estar mais felizes em receber Aaron em nossa próxima SmashingConf New York (15 a 16 de outubro) – adoraríamos vê-lo lá também!

Por favor, deixe-nos saber se você acha esta série de entrevistas útil, e quem você gostaria que entrevistássemos, ou quais tópicos você gostaria que abordássemos e nós vamos direto ao assunto.