emag desenvolvedor Exercício Avaliativo Final

Prévia do material em texto

04/01/2021 Exercício Avaliativo Final
https://mooc.escolavirtual.gov.br/mod/quiz/review.php?attempt=8362990 1/13
Painel / Meus cursos / eMAG Desenvolvedor / Módulo de Encerramento / Exercício Avaliativo Final
Iniciado em segunda, 4 jan 2021, 19:29
Estado Finalizada
Concluída em segunda, 4 jan 2021, 20:38
Tempo
empregado 1 hora 9 minutos
Notas 3,00/10,00
Avaliar 15,00 de um máximo de 50,00(30%)
Questão 1
Incorreto
Atingiu 0,00 de 1,00
O elemento "label” em formulários deve ser utilizado com a seguinte
finalidade:
 
a. Melhorar a organização visual do formulário.
b. Agrupar campos de formulário. 
c. "Ligar” de forma programática o campo de entrada de dados ao
respectivo controle (informação em texto).
d. Permitir que não sejam iniciadas alterações automáticas quando o
campo de formulário receber o foco.
A resposta é: "Ligar” de forma programática o campo de entrada de dados ao
respectivo controle (informação em texto). 
Quando se faz a ligação dos campos de entrada com seus textos
informativos, permitimos que usuários de leitores de tela possam preencher
adequadamente os campos de um formulário, pois sempre que o usuário
acessa um campo para preenchimento, o leitor de telas lê automaticamente
o "label” associado a ele.
https://mooc.escolavirtual.gov.br/my/
https://mooc.escolavirtual.gov.br/course/view.php?id=5976
https://mooc.escolavirtual.gov.br/course/view.php?id=5976#section-3
https://mooc.escolavirtual.gov.br/mod/quiz/view.php?id=147564
04/01/2021 Exercício Avaliativo Final
https://mooc.escolavirtual.gov.br/mod/quiz/review.php?attempt=8362990 2/13
Questão 2
Incorreto
Atingiu 0,00 de 1,00
Você deseja incluir um formulário em seu site onde o usuário possa fornecer
informações sobre seus conhecimentos de língua inglesa. Você deseja obter
através deste formulário as informações descritas na imagem abaixo,
pensando em garantir a acessibilidade, como seria o código HTML de tal
formulário? 
 
 
a. 
 <form> 
 <p> Proficiência - Língua Inglesa </p> <br /> 
 <p>Nível</p> 
 <input type="radio" name="nivel" value="basico" /> 
 <label>Básico</label><br/> 
 <input type="radio" name="nivel" id="intermed" value="intermediario"/> 
 <label for="intermed">Intermediário</label><br/> 
 <input type="radio" name="nivel" id="advanced" value="avancado"/> 
 <label for="advanced">Avançado</label><br/> 
 <p>Habilidades mais destacadas</p> 
 <input type=checkbox id="escrita"/> 
 <label for="escrita">Escrita</label> <br /> 
 <input type=checkbox id="leitura" /> 
 <label for="leitura">Leitura</label> <br /> 
 <input type=checkbox id="conversa" /> 
 <label for="conversa">Conversação</label> <br /> 
</form> 
b. 
<form> 
 <p> Proficiência - Língua Inglesa </p> 
 <br /> 
 <p>Nível</p> 
04/01/2021 Exercício Avaliativo Final
https://mooc.escolavirtual.gov.br/mod/quiz/review.php?attempt=8362990 3/13
 <input type="radio" name="nivel" value="basico" /> 
 <label>Básico</label><br/> 
 <input type="radio" name="nivel" id="intermed" value="intermediario"/> 
 <label for="intermed">Intermediário</label><br/> 
 <input type="radio" name="nivel" id="advanced" value="avancado"/> 
 <label for="advanced">Avançado</label><br/> 
 <fieldset> 
 <legend>Habilidades mais destacadas</legend> 
 <input type=checkbox id="escrita"/> 
 <label for="escrita">Escrita</label> <br /> 
 <input type=checkbox id="leitura" /> 
 <label for="leitura">Leitura</label> <br /> 
 <input type=checkbox id="conversa" /> 
 <label for="conversa">Conversação</label> <br /> 
 </fieldset> 
</fieldset> 
</form>
c. 
<form> 
 <fieldset> 
 <legend>Proficiência - Língua Inglesa</legend> 
 <fieldset> 
 <legend>Nível</legend> 
 <input type="radio" name="nivel"id="basic" value="basico" /> 
 <label for="basic">Básico</label><br/> 
 <input type="radio" name="nivel" id="intermed" value="intermediario"/> 
 <label for="intermed">Intermediário</label><br/> 
 <input type="radio" name="nivel" id="advanced" value="avancado"/> 
 <label for="advanced">Avançado</label><br/> 
 </fieldset> 
 <fieldset> 
 <legend>Habilidades mais destacadas</legend> 
 <input type=checkbox id="escrita"/> 
 <label for="escrita">Escrita</label> <br /> 
 <input type=checkbox id="leitura" /> 
 <label for="leitura">Leitura</label> <br /> 
 <input type=checkbox id="conversa" /> 
 <label for="conversa">Conversação</label> <br /> 
 </fieldset> 
 </fieldset> 
</form>
d. 
<form> 
 <fieldset> 
 <legend>Proficiência - Língua Inglesa</legend> 
 <fieldset> 
 <legend>Nível</legend> 
 <input type="radio" name="nivel" value="basico" /> 
 <label>Básico</label><br/> 
 <input type="radio" name="nivel" id="intermed" value="intermediario"/> 
04/01/2021 Exercício Avaliativo Final
https://mooc.escolavirtual.gov.br/mod/quiz/review.php?attempt=8362990 4/13
 <label for="intermed">Intermediário</label><br/> 
 <input type="radio" name="nivel" id="advanced" value="avancado"/> 
 <label for="advanced">Avançado</label><br/> 
 </fieldset> 
 <fieldset> 
 <legend>Habilidades mais destacadas</legend> 
 <input type=checkbox /> Escrita 
 <br /> 
 <input type=checkbox/> Leitura 
 <br /> 
 <input type=checkbox /> Conversação 
 <br /> 
 </fieldset> 
 </fieldset> 
</form> 
A resposta é:
<form> 
 <fieldset> 
 <legend>Proficiência - Língua Inglesa</legend> 
 <fieldset> 
 <legend>Nível</legend> 
 <input type="radio" name="nivel"id="basic" value="basico" /> 
 <label for="basic">Básico</label><br/> 
 <input type="radio" name="nivel" id="intermed" value="intermediario"/> 
 <label for="intermed">Intermediário</label><br/> 
 <input type="radio" name="nivel" id="advanced" value="avancado"/> 
 <label for="advanced">Avançado</label><br/> 
 </fieldset> 
 <fieldset> 
 <legend>Habilidades mais destacadas</legend> 
 <input type=checkbox id="escrita"/> 
 <label for="escrita">Escrita</label> <br /> 
 <input type=checkbox id="leitura" /> 
 <label for="leitura">Leitura</label> <br /> 
 <input type=checkbox id="conversa" /> 
 <label for="conversa">Conversação</label> <br /> 
 </fieldset> 
 </fieldset> 
</form>  
Quando seguimos todas as recomendações de marcações de formulários
HTML estamos ajudando a diminuir a quantidade de preenchimentos
incorretos e facilitando a vida de nossos usuários. Por isso o uso dos
elementos <fieldset> e <legend> para agrupar itens semelhantes, além do
uso dos atributos "id” e "for” para ligar os campos de entrada <inputs> com
seus descritores <label> é tão importante para acessibilidade digital. 
04/01/2021 Exercício Avaliativo Final
https://mooc.escolavirtual.gov.br/mod/quiz/review.php?attempt=8362990 5/13
Questão 3
Correto
Atingiu 1,00 de 1,00
Selecione Verdadeiro ou Falso para as afirmações a seguir.
O mapa do site deve estar presente em todo e
qualquer site, independente do tamanho e
complexidade do mesmo. 
A opção de alto contraste, presente na barra de
acessibilidade, deve garantir uma combinação de
cores que apresente um contraste otimizado de, no
mínimo, 7:1. 
O CAPTCHA, de qualquer tipo, poderá ser utilizado
sempre que o desenvolver desejar, já que ele não
representa problema para acessibilidade. 
As tabelas deverão ser utilizadas apenas para dados
tabulares e não parafins de organização e
posicionamento dos elementos na página. 
O CAPTCHA, de qualquer tipo, poderá ser utilizado sempre que o desenvolver
desejar, já que ele não representa problema para acessibilidade - Falso 
O CAPTCHA deve ser evitado o máximo possível pois trata-se de uma das
maiores barreiras de acessibilidade para um usuário de leitores de tela. De
nada adianta ter todo o cuidado em aplicar às recomendações de codificação
de formulários e exigir do usuário a resolução de um CAPTCHA, pois um
usuário com deficiência visual ficará feliz em entender o formulário e
preenchê-lo, mas na hora de submeter às informações ficará frustrado, pois
verá que todo o seu trabalho foi em vão, pois não conseguirá completar a
tarefa de maneira autônoma.  Por isso devem-se buscar alternativas como a
confirmação por e-mail, sms, ligação para um número do usuário para
informar um código de segurança, etc.
As tabelas deverão ser utilizadas apenas para dados tabulares e não para fins
de organização e posicionamento dos elementos na página - Verdadeiro
Tabelas devem ser utilizadas de maneira semântica, logo, apenas para
apresentar dados tabulares. Para posicionamento e organização dos
elementos de uma página deve se utilizar a linguagem de estilos, as folhas
CSS. 
O mapa do site deve estar presente em todo e qualquer site, independente
do tamanho e complexidade do mesmo - Falso
O Mapa do sítio é uma maneira de facilitar o entendimento da estrutura do
site, logo, disponibilizá-lo é facilitar a vida do usuário, mesmo em sites mais
simples. 
A opção de alto contraste, presente na barra de acessibilidade, deve garantir
uma combinação de cores que apresente um contraste otimizado de, no
mínimo, 7:1 - Verdadeiro
O contraste mínimo da opção de alto contraste da barra de acessibilidade do
eMAG é 7:1 e é igual à recomendação de contraste AAA do WCAG 2.0. 
Falso
Verdadeiro
Falso
Verdadeiro
04/01/2021 Exercício Avaliativo Final
https://mooc.escolavirtual.gov.br/mod/quiz/review.php?attempt=8362990 6/13
04/01/2021 Exercício Avaliativo Final
https://mooc.escolavirtual.gov.br/mod/quiz/review.php?attempt=8362990 7/13
Questão 4
Incorreto
Atingiu 0,00 de 1,00
Como você forneceria uma alternativa textual para a imagem a seguir?
 
a. alt="organograma da empresa".
b. alt="organograma da empresa contendo: diretor presidente, diretor
administrativo, diretor industrial, diretor de vendas, coordenadores e
vendedores internos e externos". 
c. alt="organograma da empresa"e link logo após a imagem para a
descrição do organograma, que remeteria a outra página contendo o
organograma em texto na forma de lista hierárquica.
d. Não utilizaria esta imagem, pois não podemos torná-la acessível.
A resposta é: alt="organograma da empresa"e link logo após a imagem para
a descrição do organograma, que remeteria a outra página contendo o
organograma em texto na forma de lista hierárquica.
A descrição deve passar a informação que a imagem representa na página.
No caso do organograma, a página deveria descrever algo como:
"A empresa está estruturada da seguinte maneira, o Diretor Geral tem três
diretores subordinados, são eles o Diretor Administrativo e o Diretor
Industrial, os quais possuem Coordenadores como subordinados, e o Diretor
de Vendas, que possui Vendedores internos e externos como subordinados.”
Ou então, ter o organograma na forma de lista hierárquica gerada através do
html:
<ul>
    <li>Diretor Presidente
        <ul>
            <li>Diretor Administrativo
                <ul>
04/01/2021 Exercício Avaliativo Final
https://mooc.escolavirtual.gov.br/mod/quiz/review.php?attempt=8362990 8/13
                    <li>Coordenadores</li>
                </ul>
            </li>
            <li>Diretor Industrial
                <ul>
                    <li>Coordenadores</li>
                </ul>
            </li>
            <li>Diretor de Vendas
                <ul>
                    <li>Vendedores externos e internos</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
Questão 5
Incorreto
Atingiu 0,00 de 1,00
Para melhorar a acessibilidade de seu site, você inseriu links indicadores de
início e fim de conteúdo e de menu. Você deseja que esses links estejam
ocultos na página, mas sejam acessados pelos leitores de tela. Esse efeito
pode ser conseguido através das folhas de estilo, utilizando-se qual dos
mecanismos a seguir?
 
a. visibility:hidden;
b. position: absolute; left: -999em;
c. display:none;
d. qualquer um dos mecanismos anteriores. 
A resposta é: position: absolute; left: -999em; 
Se utilizarmos os elementos "display:none;” ou "visibiity:hidden;” ocultaremos
as informações de todos os usuários, inclusive os que utilizem leitores de
telas.
04/01/2021 Exercício Avaliativo Final
https://mooc.escolavirtual.gov.br/mod/quiz/review.php?attempt=8362990 9/13
Questão 6
Correto
Atingiu 1,00 de 1,00
Na página do sítio abaixo, como você distribuiria os níveis de título h1, h2 e
h3, de modo a tornar o conteúdo mais acessível? 
 
a. <h1>Menu</h1>; <h2> Pessoa com deficiência</h2>; <h3>Pauta
Inclusiva</h3>
b. <h1>Secretaria de Direitos Humanos</h1>; <h2> Pessoa com
deficiência</h2>; <h3>Pauta Inclusiva</h3>
c. <h1>Secretaria de Direitos Humanos</h1>; <h2> Pessoa com
deficiência</h2>; <h3>Programas</h3> 
d. <h1>Secretaria de Direitos Humanos</h1>; <h2>Menu</h2>;
<h3>Programas</h3>
A resposta é: <h1>Secretaria de Direitos Humanos</h1>; <h2>
Pessoa com deficiência</h2>; <h3>Programas</h3>
Os marcadores de cabeçalhos devem ser utilizados para marcar o conteúdo
de forma que seja possível entender a correlação entre as áreas e conteúdos
da página. Sendo assim, a opção que melhor descreve a hierarquia das
informações da página em questão é a letra "C”, pois ela permite que
04/01/2021 Exercício Avaliativo Final
https://mooc.escolavirtual.gov.br/mod/quiz/review.php?attempt=8362990 10/13
entendamos que estamos no sítio da Secretaria de Direitos Humanos (h1), na
página Pessoa com deficiência (h2), onde temos Programas(h3). Os itens
Pauta Inclusiva e Hanseníase seriam (h4) que estariam subordinados ao (h3). 
Questão 7
Correto
Atingiu 1,00 de 1,00
O eMAG 3.0 (Modelo de Acessibilidade em Governo Eletrônico) é o
documento que apresenta recomendações a serem consideradas para que o
processo de acessibilidade em sítios e portais do governo brasileiro seja
conduzido de forma padronizada e de fácil implementação. Sendo assim, as
recomendações estão organizadas em seis seções, sendo elas,
respectivamente:
 
a. Marcação, Comportamento, Conteúdo, Apresentação/Design,
Multimídia e Formulários. 
b. Código, Comportamento, Conteúdo, Apresentação Visual, Mídias e
Formulários.
c. Conteúdo, Programação, Marcação, Apresentação Visual, Multimídia
e Formulários.
d. Formulários, Multimídia, Apresentação/Design, Informação,
Comportamento e Marcação.
A resposta é: Marcação, Comportamento, Conteúdo, Apresentação/Design,
Multimídia e Formulários.
As recomendações nacionais de acessibilidade do eMAG estão de acordo
com as diretrizes internacionais do WCAG 2.0. A estruturação do eMAG em
seções serve para facilitar a implementação dos requisitos de acessibilidade,
pois permite a consulta direta a fases específicas da criação de uma página
web.
As recomendações de acessibilidade do eMAG podem ser consultadas no
endereço: http://emag.governoeletronico.gov.br/
http://emag.governoeletronico.gov.br/
04/01/2021 Exercício Avaliativo Final
https://mooc.escolavirtual.gov.br/mod/quiz/review.php?attempt=8362990 11/13
Questão 8
Incorreto
Atingiu 0,00 de 1,00
Você precisa fornecer alternativa em texto para os botões de imagem de
formulários. Qual das opções a seguir seria a mais indicada, pensando-se em
garantir a acessibilidade.
 
a. <input type="image" name="enviar" src="enviar.jpg" alt="Enviar">
b. <input type='reset' name='limpar' class='btlimpar'/>
c. <input type='image' name='enviar' src='enviar.jpg'/ title='Enviar'>
d. <a href="#" onclick="enviarformulario();"><img
src=”...\images\btenviar.jpg” alt=”Enviar”></a>
Sua resposta está incorreta.
Conforme recomendação 6.1 do eMAG - Fornecer alternativa em texto para
os botões de imagem de formulários. Ao serem utilizados botões do tipo
imagem (input type=”image”), que servem para o mesmo propósito do botão
do tipo submit, deve ser fornecida uma descrição textual para o botão
através do atributo alt.
A alternativa B não é um botão de imagem. Nesse caso, para que o botão
seja acessível, ele deve possuir um value descritivo, e nessa alternativa não
temos o atributo value descritivo.
A alternativa C é um botão de imagem mas fornece o atributo title, que nem
sempre é lido pelos leitores de tela, e que não fornece o atributo alt que é
obrigatório; 
A alternativa D foi utilizado um link com imagem e não um botão de imagem,
conforme pedido na questão. 
04/01/2021 Exercício Avaliativo Final
https://mooc.escolavirtual.gov.br/mod/quiz/review.php?attempt=8362990 12/13
Questão 9
Incorreto
Atingiu 0,00 de 1,00
Qual das opções abaixo apresenta uma prática recomendada pelo eMAG:
 
a. Redirecionamento automático de páginas. 
b. Página com atualização automática.
c. Alternativa para modificar limite de tempo.
d. Situações com intermitência de tela.
Sua resposta está incorreta.
Conforme recomendação 2.5 do eMAG - Fornecer alternativa para modificar
limite de tempo. Uma página onde há limite de tempo para realizar uma
tarefa deve haver a opção de desligar, ajustar ou prolongar esse limite. As
demais opções são recomendações de não utilização de tais práticas por
serem prejudiciais a acessibilidade:  
Recomendação 2.3 - Não criar páginas com atualização automática
periódica: A atualização automática periódica - muito utilizada por canais de
notícias. O problema dessa atualização é que ela tira do usuário sua
autonomia em relação à escolha e podem confundir e desorientar os
usuários, especialmente usuários que utilizam leitores de tela. 
Recomendação 2.4 - Não utilizar redirecionamento automático de páginas:
Não devem ser utilizadas marcações para redirecionar a uma nova página, ao
invés disso, deve-se configurar o servidor para que o redirecionamento seja
transparente para o usuário 
Recomendação 2.6 - Não incluir situações com intermitência de tel. Não
devem ser utilizados efeitos visuais piscantes, intermitentes ou cintilantes.
Em pessoas com epilepsia fotosensitiva, o cintilar ou piscar pode
desencadear um ataque epilético. 
04/01/2021 Exercício Avaliativo Final
https://mooc.escolavirtual.gov.br/mod/quiz/review.php?attempt=8362990 13/13
Questão 10
Incorreto
Atingiu 0,00 de 1,00
Você precisa abrir uma nova instância no navegador. Qual das opções a
seguir seria a mais indicada pensando-se em garantir a acessibilidade:
 
a. <a href="governoeletronico.html" target="_blank"> Governo
Eletrônico (abre nova janela)</a>
b. <a href="" onClick="javascript:window.open
('governoeletronico.html') ; return false">Governo Eletrônico</a>
c. <a href="governoeletronico.html" target="_self"> Governo Eletrônico
(abre nova janela)</a> 
d. <a href="http://governoeletronico.gov.br" target="_blank">Governo
Eletrônico</a>
Sua resposta está incorreta.
A questão está afirmando que você precisa abrir uma nova instância no
navegador e  garantir a acessibilidade nesse caso, conforme Recomendação
1.9 eMAG. Quando for realmente necessária a abertura de um link em nova
janela, é recomendado que tal ação seja informada ao usuário no próprio
texto do link. Isso permite ao usuário decidir se quer ou não sair da janela ou
aba em que se encontra e, caso decida acessar o link, ele saberá que se trata
de uma nova aba ou janela. 
A alternativa 'A' traz o atributo target='_blank' e o texto no link (abre nova
janela) 
As alternativas 'B' e 'D' não trazem o texto no link (abre nova janela) 
E a alternativa 'C' apesar de trazer o texto no link (abre nova janela), o
atributo target='_self', não abre uma nova janela, e como está descrito no
conteúdo do link, essa ação pode confundir usuários de leitores de tela.