Acessibilidade na Interface do Usuário: “Quem estou excluindo com meu design?”
A cada dia novas formas de interação surgem, e as tecnologias utilizadas por nós tentam acompanhar esse ritmo. Porém, por si só, elas não são capazes de oferecer o que uma interface deve ser: acessível a qualquer pessoa. É nesse momento que devemos nos colocar criticamente dentro deste processo, e se perguntar, “quem estou excluindo com meu design”?
Cada vez mais as interfaces fazem parte do cotidiano das pessoas, o que faz com que não seja mais possível tolerar suas más concepções, principalmente, em questões de usabilidade e experiência de uso. Ao pensarmos no desenvolvimento de produtos digitais, devemos considerar todos os seus potenciais utilizadores, incluindo aqueles com algum tipo de deficiência, trazendo assim a acessibilidade para dentro do projeto, e com ela, uma série de questões que farão parte do processo de design.
Aproximadamente uma em cada sete pessoas em todo o mundo possui algum tipo de deficiência que afeta sua maneira de interagir com as interfaces dos seus dispositivos [1]. Essas pessoas podem sofrer deficiências em qualquer idade, duração e em níveis variados de gravidade. Algumas dessas deficiências podem ser classificadas como:
- Visual (Ex.: Cegueira e Daltonismo)
- Física e Motora (Ex.: Dificuldade em manipular seus dispositivos)
- Auditiva (Ex.: Surdez ou Perda auditiva)
- Cognitiva (Ex.: Dislexia, Dificuldade de aprendizagem)
A partir deste entendimento, e utilizando os princípios apresentados pelo design universal e pelo design, este texto irá apresentar algumas discussões relacionadas à construção das interfaces digitais e seus elementos.
Design Universal e Design Inclusivo
Antes mesmo de falar dos elementos que compõem a interface, é importante falar dos princípios que utilizados aqui para discutir seus usos.
“Design Universal é o design de produtos e de ambientes para serem usados por todas as pessoas, na maior extensão possível, sem a necessidade de adaptação ou design especializado” (Connell et al, 1997)[2]
É disso que trata o Design Universal. Termo cunhado por Ronald Mace (fundador do The Center for Universal Design) nos anos 70, e definido através de seus 7 princípios cunhados em 1997 [3].
No caso do Design Inclusivo, o Design Council (2008, apud Clarkson et al., 2015, p. 235;), identifica o mesmo como:
“É uma abordagem geral para a concepção de projetos em que os designers garantem que seus produtos e serviços atendam as necessidades do maior público possível, independentemente da idade ou habilidade”.
A partir dessa definição, irei utilizar aqui o conjunto de princípios do Design Inclusivo [4], que tiveram a contribuição dos pesquisadores Henny Swan, Ian Pouncey, Heydon Pickering, Léonie Watson no seu desenvolvimento e que foram traduzidos pelo designer Marcelo Sales [5]. Os quais tratam basicamente de:
“[…] colocar as pessoas em primeiro lugar. É sobre projetar produtos pensando em necessidades específicas de pessoas com deficiências permanentes, temporárias, situacionais ou mutáveis de acordo com suas respectivas situações, ou seja, na verdade é projetar pensando em todos nós.”
Assim como o Design Universal, os princípios do Design Inclusivo são destinados a produtos Digitais. Ademais, é possível perceber que a ideia por trás destes princípios, seja Design Universal ou Design Inclusivo, é de educar, conscientizar e ferramentar os profissionais envolvidos no desenvolvimento desses produtos e serviços, os capacitando através de uma ampla visão, sobre como abordar o design durante seus processos.
Diretrizes
Compreendendo esses princípios, é possível definir 3 diretrizes que devem guiar o pensamento no processo de design com acessibilidade em mente. São eles:
- Objetividade (Interfaces que não dificultem sua utilização e navegação)
- Simplicidade (Interfaces organizadas, consistentes e familiares)
- Perceptibilidade (Conteúdos e elementos perceptíveis e assimiláveis)
Tendo em vista essas diretrizes, podemos começar a pensar nos elementos que compõem as interfaces, e como podemos traduzir suas aplicações. Neste texto irei dividir estes elementos em 4 campos: Cor, Forma, Tipografia e Layout.
É importante ressaltar, que o que estarei falando aqui tem relação ao desenvolvimento de interfaces, focando assim apenas n na experiência estética, e no desenvolvimento visual das UI's. Para uma discussão mais ampla, indico a leitura dos textos escritos pelo Thales Silva [6] e pela Bruna Villa [7]. As discussões levantadas abaixo são baseadas nas diretrizes da W3C [8], no HIG da Apple [1], e como já apresentado, seguem princípios do Design Universal e Inclusivo.
· Cor
A cor é um dos elementos mais importantes quando se fala em acessibilidade nas interfaces. Sua utilização tem impactos diretos a pessoas com deficiência visual e cognitiva. Isto faz com que a construção de uma paleta de cores de uma interface tenha que passar por algumas regras e análises ao ser definida e aplicada.
Quando falamos de cor em interfaces, estamos falando sobre contraste. E ao falarmos de contraste na cor não estamos falando sobre matiz, e sim sobre ausência ou presença de luz. É através do contraste gerado pelas cores em sua tela que definimos se o conteúdo ali apresentado consegue ser assimilado pelo usuário, incluindo aqueles que possuem baixa visão.
“No alfabetismo visual, a importância do significado do contraste começa no nível básico da visão ou da ausência desta, através da presença ou ausência de luz.” (Dondis, 2015, p.109)
Por isso, é sempre indicado utilizar cores fortemente contrastantes para oferecer uma melhor legibilidade de suas telas, além de manter uma consistência entre as cores utilizadas, buscando sempre manter uma paleta de cores simples. E claro, esteja sempre ciente da possibilidade da inversão de cores e o aumento de contraste, que pode ser ativado pelos usuários através dos seus dispositivos (para isso, a dica é que se crie para sua paleta de cores uma opção de aplicação para o light mode, outra para o dark mode, além de criar opções de tint e alto contraste).
É também importante estar ciente, da existência de usuários que possuam algum tipo de daltonismo, síndrome esta que atinge 8% dos homens e 1% das mulheres no mundo todo, de acordo com os dados levantados pelo Instituto Nacional do Olho (National Eye Institute — NEI), dos Estados Unidos [9]. Neste sentido, é fundamental ter em mente, durante a criação da sua paleta de cores, o intuito de proporcionar uma experiência equivalente para todos os usuários, independente das situações às quais podem estar submetidos. Dessa forma, ficam explicitas a necessidade e a importância da presença desses usuários durante o desenvolvimento do design, inclusive durante as etapas de testes.
Vale salientar que, em função de certas situações especificas tanto de caráter pessoal quanto de ambiente, que podem gerar dificuldades na leitura dessas informações, não é recomendável confiarmos apenas na cor para essa diferenciação de elementos e sentido, o que nos leva às formas e posicionamentos.
Resumo sobre cor em acessibilidade:
- O atributo mais importante da cor é o contraste, saiba utilizá-lo para auxiliar seu usuário;
- Proporcionar uma experiência equivalente deve sempre estar em mente;
- Seja consistente no uso das cores, e consciente em suas escolhas;
- A cor sozinha não lhe garante muito.
· Forma
Entendendo as limitações da utilização da cor isoladamente, iremos agora abordar outro elemento que complementa a Informação visual, a forma.
Quando falamos de forma, nos vêm a cabeça as formas básicas, apresentadas a nós quando crianças. Porém, quando estamos falando de interfaces digitais, a forma pode estar ligada à outros tipos de representação, como botões, ícones ou elementos visuais distintos, como cards ou campos de inserção de dados, associados a conceitos como hierarquia, tamanho, e espaço.
Ao nos aprofundarmos sobre a utilização das formas na construção das interfaces, nota-se que elas estão ligadas à assimilação, ou mais diretamente, à diferenciação, como no caso da distinção de elementos acionáveis e não acionáveis, representados por meio de formas com tamanhos, espessuras ou qualquer outro aspecto que os diferencie. Quando pensamos na propriedade “tamanho”, a utilização das formas pode nos ajudar a criar hierarquia na interface, ou garantir um baixo esforço físico por parte dos usuários no momento de acionar ou selecionar botões e itens ali disponíveis.
Ademais, ao discutirmos sobre formas também estamos tratando de estilos, e como eles são aplicados e visualizados durante a navegação pelas telas. Os estilos podem variar, podendo ser aplicados através de uma padronagem inserida em um botão, um arredondamento padrão utilizado nos cards inseridos, ou até mesmo utilizando-se traçados para diferenciar um elemento de outro. Assim, é indicado que se utilize esses tipos de estilos de forma consistente e consciente, criando uma hierarquia visual que comunique a importância relativa dos botões, cards e outros elementos construídos, de acordo com o produto e também com a plataforma.
Por fim, é importante salientar, que ao realizar a construção de uma interface, é indicado que se opte pelas opções fornecidas pelo sistema para alguns tipos de elementos, como no caso do Switch utilizado e indicado através das guidelines do iOS [1]. Esses componentes, além de já possuírem uma familiaridade por quem utiliza suas plataformas, possuem também uma resposta mais assertiva a possíveis ferramentas de acessibilidade ativadas pelos usuários em suas configurações.
É necessário entender que, assim como a cor, a forma, por mais que auxilie no aumento da capacidade de uso, percepção e valor, pode ainda ganhar mais potência em seu uso. Para isso, iremos agora abordar os dois últimos elementos que podem compor nossas interfaces.
Resumo sobre forma em acessibilidade:
- Formas auxiliam na construção de hierarquia visual e foco;
- Tamanho é tudo, exageros podem prejudicar e consistências podem auxiliar;
- Aplicar estilos em formas é uma ótima prática para distinção de elementos;
- Analise se o descarte dos componentes nativos vai trazer algum valor.
· Tipografia
Iremos agora abordar a tipografia e sua utilização para o desenvolvimento de uma interface inclusiva e universal. Discutindo seus impactos na priorização de conteúdos, diferenciação de situações, assim como suas capacidades para garantir aos usuários informações perceptíveis.
Quando falamos de tipografia em design de interfaces, prioritariamente estamos falando de hierarquia (aplicada através de peso e tamanho), como também de legenda e legibilidade da informação. Nesse momento, não irei abordar os aspectos relacionados a famílias tipográficas e seus usos, assim como geometria e desenhos de tipos. É importante salientar que quando estamos falando de criar contraste, foco e uma boa legibilidade, podemos utilizar famílias tipográficas com desenhos diferentes para criar essa hierarquia desejada, porém, nesse momento irei me ater a falar apenas sobre tamanho e peso, pois acredito que a dimensão funcional da tipografia é o que se torna relevante neste cenário, o que faz com que peso e tamanho já nos possibilite organizar de forma prática uma interface inclusiva.
Ao falarmos sobre legibilidade é importante lembrar dos problemas que alguns pesos podem trazer quando aplicados, por isso é indicado que não se utilize pesos como Thin ou Light em suas interfaces, ao mesmo tempo que é importante se manter consistente na utilização desses outros pesos, para que sua interface possua uma hierarquia que garanta foco e simplicidade na visualização dessas informações.
Ao tratarmos sobre tamanhos de fonte, temos que primeiro entender sua utilização. E como essas escolhas podem oferecer uma priorização dos conteúdos disponíveis em tela, assim como tornar essa informação legível. Através do Human Interface Guideline da Apple [1], é possível notar que existem 11 tipos de estilos de textos disponíveis para criarmos uma hierarquia visual das informações apresentadas. Dessa forma, os padrões indicados e utilizados pela Apple podem nos auxiliar nesta construção hierárquica, facilitando o entendimento de onde e quando usar um tamanho de fonte, e como essa escolha irá impactar nossa interface.
Ainda sobre a plataforma iOS, quando tratamos do assunto de legibilidade e baixo esforço visual e cognitivo para visualização de informações disponíveis, podemos utilizar como exemplo o Dynamic Type. Essa funcionalidade que pode ser utilizada pelos usuários na plataforma, auxilia quem possui algum tipo de deficiência visual ao aumentar o tamanho dos textos ali presentes. A indicação para essa funcionalidade fica por parte do teste ao layout desenvolvido para sua interface, tendo em mente que este deve conseguir se adaptar a todos os tamanhos de fonte redimensionadas, assim como os ícones, glifos e símbolos.
Por fim, outro modo de utilização da tipografia é através da rotulação e legenda de conteúdos. Quando falamos de rotulação estamos falando sobre as descrições presentes em botões, campos de inserção de dados, barras de navegação e menus. Nesse quesito é importante pensarmos na consistência desenvolvida em suas telas, priorizando a ação através de uma rotulação simples que consiga apresentar claramente o que aquele campo ou elemento acionável pode executar. No caso das legendas, é importante salientar que seu uso não consiste apenas na necessária descrição de imagens e conteúdos visuais. A utilização de legendas em campos de inserção de dados, como feedbacks ou como prevenção de erros para o usuário, garante uma melhor identificação daquela ação, priorizando o conteúdo ali requerido. Como também para possíveis utilizações de funcionalidades, como o VoiceOver, ou outros leitores de tela disponíveis.
Resumo sobre tipografia em acessibilidade:
- Mantenha uma hierarquia consistente entre os conteúdos inseridos;
- Perceba se as fontes estão legíveis através de testes com os usuários;
- Tenha em mente o uso do Dynamic Type para criar layouts adaptáveis;
- Rotulações simples e legendas auxiliam seu usuário.
· Layout
Por fim, mas não menos importante, iremos tratar do elemento que pode ser considerado aquele que agrupa e distribui os outros elementos citados acima, pensando e auxiliando na estruturação de ações e conteúdos através das interfaces, o layout.
Ao analisarmos o desenvolvimento do layout de uma interface em paralelo ao conjunto de princípios já citados, fica clara sua importância ao organizar os outros elementos. Quando pensamos em layout, também pensamos em hierarquia, áreas e em espaços em branco. Somado a isso nos questionamos: como possibilitar a flexibilidade de uso na navegação, como organizar conteúdos e informações de forma perceptível, como criar áreas que garantam o acesso e uso inclusivo, como adicionar valor aos componentes construídos e como proporcionar uma experiência equivalente para todos seus usuários.
Para o desenvolvimento do layout, devemos em primeiro lugar considerar a situação para qual ele está sendo pensado. Assim, ao incorporar os componentes construídos será possível, através dos espaços e áreas, criar um layout simples, objetivo e que possibilite que todo conteúdo ali presente seja perceptível para todos os tipos de usuários. É importante lembrar que, para que o layout de uma interfaces seja acessível, devemos ter em mente a possibilidade de personalização que este pode receber por parte do usuário. Seja ela resultado de variações no ambiente, orientações do dispositivo ou até mesmo capacidade de resolução. Cada elemento inserido deve ter sua necessidade determinada, e sua posição na tela, aplicada a uma narrativa linear seguindo a hierarquia construída juntamente com os outros componentes.
Vale lembrar, que um layout complexo ou mal organizado pode dificultar a assimilação por parte dos usuários, atrapalhar sua leitura (seja através da visão ou de escuta via leitores de tela, como o já citado VoiceOver) e criar um ruído entre o design da interface e as ações e conteúdos ali disponíveis.
Resumo sobre layout em acessibilidade:
- Mantenha a simplicidade;
- Compreenda as necessidades atendidas pela interface.
- Dê suporte a personalizações;
Acessibilidade no Processo
Diante das questões elencadas acima, alguns de vocês podem vir a perguntar: “pensar em acessibilidade no processo de desenvolvimento demanda mais esforço e mais gastos?”. Posso afirmar que sim e não, e explico. Quando projetamos um produto ou uma interface desde o início buscando atender aos requisitos de acessibilidade, nenhum custo ou recurso extra em nosso trabalho é acrescentado, visto que, por estarmos desde o princípio com o design para acessibilidade em mente, o contato com essas diretrizes e códigos nos guiarão de modo a evitar cometer erros na implementação daquela ideia desenvolvida.
Por outro lado, quando é necessário corrigir uma interface que não atende a conceitos e diretrizes de acessibilidade, pode nos gerar um custo ou esforço maior, visto que deveremos repensar todas as etapas desenvolvidas anteriormente. No entanto, isso não é motivo para abrir mão de uma atualização nessa interface, já que a possibilidade de alcance e impacto dessas reformas fará com que aquele produto se torne acessível para possíveis novos usuários, como também para usuários que haviam sido excluídos no inicio desse processo.
“O projeto não tem que ser ‘consertado’ para acessibilidade. Ele tem que ser pensado para acessibilidade.” (Clécio Bachini)
Por fim, é importante salientar que, a adoção de um pensamento voltado para acessibilidade no processo de design não irá atrapalhar o desenvolvimento da sua interface, muito menos das ideias do seu produto. Ela irá apresentar uma gama de diretrizes e orientações a serem pensadas e incorporadas à medida que você e sua equipe considerem as soluções visuais para seu design. Essas diretrizes irão fornecer novas perspectivas e meios de exploração para a elaboração de ideias que tragam melhorias para todos os usuários do seu produto.
Esse texto quis apresentar algumas discussões sobre o desenvolvimento de interfaces e sobre os elementos que dela fazem parte, no entanto acredito que a acessibilidade é um assunto que ainda precisa ser mais e melhor discutido no contexto dos produtos digitais, para que assim possamos reforçar culturalmente a acessibilidade como uma praxe, visando atender a todos com uma experiência positiva e significativa.
Referências
[1]. https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/introduction/
[2]. https://ux123.wordpress.com/2013/03/04/design-de-interfaces-e-acessibilidade-voce-esta-fazendo-isso-errado/
[3]. https://medium.com/@aliensdesign/o-design-universal-e-seus-princ%C3%ADpios-775b18e5aa56
[4]. https://inclusivedesignprinciples.org/
[5]. http://designinclusivo.com/
[6]. https://medium.com/academy-eldoradocps/acessibilidade-na-experi%C3%AAncia-de-usu%C3%A1rio-quem-estou-excluindo-do-meu-design-e11a9b7cb9e9
[7]. https://medium.com/academy-eldoradocps/como-criar-intera%C3%A7%C3%B5es-digitais-acess%C3%ADveis-aa72adfa72af
[8]. https://www.w3.org/
[9]. https://brasil.elpais.com/brasil/2017/10/08/cultura/1507468141_020732.html
Materiais de Referência e Ferramentas
[A]. https://contrast-ratio.com/
[B]. https://uxdesign.blog.br/o-que-fazer-e-o-que-n%C3%A3o-fazer-ao-projetar-para-acessibilidade-7da75261fa7b
