Semana da Programação

16% de desconto!
Oferta acaba em:

0

dias

00

hrs

00

min

00

seg

Primeiras aulas do curso Acessibilidade web parte 1: tornando seu front-end inclusivo

Acessibilidade web parte 1: tornando seu front-end inclusivo

HTML e os leitores de tela - Introdução

Olá, sou o Natan Souza, instrutor de UX e Front-end na Alura. Neste curso você aprenderá um pouco mais sobre acessibilidade web, com um foco maior em Front-end. Por isso, é necessário que você tenha algum conhecimento prévio de HTML e CSS.

Se você não possui estes pré-requisitos, recomendo os cursos de HTML e CSS da plataforma.

Minha sugestão é que você também faça a primeira parte do curso.

Nela, nos enfocamos em particularidades como autismo, dislexia, baixa visão e deficiências momentâneas.

Agora, nesta parte veremos basicamente como as pessoas com deficiência visual utilizam o computador e a internet, e de que forma é possível deixarmos o site melhor, mais inclusivo e acessível. Teremos a participação de um convidado especial, com o qual veremos pontos interessantes. Por exemplo, mostraremos a melhor forma de marcar os títulos das nossas páginas, descobriremos se o HTML5 resolve qualquer tipo de problema relacionado à acessibilidade e se faz sentido colocar o atributo alt em todas as imagens. Será que toda descrição do alt tem valor semântico?

Espero que você aproveite essa jornada. Continuaremos a seguir!

HTML e os leitores de tela - Testando de verdade

Nós entrevistamos o desenvolvedor Bruno Welber, que além de aluno da plataforma, trabalha com consultoria de acessibilidade. Ele nos ajudou a fazer melhorias na página da Apeperia e deu dicas de como deixar nossos sites mais acessíveis.

Bruno: Olá, pessoal da Alura! Sou aluno da plataforma há dois anos, fiz excelentes cursos, e trabalho com desenvolvimento web, mais focado em acessibilidade. Desde 2015, estou fazendo testes nisto, tanto para web quanto para mobile. Trabalho também com back-end.

Natan: Só por curiosidade, com quais linguagens você trabalha no back-end?

Bruno: PHP, Java, C#...

Natan: Basicamente, o que vier você está programando.

Bruno: Basicamente. Se aparecer um projeto legal, fazemos.

Natan: Legal. Te chamei aqui pois queria que você testasse a acessibilidade do nosso novo projeto, que é a Apeperia, uma startup que desenvolve aplicativos para pequenas e médias empresas. Conforme você for navegando, gostaria que fosse me informando sobre o que está pensando, sentindo, o que você esperava, e coisas assim.

Bruno: Estamos no site...

Natan: Essa voz aí, é uma entidade, algo assim?

Bruno: Essa voz do astral que está conversando comigo agora é o leitor de telas NVDA, gratuito e open source, possível de ser baixado no site oficial para ser usado tranquilamente. Esta voz específica que estamos utilizando não é próprio do NVDA, e sim do Windows, sendo disponível apenas para a versão 10 do Windows - a partir da Creator -, é legal ressaltar. Uso a voz do "Daniel" porque a do NVDA é um tanto "robotizada".

Natan: Mostrarei o NVDA com calma nos próximos vídeos, não se preocupem com isso.

Bruno: [leitor de tela lê em voz alta conforme Bruno navega a página pressionando a tecla "TAB" do teclado] Acredito que isto seja um cabeçalho... Acho que estou no Brasil, então não faz sentido o site alternar entre inglês e português. Aqui já existe uma falha que atrapalha bastante a navegação.

Natan: Legal, veremos como corrigir isso.

Bruno: Terei que desativar essa detecção de idioma que, se usada corretamente, é útil. Para isso, desabilitaremos o box de "Alternância automática de idioma quando suportado" na janela "Opções de voz".

Natan: Então como o NVDA está em português, estamos desabilitando essa alternância de idiomas.

Bruno: Exatamente.

Natan: Faz sentido. Mas isso é um "jeitinho" que você encontrou para lidar com esse problema de acessibilidade, certo?

Bruno: Sim, pois o correto seria a leitura do texto ser feita de acordo com o idioma local. Da maneira como estava, era estranho. [Bruno continua navegando usando o leitor de tela] Botão "Conheça os planos", vamos ver se ele faz algo. Faz?

Natan: Não aconteceu nada.

Bruno: Então isso não é um botão. [risos]

Natan: É só uma pegadinha.

Bruno: Já que não aconteceu nada, vou continuar pela página. "Cabeçalho nível 1 tempo", tudo bem, mas o tema principal da página é a criação de aplicativos ou é gestão de tempo?

Natan: Boa pergunta, seria o tempo de São Paulo, algo assim.

[leitor de tela lê "Cabeçalho nível 1 foco"]

Bruno: Mais um cabeçalho... O "Sobre" está sobrando literalmente.

Natan: Aí aparece um texto gigantesco.

Bruno: "Ícone do Android gráfico", "Ícone da Blackberry gráfico"... é meio redundante, já sei que é um gráfico, não importa o que seja. "Desenvolvemos aplicativos para todas as plataformas" já é compreensível pelos gráficos, essa frase deveria estar antes deles. Este "assinar plano" se refere ao plano de cima ou de baixo?

Natan: Legal, é interessante reparar que visualmente tudo parece estar claro para nós, então são preocupações que não costumamos ter mesmo, mas aqui no curso iremos pensar um pouco nessas questões.

Bruno: Até mesmo por conta do requisito de você não apresentar uma informação somente por cores como está sendo feito neste caso...

Natan: Exatamente. Isso foi uma das coisas que abordamos no curso anterior, então, se você está começando por este, recomendo fortemente que comece por Acessibilidade web: introdução a designs inclusivos, que é mais voltado para design, só que é interessante para não cometer gafes deste tipo.

Bruno: "Notícia 1, notícia 2, notícia 3".

Natan: Bem descritivo, não?

Bruno: Totalmente, se forem trocadas amanhã, serão "Notícia 4, notícia 5 e notícia 6"? "Receber destaques por e-mail": vamos tentar clicar nesse botão, que para mim é outro que não faz nada.

Natan: Fez, sim! Abriu um modal, veja que bacana.

Bruno: Te juro que não estou vendo nada. [risos]

Natan: Que sacanagem. Tem que bater no frontender que fez este site.

Bruno: Concordo plenamente. Continuando: "Assine nossa newsletter para receber notícias técnicas sem spam!", creio que isto faça parte do botão, pelo jeito.

Natan: Isto é como se fosse uma descrição, um parágrafo embaixo de um título.

Bruno: Automaticamente deduziria que para fechar este modal teria que usar a tecla "esc", porém, nada acontece.

Natan: Isso aí faz parte dos problemas que iremos corrigir durante o curso, mais especificamente na parte de Javascript. Bruno, se você fosse fechar a janela, como você faria?

Bruno: Teria que procurar o "X" [ícone de fechar], vamos ver se pelo menos isso o desenvolvedor deixou apresentável. "Botão xX", será que funciona?

Natan: Funcionou! Qual seria o resumo, o que você achou da acessibilidade deste site?

Bruno: Acho que realmente teria que dar um castigo para quem fez isso, como fazê-lo ficar uma semana usando o NVDA.

Natan: Bruno, obrigado por ter vindo, e topado participar deste vídeo do começo do curso. Vamos melhorar a acessibilidade dos nossos projetos, porque não adianta nada deixar o site esteticamente impecável, porém, inacessível.

Bruno: Valeu pessoal.

HTML e os leitores de tela - Instalando o NVDA

O curso Acessibilidade web: introdução a designs inclusivos, como dito anteriormente, não envolve front-end, HTML ou CSS, muito menos JavaScript. Ele é recomendado para designers, que muitas vezes se preocupam em deixar tudo esteticamente bonito, porém, acabam esquecendo a questão dos contrastes cromáticos em fontes muito finas e backgrounds claros, por exemplo.

No primeiro curso, comentamos sobre como deixar nossa interface mais acessível para autistas, surdos, disléxicos, além de disponibilizarmos bastante atividades extra. Mas é um curso curto.

Outra recomendação é que você faça alguns dos cursos da carreira de Front-end da Alura, como HTML5 e CSS3 I: Suas primeiras páginas da Web e HTML5 e CSS3 II: Turbinando as suas páginas, além de JavaScript: Programando na linguagem da web. Tais cursos têm como pré-requisito ter conhecimento em Lógica de programação. Já os cursos de jQuery não são estritamente necessários. Fica a seu critério, conforme for o seu objetivo.

Como vimos com o Bruno, não temos alguém nos indicando 24 horas onde o cursor do mouse está localizado na tela. O Bruno usa um software para isso, os chamados leitores de tela, que funcionam indicando e lendo a localização do foco. Dentre as opções disponíveis, estão o JAWS, o NVDA e, no caso do Mac, o VoiceOver - leitor que vem integrado ao sistema operacional. Há também o Narrador no Windows, e outros.

Qual deles é o mais interessante? Nós precisamos fazer testes e ver o que de fato o usuário usa. Se ele utilizar o Windows 7, por exemplo, teremos que encontrar a melhor solução, testando as aplicações com este navegador. Da mesma forma, para saber qual leitor de tela é o melhor ou mais utilizado, pode-se consultar o site WebAIM, totalmente focado em acessibilidade web.

Foi feita uma pesquisa em 2017, que indica qual leitor de tela é o mais utilizado, e o JAWS, junto com o NVDA, têm juntos 78.5% do market share, enquanto o VoiceOver é utilizado por 11.7%, pois é bem grande a quantidade de usuários de Mac. O JAWS, apesar de ser o mais usado, tem decaído em uso conforme a passagem dos anos.

A barreira do JAWS é que a licença para a sua instalação em português custa cerca de R$8 mil, sendo um investimento alto para nós desenvolvedores testarmos em nossas interfaces. No caso do VoiceOver - disponível no Mac -, não há custo adicional, assim como o Narrador do Windows. No nosso projeto, usaremos o NVDA, que aceita doações via PayPal, porém, não é compatível com Mac.

Na mesma pesquisa, cerca de 73% dos usuários de leitores de tela usam o Windows como sistema operacional, e por este motivo focaremos mais nele. Veremos também que o navegador mais utilizado por quem possui leitores de tela é o Firefox (41%), seguido pelo IE11 (23.3%) e pelo Chrome (15.5%). O Bruno, no entanto, afirmou que o Chrome não é tão interessante em termos de compatibilidade com leitores de tela.

Instalaremos o NVDA, que começa falar desde o início. Para evitarmos isto, manteremos a tecla "Ctrl" pressionada, enquanto seguimos a instalação definindo as configurações conforme o que precisamos. Na tela de boas-vindas, vamos manter marcado o checkbox de "Usar CapsLock como uma tecla modificadora do NVDA".

Para que a voz não atrapalhe a aula por enquanto, vamos desativá-la clicando no ícone do programa no canto superior direito da tela, e em "Preferências > Opções de voz..." e diminuindo todo o volume.

Provavelmente, você deve ter notado que a voz do leitor é "robotizada", ou seja, bastante sintética e artificial. No Windows, há duas opções:

Usaremos essas opções no NVDA, faremos isto, clicando com o lado direito do mouse sobre o ícone do NVDA mais uma vez, e depois em "Preferências > Sintetizador...". Na janela que será aberta, trocaremos eSpeak NG por Vozes Windows OneCore em "Sintetizador:". Ao clicarmos em "OK", passaremos a ouvir a voz da Maria, mas você tem a liberdade para selecionar o "Daniel". É possível aumentar ou diminuir o volume, basta fazer o ajuste.

Na mesma janela de configurações de opções de voz, manteremos o checkbox de "Alternância automática de idioma quando suportado", e em "Grau de sinais de pontuação:", poderemos deixar muito, o que significa que será dada muita ênfase nas pontuações. As demais definições poderão ser mantidas de acordo com o padrão.

Se você for testar algo via teclado durante o curso, o NVDA lê cada caractere digitado - isto pode ser desativado em "Preferências > Opções de teclado...". Outro ponto interessante é o Exibidor de Fala do NVDA existente em "Ferramentas", que abre uma janela mostrando tudo o que está sendo feito conforme é passado o mouse ou alterado o foco. Isto é útil para quando não queremos ficar ouvindo o leitor de telas o tempo todo, pois temos também a opção de ler.

É possível salvar estas configurações ao clicarmos com o lado direito do mouse no ícone do NVDA e em "Salvar configuração", bem como criar perfil de configuração e levar para outro desktop ou notebook, por exemplo.

Sobre o curso Acessibilidade web parte 1: tornando seu front-end inclusivo

O curso Acessibilidade web parte 1: tornando seu front-end inclusivo possui 154 minutos de vídeos, em um total de 50 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!

  • 1304 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1304 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1304 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1304 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

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