A acessibilidade é uma responsabilidade de toda a equipa. Todos os profissionais das equipas de transformação digital têm um contributo a dar dentro de cada projeto para a definição, desenho e desenvolvimento de produtos e serviços digitais realmente acessíveis. Isso inclui não só designers e developers, mas também os managers, gestores de projeto, analistas, testers e todos os profissionais que de uma maneira ou de outra dão um contributo relevante para os projetos de transformação digital das empresas.
Quer isto dizer que a acessibilidade digital é mesmo uma responsabilidade partilhada. Um tema do qual ninguém se pode demarcar. A sua qualidade, resulta do somatório de todas as decisões que são tomadas ao longo dos projetos e onde muitas pessoas participam. Não pode nem deve ser renegada para as fases finais dos projetos. Se assim for, já será tarde para encarar a acessibilidade digital como ela deve ser encarada. Como algo que deve estar intrinsecamente ligada com os processos de trabalho da equipa, aparecendo na sua sequência de forma natural e orgânica.
Acessibilidade nos processos de trabalho
Mas, para que o trabalho concreto de acessibilidade digital seja uma realidade no dia a dia dos projetos, é fundamental compreendermos que é necessário mexer nos processos de trabalho das equipas. Não revolucionar os processos já instituídos, mas ter a garantia clara que todos os processos de trabalho, de todas as equipas incluem dinâmicas e atividades específicas. É só com esta garantia que será possível assegurar a qualidade da acessibilidade digital dos produtos e serviços digitais que estamos a construir. É precisamente isto que faz a AccessibilityOps.
Um dos processos que melhor tem que funcionar é a articulação e comunicação entre as várias equipas. Isto já seria verdade em qualquer contexto, mas quando o tema é acessibilidade digital, torna-se ainda mais importante e relevante. Muito em especial entre a equipa de design e development. Não sendo as únicas duas responsáveis pela acessibilidade, estas duas equipas têm um papel preponderante.
Para que esta boa articulação seja uma realidade, é necessário não só muito diálogo entre estas duas equipas, claro, mas igualmente processos de documentação estruturados e sustentados. A comunicação é essencial que seja clara e aberta, e as ferramentas de colaboração devem ser eficazes para facilitar esse intercâmbio. As anotações de acessibilidade no design são mais uma ferramenta que pode contribuir para uma melhoria substancial do trabalho da acessibilidade digital em qualquer projeto, ajudando pelo caminho a melhorar a colaboração entre as equipas de design e development.
Os modelos de documentação e os processos de anotações de acessibilidade é um tema que tem vindo a ser trabalhado pela comunidade de design de forma extensiva ao longo do tempo. Na comunidade existem muitos autores, designers e não só, que defendem algum tempo que a documentação, embora possa parecer uma tarefa adicional pesada, ajuda em muito a melhorar a acessibilidade dos produtos e serviços digitais. Não é difícil encontrar online sugestões de como documentar a acessibilidade num projeto. O complicado muitas vezes é compreender como colocar em prática no dia a dia todas as preocupações e cuidados de anotações de acessibilidade que devemos ter em conta em qualquer projeto.
A clareza e documentação do trabalho de design, que muitas vezes é invisível olhando só para o desenho do interface, é um ponto de partida importante para o processo de desenvolvimento do código. É primordial garantir que quando a equipa de development começa o desenvolvimento do código, que tem claro também todo o pensamento de acessibilidade que foi construído pela equipa de design. E é precisamente aqui que as anotações de acessibilidade no design podem ser uma grande ajuda.
Conteúdo também é design
Antes de avançarmos mais no tema das anotações de acessibilidade no design é importante clarificar um outro conceito. Pode ser discutível, na acessibilidade digital nem tanto (ou não deveria), mas neste caso em específico, assume-se que a estruturação e edição do conteúdo, sendo eles, textos, imagens, infografias, videos, etc. também integra o trabalho de design. Ou melhor dizendo, o trabalho do conteúdo também é design. Porquê?
Primeiro que tudo é importante não esquecer que é por causa deste conteúdo (ou das funcionalidades que vamos oferecer) que as pessoas vão utilizar o nosso produto ou serviço digital. Não é por causa de mais nada.
Creio que tenho uma má noticia para os designers e developers. Mas as pessoas não se sentam confortavelmente à frente dos seus computadores e telemóveis. Olham com um ar amoroso para os ecrãs que nós com tanto trabalho ajudámos a construir e pensam: “mas que pelo design”, “excelente aplicação dos princípios da Gestalt”, “que código tão estruturado e limpo”. Lamento. As pessoas não fazem isto. A bem da verdade os utilizadores não querem nem saber daquilo que nós fazemos. Eles só querem consultar uma informação, pagar as suas contas, consultar o seu saldo de dinheiro, comprar um produto online, encomendar um transporte ou uma série de outras coisas que tem muito pouco que ver com o nosso trabalho e para as quais as pessoas têm muito pouco no meio da sua vida quotidiana.
Em segundo lugar e também não menos importante, o design dos conteúdos tem tudo que ver com a acessibilidade. A sua estrutura e hierarquia, a organização em grupos temáticos lógicos, a sua clareza e consistência, a sua adaptabilidade a diferentes contextos de utilização, etc. Tudo isto é uma peça fundamental para a acessibilidade. Se assim é, será que o design vai querer simplesmente não estar neste campo de trabalho e desenhar um interface simplesmente “Lorem ipsum”? Não, claro que não. Não pode. O design tem igualmente um contributo muito importante a dar ao conteúdo e não se deve demitir dessa responsabilidade que também é sua.
O que são as anotações?
Voltando ao nosso tema principal. As anotações de acessibilidade no design são um conjunto de informações adicionais, anexadas aos protótipos dos interfaces nos ficheiros, por exemplo no Figma, depois de terminado o desenho. Nem sempre, através do desenho do interface é possível transmitir à equipa de desenvolvimento todo o trabalho de estrutura e organização de conteúdo que esteve na base do design. As anotações são mais uma ferramenta, uma arma secreta até, das equipas de design, para documentar e transmitir todo o trabalho de design que está na origem de cada experiência.
Estas anotações, podem ser documentadas facilmente através de vários elementos gráficos específicos. Peças visuais colocadas por cima do desenho de cada interface, permitindo uma visualização imediata e contextualizada das definições e modelos de interação relacionados com a acessibilidade.
As anotações são muito importantes para que a equipa de development, antes de começar a desenvolver o código daquele interface em específico, possa conhecer com detalhe o pensamento de acessibilidade que esteve na base. Evita-se com isto, claro está que se perca informação pelo caminho e todos os problemas que advêm disso mesmo no projeto.
Por tudo isto, as anotações de acessibilidade no design servem como uma ponte crucial entre o design e o desenvolvimento. Assegurando que a estratégia de acessibilidade digital que foi pensada para cada experiência, é clara para o desenvolvimento e por outro lado a equipa de desenvolvimento possa também contribuir para o enriquecimento desses modelos de interação.
Porque são tão importantes?
As anotações de acessibilidade no design, enquanto processo de trabalho e ferramenta, têm ganhos significativos para as equipas de projeto. Elas permitem uma análise cuidada e detalhada das definições de acessibilidade. São por outro lado, uma ponderação muito interessante entre o investimento de tempo que é necessário para as realizar e os benefícios que podem trazer ao projeto, através claro da melhoria dos processos de trabalho e no final do dia da acessibilidade dos produtos e serviços digitais.
Convencer as equipas a implementar novos processos de trabalho (ou melhorar os atuais) é sempre um desafio. O primeiro passo para a implementação das anotações nas equipas é convencer a gestão das equipas da sua relevância. Nesse processo e resumindo o benefício das anotações de acessibilidade, podes dizer que:
- Pelo lado da equipa de desenvolvimento, terá o seu trabalho mais facilitado porque as anotações vão permitir a partilha de informação pela equipa de design logo na passagem do projeto. Assegurando que todas as estratégias e modelos de interação de acessibilidade definidos para cada interface são documentados antes de se iniciar o desenvolvimento e minimizando em muito mal entendidos ou retrocessos.
- Pelo lado das equipas de design, ajuda a que quando deparadas com a tarefa de realizar estas anotações detalhadas, a reverem minuciosamente as suas decisões de design e a verificarem cuidadosamente se algum aspecto relevante da acessibilidade foi esquecido durante todo o seu processo de desenho. As anotações são também uma forma de aprender a pensar e desenhar um interface acessível por definição.
- Para as duas equipas, design e development, realizar e interpretar anotações de acessibilidade no design, não acrescenta nenhum volume de tempo acrescido ao processo, pois o que se pretende é que sejam anotações simples, restritas ao essencial, mas fundamental para uma boa acessibilidade.
Que anotações fazer?
As anotações de acessibilidade no design são um instrumento poderoso e indispensável para criar interfaces acessíveis. Conhecendo a ferramenta em detalhe e aprendendo a aplicá-la corretamente, seguramente ninguém duvidará da sua importância e eficácia. Mas que anotações devemos adicionar aos nossos desenhos de interfaces para garantir que sejam acessíveis a todos? Esta é quase sempre a questão a responder a seguir.
Poderão, é certo, existir várias respostas para esta questão. É importante compreender que as anotações de acessibilidade a fazer, devem resultar de um consenso entre a equipa de design e development. A melhor maneira é começar com algumas anotações mais simples e ao longo do tempo ir incrementando o volume de informação que é documentado, ao mesmo tempo que se vai percebendo entre as equipas de design e development o que faz e não faz sentido inserir como anotações.
Para começar este processo de anotações de acessibilidade no design, poderão ser utilizadas algumas anotações elementares. No design de cada interface, na passagem para a equipa de desenvolvimento, poderão ser inseridos nos ficheiros as seguintes referências de anotações: títulos; textos alternativos; ordem de leitura e interação; listas e tabelas; áreas de interação; atalhos de teclado.
1. Títulos
A estrutura de títulos, tecnicamente denominados de headings, são uma das formas de navegação preferencial, por exemplo das pessoas que utilizam os leitores de ecrã. A mais recente edição do questionário da WebAIM, refere que este é o modelo preferencial de 71% dos utilizadores quando entram numa página na procura de informação.
A estrutura de headings de uma página, que pode ir do H1 ao H6, definida de forma programática, pode muitas vezes ter algumas diferenças da representação visual dos títulos. É por isto mesmo, que é muito importante garantir que são claramente identificados com anotações todos os vários níveis de títulos de cada um dos ecrãs.
2. Textos alternativos
Quando o tema é acessibilidade digital, os textos alternativos são tópico recorrente. Ao utilizarmos uma imagem é importante, se fizer sentido e só nestes casos, que essa imagem tenha uma tradução textual para que a sua informação possa ser compreendida por todos os utilizadores. O texto alternativo a constar em cada imagem, pode também ser uma anotação de acessibilidade.
Contudo, relativamente aos textos alternativos é importante ter em atenção um aspeto. Nem todas as imagens precisam de textos alternativos. Só as imagens que efetivamente estejam a transmitir alguma informação relevante e que não esteja a ser comunicada de nenhuma outra forma.
3. Ordem de leitura e interação
Em acessibilidade digital é muito comum referirmos muitas vezes os leitores de ecrã. Claro que são um dos modelos de interação primários de muitos utilizadores. Mas existe uma outra razão. São também uma ferramenta de teste muito importante. A interpretação do código por um leitor de ecrã é sempre indicio da qualidade, ou não, da acessibilidade digital do interface.
Uma das coisas mais importantes nos leitores de ecrã é a ordem de leitura dos vários elementos no interface. Também esta ordem pode ser definida de maneira diferente da construção visual. Na generalidade dos componentes de interface esta ordem será a convencional (de cima para baixo, da esquerda para direita), mas poderão existir alguns casos que não. Nestes casos as anotações de acessibilidade são indispensáveis.
4. Listas e tabelas
Falando da estrutura de informação numa página, elementos como as listas e as tabelas são dois recursos com uma utilidade gigantesca para a acessibilidade digital. Estas duas definições, refletidas de forma programática no código HTML, são indicações semânticas muito importantes para a interpretação da informação, por exemplo, pelos leitores de ecrã.
Importa pois ter algum cuidado com estas anotações. Embora as tabelas possam ser visualmente claras para o desenvolvimento, as listas nem por isso. Existem muitas coisas que podem ser listas de informação (não só uma lista de pontos no miolo de um texto) e é bom que a equipa de desenvolvimento ao começar o seu trabalho saiba disto também.
5. Áreas de interação
Tecnicamente denominadas de landmarks, a estrutura de áreas de interação da página funciona no fundo como o esqueleto. Uma estrutura sobre a qual tudo vai ser construído. Na generalidade dos desenhos de interface estas landmarks serão evidentes, mas pode acontecer casos que não. Nestes casos, pode ser muito importante fazer estas anotações.
Dentro do tópico das landmarks pode ser aplicada uma granularidade bastante grande. Podemos anotar só as áreas principais ou ir mais fundo nessa decomposição. A sugestão aqui é começar pela versão mais simples. Sugerimos então que comeces por identificar no design as seguintes áreas de interação: topo da página (header), rodapé (footer), áreas de navegação (menus) e secções de conteúdos (sections). Estas landmarks devem ser definidas de forma programática pela equipa de desenvolvimento no código.
6. Atalhos de teclado
O teclado é um modelo de interação muito importante em acessibilidade. Não só porque é o modelo de interação preferencial de muitos utilizadores, mas também porque, tal e qual como os leitores de ecrã, pode ser uma ferramenta de teste para as equipas muito relevante. Se a interação exclusivamente por teclado estiver a funcionar bem isso pode ser indício que já muita coisa está bem feita, o que é fantástico.
A dada altura na interação exclusiva por teclado com o interface, poderá ser importante definir atalhos específicos para determinados componentes. Por exemplo a tecla “escape” para sair de modais, ou a tecla “enter” para interação com determinados componentes de formulários. Tudo isto pode também ser uma anotação importante para a equipa de desenvolvimento.
Dicas práticas sobre anotações
É importante que tenhas noção que as anotações, mesmo sendo uma “arma secreta” para as equipas de design, não são uma fórmula mágica. Elas não vão resolver todos os males do mundo, muito menos todos os problemas de acessibilidade digital dos produtos e serviços digitais do dia a dia. Ainda assim são uma ajuda muito grande. E para que funcionem bem na tua equipa, vão precisar de muito treino.
O tempo ensinará a tua equipa a utilizar melhor as anotações. Durante este processo vão aprender muitas coisas sobre anotações. O que funciona e o que não funciona no teu contexto. Aqui fica a referência a algumas aprendizagens de outros contextos que podem ou não funcionar na tua equipa.
Manter as anotações atualizadas
O mais importante não é fazer as anotações a primeira vez, mas sim, manter essa documentação atualizada e consistente ao longo do tempo. Mais importante que fazer muitas anotações é encontrar o equilíbrio entre o volume de anotações necessário e a eficiência em manter essas anotações atualizadas ao longo das várias passagens para desenvolvimento.
Não repetir anotações
Não precisas repetir anotações nos vários interfaces. Se já fizeste anotações num determinado componente, noutro ecrã, se ele não sofreu alterações, não precisas repetir essa informação. Isso pode poupar tempo e evitar redundâncias desnecessárias.
Só as anotações principais
Utiliza só as anotações que fizerem sentido. Aqui tens algumas sugestões de anotações que podem ser feitas e as quais ainda podem ser acrescentadas mais outras tantas. Mas não precisas utilizar todos os elementos de anotações, se não fizerem sentido. Foca-te nas anotações essenciais para cada interface.
Antes de passar ao desenvolvimento
Faz as anotações de acessibilidade só depois de realizadas todas as validações pelas restantes equipas e imediatamente antes de passares os ficheiros dos interfaces à equipa de desenvolvimento. Ainda assim, sabemos que vão existir alterações e passagens intermédias pelo caminho, por isso o volume certo de anotações a fazer é ainda mais importante.
Comunicação em tempo real
Ao passares os ficheiros com anotações para o desenvolvimento, reúne com a equipa antes, partilha a lógica por detrás de todas as anotações e garante que existe um canal de comunicação direto e rápido entre ambos. Essa comunicação prévia pode prevenir mal-entendidos e assegurar que o desenvolvimento segue conforme o planeado. Manter um canal de comunicação aberta, ágil e em tempo real, com a equipa de desenvolvimento é essencial para o sucesso deste e de outros processos.
Exemplos de outras equipas
Afinal de contas as anotações de acessibilidade no design não é assim uma arma tão secreta. É uma arma poderosa, mas também um instrumento que é utilizado atualmente por várias equipas de design no mundo. Procurando online até consegues encontrar facilmente exemplos de bibliotecas de Figma com os elementos visuais utilizados por estas equipas para realizarem as suas anotações.
Existem muitas referências interessantes. Umas públicas, noutras nem por isso. Para te ajudar a implementar o processo de anotações de acessibilidade na tua equipa, aqui fica algumas referências de bibliotecas de Figma, gratuitas e abertas à comunidade:
O papel da formação
Como tudo em design, é importante ter consciência que o processo das anotações, vai precisar de tempo para atingir resultados interessantes. A métrica de avaliação aqui poderá ser não só o número de projetos na equipa de design nos quais já são feitas anotações, mas também o número destas anotações que foram implementadas em código. É fundamental perceber que para a implementação desta dinâmica na equipa de design será necessária uma estratégia própria e bastante persistência. Vão existir barreiras, algumas até dos próprios designers da equipa.
A formação continuada e a partilha de experiências pode ajudar em muito nesta implementação. Não só explicando passo a passo como se fazem anotações, mostrando com exemplos práticos e recolhendo em todos os momentos, as dúvidas de quem todos os dias tem que na prática aplicar estas recomendações nos projetos de design em que está a trabalhar.
Fotografia © Brett Jordan (Unsplash)