50

4. Apresentação e Interação

Este capítulo aborda a importância da interação e navegação em livros digitais, com foco na criação de uma experiência acessível e fluida para todos os usuários. Neste, explora-se como os livros digitais devem ser projetados para garantir a responsividade, e detalha como os elementos interativos devem ser acessíveis e funcionais. Também são discutidos aspectos cruciais relacionados à links internos, como sua descrição adequada e o funcionamento correto para garantir uma navegação intuitiva e sem obstáculos.

4.1 Responsividade

Os livros digitais devem ser implementados com layout responsivo, ou seja, precisam ser desenvolvidos de forma a se adaptarem e proporcionarem uma boa experiência de leitura em diferentes dispositivos e tamanhos de tela. Para isso, devem ser utilizados:

• Layouts flexíveis para criar estruturas que se ajustam facilmente a diferentes tamanhos de tela. Podem ser utilizados recursos como Flexbox ou CSS Grid para isso.
• Unidades Flexíveis e Proporcionais (em, rem) para dimensionar elementos e fontes, permitindo uma adaptação fluida do layout a diferentes tamanhos de tela.
• Media Queries para ajustar estilos conforme o tamanho da tela.
• Técnicas para tornar imagens responsivas, garantindo uma boa experiência independente do tamanho da tela onde o livro está sendo lido.
• Testes em diferentes dispositivos para garantir que a experiência do usuário seja consistente independente do tamanho do dispositivo, seja um desktop com tela enorme, um notebook ou um smartphone.

4.2 Elementos interativos

Elementos interativos em livros digitais são recursos que permitem ao leitor interagir com o conteúdo do livro, além de apenas lê-lo. Esses elementos podem incluir animações, vídeos, áudios, gráficos, quizzes, jogos e outros tipos de conteúdo que estimulam a participação do leitor. Deve-se fazer a correta rotulagem destes elementos interativos para garantir que os leitores de tela possam fornecer informações relevantes aos usuários e facilite a navegação e a interação.

4.2.1 Elementos de formulário e botões

Primeiramente, deve-se garantir que todos os elementos do formulário e botões estejam adequadamente rotulados.

51

Para o exemplo a seguir, considere a seguinte imagem:

4.2.2 Elementos de formulário devem permitir edições

Todos os elementos de formulário, como inputs, textareas e selects, devem permitir a edição por parte dos usuários, isso é, não deve haver javascript que impeça a edição destes elementos ou então que os mesmos possuam o atributo disabled.

52

4.2.3 Controle por teclado

Todos os elementos interativos em livros digitais, como elementos de formulário, botões, players de áudio ou vídeo e atividades, devem permitir o controle utilizando apenas o teclado. Isso se deve ao fato de que usuários cegos não utilizam mouse, usam apenas o teclado para interagir, controlar e navegar pelo livro.

4.2.4 Versão adaptada de atividades ou exercícios

Todas as atividades ou exercícios em livros digitais devem ser acessíveis. Em casos excepcionais, deve ser fornecida uma versão adaptada e acessível de atividades ou exercícios muito complexos dentro do próprio livro. O acesso a essa versão adaptada deve ser disponibilizado por meio de um link junto à atividade ou exercício original.

Para o exemplo a seguir, considere a seguinte imagem:

53

4.3 Links internos

Os livros digitais interativos devem possuir apenas links internos, que direcionem para conteúdos internos do livro, isso é, não devem haver links que remetam o usuário a conteúdos externos, que necessitem de conexão com a internet, que possam ter o conteúdo indisponível ou até mesmo que o conteúdo tenha sido alterado maliciosamente.

Com a obrigatoriedade de não haver links externos identificou-se a prática de substituir o atributo href da tag “<a>” pelo “data-href” combinados com eventos “onclick”. Essa prática não deve ser realizada pois é identificada pelo leitor de tela como um link sem destino e compromete a compreensão do conteúdo. A prática correta é remover a tag “<a>” tornando o link em apenas texto.

4.3.1 Link interno bem descrito

Os links devem ser facilmente identificáveis pelos leitores de tela. O texto do link deve claramente identificar o destino, facilitando a compreensão e navegação dos leitores de tela.

4.3.2 Link interno remete ao que se propõe

O link interno deve ser preciso, direcionando o usuário diretamente ao conteúdo ou à seção indicada. Certifique-se que o destino do link é o conteúdo correto.

54

4.3.3 Link interno com destino válido

Deve-se garantir que todos os links do livro digital estejam funcionando corretamente, direcionando o usuário a destinos existentes dentro do livro.

4.4 Contrastes

O contraste é a diferença de luminância entre as cores, no caso dos livros digitais isso ocorre entre os elementos textuais e o fundo da página, bem como em elementos de controle, botões, atividades e espaços de resposta. Um contraste inadequado pode interferir na leitura, causando desconforto visual, fadiga ocular e até mesmo dificultando a compreensão do texto, dependendo do tipo de deficiência visual, grau de resíduo visual e até mesmo da iluminação do ambiente onde o livro está sendo lido.

De acordo com as diretrizes de acessibilidade WCAG 2.1 [2], a relação de contraste entre textos e imagens de textos e o plano de fundo deve ser de pelo menos 4.5:1 ou, em casos específicos, de 3:1.

4.4.1 Contraste mínimo em textos

Nos livros digitais, deve-se assegurar uma relação de contraste entre o texto dos elementos textuais e o fundo da página de no mínimo 4.5:1, ou 3:1 para tamanhos de fonte de "18pt" ou "14pt bold".

4.4.2 Contraste para elementos não textuais

Deve-se assegurar uma relação de contraste entre os elementos não textuais e o funda da página de no mínimo 3:1.

4.4.3 Ferramentas de Checagem de Contraste

Recomenda-se o uso de ferramentas de checagem de contraste para verificar se os conteúdos estão em conformidade com os padrões de acessibilidade. Essas ferramentas permitem avaliar a relação de contraste entre cores de primeiro plano (como textos, ícones e botões) e o plano de fundo, orientando os ajustes necessários para garantir a conformidade com os parâmetros de acessibilidade.

55

4.4.3.1 Como utilizar ferramentas de checagem de contraste

As ferramentas de checagem de contraste possibilitam:

• Inserir manualmente os códigos de cor do texto e do fundo para calcular a relação de contraste entre eles;
• Verificar automaticamente a conformidade com os níveis AA ou AAA da WCAG 2.1, considerando o tamanho e o peso tipográfico do texto;
• Simular a percepção de cores por pessoas com diferentes condições visuais, como baixa visão e daltonismo;
• Integrar a checagem ao fluxo de criação e revisão de conteúdos, por meio de plugins de design, extensões de navegador ou validadores automatizados.

Notas complementares:

Há diversas ferramentas online que realizam a verificação de contraste e simulação de condições visuais específicas¹.

Algumas extensões de navegador e validadores automatizados permitem realizar essas análises diretamente em páginas e documentos digitais².

4.5 Paleta de Cores

A escolha de cores é essencial para garantir a acessibilidade, legibilidade e usabilidade de conteúdos digitais. Uma paleta de cores bem planejada não apenas melhora a experiência de leitura, mas também garante que informações sejam compreendidas por pessoas com diferentes condições visuais. Isso inclui atenção a usuários com baixa visão, resíduo visual ou daltonismo. A aplicação de contrastes adequados e o uso consciente de cores são passos fundamentais para promover a inclusão.

4.5.1 Paleta de Cores no Daltonismo

O daltonismo, condição que, de acordo com o Color Blind Awareness Organization ³, afeta a percepção de cores em cerca de 8% dos homens e 0,5% das mulheres, requer atenção especial na escolha de paletas. Para atender a essas particularidades, deve-se aplicar as recomendações abaixo:

56

1. Evite combinações de cores inadequadas, como por exemplo:
   • Vermelho e Verde: Essas cores são difíceis de distinguir para pessoas com protanopia (deficiência no vermelho) ou deuteranopia (deficiência no verde).
   • Azul e Roxo: Para usuários com tritanopia (deficiência no azul), essas cores podem parecer indistinguíveis.
2. Priorize contrastes altamente diferenciáveis, como por exemplo:
   • Combinações de azul e amarelo, que são mais perceptíveis para a maioria das pessoas com daltonismo.
   • Tons claros e escuros da mesma cor para garantir legibilidade (ex.: azul escuro e azul claro, cinza escuro e branco).
3. Valide suas paletas de cores com ferramentas adequadas de checagem para daltonismo e contraste (como por exemplo Adobe Color ⁴).

4.5.1.1. Como utilizar ferramentas de simulação de daltonismo

As ferramentas de simulação de daltonismo possibilitam verificar como pessoas com diferentes tipos de deficiência na percepção de cores visualizam os conteúdos digitais. Esses recursos contribuem para a identificação de combinações cromáticas que podem gerar ambiguidade e comprometimento na comunicação visual. De modo geral, essas ferramentas operam da seguinte forma:

• Aplicam filtros de simulação diretamente sobre imagens, interfaces ou layouts, representando a forma como o conteúdo é percebido por pessoas com condições como protanopia, deuteranopia, tritanopia ou acromatopsia;
• Permitem comparações visuais, apresentando lado a lado a versão original e as simulações, facilitando ajustes nas paletas e no uso das cores;
• Podem ser integradas ao fluxo de design, por meio de extensões, plugins ou funcionalidades em softwares de prototipação e edição visual;
• Auxiliam na validação de acessibilidade cromática, garantindo que a informação não dependa exclusivamente da cor para ser compreendida.

Notas Complementares:

Simuladores online e ferramentas com filtros embutidos são recursos eficazes para apoiar a revisão da acessibilidade de cores⁵.

57

4.5.2 Boas práticas na criação de paletas de cores acessíveis

• Não dependa exclusivamente das cores: Complemente diagramas, gráficos e informações visuais com textos, formas ou padrões que auxiliem na diferenciação.
• Prefira contrastes elevados: Aplique contrastes de pelo menos 4.5:1 entre texto e fundo (contraste nível AA), conforme as diretrizes WCAG 2.1 [2].
• Considere o contexto: A percepção de cores pode variar com a iluminação e os dispositivos utilizados.
• Em livros digitais, evite usar branco 100 % (#FFFFFF) ou preto 100% (#000000), que podem causar desconforto visual em leituras prolongadas, prefira utilizar tonalidades próximas.