I PACADSistemasII
I PACADSistemasII
I PACADSistemasII
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.
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.
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).
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.
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.
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.
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
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
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.
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:
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.
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:
<link href=’http://fonts.googleapis.com/css?family=Fascinate+Inline’
rel=’stylesheet’ type=’text/css’>
<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.
Google Web
http://www.google.com/webfonts/ Gratuita.
Fonts
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.
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
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.
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
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:
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;
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;
Site
Sobre a Section 508
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
ACESSE
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
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.
Nome e função, são o que a tecnologia assistiva, como leitores de tela, informam sobre
o elemento;
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
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
Material Complementar
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.
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.
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.
Feedback
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.
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.
PRESSMAN, R. S.; MAXIM, B. R. Engenharia de Software: uma abordagem profissional. Porto Alegre:
AMGH, 2021