Recursos de acessibilidade nos guias do Anthology Adopt
Nessa página sobre recursos de acessibilidade nos guias do Anthology Adopt, saiba mais sobre como os guias podem atender a todos os usuários.
Visão geral
Importante
Essas sugestões são recomendações de acessibilidade da Pendo, com base no conjunto atual de recursos. Este documento não tem o intuito de demonstrar ou indicar conformidade às diretrizes de acessibilidade WCAG 2.1 AA ou a outros padrões semelhantes. Os recursos de acessibilidade do guia Pendo foram desenvolvidos para permitir que você crie guias acessíveis, mas a Pendo não garante que o conteúdo atenderá a qualquer padrão de acessibilidade.
A acessibilidade do conteúdo da web assegura o acesso equitativo à internet. Os guias da Pendo apresentam informações e mensagens importantes sobre o aplicativo para os usuários. Os recursos de acessibilidade do guia ajudam todos os usuários a localizar 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 integrado e tamanho do elemento clicável, deverão ser implementados pelo desenvolvedor do guia.
Recomendações
Ativação do guia
Os 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.
Você deve sempre definir a posição do emblema como "direita integrada" ou "esquerda integrada". Essa definição limita os locais em que você pode colocar o emblema em sua interface do usuário, mas assegura que o emblema possa ser disposto em uma ordem lógica com a navegação utilizando o 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.
A caixa de diálogo, o banner e os itens complementares das Funções ARIA são os itens mais comuns e úteis para os guias do Anthology Adopt.
O foco automático deve sempre ser selecionado para uma melhor experiência com os guias.
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.
Configuração da acessibilidade do guia
Configure os recursos de acessibilidade nas configurações de recipientes 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 de Acessibilidade no 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 os atributos que você pode editar nas configurações de recipientes e building blocks para tornar os guias mais acessíveis. Cada atributo relacionado inclui o local em que ele pode ser editado.
Contraste de cores. Cor do plano de fundo e da fonte dos elementos que contêm texto.
alt (texto alternativo da imagem). Building block da imagem.
aria-label. Recipiente, botão Fechar, botão, emblema, building block de texto.
aria-modal. Recipiente quando o pano de fundo está habilitado.
função. Recipiente para cada etapa do guia.
título. Building block de vídeo
Foco automático nesta etapa. Recipiente 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 de cabeçalho ou parágrafo apropriado.
aria-labelledby. Cria uma relação entre dois elementos, usados por texto aberto, sim/não, múltipla escolha, escala numérica e pesquisas NPS.
aria-describedby. Cria uma relação entre dois elementos, usados por pesquisas de escala numérica e pesquisas NPS para associar o primeiro e o último número da escala com as descrições de texto.
aria-expanded. Aplicado automaticamente aos emblemas dos guias e do centro de recursos.
função - função = "grupo". Aplicado automaticamente a botões Sim/Não e botões de opção de múltipla escolha nos building blocks de enquetes.
Acesso às configurações do tema
1. Clique em Guias no painel lateral e, em seguida, em Gerenciar tema.
2. Nas áreas Tipografia ou Botão, clique no ícone do 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 guias estão em conformidade com os requisitos de relação de contraste dos padrões 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 recipiente
Clique na borda de uma etapa individual em um guia para abrir as Configurações do recipiente 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 de Acessibilidade terá de ser configurada para cada etapa.
Rótulo ARIA - Nome acessível. Defina o rótulo ARIA para todo o recipiente de guia.
Função. Clique na função ARIA em um menu suspenso de funções disponíveis (sem função, artigo, banner, complementar, informações do conteúdo, 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 rótulos ARIA para o botão Fechar padrão, que também pode ser alternado nas configurações do recipiente.
Editar configurações de textos ou botões
No Visual Design Studio, clique no botão de adição do elemento que quiser editar. Essa ação abre o painel de configurações de Building Blocks.
O rótulo ARIA pode ser configurado nos building blocks de Textos e Botões.
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
Clique no building block da imagem para abrir as configurações. O texto alternativo da imagem pode ser configurado como building blocks de imagem. O texto alternativo é o método preferencial para a inserção de texto acessível nas imagens. Os rótulos ARIA geralmente não são usados com imagens.
Editar configurações de vídeo
Clique no building block de vídeo para abrir as configurações. O título pode ser configurado para building blocks de vídeo. O título é o método preferencial para a inserção de texto acessível aos vídeos.
Editar configurações de enquetes
Os diversos building blocks de enquete têm uma mesclagem de parâmetros configuráveis e não configuráveis para torná-los acessíveis.
Clique nos campos de resposta para abrir as configurações da enquete. Os elementos de texto e o botão da enquete têm campos de rótulos ARIA.
As funções ARIA-describedbyARIA-labelledby e group se aplicam automaticamente para associar as respostas das enquetes ao respectivo texto da pergunta.
Editar o tamanho do emblema
Um emblema é uma das maneiras de que os usuários dispõem para ativar um guia do Adopt no Meu Blackboard. O tamanho padrão dos emblemas do Anthology Adopt é de 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, clique em Ativação para abrir as Configurações de ativação. Em Emblemas, clique em Editar configurações.
Na guia Estilo, no campo Tamanho, você pode ajustar o tamanho do emblema em pixels em um intervalo de 8 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 determinam 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 recipientes 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 recipiente. A imagem não será cortada, nem terá barras de rolagem horizontais adicionadas.
Prática recomendada para imagens em largura total
Os recipientes 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% se mantêm no padrão de preenchimento de 40 pixels. As margens negativas podem ser usadas para ampliar a imagem até a largura total do recipiente. O dimensionamento ajusta a imagem automaticamente para corresponder à largura do recipiente se o usuário aumentar ou diminuir o zoom.
Todos os valores são negativos
Margem esquerda -40 px
Margem direita -40 px
Se você alterar as configurações de preenchimento de recipientes do guia, ajuste sua margem negativa aos valores de preenchimento do recipiente
Importante
Se estiver utilizando medidas personalizadas de preenchimento e margens para ajustar os building blocks de imagens de maneira criativa em posições que não são compatíveis pelo posicionamento dos building blocks fora da caixa, o dimensionamento das imagens poderá distorcer a apresentação e o posicionamento dessas imagens. Verifique seus guias com diferentes níveis de zoom para conferir se as configurações personalizadas interferem no dimensionamento automático das imagens.
Foco
Os status de foco ajudam os usuários a utilizar aplicativos sem a necessidade de um mouse ou touchpad. Um status de foco pode ser exibido como um aro ao redor de um elemento, conforme o estilo de CSS. As versões 83 e posteriores do Chrome permitem que você estilize os elementos de foco no aplicativo. Você notará que os navegadores adicionam um status 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 todas as propriedades atribuídas a input em seu estilo 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 recipiente 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 se aplica 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.
Guia para a função ARIA
As funções ARIA são usadas para identificar elementos de tecnologias assistivas, para prestar 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 depois que o conteúdo for publicado para os usuários. Plataformas e dispositivos assistivos geralmente não têm APIs que permitam a atualização progressiva das funções. Em geral, a primeira função vista pela tecnologia assistiva é armazenada em cache e não será atualizada. Se precisar 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 desabilite 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.
Limitações dos recursos de acessibilidade
Os botões com ações de link de URL não notificam o usuário de que se trata de um link, mas um rótulo ARIA pode ser usado para inserir texto descritivo.