Primeiras aulas do curso Acessibilidade web: introdução a designs inclusivos

Acessibilidade web: introdução a designs inclusivos

Acessibilidade e autismo - Introdução

Sou o Natan Souza, instrutor de UX e Front-end na Alura, além de dar cursos na Caelum também.

Nós falaremos sobre "Acessibilidade web, introdução a designs inclusivos".

Inicialmente, trabalharemos com uma ferramenta online - parecida com Sketch e Photoshop -, chamada Figma.

É uma ferramenta interessante para fazer o user interface. Trabalharemos com o projeto da Apeperia, disponível nas atividades dessa aula.

página inicial da apeperia

Quais particularidades abordaremos nesse curso? Nós iremos focar em cinco abordagens desse curso:

Em geral, falaremos sobre pessoas com algum tipo de deficiência.

O projeto final ficará da seguinte forma:

página com texto de apresentação da empresa no centro, sobre uma imagem de foguete em lançamento, botão "conheça os planos", mais abaixo ícones e textos menores

Durante o curso, abordaremos cada seção, detalhes dos elementos, como o uso de bordas arredondadas e afins. Falaremos também sobre texto, recursos que devemos ou não utilizar, qual o melhor alinhamento...

O nosso enfoque será em temas de layout, e a parte de HTML e CSS não será assunto abordado neste curso. Falaremos sobre questões importantes que devem ser consideradas antes de começarmos a escrever o código.

Acessibilidade e autismo - Por que pensar em acessibilidade?

Começaremos o treinamento de acessibilidade antes da escrita do código. Primeiramente, vamos pensar em como podemos argumentar com diretores sobre os motivos para trabalharmos com acessibilidade.

Teremos que pensar no alcance de público - será que existem muitas pessoas com algum tipo de deficiência?

mapa do Brasil com a indicação colorida de que 25% possui algum tipo de deficiência

Cerca de 25% da população brasileira tem algum tipo de deficiência física ou cognitiva. Trata-se de uma porcentagem significativa e, por isso, devemos levá-la em consideração.

Esse valor representa aproximadamente 45 milhões de pessoas, são pessoas demais para serem desconsideradas quando projetamos as nossas interfaces.

Precisamos levá-las em consideração tanto na criação do layout como no momento de elaborar o código. Sem citar o sentimento de empatia... Mas isso será falado mais adiante.

Por enquanto, vamos explicar o termo "deficiente". Ele era usado há alguns anos atrás, porém, tornou-se pejorativo usá-lo. Por quê? O termo se refere, na verdade, à condição que uma pessoa tem e não ao indivíduo como um todo.

Por isso, é recomendável que o termo "deficiente" seja evitado. Outras palavras que fazem referência às pessoas com deficiência e também caíram em desuso são:

Termos como "excepcional" e "especial" criam a impressão de que outras pessoas podem não ser, ou alimentam o conceito de que alguém é "normal". Da mesma forma, diminutivos, ou dizer que alguém é "problemático" também acaba sendo depreciativo.

Então, qual seria o termo correto? Atualmente, é preferível nos referirmos a pessoa com deficiência (PCD) quando queremos falar corretamente sobre acessibilidade. É o mais aceito, no entanto talvez no futuro possa não ser mais. É comum escutarmos "pessoas com necessidades especiais" (PNE), porém este é um termo mais utilizado para fazer referência a idosos com limitações físicas.

Você encontrará diversas terminologias mais apropriadas no blog Desculpe não ouvir, criado por Lak Lobato.

E devemos pensar em acessibilidade somente quando falamos sobre Web, interfaces e dispositivos tecnológicos? Não. Pense em como é o semáforo da sua cidade: uma pessoa cega sabe quando o sinal está verde ou vermelho? Ela saberá quando estará livre para ela seguir adiante? Neste caso, o ideal é que haja um aviso sonoro, alertando o momento em que é liberado que ela prossiga.

Outro exemplo são os aparelhos como micro-ondas mais modernos, que possuem controles touch screen (logo teremos com sinal wifi). No caso de uma deficiência momentânea na situação de alguém que queimar a ponta dos dedos, como essa pessoa consegue interagir com essa interface touch? O manuseio se torna trabalhoso.

Pensando em outras situações existentes, o acesso das pessoas cadeirantes deveria facilitado, por exemplo. Os corredores deveriam ser projetados para o trânsito de uma cadeira de rodas.

ícones de semáforo, escada e micro-ondas

Se às vezes a acessibilidade falha no mundo físico, é fácil entender que o mesmo ocorre no mundo virtual. O ideal é que a reflexão sobre a acessibilidade extrapole o que é exibido na tela do computador e chegue ao mundo físico.

No curso, vamos colocar em foco cinco deficiências (transtornos, síndromes ou particularidades):

ícones de cada uma das deficiências citadas, da esquerda para a direita: quebra-cabeças, orelha, três blocos com "A", "B" e "C", amontoados, uma pessoa cadeirante e óculos

Você pode sentir que falta falarmos sobre os deficientes visuais. Este tema vai demandar uma preocupação maior com a parte de código, e exigirá que você tenha conhecimentos sobre HTML e CSS, e por isto decidimos trabalhar o assunto em uma segunda parte do curso.

Para continuarmos a falar sobre a interface, é possível consultar a documentação da W3C, organização responsável por definir as normas dirigidas para a parte de Front-end, incluindo a padronização do uso de CSS e HTML.

A documentação recebeu o nome de Web Content Accessibility Guidelines ("Diretrizes de acessibilidade de conteúdo para web", em livre tradução), em que encontraremos orientações sobre como deixar nossas páginas web mais acessíveis.

Existe uma versão traduzida para o português de Portugal.

Nela, encontraremos os níveis de acessibilidade recomendados (ou não), e mais adiante nos aprofundaremos sobre essa documentação.

E quando o seu chefe fala "vamos deixar o site mais acessível", e a solução é adicionar a conhecida barra de acessibilidade...

"A+", "A-", círculo com a metade colorida e a outra não, triângulo contendo ponto de exclamação; na linha de baixo, "A+", "A-" e "C"

Ela dispõe de recursos para ajustarmos o tamanho da fonte e o contraste. Atualmente, isso não é muito apropriado, principalmente porque esta barra pode ser considerada a solução definitiva. No entanto, isto não resolve.

Em uma palestra(https://www.youtube.com/watch?v=4URTZHk6tz0) sobre acessibilidade, a instrutora Talita Pagani nos explica mais assunto, que não se trata apenas de aumentar ou diminuir o tamanho da fonte, nem se focar unicamente no deficiente visual, ou no surdo... Devemos pensar em deixar a nossa interface acessível para todos.

A seguir, começaremos a desenvolver o nosso projeto.

Acessibilidade e autismo - Sobre autismo

Focaremos nosso curso em autismo. Vamos esclarecer do que se trata, e que isto não é considerado uma deficiência, mas sim uma síndrome comportamental com causas múltiplas.

Vale ressaltar que o autismo tampouco é considerado um deficiência física, como alguém que quebra um braço e fica sem poder movê-lo por algum período. Devemos ser cautelosos com as terminologias...

Isto foi especificado pelo governo federal, juntamente com a Microsoft. A parceria entre os dois resultou na criação da cartilha Tecnologia Assistiva nas escolas.

É nesta cartilha em que é definido o autismo como sendo uma síndrome comportamental. Alguns estudiosos começaram a colocá-lo em dois grandes grupos: alto e baixo funcionamento.

Os indivíduos de alto funcionamento conseguem adquirir algumas skills, ou seja, habilidades que lhes permitem seguir uma carreira profissional, por exemplo. O tipo de baixo funcionamento possui características contrárias, podendo ter dificuldades inclusive de fala. É preciso saber a qual tipo um autista se encaixa.

Existem especialistas que definem as características que cada um tem. No curso, focaremos nas pessoas de alto funcionamento. O símbolo do autismo são quatro peças de quebra-cabeças:

Para o curso, usaremos a ferramenta Figma, de sketch online, para trabalharmos com a Apeperia. Nós escolhemos o Figma como nossa ferramenta, por ser gratuito, enquanto a licença do Sketch custa cerca de $100. O Illustrator é outra boa ferramenta, porém também é paga. O Figma é totalmente online, basta acessá-lo e criar seu protótipo.

Mas você tem a liberdade de usar a ferramenta que preferir. A seguir, vamos trabalhar com a página da Apeperia:

página da apeperia sendo exibida no dashboard da ferramenta online

Apontaremos alguns tópicos sobre o autismo no layout que trabalharemos. Para o cotidiano dos autistas de autofuncionamento, pode ser que eles não sejam tão de extremos, como "8 ou 80". Alguns autistas sentem a sensação de sufocamento ao serem abraçados, perfumes podem incomodá-los, porque eles têm os sentidos aguçados.

Neste vídeo, realizado pela The National Autistic Society, vemos como é a experiência de passear em um shopping do ponto de vista de um autista.

A seguir, vamos trabalhar com o nosso projeto no Figma. Pensando em contraste, observe que as cores utilizadas no layout são muito brilhantes.

cores brilhantes do layout

É como se mirássemos uma luz azul ou verde diretamente nos olhos do usuário.

O primeiro ponto que trabalharemos será amenizar o uso de cores muito fortes, que podem atrapalhar a experiência de usuários autistas - também pensando que pode ser uma escolha desagradável para outros usuários.

Criaremos uma lista com os valores hexadecimais das cores com que trabalharemos:

Cor originalCor substituta
Verde#9B59B6
Azul#56CCF2 (figma azul clarinho)
Amarelo#56CCF2
Vermelho#EB5757

Começaremos substituindo o verde utilizado na seção "Planos".

cores substituidas em planos

O mesmo verde foi usado no destaque.

icones em verde

As duas imagens ficaram em roxo, e nos locais com azul iluminado, mudaremos para um azul mais clarinho, começando pela seção "Sobre". O código da cor será incluído no campo de "Fill"

Vamos substituir as demais cores: a seção "Destaques" terá fundo azul e, por último, onde as fontes e elementos estão em vermelho passarão a ter um tom de vermelho mais opaco. No nosso projeto, veremos que o vermelho é bem recorrente.

O Figma é uma ferramenta que será adotada aqui pois, até o momento da gravação do curso, pode ser usada gratuitamente, além disso, a curva de aprendizagem é crescente.

O Figma também é utilizado no processo de prototipagem no curso de UX da Caelum.

Agora o contraste cromático ficou mais agradável.

Nós definimos algumas cores para o curso, mas você tem a liberdade de escolher as cores e combinações de sua preferência, desde que fique atento quanto ao contraste. Dependendo da escolha das cores, a página pode causar incômodos nas pessoas autistas, assim como em outros usuários.

Uma dica é o uso da Adobe Color CC para buscarmos a cor mais apropriada. Ele nos mostra as cores em esquemas cromáticos análogos, monocromáticos, tríade, complementares.

Se você ainda não tiver definido as cores, é possível pesquisar por algum termo como "calm" ("calmo", traduzido para português). Outra opção interessante é o site appy Autism, construído com enfoque no uso de cores agradáveis para autistas.

appy autism

Observe que as cores estão suaves, em tons bastante agradáveis para os olhos. Então, a nossa recomendação é que você evite cores muito contrastantes no seu layout. Tente usar cores calmas, bem como o flat design.

Mais adiante, abordaremos outras particularidades.

Sobre o curso Acessibilidade web: introdução a designs inclusivos

O curso Acessibilidade web: introdução a designs inclusivos possui 193 minutos de vídeos, em um total de 62 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda HTML e CSS acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas