WorksheetsO que vamos aprender?
Total questions: 20
Worksheet time: 15mins
Os atributos ARIA são usados para:
Melhorar a estética de uma página web
Aumentar a velocidade de carregamento de uma página web
Melhorar a acessibilidade em páginas web
Adicionar animações a uma página web
Para melhorar a usabilidade de leitores de tela em elementos interativos, quais atributos ARIA podem ser implementados?
aria-label e aria-expanded
aria-hidden e aria-live
aria-checked e aria-pressed
aria-required e aria-invalid
Como manipular atributos ARIA via JavaScript para refletir mudanças dinâmicas na interface do usuário?
Usando a função setAttribute() para alterar os valores ARIA.
Utilizando CSS para modificar diretamente os atributos ARIA.
Através de bibliotecas externas que gerenciam ARIA automaticamente.
Não é possível manipular atributos ARIA com JavaScript.
Os atributos ARIA podem melhorar a acessibilidade de um site ao:
Fornecer informações adicionais para tecnologias assistivas.
Aumentar a velocidade de carregamento do site.
Melhorar o design visual do site.
Reduzir o uso de JavaScript no site.
Para garantir que pessoas que utilizam um leitor de tela saibam a função de um botão de alto-contraste em um site, devemos:
Adicionar uma descrição textual ao botão.
Usar uma cor chamativa para o botão.
Colocar o botão no topo da página.
Fazer o botão piscar constantemente.
Os atributos ARIA no HTML servem para:
melhorar a acessibilidade de aplicações web.
estilizar elementos HTML.
otimizar o SEO de páginas web.
aumentar a velocidade de carregamento de páginas.
Complete a frase: Ao adicionarmos o atributo ______, estamos fazendo com que o leitor de tela ignore o conteúdo de texto do botão e leia a informação que está nesse atributo.
aria-label
alt-text
title
data-ignore
Quais são os valores dos atributos aria-label adicionados no arquivo index.html?
Valor 1
Valor 2
Valor 3
Valor 4
Qual é a função do código HTML apresentado na imagem e por que ele não produz um resultado visível ao ser salvo e aberto no navegador?
O código HTML está correto, mas o navegador não suporta a tag utilizada.
O código HTML está dentro de um comentário, por isso não é exibido.
O código HTML está corrompido e não pode ser interpretado.
O código HTML está correto, mas falta uma referência externa.
Qual atributo é adicionado ao botão do menu para melhorar a acessibilidade?
atributo
class
id
style
Por que o estado inicial do atributo 'aria-expanded' é 'false'?
Complete o código HTML para um botão de acessibilidade:
aria-label="Acessibilidade"
onclick="acessibilidade()"
style="color: blue;"
title="Botão de Acessibilidade"
O que acontece quando clicamos no botão de acessibilidade no código JavaScript fornecido?
O botão ativa o modo de alto contraste.
O botão aumenta o tamanho da fonte.
O botão ativa a leitura de tela.
O botão não faz nada.
Qual é o valor inicial do atributo 'aria-expanded' quando clicamos no botão de acessibilidade?
A função .setAttribute no contexto do código fornecido é usada para:
Adicionar um novo atributo a um elemento HTML.
Remover um atributo existente de um elemento HTML.
Modificar o conteúdo textual de um elemento HTML.
Alterar o estilo CSS de um elemento HTML.
Selecione a opção correta no menu de contexto.
Copiar
Colar
Recortar
Renomear
No HTML, qual é a diferença entre o botão de acessibilidade fechado e o botão de acessibilidade aberto?
O botão fechado tem um ícone de cadeado, enquanto o aberto tem um ícone de chave.
O botão fechado é cinza, enquanto o aberto é azul.
O botão fechado não exibe opções adicionais, enquanto o aberto exibe.
O botão fechado está desativado, enquanto o aberto está ativado.
A importância de ter um menu de acessibilidade em um site é:
Melhorar a estética do site.
Facilitar o acesso para pessoas com deficiência.
Aumentar o tempo de carregamento do site.
Reduzir o número de visitantes.
Quais das seguintes opções podem ser incluídas em um menu de acessibilidade?
Ajuste de contraste
Leitor de tela
Ampliação de texto
Todas as opções acima
Os outros atributos ARIA que você pode encontrar são:
aria-label, aria-hidden, aria-controls
aria-role, aria-state, aria-value
aria-checked, aria-expanded, aria-invalid
aria-required, aria-live, aria-busy
