Plano de Acompanhamento de Carreira em Analise e

Desenvolvimento de Sistemas II.

Conteudista: Prof. Me. Edeilson Silva

Revisão Textual: Esp. Danilo Coutinho de Almeida Cavalcante

Revisando os Conceitos

Material Complementar

ESTUDOS DE CASO

Estudo de Caso 1

Estudo de Caso 2

Estudo de Caso 3

FECH AMEN TO

Feedback

Referências
1/7

Revisando os Conceitos

Olá, estudante!

Vamos iniciar a disciplina abordando os conceitos necessários para que você possa realizar as
atividades em cada estudo de caso mais à frente.

 Atenção, estudante! Aqui, reforçamos o acesso ao conteúdo

online para que você assista à videoaula. Será muito importante
para o entendimento do conteúdo.

Introdução
A disciplina Programa de Acompanhamento de Carreiras tem por objetivo mobilizar as competências
relacionadas à empregabilidade de forma gradual. Nesse sentido é essencial que novos conceitos e
aprendizagens com o foco no autoconhecimento, no conhecimento do outro, na empatia e na
colaboração sejam trabalhados. Essa é a razão pela qual iremos propor a aprendizagem de uma
ferramenta bastante difundida entre equipes de desenvolvimento e que está fortemente
relacionada ao aspecto de empregabilidade e autogestão da sua carreira.
Ao buscar oportunidades profissionais na plataforma Workalove, sobretudo aquelas relacionadas ao
desenvolvimento de software, é comum observarmos a necessidade de conhecimento em diversas
tecnologias, entre elas, conhecimentos relacionados ao conceito de acessibilidade na web.

Diante do fenômeno chamado internet, existe uma variedade de serviços on-line que possibilitam o
acesso a dados e informações e que são parte das nossas vidas. Em um contexto geral, para ter
acesso a esses serviços, muitos utilizadores precisam do apoio de tecnologias assistivas, como um
mouse adaptado que auxilie o usuário com problemas de coordenação motora, por exemplo. Esse
auxílio vai além da utilização de um hardware específico, abrangendo também a camada de software
com leitores de tela especializados dedicados à leitura de texto em voz alta, transcrições de áudio,
aumento do conteúdo por zoom, entre outros.

O princípio da universalidade é o principal poder da internet e por isso qualquer pessoa deve ser
capaz de utilizá-la, independentemente de sua deficiência. A inclusão digital tem como missão tornar
o acesso às ferramentas e aos recursos digitais mais igualitário e por isso foca em pessoas com
diferentes tipos de deficiência. Cunningham (2012) argumenta que acessibilidade não significa
implementar recursos avançados, contratar profissionais dedicados de forma exclusiva ou retornar
às origens quando falamos em construção de páginas na web. Segundo o autor, a ideia base é ter o
conceito como premissa ao longo dos projetos e implementar paulatinamente padrões que
possibilitem acesso a qualquer usuário.

Embora este tipo de solução tenha foco em pessoas com deficiência, usuários sem necessidades
especiais também podem se valer de páginas desenhadas para melhorar a experiência do usuário.
Páginas que permitem a escolha de cores para facilitar a visualização em locais com muita
luminosidade, que possibilitam o aumento da fonte do conteúdo apresentado, a escolha do
carregamento de imagens quando a internet móvel está sendo utilizada, que facilitam a utilização de
um leitor de voz, ou ainda, que permitem aos usuários consumir recursos de vídeo sem
necessariamente contar com speakers ou headphones podem ser bastante úteis para pessoas como
o Pedro, personagem do nosso primeiro estudo de caso.

Nesse movimento, estudantes de Análise e Desenvolvimento de Sistemas precisam refletir sobre a

temática, fomentando essa necessidade em seus times de projeto de modo que isso se torne um
aspecto natural durante o desenvolvimento de aplicações on-line em vez de um requisito explícito
solicitado por algum stakeholder.
Quando falamos sobre acessibilidade, precisamos canalizar a conversa para a interface do serviço,
ela é o ponto de contato entre os dados e funções da página e o usuário. Para disponibilizar uma
interface acessível não basta escolher um contraste entre o background e os botões ou fontes de
fácil leitura, isso vai muito além, pois requer conhecimento de cada um dos elementos do layout e da
apresentação de design. A área que tem essa preocupação como premissa é chamada de UX.

Experiência do Usuário
Considerando a diversidade de serviços disponíveis on-line, para que seja considerado um produto
de sucesso, um website deve causar experiências positivas durante sua utilização geral e
acessibilidade em determinados contextos. Como a ideia pode ser aplicada em qualquer interação
humana com produtos de tecnologia faz-se necessária uma área especializada em desenhar
processos que aumentem a satisfação durante a utilização de uma página na web. Estamos falando
do desenho da experiência do usuário, mais conhecida como User Experience (UX).

“O design da experiência do usuário é um conjunto de atividades de processo

incremental que ajudam a equipe de desenvolvimento e as partes interessadas do

projeto a se concentrarem em fornecer uma experiência positiva para os usuários do
produto de software.”

- PRESSMAN; MAXIM, 2021, p. 234.

É de responsabilidade da UX disponibilizar uma aplicação de fácil compreensão, navegação fluida e

semântica, ou seja, utilizar os elementos da linguagem de acordo com as funções para as quais
foram criados. Essa não é, no entanto, uma tarefa trivial, e por isso as equipes devem ir além de
desenhar interfaces elegantes explorando conceitos de usabilidade e acessibilidade. Trata-se de
uma premissa que, conforme Kalbach (2009), precisa fazer parte do projeto de software ainda na sua
concepção, sob o risco de falha caso seja aplicada somente ao final do projeto.
Trabalhar com a experiência do usuário é focar na interface entre a aplicação e o cliente,
considerando a usabilidade como o mecanismo de interação que auxilia os utilizadores a atingirem
seus objetivos com o uso da solução. A acessibilidade, por sua vez, é um aspecto da usabilidade que
se concentra em remover barreiras que podem impedir os usuários de realizar tarefas dentro da
aplicação. Quando pensamos em interface do usuário, algumas dimensões dessa experiência
precisam ser consideradas com a intenção de maximizar o know-how de seus utilizadores e suas
diferentes necessidades.

A complexidade do recurso, no entanto, não precisa ser algo explícito para que o usuário possa
operá-lo; pelo contrário, o desenho deve simular o sentimento de controle que existe no mundo
físico e permitir que as pessoas possam realizar ações como arrastar e soltar documentos. Ao
navegar em uma página o usuário deve ter o controle do recurso fazendo com que funções
desnecessárias possam ser habilitadas ou desabilitadas no momento de sua utilização.

Pensemos em uma determinada situação: um usuário que utiliza dois ou mais idiomas em seu
equipamento. Seu corretor ortográfico, habilitado por padrão, realiza correções desnecessárias de
forma automática. Nesse caso o ideal seria que esse usuário fosse capaz de desabilitar tal
funcionalidade sem grandes esforços.

Avançando um pouco mais nessa questão, podemos observar um padrão parecido nas reproduções
de vídeos do YouTube. Atualmente a plataforma tem o recurso de transcrição automática habilitado
para todos os vídeos. Embora a intenção seja legítima, é de extrema importância que o usuário tenha
controle sobre o recurso, podendo desabilitá-lo, caso deseje. Essa possibilidade deve ser algo
inegociável quando falamos em usabilidade.

Em nossa segunda situação problema, foi apresentado o caso de uma jovem sem deficiência visual
que também se beneficiou do recurso de transcrição para consumir vídeos on-line. Qualquer usuário
poderia consumir vídeos com este recurso habilitado caso desejasse assistir o último episódio de sua
série favorita em um local onde não fosse possível reproduzir o áudio por meio de fones de ouvido
ou pelo speaker do smartphone.

Quando se trata de controle da ferramenta, a ideia transcende os exemplos anteriores; ou seja, o

proprietário da tarefa deve ser capaz de desfazer suas últimas ações e automatizar tarefas repetitivas,
além de oferecer uma seção de status da tarefa realizada, algo que certamente contribuirá para
melhorar a experiência.

A interface também deve reduzir a carga de memória de seus utilizadores estabelecendo padrões
significantes para sua utilização. Imagine que você acabou de instalar uma ferramenta e decidiu
modificar as cores da interface, fazendo com que a personalização se adaptasse ao ambiente de
pouca luminosidade. Em determinado momento, entretanto, você observou que as configurações
iniciais já eram as melhores. Após checar todas as possibilidades, uma opção de reset claramente
disponível certamente seria de grande ajuda.

Figura 1 – Tela de preferências no terminal do Linux Mint

Fonte: Reprodução

#ParaTodosVerem. A figura apresenta uma tela de configuração do terminal Linux.

A imagem tem fundo cinza escuro, incluindo a barra de títulos, e cinza claro no
 corpo da janela. Na barra de títulos temos: “Preferências - Perfil “sem nome”. Logo
abaixo e à esquerda, há um menu exibindo as opções “global”, “geral”, “atalhos” e
“perfil - Sem nome”, este último está selecionado com o fundo verde. No painel
principal, existem os menus: “texto”, “cores”, “rolagem”, “comandos” e
“compatibilidade”. A seleção está no menu “cores” e, na sequência, a opção em
destaque “texto e fundo: Usar as cores do sistema”, está desmarcada. Essa opção
representa que o usuário poderia reverter as modificações de cores que tenha
realizado anteriormente.

Além da personalização, é fato que possuir padrões mnemônicos como CTRL + C para copiar e CTRL
+ S para salvar um arquivo deixa a interface mais organizada e consistente. Nesse sentido, elementos
como controles de navegação, menus e ícones devem receber atenção contínua na intenção de
melhorar a experiência do usuário.

Independentemente do valor gerado pela solução, é a interface que causará a primeira impressão
para o usuário. A complexidade do software, suas capacidades de processamento e elegância para
resolver determinados problemas podem perder o valor por causa de uma interface mal desenhada.
Com isso compreende-se que o UX deve ter o usuário e suas variações de idade, gênero,
habilidades física, nível cultural, personalidade, motivações e objetivos, como o cerne do seu
trabalho.

Acessibilidade
A universalidade da internet possibilita que pessoas ao redor do globo possam se comunicar,
estudar, trabalhar, comprar e se divertir de forma remota. Dessa forma, os serviços disponibilizados
na web são projetados para receber visitantes com diferentes necessidades. Quando falamos em
acessibilidade estamos nos referimos à eliminação das barreiras que possam comprometer a
utilização do serviço por parte desses usuários.

Quadro 1 – Tipos de necessidades especiais e soluções de acessibilidade

É bastante comum encontrar anúncios de serviços acessíveis 24h por dia e 7 dias por semana,
observe que isso se trata de disponibilidade. A acessibilidade na web não se trata apenas de estar
disponível, mas também de não privar ninguém de utilizar um website.

De acordo com o IBGE, no Censo de 2010, cerca de 24% da população brasileira declarou ter algum
grau de dificuldade em pelo menos uma das habilidades investigadas (enxergar, ouvir, caminhar ou
subir degraus), ou possuir deficiência mental/intelectual. A partir desse dado, acredita-se que muitos
dos utilizadores dos sistemas atuais são pessoas que se deparam com obstáculos que dificultam e,
muitas vezes, impossibilitam o acesso aos conteúdos e serviços digitais.

Site
Conheça o Brasil: Pessoas com Deficiência

Clique no botão para conferir o conteúdo.

ACESSE
Poder utilizar a internet sem a necessidade de deslocamento é uma etapa essencial para que pessoas
com deficiência sejam incluídas no mundo digital, mas essa não é uma tarefa trivial e depende de
profissionais que ajudem a desenhar sistemas considerando diferentes dimensões.

Por exemplo, quando falamos sobre internet, a vantagem de focar em páginas acessíveis é o
aumento de tráfego por conta da facilidade de indexação por mecanismos de buscas graças à
simplicidade de utilização da página. Portanto, a acessibilidade requer iterar, melhorar e localizar o
produto para melhor atender seus clientes, considerando seus hábitos, preferências e formas de
usar o recurso.

Aplicações acessíveis devem disponibilizar todos os seus dados e funções para qualquer utilizador,
independentemente do seu modo de utilização e de suas dificuldades. Essas aplicações devem,
portanto, considerar o tempo de resposta para o usuário. Pense no quão frustrante é aguardar o
término de um processo sem ter um feedback. Esse delay pode gerar confusão por fazer o usuário
pensar sobre o que está acontecendo.

Ainda sobre esse assunto, é imprescindível fornecer ajuda sem que o usuário precise sair da
aplicação e sem se referir a ele como culpado pelo problema ocorrido. Uma aplicação acessível
precisa fornecer uma mensagem de erro que informe a natureza do problema sem se valer de
jargões técnicos, que apresente o status atual e o motivo de ele ter ocorrido e que ofereça pelo
menos uma forma de se resolver o problema e uma alternativa, caso a solução proposta não
funcione. Ou seja, é preciso utilizar ao máximo as dicas visuais, uma vez que isso irá contemplar
outras instâncias, como um leitor de tela, por exemplo.
 Figura 2 – Mensagem de erro
Fonte: Reprodução

#ParaTodosVerem. A figura apresenta a mensagem de erro: “Não foi possível

estabelecer a conexão”. O texto é da cor preta e tem fundo verde. Uma seta de cor
verde chega até essa mensagem vinda de outro fragmento de texto: “Informar o
que aconteceu”. O restante da mensagem tem cores diferentes para cada
associação de texto: o texto da cor preta e fundo rosa diz: “Informar o status” e está
ligado por uma seta rosa à seguinte mensagem: “As últimas alterações foram salvas”.
O texto amarelo com fundo preto diz: “informar por que aconteceu” e está ligado
por uma seta amarela ao trecho “mas não conseguimos conectar sua conta devido a
problemas técnicos em nosso servidor”. O Texto na cor preta e fundo roxo diz:
“Ajudar a corrigir” e está ligado por uma seta, também roxa, ao fragmento “Por favor,
tente novamente”. Por fim, o texto na cor preta e fundo azul traz: “oferecer uma
saída” e está ligado por uma seta azul aos seguintes dizeres: “Se o problema persistir
por favor entre em contato com a equipe de suporte”. Ao final da imagem, existem
dois botões, “cancelar”, em texto preto e fundo cinza, e “tentar novamente”, com
texto na cor branca e fundo vermelho.

Com o advento do mouse, muitas tarefas deixaram de ser realizadas por meio do teclado e por isso o
menu deve contar com comandos correspondentes e submenus consistentes a ponto de não deixar o
usuário em dúvida sobre seu funcionamento. Dicas sobre o funcionamento de determinado menu
que indiquem o que o usuário pode esperar ao clicar sobre ele, bem como o acesso via comandos
no teclado, por exemplo, o atalho ALT + L, para localizar textos, são funcionalidades que precisam
fazer parte do contexto.

Observe que a acessibilidade como ferramenta de suporte para pessoas com diferentes tipos de
deficiência, como visual, auditiva, mental, física e múltipla, exige que seus conceitos sejam aplicados
logo no início do projeto a fim de que se reduzam o esforço e os custos de mudanças em etapas mais
avançadas.

A partir de agora exploraremos as peculiaridades de cada um deles. O objetivo é apresentar os

principais conceitos na intenção de provocar uma reflexão sobre o tema e estimular o
compartilhamento de ideias com colegas e outros profissionais que trabalham com o
desenvolvimento de software. Para o aprofundamento no tema, recomenda-se a leitura do material
complementar.

Acessibilidade Visual
Pessoas cegas são particularmente afetadas por um sistema inacessível ou mal estruturado no qual
informações vitais contidas em gráficos ou imagens são perdidas. Nesse sentido, a solução é criar um
serviço acessível para um aplicativo leitor de tela, de modo que o usuário não perca nenhum
conteúdo ou função por causa da ferramenta que está usando. Essas pessoas geralmente têm
problemas com HTML mal estruturado, imagens sem texto alternativo significativo, tecnologias
inacessíveis, itens repetitivos que não podem ser ignorados e formulários mal elaborados.

Embora os sistemas operacionais modernos disponham de seus próprios leitores de tela, alguns
aplicativos comerciais que ganharam popularidade significativa estão listados a seguir:

Sites
NVDA
Clique no botão para conferir o conteúdo.

ACESSE

Thunder
Clique no botão para conferir o conteúdo.

ACESSE

WebAnywhere
Clique no botão para conferir o conteúdo.

ACESSE

JAWS (comercial)
Clique no botão para conferir o conteúdo.

ACESSE

ZoomText (comercial)
Clique no botão para conferir o conteúdo.

ACESSE

Supernova
Clique no botão para conferir o conteúdo.
 ACESSE

É importante frisar que a acessibilidade visual não se limita a pessoas cegas, uma vez que indivíduos
com baixa visão também podem enfrentar barreiras ao navegar pela internet. Exemplos comuns de
dificuldades são sites que perdem funcionalidade ou conteúdo quando o tamanho da fonte é
alterado, ou cujas cores não contrastam o suficiente, ou ainda que não permitem que os estilos
padrão sejam substituídos e utilizam textos em imagens.

Ainda com relação a esse tema, os navegadores atuais contam com extensões bastante úteis. O
Google Chrome, por exemplo, conta com a Color Enhancer e a High Contrast, que permitem ao usuário
ajustar ou remover cores de páginas web; entretanto, é preciso assumir que o website faz bloqueio
de complementos, caso contrário, o usuário também seria prejudicado.

Um grupo bastante conhecido de pessoas com baixa visão são os daltônicos. O daltonismo é uma
condição que varia de casos leves, em que há dificuldades para distinguir certos tons de vermelho,
até casos mais graves, nos quais os afetados não conseguem ver cor alguma. Quando falamos em
design, é comum que, além do texto, as cores carreguem alguma informação, algo que afeta
diretamente este tipo de utilizador. A tabela a seguir é um recorte de tipos de daltonismo, extraída da
obra Accessibility Handbook, ela apresenta diferentes tipos de daltonismo e as cores que que se
assemelham:

Tabela 1 – Tipos de daltonismo

Tipo Cores que se assemelham

 Tipo Cores que se assemelham

Vermelho e verde, algumas cores

podem parecer mais intensas do
Protanopia
que parecem para alguém com
visão normal.

Vermelho e verde, mas as cores

Deuteranopia
mantêm a intensidade adequada.

Tritanopia Azul e amarelo.

Todas as cores são afetadas e os

usuários veem apenas tons de
Cromatopsia completa cinza. Além disso, os usuários
geralmente também têm uma
visão ruim.

Todas as cores são afetadas. Os

usuários veem as cores
Cromatopsia incompleta vagamente. Além disso, os
usuários geralmente também têm
uma visão ruim.

Os vermelhos são menos intensos

Protanomalia
e podem parecer pretos.

Deuteranomalia A cor verde é esmaecida.

Tritanomalia Azul e amarelo.

Fonte: Adpatada de CUNNINGHAM, 2012

Além das cores em si, o daltonismo também pode alterar o contraste entre elas, fazendo com que
não haja um padrão. Ou seja, um indivíduo com tritanopia, por exemplo, percebe um contraste
diferente de alguém com deuteranopia. Veja o exemplo na figura a seguir:

Figura 3 – Espectro visível para diferentes tipos de daltonismo

Fonte: Adaptada de CUNNINGHAM, 2012

#ParaTodosVerem. A figura apresenta quatro barras verticais representando

espectros de cores variados e que proporcionam uma comparação entre as cores
vistas por pessoas com a visão normal e aquelas visualizadas por portadores de
diferentes tipos de daltonismo.

Com isso você pode compreender a importância de dedicar algumas horas para pensar nas cores
utilizadas na web. Além da aparência, elas têm a função de transmitir informação e podem ser
potencializadas pela característica de inclusão..

Acessibilidade Auditiva
Com a ampliação da banda larga, os navegadores passaram a reproduzir mais conteúdo de áudio e
vídeo. Dessa forma, o proprietário de um website também precisa pensar em usuários que têm
acesso a um computador, mas que não podem aumentar o volume nem utilizar speakers porque
estão em um espaço público e não dispõem de fones de ouvido. Sendo assim, é preciso garantir que
toda informação também esteja disponível e seja acessível para deficientes auditivos; nesses casos,
indicadores visuais, como um sino, podem ajudar.

Assim como ocorre com a deficiência visual, há diferentes níveis de deficiência auditiva. Algumas
pessoas com esse tipo de limitação são surdas apenas para certos tons, tornando a fala difícil de
analisar, não importa o quão alto seja o volume; outras, com perda auditiva parcial e que utilizam
aparelho auditivo, podem ter dificuldades para utilizar fones de ouvido. Ou seja, é preciso dar suporte
a esses usuários adicionando legendas, recursos interativos com alertas visuais e feeds ao vivo de
alta qualidade.

Todo vídeo que tenha um componente de áudio deve ter as legendas incluídas. Além do conteúdo
textual abaixo da imagem, sons e dicas sobre as mudanças musicais ou de tom devem ser
adicionados. O exemplo a seguir mostra como uma cena tensa de filme de terror pode ser
legendada. Nela a tensão é construída por uma mudança na música, ruídos estranhos fora da tela ou
a qualidade rouca de uma voz.

Mulher: Nós o despistamos?

Homem: Acho que estamos sozinhos, não vejo o assassino lá fora.

(Fora da tela: Som de porta abrindo).

Mulher: O que foi isso?!.

Independentemente das cores da cena, adicionar um fundo claro, uma fonte sem serifa e um texto
com a cor escura é uma forma elegante de facilitar a leitura. Em complemento, é interessante evitar
letras maiúsculas e, se o texto estiver sendo apresentado muito rápido, considere adicionar mais
espaço à área de legenda. Muitas ferramentas disponíveis atualmente, algumas delas gratuitas,
permitem que legendas sejam adicionadas a vídeos sem grande esforço.
Sites

Juble
Clique no botão para conferir o conteúdo.

ACESSE

Subtitle Workshop
Clique no botão para conferir o conteúdo.

ACESSE

Aegisub
Clique no botão para conferir o conteúdo.

ACESSE

Kapwing
Clique no botão para conferir o conteúdo.

ACESSE
Existem muitas especificidades acerca de legendas e por isso não temos a intenção de exaurir o
assunto. Além da bibliografia da disciplina, você poderá encontrar outras referências no material
complementar indicado.

Acessibilidade Física
Embora se assemelhe no sentido de suas variações, a acessibilidade física foca na usabilidade real
do site, em sua navegabilidade e no formato de entrada dos dados. Como beneficiários desse tipo de
acessibilidade, podemos pensar em pessoas que sofram com distúrbios que podem causar tremores
ou espasmos, que tenham mobilidade reduzida, ou perdido o uso do membro dominante e,
consequentemente, não têm tanta precisão enquanto aprendem a usar o membro não dominante.
Além desses, indivíduos que não conseguem usar um mouse, mas que ainda podem usar o teclado
também estão inclusos nesse grupo.

Diferentes elementos podem ser utilizados para facilitar a navegação por parte desse grupo de
usuários. Quando um usuário não pode usar um mouse, por exemplo, além da utilização exclusiva de
teclado, existem dispositivos de rastreamento ocular que movem o cursor do mouse com base no
movimento dos olhos do usuário, há também mouses configurados para pessoas com tremores e
teclados estruturados para serem utilizados com apenas uma mão, o que, no entanto, pode
impossibilitar as combinações de teclas.

Ainda que existam soluções pontuais, é preciso considerar os momentos em que o usuário com
deficiência física é forçado a utilizar uma configuração abaixo da ideal e se depara com barreiras
como interfaces que exigem o mouse ou o teclado e requerem um alto nível de precisão, ou páginas
que possuem itens facilmente acionáveis, mas difíceis de fechar.

Quando falamos desse tipo de acessibilidade, um recurso que costuma apresentar barreiras são os
formulários, principalmente aqueles que incluem botões de opção ou caixas de seleção. Marcar
esses itens pode ser bem difícil para alguém com um distúrbio de movimento. A solução para esse
caso seria possibilitar a utilização da tabulação, por meio da tecla “TAB”, para garantir acesso a todos
os campos. Além disso, os formulários devem ser organizados com um elemento após o outro em
uma página em vez de elementos colocados um ao lado do outro, como geralmente vemos em
formulários de papel.

O uso de pop-ups também pode representar um desafio especial para usuários com distúrbios de
movimento. Pop-ups podem mudar o foco do usuário e ser difíceis de fechar. Se o pop-up precisar ser
fechado por meio do clique em um botão pequeno, um usuário usando um mouse já poderia
encontrar problemas; se esse usuário estiver usando apenas o teclado para navegar, é possível que
ele não consiga tabular até o pop-up, tornando o site inutilizável. Isso, no entanto, não significa que o
pop-up nunca deve ser utilizado, apenas que ele precisa ser projetado com cuidado para não
incomodar os usuários, pensando inicialmente como a janela será fechada, considerando para tanto
a utilização de um mouse ou um teclado para navegar pelo site. A tecla ESC é uma escolha popular,
pois não requer mãos hábeis para pressionar duas teclas ao mesmo tempo.

Desabilidades Cognitivas
Pessoas com distúrbios cognitivos também precisam de atenção quando falamos sobre a
necessidade de uma web acessível. Podem fazer parte desse grupo pessoas com dislexia leve ou
grave, com transtornos de déficit de atenção, como TDA ou TDAH, ou que sofram de qualquer outro
distúrbio de processamento de informação.

A dislexia pode variar de uma deficiência leve a uma extremamente incapacitante, abrangendo
pessoas que conseguem lidar com a vida cotidiana até indivíduos que se tornam analfabetos
funcionais. Considerando o hábito da leitura, algumas pessoas que sofrem dessa condição
descrevem letras que se movem e se alternam enquanto se olha para elas, outras, no entanto,
descrevem as palavras tornando-se blocos de cor. Diante dessas informações, como podemos tornar
a utilização de um site, que é feito de palavras, mais fácil para os usuários desse grupo?

Pessoas com dislexia relatam que letras parecidas são melhores porque exibem rotações e
inversões com menos frequência, por isso consideram a fonte universalmente criticada, Comic Sans,
como a mais fácil de ler. Isso acontece porque letras como b, p, d e q são comumente criadas girando
e virando um mesmo símbolo, deixando menos trabalho para o designer e tornando uma fonte que
parece mais uniforme. Isso significa que você deve substituir a Helvetica pela Comic Sans? Claro que
não!
Muitas pessoas utilizam folhas de estilo personalizadas com a intenção de visualizar sites mais
legíveis e, para ajudar a eliminar essa barreira, precisamos dar suporte a esse recurso em nossos
websites. Veja um exemplo:

No cabeçalho da página, fazemos o link com a folha de estilos CSS:

<link href=’http://fonts.googleapis.com/css?family=Fascinate+Inline’
rel=’stylesheet’ type=’text/css’>

No documento CSS, definimos uma série de fontes consideradas acessíveis:

ul.nav { ... font-family: 'Fascinate Inline', cursive; ... }

Agora basta utilizar na estrutura HTML:

<ul class="nav">

<li class="active">

<a href="#">Home</a></li>

<li><a href="#about">About</a>

</li><li><a href="#contact">Contact</a>

</li>
 </ul>

Embora o usuário possa utilizar uma folha de estilo personalizada, não significa que vá fazê-lo. Um
usuário disléxico pode precisar usar um computador em um ambiente de trabalho que bloqueou
esse recurso ou estar trabalhando em um novo sistema e não tem acesso à sua folha de estilo
personalizada. Como escolher fontes que suportem esses usuários?

Para pessoas disléxicas, fontes com serifa ou com espaçamento desigual entre as letras podem ser
mais difíceis de ler, ao passo que as sem serifa mostram-se mais fáceis. Fontes como Helvetica,
Verdana ou Arial já são consolidadas, mas você pode encontrar facilmente outros tipos.

Tabela 2 – Fontes para websites

Website URL Licença

Google Web
http://www.google.com/webfonts/ Gratuita.
Fonts

Font Squirrel http://www.fontsquirrel.com/ Gratuita.

Pague por
Font Spring http://www.fontspring.com/
fonte, ilimitado.

Precisa de
cadastro, a
Typekit http://typekit.com/ página tem
limite de
visualizações.
 Website URL Licença

Gratuita,
Precisa de
cadastro, a
Fonts.com http://www.fonts.com/web-fonts/
página tem
limite de
visualizações.

Fonte: CUNNINGHAM, 2012

Além da escolha das fontes, é preciso ter frases e parágrafos mais curtos, pois esses elementos são
mais fáceis de focar quando estamos lendo na tela do computador. Embora a ideia possa ser
espalhada por vários parágrafos, a retenção aumentará devido ao fato de a informação estar
segmentada. Quanto ao alinhamento do texto, deve-se evitar o texto justificado, uma vez que ele cria
mais espaços em branco para que o texto caiba exatamente entre duas margens. Esse espaço em
branco é muitas vezes percebido como uma única unidade, um efeito chamado “O Efeito Rio” pelos
tipógrafos. Esses blocos devem receber cores que ajudem o usuário com dislexia, cores como off-
black (#111) e off-white (#eee) podem apresentar um bom contraste nesse caso.

Para pessoas com dislexia, imagens podem ter gráficos significativos, o que certamente ajudará um
usuário disléxico a reter mais conteúdo do site. Por outro lado, as imagens também podem causar
distrações a ponto de inutilizar o site. Imagens significativas têm dois propósitos: dividir longas seções
de conteúdo e servir de marcador para que o usuário encontre rapidamente aquilo que é
significativo para ele. Já sabemos que o melhor é sempre evitar longos blocos de texto, com relação
às imagens, imagine um usuário buscando "Serviços de Jantar” no site da universidade; um ícone ou
imagem poderia facilitar a navegação, fazendo com que o utilizador não precisasse necessariamente
ler o conteúdo.

Nesse cenário, esforços como as Web Content Accessibility Guidelines (WCAG), criadas pelo World
Wide Web Consortium (W3C), fornecem um guia detalhado sobre a produção de aplicações digitais
para atender a diferentes níveis de necessidades.
WCAG (Web Content Accessibility Guidelines)
O W3C é uma instituição formada para definir os padrões de utilização da internet e seu principal
membro é Tim Berners-Lee, o inventor da internet. Dentro desses padrões, considerando a
variedade de pessoas que utilizam a internet, o consórcio disponibiliza um guia de acessibilidade
chamado de Web Content Accessibility Guidelines: Recomendações de Acessibilidade para Conteúdo
Web (WCAG).

Site

Clique no botão para conferir o conteúdo.

ACESSE

O guia apresenta uma série de recomendações para tornar a internet mais acessível para pessoas
com baixa ou completa falta de visão, fotossensíveis, que possuem limitações nos movimentos, na
fala, na visão ou de natureza cognitiva. Ele se baseia em quatro princípios para promover a
acessibilidade: perceptível, operável, compreensível e robusto.

Perceptível: Os componentes de informação e interface devem ser

apresentados de maneira perceptível;
 Operável: Os componentes da interface e a navegação devem ser operáveis;

Compreensível: Os usuários devem ser capazes de entender as informações, bem

como o funcionamento da interface do usuário;

Robusto: Os usuários devem ser capazes de acessar o conteúdo à medida que as

tecnologias avançam, considerando suas necessidades e incluindo tecnologias
assistivas.

A falta de algum desses princípios poderá comprometer o acesso ao recurso digital. Além desses
princípios, há diretrizes de critérios de sucesso que podem auxiliar o profissional de tecnologia a
desenvolver produtos de software.

Site
Sobre a WCAG

Clique no botão para conferir o conteúdo.

ACESSE

Section 508
Uma iniciativa governamental diretamente voltada para a promoção da acessibilidade é o projeto de
lei norte-americano que exige que sites do governo federal sejam seguros e acessíveis para pessoas
com deficiência. Essa iniciativa abrange uma série de questões relacionadas ao atendimento de
pessoas com deficiência visual, auditiva ou física.

A Section 508 baseia-se no conceito de Universal Design, que preconiza que produtos e ambientes
devem ser desenhados de modo que possam ser utilizados por todas as pessoas sem a necessidade
de adaptações ou conteúdo personalizado. Com isso:

Pessoas com a visão totalmente comprometida podem se valer de

sistemas suportados por acesso via teclado ou por comandos de
voz, utilizando-os inclusive para prover feedback sobre o volume de
leitura;

Indivíduos com visão limitada podem utilizar recursos que ampliam o conteúdo e
ajustam o contraste de cores em ambientes com baixa luminosidade;

Pessoas capazes de enxergar, mas que não conseguem diferenciar cores não precisam
necessariamente das cores para compreender significados;

Usuários com audição parcial ou completamente comprometida podem consumir

conteúdo de vídeo utilizando recursos de caption ou por meio de um intérprete;

Indivíduos com mudez podem, por meio de comandos visuais ou de toque, prover
comandos alternativos a sistemas que requerem interação por comando de voz;

Pessoas com mobilidade reduzida podem controlar o ambiente sem a exigência de

coordenação motora mais refinada;

Usuários com dificuldades de aprendizagem ou cognitiva podem se valer de interações

e linguagem mais simples e de fácil compreensão.

Para estar em conformidade, os projetos devem implementar princípios de acessibilidade desde o

início de seu ciclo de vida; devem contar com profissionais capacitados para essa implementação, ter
todos os seus artefatos revisados para incluir o máximo de personas de usuários com deficiência e
suas necessidades, além de utilizar uma metodologia padronizada de teste de acessibilidade,
praticando o design universal durante todo o processo de design e desenvolvimento.

Site
Sobre a Section 508

Clique no botão para conferir o conteúdo.

ACESSE

No Brasil, uma ideia semelhante é disponibilizada por meio do site do Governo Eletrônico. Definido
como Modelo de Acessibilidade em Governo Eletrônico (eMAG), a cartilha consiste em um conjunto
de recomendações a ser considerado para que o processo de acessibilidade dos websites e portais
do governo brasileiro seja conduzido de forma padronizada e de fácil implementação. Baseado no
WCAG, o modelo tem o objetivo de ser o norteador para o desenvolvimento e a adaptação de
conteúdos digitais do governo federal, garantindo o acesso para todos.

Em nosso terceiro estudo de caso, acompanhamos um cenário que pode ajudar a explorar as
potencialidades desse portal. Uma dessas possibilidades é o Checklist de Acessibilidade Manual para
o Desenvolvedor, disponível nos materiais complementares. Esse recurso permite que os
desenvolvedores possam validar seus projetos à luz da acessibilidade.
Site
Sobre Site do Governo Digital

Clique no botão para conferir o conteúdo.

ACESSE

Ferramentas de Acessibilidade na Web

Os navegadores atuais trazem ferramentas que possibilitam realizar testes, modificações e
inspeções, e entre elas está a ferramenta “Inspecionar”. Essa ferramenta exibe informações sobre
elementos individuais conforme passamos o mouse sobre a página da web renderizada, incluindo
informações de acessibilidade.

Localizado no canto superior esquerdo do DevTools (F12), a ferramenta “Inspecionar” fica azul quando
está ativa. Depois de ativá-la, basta passar o mouse sobre qualquer elemento na página da web
renderizada para visualizar informações gerais e de acessibilidade sobre o elemento em questão. A
seção “Acessibilidade” da sobreposição “Inspecionar” exibe informações sobre contraste de cor do
texto, texto do leitor de tela e suporte ao teclado.

A figura a seguir é uma demonstração do navegador Google Chrome. Por meio dele, acessamos o
website do Google e pressionamos a tecla F12. Na sequência, o botão “Inspecionar” foi habilitado e o
mouse colocado sobre a palavra “Gmail”. A partir disso, opções de acessibilidade, como contraste e
keyboard-focusable, importante para navegar utilizando o teclado, aparecem em destaque.
 Figura 4 – Inspeção no Google Chrome
Fonte: Reprodução

#ParaTodosVerem. A imagem apresenta um recorte do navegador de internet

Google Chrome dividido em dois painéis: à esquerda, o website www.google.com; à
direita, o painel de inspeções habilitado ao se pressionar a tecla F12. À direita, há um
destaque no botão “Inspecionar”; à esquerda, nas opções de acessibilidade, é
possível identificar funcionalidades como contraste e keyboard-focusable.

Com essa funcionalidade ativa, ao manter o mouse sobre um elemento, podemos visualizar
informações como o tipo de layout, se ele está posicionado usando um flexbox ou grade, o nome do
elemento, como h1, h2, div, etc., as dimensões do elemento, em pixel, a cor, como uma amostra de
cor (ou um pequeno quadrado colorido) e como uma string (como #336699), além de informações
de fonte, como tamanho e famílias de fontes, margem e preenchimento em pixels.

A seção de acessibilidade contém as seguintes informações:

 O contraste, que define se um elemento pode ser compreendido
por pessoas com baixa visão. A taxa de contraste, conforme definido
pelas diretrizes WCAG, indica se há contraste suficiente (um ícone
de marca de seleção verde) ou insuficiente (um ícone de ponto de
exclamação laranja);

Nome e função, são o que a tecnologia assistiva, como leitores de tela, informam sobre
o elemento;

O Nome é o conteúdo de texto de um elemento. Para o elemento <a

href="/">Gmail</a>, o Nome mostrado na ferramenta Inspecionar é “Gmail”;

O papel do elemento. Geralmente é o nome do elemento, como article, img, link ou

heading. Os elementos div e span são referidos como genéricos;

Focável no teclado indica se os usuários podem alcançar o elemento

independentemente do dispositivo de entrada (um ícone de marca de seleção verde
indica que o elemento pode ser focado no teclado, um círculo cinza com linha diagonal
indica que o elemento não pode ser focado no teclado).

Em um segundo momento, acessamos mesmo endereço eletrônico, mas com o navegador Mozilla
Firefox. Após acessar a página e pressionar a tecla F12, navegamos até o menu “Acessibilidade”.
Repare na figura a seguir que, de forma nativa, o navegador permite realizar inspeções acerca do
contraste, teclado e dos rótulos de texto. Há também uma forma de simular diferentes níveis de
daltonismo e visualizar a ordem de navegação via teclado marcando a opção “Show Tabbing Order”.
 Figura 5 – Acessibilidade no Mozilla Firefox
Fonte: Reprodução

#ParaTodosVerem. A figura apresenta um recorte do navegador Mozilla Firefox

depois de pressionada a tecla F12 e de se navegar até a aba “Acessibilidade”. A tela
está dividida em três seções horizontais. Na primeira, temos um menu com a opção
“Acessibilidade” selecionada; na segunda linha, a opção checar problemas está com
suas opções disponíveis (“nenhuma”, “todos os problemas”, “contraste”, “teclado” e
“rótulos de texto”). O tipo de simulação está marcado como Tritanopia (sem azul) e a
opção exibir ordem de tabulação está marcada. No terceiro painel existe um texto
“Google”, referindo-se ao elemento investigado no momento do recorte.

Existem diversas ferramentas que podem ajudar o time de projeto a desenvolver páginas acessíveis.
Uma delas é o Lighthouse, uma ferramenta automatizada de código aberto pensada para melhorar a
qualidade das páginas da web. Você pode executá-la em qualquer página da web, seja pública ou
que exija autenticação. Embora a ferramenta possua auditorias de desempenho, aplicativos web
progressivos, SEO, entre outros recursos, nos concentraremos no recurso de acessibilidade.

Acessar a Lighthouse é relativamente simples, basta pressionar F12 e localizar a aba “Lighthouse”.
Como nosso foco é a acessibilidade, mantivemos somente as opções de navegação padrão, em uma
tela do tamanho desktop e a categoria acessibilidade marcadas.
 Figura 6 – Interface do Lighthouse
Fonte: Reprodução

#ParaTodosVerem. A imagem apresentada é um recorte do navegador Google

Chrome depois de pressionada a tecla F12. O painel tem um menu superior da cor
cinza com a opção “Lighthouse” em destaque. Na sequência, há um fundo branco;
no canto superior esquerdo temos um ícone de um farol de cor vermelha sobre um
fundo azul, seguido do texto “Generate a Lighthouse report”. Ao lado, há um botão
com fundo azul e texto da cor branca “Analyze page load”. Abaixo, um formulário
com diversas opções, as opções marcadas são “navegação padrão”, “desktop” e a
categoria “acessibilidade”.

A pontuação de acessibilidade do Lighthouse é uma média ponderada de todas as auditorias de

acessibilidade e é baseada em avaliações de impacto para o usuário. Cada auditoria de acessibilidade
é aprovada ou reprovada e, ao contrário das auditorias de desempenho, uma página não recebe
pontos por passar parcialmente em uma auditoria de acessibilidade. Por exemplo, se alguns botões
em uma página têm nomes acessíveis, mas outros não, a página recebe um zero para os botões que
não têm uma auditoria de nome acessível.
2/7

Material Complementar

Indicações para saber mais sobre os assuntos abordados nesta disciplina:

SITES
WCAG Guidelines
Este repositório apresenta o Web Content Accessibility Guidelines (WCAG), um documento de
padrão internacional que explica como criar conteúdo mais acessível na web.
https://www.w 3.org/WAI/standards-guidelines/wcag/

Webaim
Ferramenta de apoio para localizar recursos de acessibilidade.
https://webaim.org/

LIVRO
Checklist de Acessibilidade Manual para o Desenvolvedor
O checklist de acessibilidade contém pontos de verificação para serem seguidos na hora do
desenvolvimento. Esses pontos são baseados em experiências de testes com deficientes visuais,
além do estudo dos padrões de desenvolvimento Web da W3C, diretrizes de acessibilidade da
WCAG 1.0, 2.0 e Samurai, eMAG 1.0 e 2.0.
https://www.gov.br/governodigital/pt-br/acessibilidade-digital/emag-checklist-acessibilidade-
desenvolvedores.pdf

LEITURA
Tecnologia Assistiva para Inclusão Digital
O arquivo apresenta brevemente o que é inclusão digital e apresenta diferentes ferramentas que
podem ser utilizadas por pessoas com deficiência.
https://tix.life/tecnologia-assistiva/tecnologia-assistiva-para-inclusao-digital/
3/7

Estudo de Caso 1

Caro(a), estudante.

Agora, vamos compreender o cenário que será abordado no primeiro estudo de caso da disciplina.

Atente-se à situação profissional que você precisará entender para poder realizar a atividade.

Lembre-se: apesar de não ser avaliada, o objetivo da atividade é lhe proporcionar uma autoavaliação
dos pontos tratados no decorrer desta disciplina. O assunto aqui tratado o(a) ajudará, também, a
realizar a avaliação geral ao fim desta disciplina.

Ferramentas de Acessibilidade no Smartphone

Em uma manhã ensolarada de quarta-feira, o senhor Pedro, que trabalha como motofretista, saiu
para trabalhar. Diante da quantidade de entregas naquele dia, ele saiu apressado deixando para trás
seus óculos. Pedro se deu conta do esquecimento a três quadras de casa, mas como os utilizava
somente para leitura, e sabendo que às 8h da manhã o trânsito em sua cidade é bastante carregado,
preferiu não voltar.

Por volta das 10h da manhã uma entrega urgente apareceu em seu roteiro e, embora ele
conhecesse bem a cidade, o destino não lhe era familiar. Pedro então posicionou seu smartphone no
guidão de sua motocicleta, abriu o aplicativo e notou que não conseguia visualizar o trajeto. O texto
era muito pequeno e o brilho do sol atrapalhava a visualização. E agora, considerando a
acessibilidade, como Pedro poderia proceder?

Resolução
A situação apresentada é bastante comum e poderia ter acontecido com pessoas de inúmeras
profissões que utilizam soluções tecnológicas desenvolvidas por profissionais de Análise de
Desenvolvimento de Sistemas. Sabendo disso, é essencial que esse profissional tenha como objetivo
incluir em seu trabalho ferramentas que possam auxiliar pessoas com diferentes tipos de deficiência.

Algo que certamente ajudaria o usuário nessa situação seria poder contar com uma funcionalidade
de aumento da tela ou um leitor de voz. Observe que Pedro não era necessariamente uma pessoa
com deficiência visual, entretanto ele também poderia se beneficiar do recurso de acessibilidade.
4/7

Estudo de Caso 2

Vamos compreender o cenário que será abordado no segundo estudo de caso da disciplina.

Atente-se à situação profissional que você precisará entender para poder realizar a atividade.

Lembre-se: apesar de não ser avaliada, o objetivo da atividade é lhe proporcionar uma autoavaliação
dos pontos tratados no decorrer desta disciplina. O assunto aqui tratado o(a) ajudará, também, a
realizar a avaliação geral ao fim desta disciplina.

Acessibilidade Beneficia Todos

Mariana está no ensino médio e está se preparando para o ENEM. Sua rotina de estudos envolve ir à
aula presencial duas vezes por semana, assistir aulas on-line de forma síncrona e, às vezes,
assíncrona. Em uma tarde de sábado a jovem se programou para assistir uma aula on-line assíncrona
em um parque próximo de sua casa. Mariana, no entanto, não esperava que o barulho dos outros
visitantes fosse se sobrepor ao volume de seu smartphone. Para completar, ela percebeu que não
havia levado o fone de ouvido. E agora, como Mariana pode dar prosseguimento à sua tarefa?

Resolução
Embora a situação não indique a plataforma por meio da qual a vídeo aula foi exibida, a estudante
poderia facilmente recorrer ao recurso de transcrição do vídeo. Essa é outra funcionalidade pensada
para pessoas com deficiência auditiva, mas que pode ser útil para qualquer usuário que esteja
impossibilitado de ouvir ou reproduzir o conteúdo com o áudio aberto.

Imagine-se em uma fila de espera. Você sabe que vai precisar aguardar em torno de quarenta
minutos, mas não trouxe os fones de ouvido. Com a utilização da transcrição, isso não seria um fator
limitante para assistir o último episódio da sua série favorita.
5/7

Estudo de Caso 3

Por fim, vamos compreender o último cenário, abordado no terceiro estudo de caso da disciplina.

Atente-se à situação profissional que você precisará entender para poder realizar a atividade.

Lembre-se: apesar de não ser avaliada, o objetivo da atividade é lhe proporcionar uma autoavaliação
dos pontos tratados no decorrer desta disciplina. O assunto aqui tratado o(a) ajudará, também, a
realizar a avaliação geral ao fim desta disciplina.

Recursos para Aplicar Acessibilidade

Em uma situação hipotética, a universidade está promovendo um concurso sobre acessibilidade na
web. A ideia é bastante simples e requer que os estudantes transformem uma página ativa em
acessível para deficientes visuais. Entretanto, estudantes de diversos cursos podem concorrer,
criando soluções que possibilitem o uso desse site por usuários com diferentes tipos de deficiência.
Um dos grupos contava com pessoas que já tinham noções básicas de HTML, CSS e Javascript, e
esses indivíduos perceberam que a acessibilidade é muito mais complexa do que haviam imaginado.
É preciso ter uma atenção redobrada e utilizar recursos de apoio para o desenvolvimento.

Pensando nisso, queremos convidar você a acessar o portal gov.br

https://www.gov.br/governodigital/pt-br/acessibilidade-digital e explorar os recursos disponíveis
com a intenção de auxiliar os estudantes.
Resolução
Embora o tema não esteja limitado ao portal, considerando o idioma e o contexto em que ele foi
escrito, as ferramentas de acessibilidade nele disponíveis podem auxiliar os desenvolvedores a
criarem conteúdo mais acessível. Acredita-se que uma boa forma de iniciar o projeto, dado que a
universidade forneceu o website, seria utilizar o Checklist Manual de Acessibilidade para
desenvolvedores.
6/7

Feedback

Muito bem, estudante.

O objetivo desta etapa é apresentar a você uma resolução geral dos estudos de caso.

Aqui, você pode extrair os melhores caminhos a serem escolhidos em cada cenário descrito
anteriormente.

 Atenção, estudante! Aqui, reforçamos o acesso ao conteúdo

online para que você tenha o feedback do professor. Será muito
importante para o entendimento dos estudos de caso.
7/7

Referências

BRASIL. Governo Federal. Checklist de acessibilidade manual para o desenvolvedor: eMAG – modelo
de acessibilidade em governo eletrônico. Gov.br, 2010. Disponível em:
<https://www.gov.br/governodigital/pt-br/acessibilidade-digital/emag-checklist-acessibilidade-
desenvolvedores.pdf>. Acesso em: 25/10/2022.

CUNNINGHAM, K. Accessibility handbook: making 508 compliant websites. [S. l.]: O'Reilly Media, 2012.

KALBACH, J. Design de navegação web: otimizando a experiência do usuário. Porto Alegre:

Bookman, 2009.

PRESSMAN, R. S.; MAXIM, B. R. Engenharia de Software: uma abordagem profissional. Porto Alegre:
AMGH, 2021

 Muito bem, estudante! Você concluiu o material de estudos! Agora,

volte ao Ambiente Virtual de Aprendizagem para realizar a Avaliação
Geral.