Acessibilidade como filosofia da percepção

Dec 05 2022
“O corpo é nosso meio geral para ter um mundo.” ― Maurice Merleau-Ponty, Fenomenologia da Percepção Ao olhar para a acessibilidade no contexto de um aplicativo, temos que considerar a capacidade do usuário de navegar no mundo que ele apresenta.

“O corpo é nosso meio geral para ter um mundo.”
― Maurice Merleau-Ponty, Fenomenologia da percepção

Ao olhar para a acessibilidade no contexto de um aplicativo, temos que considerar a capacidade do usuário de navegar no mundo que ele apresenta. Essa jornada, no entanto, não ocorre na tela ou no alto-falante e não é conduzida por reflexos de luz ou vibrações do ar. Não é interagido usando o teclado ou o mouse. Em vez disso, ocorre na mente, à medida que o usuário capta as percepções disponíveis para ele e as transforma em objetos mentais com os quais pode trabalhar.

Os limites da representação visual

“O homem comum está familiarizado com a cegueira e a surdez e sabe, por sua experiência cotidiana, que a aparência das coisas é influenciada por seus sentidos; mas nunca lhe ocorre considerar o mundo inteiro como a criação de seus sentidos.
— Ernst Mach, A análise das sensações

À medida que um aplicativo da Web se apresenta ao navegador da Web, ele é processado a partir do Modelo de Objeto de Documento¹ em uma representação visual, com recursos de interface do usuário familiares², que indicam sua semântica e modos de ação para o usuário. Um usuário com visão digitalizará rapidamente a página com os olhos, a fim de identificar cabeçalhos que indiquem a hierarquia do conteúdo, chamada para ação e botões de ação secundários, indicando tarefas importantes e menos importantes a serem executadas. Os controles de entrada irão sugerir com sua forma visual quais dados são esperados neles. A percepção do vermelho alertará o usuário com visão de cores da existência de erros a serem corrigidos. O conteúdo esmaecido indicará uma ação que não está disponível ou não é importante no momento. Todos esses objetos e ações possíveis serão impressos na mente do usuário por meio de um meio visual.

Embora extremamente poderosa e envolvente, a representação visual só pode ir até certo ponto. Baseia-se na visão do usuário, sua capacidade de distinguir formas, contrastes e cores de forma consistente e sustentada, em todos os dispositivos, contextos situacionais e condições médicas do corpo. O Document Object Model requer outros modos de representação que não são apenas visuais e, de fato, tais modos existem. Uma camada intermediária, chamada de Árvore de Acessibilidade³, é fornecida pelo Web Browser com a intenção de fornecer uma representação robusta do que existe no documento da web e o que pode ser feito com ele. Essas informações são compiladas a partir da semântica do elemento HTML nativo ou funções e atributos ARIA⁴ customizados.

Fragmento de uma árvore de acessibilidade. Fonte: https://wicg.github.io/aom/explainer.html

Representações alternativas de conteúdo

O fato de o sujeito normal perceber imediatamente que o olho está para a visão assim como o ouvido está para a audição mostra que o olho e o ouvido lhe são imediatamente dados como meio de acesso a um e o mesmo mundo.
― Maurice Merleau-Ponty, Fenomenologia da percepção

Os leitores de tela, usando a árvore de acessibilidade, fornecem uma representação auditiva do conteúdo que está disponível visualmente para usuários com visão. No entanto, o meio, seja ele visual, auditivo ou tátil (via braille displays⁵), não é o que importa — a essência é a capacidade do usuário de formar um modelo mental em sua mente, um modelo que contém todos os objetos significativos presentes no aplicativo e todas as ações que podem ser executadas neles. Tudo isso independentemente de qual canal físico ou qual via sensorial foi utilizada para causar a impressão que é percebida pela mente do usuário.

Transferência de informações entre o documento da web e a mente do usuário. Fonte: https://medium.com/@krishnansai99/what-is-accessibility-testing-7d04256a3919

Para que o aplicativo seja acessível, a capacidade de digitalizar visualmente o conteúdo da página para anotar os cabeçalhos e sua importância relativa deve ser acompanhada pela capacidade de alternar rapidamente entre os tipos de cabeçalho, à medida que são anunciados pelo leitor de tela. Regiões visualmente distintas correspondentes à navegação, pesquisa e conteúdo principal devem ser descobertas como tal usando a audição. Uma ideia do número de elementos em uma lista precisa estar disponível tanto na forma auditiva quanto visual. Os elementos de controle não devem apenas ter uma representação visual de sua função e estado, mas também devem ter uma representação auditiva de todos os seus aspectos relevantes.

No final, diferentes caminhos neurais e diferentes percepções levarão à formação de uma representação mental equivalente da aplicação web e de todos os seus componentes.

Percepção de cores

“Eu nunca saberei como você vê o vermelho e você nunca saberá como eu o vejo. Mas essa separação da consciência só é reconhecida após uma falha de comunicação, e nosso primeiro movimento é acreditar em um ser indiviso entre nós.”
― Maurice Merleau-Ponty, A Primazia da Percepção

“Temos agora que considerar o fato de que as cores são produzidas no olho por meio de objetos incolores”
— Johann Wolfgang von Goethe, Teoria das Cores

Os objetos não têm cores em si mesmos e sua percepção depende inteiramente do olho de quem os vê. Na verdade, a estrutura do olho determina a gama de cores que podem ser percebidas. As células cone fornecem ao olho a capacidade de perceber diferentes comprimentos de onda de luz e constituem as dimensões da visão colorida humana⁶. Dependendo do número de cones presentes no olho, a mesma imagem será visualizada de forma diferente. A visão normal é caracterizada por 3 cones (tricromacia), enquanto existem outros tipos de visão de cores (dicromacia⁷ e seus diferentes tipos: protanopia, deuteranopia e tritanopia). Monocromacia significa falta de percepção de cores.

Fonte: https://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness

Esse fenômeno foi observado por Goethe em sua exploração da ciência das cores. Ele descreveu a experiência da percepção dicromática:

“Se o carmim fosse passado finamente sobre o pires branco, eles comparariam a cor clara assim produzida com a cor do céu e a chamariam de azul. Se uma rosa lhes fosse mostrada ao lado dela, eles a chamariam, da mesma maneira, de azul; e em todos os testes que foram feitos, parecia que eles não podiam distinguir o azul claro da cor rosa. Eles confundiam rosa, azul e violeta em todas as ocasiões: essas cores só pareciam ser distinguidas umas das outras por delicados tons de aparência mais clara, mais escura, mais intensa ou mais fraca.
— Johann Wolfgang von Goethe, Teoria das Cores

Ocorre, excepcionalmente, que o ser humano seja dotado de tetracromacia, podendo ver ainda mais cores do que a maioria das pessoas⁸.

É importante entender que a cor percebida não depende do objeto e de sua cor intrínseca (que não existe como tal), mas sim da constituição do olho. No entanto, falamos de cores, como se fossem uma propriedade dos objetos que podemos observar.

Algumas ferramentas podem ser úteis para pessoas com daltonismo parcial. Filtros de realidade aumentada⁹ existem para smartphones e podem, por exemplo, permitir que pessoas com dificuldade em distinguir “vermelho” vejam os objetos aos quais outras pessoas se referem como “vermelho”. Isso lhes permite usar o conceito de “vermelho” ao apontar para objetos, independentemente de suas diferenças de percepção.

Objetos vistos na visão de cores padrão (“vermelho” pode ser distinguido de “verde”)
Objetos vistos sem visão “vermelha” (os dois objetos não podem ser distinguidos pela cor)
Objetos vistos através de um filtro de realidade aumentada (“vermelho” é distinguível novamente, mesmo que pareça não ser “vermelho” para o olho comum)

Os usuários sem visão de cores ainda podem perceber os objetos designados de forma visual, desde que essa opção esteja disponível.

Fonte: https://liveuamap.com/

Orientação no espaço e no tempo

Na mata existem caminhos, na maioria cobertos de mato, que terminam abruptamente onde a mata não é pisada. Eles são chamados de “caminhos de madeira”. Cada um segue seu caminho separado, embora dentro da mesma floresta. Muitas vezes parece que um é idêntico ao outro. Mas só parece assim.
— Martin Heidegger, Caminhos de madeira

Todos os objetos presentes na mente do usuário, todas as partes do aplicativo como formulários, botões e entradas, vivem em um espaço mental com sua topografia particular derivada da percepção. Os itens podem ser organizados mentalmente da esquerda para a direita, da direita para a esquerda, de cima para baixo ou em uma sequência linear determinada pela ordem de tabulação¹⁰. Eles podem existir em dimensões independentes, navegados por meio de uma lista de cabeçalhos, pontos de referência ou links. Nunca se pode presumir que o que parece ser “esquerdo” em relação a algum outro objeto estará de fato à “esquerda” do mapa mental de outro usuário, ou que “esquerda” sequer tenha um significado para aquela pessoa. Portanto, quaisquer instruções apresentadas ao usuário não podem incluir dicas referentes a uma determinada orientação espacial (como: “olhe a descrição à direita”),

Considere a posição das “notas de rodapé” dependendo da orientação do texto e do local (neste exemplo à esquerda de linhas de texto organizadas verticalmente de cima para baixo e da direita para a esquerda, e não na parte inferior, como sugere o nome “notas de rodapé ”):

Fonte: https://omoi-no-hoka.tumblr.com/post/190599839989/hello-thank-you-for-sharing-your-enthusiasm

Como seres humanos, experimentamos em sequência, percorrendo um caminho no tempo. Esses caminhos podem se mover em diferentes eixos, porém a ordem com que as informações são acessadas visualmente precisa corresponder à ordem em que as informações são apresentadas por outros meios, como a ordem de tabulação sequencial.

Como observou Manuel Matuzovic: “Se um usuário cego estiver trabalhando com um usuário com visão, que lê a página em ordem visual, isso pode confundi-los ao encontrar informações em ordem diferente.”¹¹

A ordem dos elementos tem implicações na internacionalização. Como o espaço referenciado como “esquerda” pode significar áreas diferentes, dependendo da orientação do texto em uma determinada cultura. No entanto, o espaço visual pode ser manipulado de forma independente da orientação espacial atual. Por exemplo, é possível usar regras CSS, como padding-block-start ao invés de padding-left , para controlar o espaço¹²:

Fonte: https://www.cnblogs.com/coco1s/p/15033565.html

Os conceitos de início e fim sempre farão sentido na mente do usuário, independentemente de como o mapa mental é construído a partir de suas percepções, de qual eixo é usado para posicionar os objetos ou qual é sua formação cultural e as percepções sensoriais disponíveis para eles . Isso porque a progressão por um caminho no tempo é sempre inteligível, pois o ser humano está imerso no tempo e, como diria Heidegger, ser é tempo .

Detectando e lembrando a mudança

“cada momento do tempo chama todos os outros para testemunhar”
– Maurice Merleau-Ponty, Fenomenologia da Percepção

“o tempo é uma abstração, à qual chegamos por meio da mudança das coisas”
– Ernst Mach,
The Science of Mechanics

A mudança só é experimentada por meio de uma comparação com um estado anterior. Isso precisa se tornar aparente para a percepção e a indicação de mudança mais universalmente inteligível é o movimento. É por isso que as animações são adições poderosas às interfaces do usuário¹³, chamando a atenção do usuário para as mudanças ocorridas e proporcionando uma experiência mais imersiva em um mundo que responde a ações. Padrões de animação¹⁴ simulam o movimento natural de objetos físicos no espaço, que é familiar para qualquer pessoa com visão, criando assim uma experiência de mudança mais intuitiva e imediatamente inteligível. Embora as animações, quando usadas com moderação, possam agregar muito à experiência do usuário, os usuários devem ter a possibilidade de desativar as interfaces animadas, pois o movimento percebido em excesso pode causar dores de cabeça, perda de orientação ou até convulsões. Isso pode ser feito desativando as animações para usuários que preferem movimento reduzido¹⁵.

O tempo não será percebido de maneira uniforme por todas as pessoas e a duração da exibição das mensagens na tela pode ser considerada irritante se for muito longa, ou estressante se não houver tempo suficiente para lê-la. Isso geralmente é um problema com as chamadas mensagens do sistema exibidas na tela durante um determinado período de tempo. Como escreve Sheri Byrne-Haber: “Para explicar a perda de memória e a distração, bem como problemas relacionados à deficiência, como o TDAH, uma prática recomendada seria implementar um local onde os usuários possam consultar uma lista de mensagens de brinde anteriores que chegaram e ido.”¹⁶

Um usuário não visual não será capaz de perceber atualizações dinâmicas de partes de um aplicativo, a menos que sejam especificamente anunciadas por um leitor de tela. Para que as mudanças sejam indicadas de forma audível, é necessário criar regiões vivas¹⁷, que podem ser “educadas” ou “assertivas” na forma como interrompem a narrativa atual ou esperam que ela termine antes de ler os conteúdos alterados . Isso é útil para anunciar erros de validação e atualizações de status também.

Usuários com deficiências cognitivas relacionadas à memória podem exigir um lembrete das ações e escolhas passadas, mesmo que tenham sido feitas há pouco tempo. Isso é necessário para reduzir a carga cognitiva e reforçar a sensação de controle. Isso pode ser feito fornecendo um resumo das etapas anteriores já concluídas em um formulário de várias etapas, como neste exemplo de tela de checkout:

Fonte: https://www.toptal.com/designers/e-commerce/ecommerce-ux-best-practices

Modos de interação

“o sujeito, quando colocado diante de sua tesoura, agulha e tarefas familiares, não precisa procurar suas mãos ou seus dedos, pois não são objetos a serem descobertos no espaço objetivo: ossos, músculos e nervos, mas potencialidades já mobilizado pela percepção da tesoura ou da agulha, a ponta central daqueles 'fios intencionais' que o ligam aos objetos dados”
― Maurice Merleau-Ponty, Fenomenologia da Percepção

[Quanto] menos olhamos para a Coisa-martelo, e quanto mais a agarramos e a usamos, mais primordial se torna nossa relação com ela
— Martin Heidegger, Ser e Tempo

Nossa capacidade de interagir com o mundo determina nossa capacidade de entendê-lo. Como o objetivo de qualquer designer de aplicativo é tornar o aplicativo compreensível pelo usuário e todas as suas funções detectáveis, é de suma importância que todos os modos de interação (mouse, dedo como ponteiro, teclado, ativação controlada por voz¹⁸, dispositivos de comutação¹⁹ possam ser usados para executar todas as ações necessárias. Isso significa que as informações não podem ser ocultadas por trás de um tipo de interação que não está disponível universalmente, como a ação de passar o ponteiro do mouse. O conceito de passar o mouse não faz sentido para alguém que usa uma tela sensível ao toque, teclado ou interruptor. Qualquer informação ou ação, como uma dica de ferramenta ou um menu suspenso, precisa estar disponível quando uma interação equivalente, comofocus , é ativado pelo usuário.

Ações como deslizar e arrastar, embora imediatamente significativas para o usuário com as habilidades motoras apropriadas, podem ser desafiadoras para usuários que não são capazes de realizar movimentos precisos com as mãos e os dedos e não possuem coordenação olho-mão refinada. A função de toque do touchpad, muito intuitiva para usuários com experiência manual, pode gerar cliques indesejados em vez de apenas mover o ponteiro se o movimento do dedo não for preciso o suficiente. Para eliminar a sobrecarga dos usuários com destreza manual limitada, é necessário um modo de interação alternativo, onde o processo é decomposto em várias etapas consecutivas e isoladas que não requerem o pressionamento simultâneo de várias superfícies ou botões e não são limitadas no tempo²⁰ .

Finalmente, os usuários devem ser capazes de localizar e interagir com os elementos apenas usando sua voz. Isso significa que, para usuários com visão, o nome visível deve ser o mesmo que pode interagir com a voz, para que a experiência seja uniforme em todas as vias sensoriais. Pode não ser sempre o caso, e as práticas de rotulagem apropriadas precisam ser respeitadas²¹.

A interação deve ser tão sem atrito e sem esforço quanto possível. As ferramentas utilizadas não devem ser obstáculos a serem superados, mas partes de nossos corpos colocadas em movimento por nossas intenções. As ferramentas devem suportar toda a agilidade que possuímos e ser o mais indulgente possível com as deficiências, a fim de criar uma experiência perfeita em que as ferramentas usadas não sejam nem mesmo um conceito na mente do usuário.

Conclusão

Acessibilidade visa fornecer o mesmo mapa mental, a mesma consciência dos objetos e sua importância, a mesma ideia de relações entre os objetos e as ações proporcionadas por eles, independentemente de qual aparato sensorial e caminho neural usado para criar a experiência vivida. Embora o mundo mental de cada pessoa seja diferente e mediado por diferentes sensações, ele permite a interação com nosso ambiente e o uso da linguagem para se referir aos mesmos objetos ao se comunicar com outros humanos. Não importa que esses objetos tenham sido percebidos de maneira diferente e independente.

Referências

[1]https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

[2]https://uxplanet.org/ux-design-glossary-how-to-use-affordances-in-user-interfaces-393c8e9686e4

[3]https://web.dev/the-accessibility-tree/

[4]https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

[5]https://en.wikipedia.org/wiki/Refreshable_braille_display

[6]https://en.wikipedia.org/wiki/Color_vision#Dimensionality

[7]https://en.wikipedia.org/wiki/Dichromacy

[8]https://www.bbc.com/future/article/20140905-the-women-with-super-human-vision

[9]https://play.google.com/store/apps/details?id=com.areyoucolorblind.nowyousee&hl=en&gl=US

[10]https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

[11]https://www.matuzo.at/blog/the-dark-side-of-the-grid-part-2/

[12]https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-start

[13]https://www.nngroup.com/articles/animation-purpose-ux/

[14]https://web.dev/the-basics-of-easing/

[15]https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

[16]https://sheribyrnehaber./designing-toast-messages-for-accessibility-fb610ac364be

[17]https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

[18]https://youtu.be/V-QkjOsV2WM

[19]https://www.youtube.com/watch?v=1AfbGQ2DYjg&ab_channel=ChristopherHills

[20]https:///salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09

[21]https://ericwbailey.website/published/aria-label-is-a-code-smell/