Nesta página sobre os Recursos de acessibilidade dos guias do Anthology Adopt, saiba mais sobre como seus guias podem alcançar todos os usuários.
Descrição Geral
Essas sugestões são recomendações de acessibilidade da Pendo com base no conjunto atual de recursos. Este documento não tem a intenção de demonstrar ou indicar conformidade com as diretrizes de acessibilidade WCAG 2.1 AA ou outros padrões semelhantes. Os recursos de acessibilidade do guia da Pendo foram desenvolvidos para permitir que você crie guias acessíveis, mas a Pendo não garante que o conteúdo atenderá a algum padrão de acessibilidade.
A acessibilidade do conteúdo da web garante um acesso equitativo à internet. Os guias da Pendo apresentam informações e mensagens importantes sobre seu aplicativo para os usuários. Os recursos de acessibilidade do guia ajudam todos os usuários a encontrar e interagir com seus guias da Pendo.
Todos os guias aplicam alguns recursos de acessibilidade automaticamente, como os atributos de foco e de entrada para emblemas e a navegação pelo teclado. Outros recursos exigem a configuração de ativação durante a criação do guia. Recursos como Foco automático, Rótulos ARIA, Texto alternativo, Título e Funções ARIA podem ser configurados no Visual Design Studio durante a criação de um guia. Alguns requisitos nas diretrizes de acessibilidade, como contraste de cor, legendas para vídeo ou áudio incorporado e tamanho do elemento clicável, precisam ser implementados pelo designer do guia.
Recomendações
Ativação do guia
- Guias ativados por emblemas são mais acessíveis. Esses guias são mais acessíveis do que guias automáticos ou de elemento de destino, pois dão ao usuário a opção de acioná-los.
- Sempre defina a posição do emblema como "alinhado à direita" ou "alinhado à esquerda". Isso limita o número de locais em que você pode inserir o emblema na interface do usuário, mas garante que ele possa ser acessado em uma ordem lógica com a navegação pelo teclado.
Criação do guia
- Adicione um texto alternativo descritivo ou rótulos ARIA sempre que possível. Essas informações são lidas por tecnologias assistivas e oferecem um contexto necessário para os usuários.
- As funções ARIA Dialog, Banner e Complementary são as mais comuns e úteis para os guias do Anthology Adopt.
- O foco automático deve sempre ser selecionado para a melhor experiência do guia.
- Confirme se a relação de contraste de cor dos elementos do guia atende ao padrão WCAG AA no tema do guia.
- Ajuste os tamanhos do emblema para 24 pixels, requisito do padrão WCAG 2.2 AA para o tamanho mínimo de destino.
Configurar acessibilidade do guia
Configure os recursos de acessibilidade nas configurações de contêineres e building blocks de um guia no Visual Design Studio. Se um elemento tiver configurações de acessibilidade disponíveis, elas estarão localizadas na guia Acessibilidade do modal Editar.
O Verificador de contraste de cor está disponível ao criar ou editar um tema em Configurações do tema no Visual Design Studio.
Atributos configuráveis
Veja a seguir atributos que você pode editar nas configurações de contêineres e building blocks para tornar seus guias mais acessíveis. Cada atributo listado inclui o local em que ele pode ser editado.
- Contraste de cor. Cor de fundo e da fonte dos elementos que contêm texto.
- Texto alternativo da imagem. Building block da imagem.
- Rótulo aria. Contêiner, botão fechar, botão, emblema, building block de texto.
- Modal aria. Contêiner quando a tela de fundo está ativada.
- Função. Contêiner para cada etapa do guia.
- Título. Building block de vídeo
- Foco automático nesta etapa. Contêiner para cada etapa do guia.
Atributos não configuráveis (aplicados automaticamente)
- h2, h3, p (cabeçalhos semânticos). Os blocos de texto de título, subtítulo e parágrafo são atribuídos automaticamente ao elemento apropriado de cabeçalho ou parágrafo.
- aria-labeledby. Cria uma relação entre dois elementos, usado por enquetes de texto aberto, sim/não, múltipla escolha, escala de números e NPS.
- aria-describedby. Cria um relacionamento entre dois elementos, usado por enquetes em escala numérica e pesquisas NPS para conectar o primeiro e o último número da escala com as descrições de texto.
- aria-expanded. Aplicado automaticamente aos emblemas de guias e do centro de recursos.
- role - role="group". Aplicado automaticamente aos botões Sim/Não e aos botões de seleção de múltipla escolha nos building blocks de enquetes.
Acesso às configurações do tema
1. Selecione Guias no painel lateral e, em seguida, Gerenciar tema.
2. Nas áreas Tipografia ou Botão, selecione o ícone de lápis para editar.
3. O Verificador de contraste de cor será exibido quando você estiver editando. A ferramenta verifica se as opções de cores aplicadas aos seus guias estão em conformidade com os requisitos de relação de contraste das normas WCAG AA 4.5:1 ou WCAG AAA 7:1. O verificador é atualizado em tempo real conforme você altera as cores de fundo e das fontes. Se o requisito de relação de contraste não for atendido, as tags de WCAG serão sinalizadas em vermelho. Se o requisito for atendido, as tags de WCAG ficarão verdes.
Editar configurações de acessibilidade do contêiner
Selecione a borda de uma etapa individual dentro de um guia para abrir as Configurações do contêiner no Visual Design Studio.
Cada etapa do guia tem configurações exclusivas para controlar sua aparência e seu comportamento. Se você estiver criando guias acessíveis com várias etapas, a guia Acessibilidade precisará ser configurada para cada etapa.
Configurações de acessibilidade do contêiner
- Rótulo ARIA – Nome acessível. Defina o rótulo ARIA para todo o contêiner do guia.
- Função. Selecione a função ARIA em um menu suspenso de funções disponíveis (sem função, artigo, banner, complementar, informações sobre o conteúdo, caixa de diálogo, formulário, principal, navegação, apresentação e região).
- Foco automático nesta etapa. Captura o foco da tecnologia assistiva no guia.
- Rótulo ARIA – Botão Fechar. Defina os rótulos ARIA para o botão fechar padrão, que também podem ser alternados nas configurações do contêiner.
Editar configurações de texto ou botão
No Visual Design Studio, selecione o botão de adição do elemento que deseja editar. Isso abrirá o painel de configurações dos Building Blocks.
O rótulo ARIA pode ser configurado em building blocks de Texto e Botão.
HTML semântico para building blocks de texto
Os building blocks de texto atribuem automaticamente cabeçalhos semânticos no HTML de acordo com o estilo do tema selecionado nas configurações do building block de texto.
- O título é um elemento h2
- O subtítulo é um elemento h3
- O parágrafo é um elemento p
- A opção Personalizado mantém o cabeçalho semântico do estilo atribuído por último (por exemplo, um bloco de texto com o estilo do parágrafo alterado para o estilo personalizado manterá um elemento p)
Editar configurações de imagem
Selecione o building block da imagem para abrir suas configurações. O texto alternativo da imagem pode ser configurado para building blocks de imagem. O texto alternativo é o método preferencial para a adição de texto acessível às imagens. Os rótulos ARIA geralmente não são usados com imagens.
Editar configurações de vídeo
Selecione o building block de vídeo para abrir suas configurações. O título pode ser configurado para building blocks de vídeo. O título é o método preferencial para a adição de texto acessível aos vídeos.
Editar configurações de enquetes
Os diversos building blocks de enquete têm uma combinação de parâmetros configuráveis e não configuráveis para torná-los acessíveis.
Selecione os campos de resposta para abrir as configurações da enquete. Os elementos de texto e botão da enquete têm campos de rótulos ARIA.
As funções ARIA-describedbyARIA-labelledby e group são aplicadas automaticamente para conectar as respostas das enquetes com seu respectivo texto de pergunta.
Editar tamanho do emblema
Um emblema é uma das maneiras pelas quais os usuários podem ativar um guia do Adopt dentro do aplicativo Blackboard. O tamanho padrão dos emblemas do Anthology Adopt é 14 pixels. O requisito das diretrizes WCAG 2.2 AA para o tamanho mínimo de destino é de 24 pixels.
Para alterar o tamanho do emblema, selecione Ativação para abrir as Configurações de ativação. Em Emblemas, selecione Editar configurações.
Na guia Estilo, no campo Tamanho, você pode ajustar o tamanho do emblema em pixels dentro de um intervalo de 8 px a 300 px. Quando você altera o número no campo, o tamanho do emblema muda em tempo real.
Dimensionamento de imagens
As diretrizes WCAG expressam que o conteúdo deve ser "apresentado sem perda de informações ou funcionalidades e sem a necessidade de rolagem em duas dimensões". Para atender a esse requisito, os contêineres do guia dimensionam os building blocks de imagem automaticamente. Se um usuário aumentar o zoom em um guia, a imagem será dimensionada automaticamente, seguindo a proporção da largura do contêiner. A imagem não será cortada, nem terá barras de rolagem horizontais adicionadas.
Prática recomendada para imagens em largura total
Os contêineres de guias da Pendo ocupam 40 pixels ao redor da borda externa, por padrão, para espaçar o conteúdo do guia e facilitar o desenvolvimento. Imagens com preenchimento definido como 100% ficam dentro do padrão de preenchimento de 40 pixels. As margens negativas podem ser usadas para espalhar a imagem para a largura total do contêiner. O dimensionamento ajusta a imagem automaticamente para corresponder à largura do contêiner se o usuário aumentar ou diminuir o zoom.
Configurações de margem em largura total
Todos os valores são números negativos
- Margem esquerda -40 px
- Margem direita -40 px
- Se você alterar as configurações de preenchimento de contêineres do guia, ajuste sua margem negativa aos valores de preenchimento do contêiner
Se estiver usando medidas personalizadas de preenchimento e margens para ajustar os building blocks de imagens de maneira criativa em posições que não são suportadas pelo posicionamento original dos building blocks, o dimensionamento das imagens poderá distorcer a apresentação e o posicionamento dessas imagens. Verifique seus guias em diferentes níveis de zoom para conferir se suas configurações personalizadas interferem no dimensionamento automático das imagens.
Foco
Os estados de foco ajudam os usuários a utilizar aplicativos sem a necessidade de um mouse ou touchpad. Um estado de foco pode aparecer como um anel ao redor de um elemento, dependendo do estilo de CSS. As versões 83 e posteriores do Chrome permitem que você estilize os elementos de foco em seu aplicativo. Você verá que os navegadores adicionam um estado de foco, como um contorno ao redor do elemento, ao clicar nesses elementos ou pressionar a tecla Tab em uma página.
Tag HTML - Entrada
Os emblemas usam a tag input no HTML. Eles provavelmente herdarão as propriedades atribuídas a input em seu estilo de CSS. Antes de adicionar recursos de acessibilidade, os emblemas usavam a tag img. Veja um exemplo de emblema do centro de recursos inspecionado com as ferramentas para desenvolvedores do navegador Chrome:
<input type=”image” id=”pendo-image-badge-ID" src=”image-URL” data-_pendo-image-1 class=“_pendo-image _pendo-badge-image _pendo-resource-center-badge-image" style=“display: block; height: 56px; width: auto; box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 0px; float: none; vertical-align: baseline;”>
Foco automático
A opção Foco automático nesta etapa captura o foco da tecnologia assistiva na etapa do guia até ser descartada. Essa definição está configurada em Configurações do contêiner para cada etapa do guia.
Rótulo ARIA, texto alternativo e título
Rótulos ARIA, Texto alternativo e Título são usados para identificar elementos que não são descritos na interface de usuário de maneira acessível. As ferramentas de acessibilidade usam essas propriedades de diferentes formas. Por exemplo, um leitor de tela pode ler o rótulo ARIA em voz alta para o usuário. Os rótulos ARIA referem-se a building blocks de texto e botões, o texto alternativo é aplicado a building blocks de imagens, enquanto o título é usado para building blocks de vídeo. Veja como seria um rótulo ARIA inspecionado com as ferramentas para desenvolvedores do navegador Chrome:
<div id=“pendo-guide-container" data-editing-id=“f3db5a53-a87a-49b3-949f-e14f9e0eaf" class=“class=“_pendo-guide-container-styles" aria-model=“false” aria-label=“New user walkthrough” role=“dialog” style=“border: 1px solid rgb(187, 187, 187); background-color: rgb(255, 255, 255); border-radius: 0px; box-shadow: rgb(136, 136, 136) 0px 0px 20px 0px; display: block; position: relative; float: none; vertical-align: baseline; padding: 40px;”>...</div>
Rótulos ARIA, texto alternativo e título são adicionados em cada building block.
Para mais informações, consulte as definições do W3C para rótulos ARIA e Texto alternativo para imagens.
Navegação pelo teclado
Alguns usuários podem não conseguir usar o cursor ou a tela sensível ao toque para interagir com a página. A navegação pelo teclado é uma contribuição importante para a acessibilidade do conteúdo. Os usuários podem navegar pelo conteúdo do guia usando o teclado.
- Tecle Esc para ignorar o guia ativo
- Tecle Tab para avançar entre os elementos em uma etapa do guia
Guia para a função ARIA
As funções ARIA são usadas para identificar elementos para tecnologias assistivas, a fim de fornecer a ajuda adequada ao usuário. As funções são definidas no Modelo de funções ARIA e têm finalidades específicas. Por exemplo, existem diferentes funções para widgets que identificam elementos interativos e documentam a estrutura que organiza o conteúdo na página, que normalmente não são interativos.
A função é definida para cada etapa do guia.
<div id=“pendo-guide-container" data-editing-id=“f3db5a53-a87a-49b3-949f-e14f9e0eaf" class=“class=“_pendo-guide-container-styles" aria-model=“false” aria-label=“New user walkthrough” role=“dialog” style=“border: 1px solid rgb(187, 187, 187); background-color: rgb(255, 255, 255); border-radius: 0px; box-shadow: rgb(136, 136, 136) 0px 0px 20px 0px; display: block; position: relative; float: none; vertical-align: baseline; padding: 40px;”>...</div>
Funções Disponíveis
- Nenhuma função
- Artigo
- Banner
- Complementar
- Informações sobre o conteúdo
- Caixa de diálogo
- Formulário
- Principal
- Navegação
- Apresentação
- Região
O W3C recomenda que as funções não sejam alteradas pelo comportamento do usuário ou ao longo do tempo após o conteúdo ter sido publicado para os usuários. Plataformas e dispositivos assistivos geralmente não têm APIs que possibilitam uma atualização progressiva das funções. Em geral, a primeira função vista pela tecnologia assistiva é armazenada em cache e não será atualizada. Caso precise alterar a função ARIA de um guia publicado, faça uma cópia do guia, altere a função, publique o guia atualizado e desative a versão anterior. A cópia do guia gera novos códigos e o novo conteúdo será armazenado em cache por dispositivos assistivos.
