Handoff de acessibilidade

O que é e como realizar esse importante processo de desenvolvimento de produtos digitais acessíveis

Muito se ouve falar sobre acessibilidade, em como tornar nossos produtos digitais acessíveis, mas será mesmo que o time de UX sabe como repassar essas especificações para o time de desenvolvimento? Como realizar um
handoff de acessibilidade? O que devemos levar em conta nesse momento? São várias as dúvidas que podem surgir.

Essas foram algumas das perguntas que eu me questionava sempre e é sobre elas que pretendo falar neste artigo.

Afinal, o que é Handoff?

De forma prática e simples é o momento em que a pessoa Designer UX/UI faz a passagem de bastão para o time de Desenvolvimento. Dentro de todo o processo do trabalho de Design existe a hora da transferência de responsabilidades entre os times, mas isso não significa que a pessoa Designer deixa de acompanhar o produto, pelo contrário, ela passa a acompanhar de forma colaborativa com o time de Desenvolvimento e o time de QA.

QA: Analista de qualidade seria aquela pessoa que garante a qualidade da entrega de um produto ou serviço, tendo como objetivo identificar melhorias do produto, apoiar nos processos, desde o planejamento até a execução dos testes.

No entanto, o Design Handoff não é só sobre repassar o trabalho, mas sim colaborar com os demais times que irão receber tudo o que você fez desde o discovery, passando pelo delivery até o momento de repassar todas as informações. É nessa etapa que vamos documentar absolutamente tudo. É o momento de transmitir as suas ideias, documentar as regras de negócio, explicar como os componentes irão se comportar — é exatamente nessa etapa que devemos tomar o máximo de cuidado para que não ocorra falhas de comunicação entres os times.

E quando eu falo que o Handoff é um trabalho colaborativo, é porque nele é importante deixar a abertura para que haja uma colaboração do time de Desenvolvimento. Digo isso, pois, por muitas vezes nós Designers estamos tão focados no trabalho, que podemos esquecer de criar determinada página, fluxo de exceção ou até mesmo pensar em uma mensagem de erro e a pessoa desenvolvedora pode — e deve — levantar a mão e nos questionar sobre esses assuntos e sugerir o que podemos incluir.

Handoff não é a finalização do seu trabalho. Pelo contrário, é uma continuação, já que iremos acompanhar esse processo junto com o time de Desenvolvimento e também com o de QA.

Documentação técnica — Handoff

Vamos falar de documentação técnica de acessibilidade

Muitas pessoas não têm ideia de como funciona uma documentação e muito menos quando falamos em documentação de acessibilidade. Mas calma lá, primeiro precisamos entender o que é preciso conter nessa documentação e termos em mente o quanto podemos gerar de vantagens no repasse dessas informações.

Ela é composta de uma série de itens indispensáveis para se obter uma documentação bem legal. São eles:

• Protótipo criado, testado e finalizado
• Regras de negócio bem detalhadas
• Espaçamentos detalhados
• Toda a especificação de acessibilidade

Documentação técnica de acessibilidade — Handoff

O que é especificação? O que é ordem de leitura? Como se faz?

Agora que já sabemos o que é Handoff e o que é uma documentação técnica, é hora de entender como construir um Handoff de acessibilidade. Afinal, esse é o objetivo deste artigo, não é mesmo?

Mas não tem como ir direto para os pontos básicos sem antes falar de algo muito básico: a especificação de acessibilidade. Ela nada mais é do que toda a definição detalhada item por item da nossa documentação. É nessa especificação que entra a famosa ordem de leitura, mas você deve tá se perguntando o que é isso? Será que é de comer?

Já adianto que não, não é de comer, mas sim algo que traz muito valor para muitas pessoas que forem navegar pelo seu projeto digital, seja ela pessoa com deficiência visual ou outras características.

Quando falamos em ordem de leitura para alguns pode parecer óbvio. Ela poderia simplesmente falar que é a ordem que os objetos são inseridos dentro de um HTML. Mas não é bem assim que funciona. Nós como Designers temos um papel fundamental nessa etapa (lembrando que a leitura é sempre de cima para baixo, da esquerda para a direita), pois é nesse momento em que iremos colocar ordem em todos os elementos no protótipo para que os nossos amigos e amigas do time de Desenvolvimento possam “codar” o produto seguindo exatamente como está na nossa documentação.

Pilares fundamentais

Agora chega de enrolação! Vamos de fato entender alguns pilares fundamentais que irão te ajudar — ou pelo menos te dar um norte — a iniciar a sua documentação de acessibilidade. E posso te garantir que é bem simples. São três pilares:

Feedback
Toda pessoa usuária tem o direito de receber uma comunicação clara dos nossos produtos digitais. Nesse primeiro pilar nós temos 3 tipos de comunicação. Aqui, vale ressaltar que todo código escrito com uma semântica correta permitirá ao leitor de tela identificar os exemplos a seguir sem problemas:

• Tipo de elemento: vamos especificar qual é o componente que estamos usando. Um exemplo prático que gosto de usar é o Radio Button, parece meio óbvio, afinal o time de Desenvolvimento sabe o que é um Radio Button, mas devemos sempre deixar tudo especificado para que não ocorra erros.
• Status do elemento: define a condição atual do elemento. Usando o exemplo do Radio Button, ele tem duas condições: Selecionado ou Não selecionado. Nesse caso iremos especificar como “Deve ser identificado como radio button selecionado”.
  * Vale lembrar que nesse caso o leitor de tela já identifica o selecionado e não selecionado quando o código está escrito com uma semântica correta.

Exemplo de especificação para tipo de elemento e status do elemento

• Instrução para uma ação futura: a pessoa usuária é avisada sobre o que irá acontecer no futuro. Um exemplo muito simples de visualizar é o botão. Nele temos que conter informações futuras, ou seja, quando o leitor lê esse botão ele já tem que trazer a informação “Clique duas vezes para acessar x página”. Nessa informação já estamos transmitindo para a pessoa usuária de leitor de tela o que irá acontecer após clicar nesse botão.

Comportamento
Quando falamos desse pilar em específico temos que pensar na forma que o nosso produto digital irá se comportar. E, como todo Designer, temos que pensar de forma minuciosa como uma pessoa usuária de leitor de tela irá receber aquelas informações visuais em forma de áudio.

• Ordem de navegação: já falamos um pouco sobre isso no início do artigo, mas só para reforçar: ele é o modo como disponibilizamos as informações na tela detalhando em forma de números como será feita essa navegação.

Exemplo de especificação ordem de navegação

• Agrupamento de informações: devemos sempre pensar como um elemento que possui 4 informações será repassado para uma pessoa usuária de leitor de tela. É aí que entra o agrupamento. Na documentação iremos especificar que um elemento que contém mais de 1 informação terá que ser repassado em único swipe, para que quem está recebendo essa informação, a receba de forma única, clara e objetiva.

Exemplo de especificação agrupamento de informações

• Comportamento interativo: em toda e qualquer interação que tenha no nosso produto digital é preciso informar a pessoa usuária do que irá ocorrer. Um exemplo prático e comum de acontecer é quando a pessoa clica em uma tela no aplicativo e é redirecionada para uma página fora do aplicativo. Nesse tipo de interação é preciso informar à pessoa que “Ao clicar no botão você será redirecionado para uma página externa”.

Conteúdo
Podemos dizer que o terceiro e último pilar seja o mais amplo de todos, afinal é por meio dele que iremos mostrar para uma pessoa usuária de leitor de tela a beleza de alguma imagem.

• Níveis de título: basicamente é H1, H2, H3 que usamos dentro do HTML, sempre respeitando a ordem de cada um deles. Uma regra básica na acessibilidade é que existe apenas um H1, pois é através do H1 que as pessoas usuárias de leitor de tela conseguem identificar o título da página, os demais podemos usar mais de uma vez.

Exemplo de especificação níveis de título H1 e H2

• Texto explicativo: é importante avaliar se a imagem do nosso protótipo é relevante ou não para quem está acessando nosso produto digital pelo leitor de tela. Caso a resposta seja sim, devemos criar uma descrição para ela e repassar esse conteúdo para a pessoa desenvolvedora inserir no código como essa imagem será informada para nossa pessoa usuária.

Leia mais sobre descrição de imagens e comunicação inclusiva

Exemplo de especificação texto explicativo

• Texto complementar: devemos sempre ter em mente e nunca cometer o erro de ficarmos dependendo somente de cores para transmitir informações para nossas pessoas usuárias sobre algum erro no formulário, por exemplo. Afinal, se isso acontecer, uma pessoa que tem daltonismo não receberá a informação de forma correta caso tenha digitado algum item errado na página. Por isso temos que pensar além da cores e complementar a informação com texto. Exemplo: trazer o texto CPF incorreto abaixo do input onde a pessoa digitou. Vale lembrar que podemos inserir a cor vermelha + ícone + texto complementar para que possamos transmitir de forma clara e objetiva a informação.

Exemplo de especificação uso de cor vermelha + texto complementares + ícone

Como você viu ao longo deste artigo, o Handoff de acessibilidade é um processo crucial para qualquer produto. É com ele que iremos garantir um design acessível e inclusivo. Espero que você consiga tornar os seus produtos acessíveis utilizando o processo de Handoff mais produtivo e menos caótico.

No momento em que escrevo este artigo, me despeço deste time incrível que é o Centro de Excelência de UX. Fazer parte desse time foi transformador na minha vida, foram 2 anos e 2 meses cheios de aprendizados que irei carregar.

Cada membro dessa equipe, sem exceção, contribuiu para o meu crescimento profissional e pessoal. Me despeço do Banco Carrefour com a certeza de que cumpri minha missão e deixo meu carinho aqui por esse ciclo que foi tão importante em saber que tive o privilégio de evoluir com os melhores — Paulo Aguilera, Paula Volker, Joyce Marques, Douglas Vieira, Paulo Peres, Filipe Marques, Tainá Fabro e outras pessoas incríveis. Sim, trabalhei em um time maravilhoso que me enche de orgulho, vocês são demais .😍❤️

Vamos trocar? Comente aqui ou vamos conversar no LinkedIn! 😉

Referências
Fica aqui meu agradecimento a algumas pessoas que são referência no tema e que de alguma forma ajudaram para construção desse artigo:
Marcelo Sales, Alvaro Zermiani, Bruno Welber Pereira e Maurício Pereiro.

Além desse artigo maravilhoso
https://medium.com/accessibility4devs/como-fazer-o-handoff-de-designs-acess%C3%ADveis-para-as-pessoas-desenvolvedoras-eb559d4bf0d7