Automatizando o teste do leitor de tela no macOS usando o VO automático

Se você é um nerd de acessibilidade como eu, ou apenas curioso sobre tecnologia assistiva, você vai gostar do Auto-VO. O Auto-VO é um módulo de nó e CLI para testes automatizados de conteúdo da Web com o leitor de tela VoiceOver no macOS.

Criei o Auto VO para tornar mais fácil para desenvolvedores, PMs e QA realizar testes automatizados e repetitivos com mais rapidez com tecnologia assistiva real, sem o fator de intimidação de aprender a usar um leitor de tela.

Vamos lá!

Primeiro, vamos vê-lo em ação e, em seguida, entrarei em mais detalhes sobre como ele funciona. Aqui está executando o auto-vo CLI em smashingmagazine.com para obter toda a saída do VoiceOver como texto.

 $ auto-vo --url https://smashingmagazine.com --limit 200 > output.txt $ cat output.txt link Jump to all topics link Jump to list of all articles link image Smashing Magazine list 6 items link Articles link Guides 2 of 6 link Books 3 of 6 link Workshops 4 of 6 link Membership 5 of 6 More menu pop up collapsed button 6 of 6 end of list end of navigation ...(truncated)

Parece uma estrutura de página razoável: temos links de navegação para pular, listas bem estruturadas e navegação semântica. Ótimo trabalho! Vamos cavar um pouco mais fundo embora. Como está a estrutura do título?

 $ cat output.txt | grep heading heading level 2 link A Complete Guide To Accessibility Tooling heading level 2 link Spinning Up Multiple WordPress Sites Locally With DevKinsta heading level 2 link Smashing Podcast Episode 39 With Addy Osmani: Image Optimization heading level 2 2 items A SMASHING GUIDE TO Accessible Front-End Components heading level 2 2 items A SMASHING GUIDE TO CSS Generators & Tools heading level 2 2 items A SMASHING GUIDE TO Front-End Performance 2021 heading level 4 LATEST POSTS heading level 1 link When CSS Isn't Enough: JavaScript Requirements For Accessible Components heading level 1 link Web Design Done Well: Making Use Of Audio heading level 1 link Useful Front-End Boilerplates And Starter Kits heading level 1 link Three Front-End Auditing Tools I Discovered Recently heading level 1 link Meet :has, A Native CSS Parent Selector (And More) heading level 1 link From AVIF to WebP: A New Smashing Book By Addy Osmani

Hmm! Algo está um pouco estranho com nossa hierarquia de títulos. Devemos ver um esboço, com um nível de título um e uma hierarquia ordenada depois disso. Em vez disso, vemos uma mistura de nível 1, nível 2 e nível 4 errôneo. Isso precisa de atenção, pois afeta a experiência dos usuários de leitores de tela ao navegar na página.

Ter a saída do leitor de tela como texto é ótimo porque esse tipo de análise se torna muito mais fácil.

Alguns antecedentes

O VoiceOver é o leitor de tela no macOS. Os leitores de tela permitem que as pessoas leiam o conteúdo do aplicativo em voz alta e também interajam com o conteúdo. Isso significa que pessoas com baixa visão ou cegas podem, em teoria, acessar conteúdo, incluindo conteúdo da web. Na prática, porém, 98% das páginas de destino na web têm erros óbvios que podem ser capturados com testes e revisões automatizados.

Existem muitas ferramentas automatizadas de teste e revisão por aí, incluindo AccessLint.com para revisão automatizada de código (divulgação: eu criei o AccessLint) e Axe, um recurso comum para automação. Essas ferramentas são importantes e úteis, mas são apenas parte do cenário. O teste manual é igualmente ou talvez mais importante, mas também consome mais tempo e pode ser intimidante.

Você pode ter ouvido orientações para “ligue o leitor de tela e ouça” para ter uma noção da experiência cega. Eu acho que isso é equivocado. Os leitores de tela são aplicativos sofisticados que podem levar meses ou anos para serem dominados e são esmagadores no início. Usá-lo ao acaso para simular a experiência cega pode levar você a sentir pena das pessoas cegas, ou pior, tentar “consertar” a experiência da maneira errada.

Já vi pessoas entrarem em pânico quando habilitam o VoiceOver, sem saber como desativá-lo. O Auto-VO gerencia o ciclo de vida do leitor de tela para você. Ele automatiza o lançamento, controle e fechamento do VoiceOver, para que você não precise fazer isso. Em vez de tentar ouvir e acompanhar, a saída é retornada como texto, que você pode ler, avaliar e capturar para mais tarde como referência em um bug ou para instantâneo automatizado.

Uso

Embargo

No momento, devido ao requisito de habilitar o AppleScript para VoiceOver, isso pode exigir configuração personalizada de máquinas de construção de CI para execução.

Cenário 1: controle de qualidade e aceitação

Digamos que eu (o desenvolvedor) tenha um design com anotações de linha azul - onde o designer adicionou descrições de coisas como nome e função acessíveis. Depois de criar o recurso e revisar a marcação nas ferramentas de desenvolvimento do Chrome ou Firefox, quero enviar os resultados para um arquivo de texto para que, quando eu marcar o recurso como concluído, meu PM possa comparar a saída do leitor de tela com as especificações de design . Eu posso fazer isso usando a CLI auto-vo e enviando os resultados para um arquivo ou terminal. Vimos um exemplo disso anteriormente no artigo:

 $ auto-vo --url https://smashingmagazine.com --limit 100

Cenário 2: Desenvolvimento Orientado a Testes

Aqui estou eu novamente como desenvolvedor, construindo meu recurso com um design anotado em linha azul. Quero testar o conteúdo para não precisar refatorar a marcação posteriormente para corresponder ao design. Eu posso fazer isso usando o módulo de nó auto-vo importado para o meu executor de testes preferido, por exemplo, Mocha.

 $ npm install --save-dev auto-vo import { run } from 'auto-vo'; import { expect } from 'chai'; describe('loading example.com', async () => { it('returns announcements', async () => { const options = { url: 'https://www.example.com', limit: 10, until: 'Example' }; const announcements = await run(options); expect(announcements).to.include.members(['Example Domain web content']); }).timeout(5000); });

Sob o capô

O Auto-VO usa uma combinação de script de shell e AppleScript para conduzir o VoiceOver. Enquanto explorava o aplicativo VoiceOver, encontrei uma CLI que suporta iniciar o VoiceOver a partir da linha de comando.

 /System/Library/CoreServices/VoiceOver.app/Contents/MacOS/VoiceOverStarter

Em seguida, uma série de executáveis ​​JavaScript gerencia as instruções do AppleScript para navegar e capturar anúncios do VoiceOver. Por exemplo, este script obtém a última frase dos anúncios do leitor de tela:

 function run() { const voiceOver = Application('VoiceOver'); return voiceOver.lastPhrase.content(); }

Em Fechamento

Eu adoraria ouvir sua experiência com auto-vo e receber contribuições no GitHub. Experimente e me conte como ficou!