3. Texto e Conteúdo

A seguir aborda-se diretrizes essenciais para garantir que os livros digitais interativos sejam acessíveis a todos os leitores. O objetivo é garantir que o conteúdo, embora apresentado de forma interativa e dinâmica, mantenha paridade com os livros físicos em termos de informações, e seja acessível em diversos dispositivos e plataformas.

Este capítulo detalha como estruturar o conteúdo para atender às diretrizes de acessibilidade, como garantir a ordem correta de leitura, escolher fontes adequadas, utilizar elementos interativos de maneira inclusiva, e garantir a acessibilidade de recursos como tabelas, glossários, notas de rodapé, imagens, elementos gráficos e simbólicos.

3.1 Paridade de conteúdo

Deve ser mantida a paridade no conteúdo dos livros didáticos, para assegurar que todos tenham acesso às mesmas informações, independente do uso ou não de recursos de tecnologia assistiva. Porém, a forma de disponibilização do conteúdo e informação podem ser diferentes. Um livro interativo digital deve conter no mínimo o mesmo conteúdo, texto e informações que um livro físico, mas pode conter outros conteúdos complementares (vídeos, áudios, imagens, infográficos, atividades, jogos, entre outros), bem como, pode se apresentar de maneira distinta, como por meio do uso de elementos interativos e dinâmicos.

Exemplo 12: Livro de ciências sobre o sistema solar
Exemplo 12:  Livro de ciências sobre o sistema solar
Exemplo 13: Livro de História sobre a Idade Média
Exemplo 13: Livro de História sobre a Idade Média

Exemplo 14: Livro de Matemática sobre Geometria
Exemplo 14: Livro de Matemática sobre Geometria

3.2 Ordem de leitura

A ordem de leitura realizada pelos leitores de tela baseia-se na ordem em que as informações estão dispostas no código fonte, por isso, deve-se garantir que a ordem de leitura estabelecida no código do documento esteja de acordo com a ordem de leitura visual, incluindo a ordem dos elementos focáveis.

Código-fonte
Preview

3.3 Fontes Acessíveis

Sugere-se que sejam escolhidas fontes acessíveis pois o estilo tipográfico desempenha um papel crucial para garantir uma leitura clara e confortável, especialmente para pessoas com dificuldades de leitura, como transtornos específicos de aprendizagem, baixa visão ou deficiências cognitivas. Fontes acessíveis ajudam a reduzir a carga cognitiva e tornam o conteúdo digital mais inclusivo para todas as pessoas.

3.3.1 Critérios para escolha de fontes acessíveis

Para garantir acessibilidade, as fontes devem atender a critérios como:

  • Formas distintas: Letras facilmente diferenciáveis, evitando confusão entre caracteres semelhantes (ex.: "b" e "d", "I" e "l") como ocorre em fontes que imitam a caligrafia manuscrita e principalmente fontes com serifa por serem amplamente usadas no mercado editorial impresso. Para as obras digitais, recomenda-se fontes sem serifa, fontes estas sem linhas ou traços, com um design mais minimalista.
  • Espaçamento adequado: Espaçamento entre letras e palavras que facilite a leitura.
  • Legibilidade em tamanhos variáveis: A fonte deve permanecer legível tanto em tamanhos pequenos, quanto quando ampliada.
  • Compatibilidade multilíngue: Suporte a diferentes idiomas e alfabetos, quando necessário.

3.3.2 Fontes Recomendadas

OpenDyslexic: Projetada especificamente para pessoas com dislexia, com formas que ajudam a evitar confusões visuais. Usada principalmente em textos educacionais, livros digitais e interfaces de leitura. Sua licença é aberta (SIL Open Font License).

Tipografia da fonte OpenDyslexic

Atkinson Hyperlegible: Desenvolvida pelo Braille Institute, essa fonte maximiza a legibilidade com formas distintas. Usada principalmente em textos para pessoas com baixa visão ou dificuldades de leitura. Sua licença é aberta (SIL Open Font License).

Tipografia da fonte Atkinson Hyperlegible

Lexend: Projetada para melhorar a fluidez de leitura com espaçamento ajustado e formas simplificadas. Usada principalmente em aplicativos de leitura e plataformas educacionais. Sua licença é aberta (SIL Open Font License).

Tipografia da fonte Lexend

Noto Sans: Parte do projeto Noto do Google, suporta diversos idiomas e mantém alta legibilidade. Usada principalmente em textos multilíngues e conteúdos educacionais. Sua licença é aberta (SIL Open Font License).

Tipografia da fonte Noto Sans

3.4 Idioma

Para garantir a acessibilidade e a correta interpretação do texto por leitores de tela e outros recursos de tecnologia assistiva, deve-se especificar o idioma principal do conteúdo do livro digital interativo utilizando o atributo lang na tag <html> de todos os arquivos HTML da obra. Além disso, sempre que houver trechos em um idioma diferente do principal, esses devem ser devidamente marcados com o idioma correto através do atributo lang da tag delimitadora do trecho em questão. Isso permite aos leitores de tela ajustarem a pronúncia e a entonação conforme o idioma apresentado, contribuindo com o aprendizado de quem está lendo a obra.

Código-fonte
Preview

Código-fonte
Preview
Código-fonte
Preview

Código-fonte
Preview

3.5 Tabelas

Para garantir que tabelas em livros digitais sejam acessíveis e compreensíveis para todos os leitores, especialmente aqueles que utilizam leitores de tela, é essencial estabelecer uma relação clara entre as células de conteúdo e as células de cabeçalho. Isso pode ser feito utilizando corretamente a tag <th> para células de cabeçalho, tanto de colunas quanto de linhas, e a tag <td> para células de conteúdo. Dessa forma, ao navegar pela tabela o usuário ouvirá além do conteúdo da célula, a informação de qual cabeçalho está relacionado à célula em questão. Essa abordagem facilita a leitura e a compreensão das tabelas.

Código-fonte
Preview

3.5.1 Tabela que ocupa múltiplas páginas

Em situações que uma tabela se estende por múltiplas páginas em um livro digital, deve-se informar os usuários de leitor de tela sobre a continuidade do conteúdo na página seguinte. Para isso, recomenda-se incluir um texto ao final da primeira parte da tabela, indicando que ela continua na próxima página, e outro no início da continuação, reforçando essa transição. Estes textos podem estar ocultos visualmente mas necessariamente devem estar acessíveis aos leitores de tela.

Além disso, deve-se repetir as células de cabeçalho em cada nova página para melhorar a compreensão dos dados, já que no código trata-se de uma nova tabela. Essas células de cabeçalhos que se repetem em cada continuação da tabela, também podem estar ocultas visualmente mas necessariamente devem estar acessíveis aos leitores de tela.

Essas práticas ajudam a evitar confusão e garantem que todas as informações da tabela sejam apresentadas de forma clara e estruturada.

Código-fonte
Preview

3.6 Paginação

Nos livros digitais interativos, a numeração das páginas deve estar posicionada no início de cada página para garantir uma navegação estruturada e intuitiva. Para tornar essa informação acessível a usuários de leitores de tela, deve-se incluir a palavra "página" antes do número, opcionalmente de maneira oculta, utilizando técnicas como aria-label ou sr-only em CSS. Isso permite que os leitores de tela anunciem a informação “página” junto da numeração, proporcionando uma melhor compreensão da estrutura do livro.

A seguir, são apresentados exemplos de como implementar essa prática de maneira acessível e eficaz.

Código-fonte
Preview

Código-fonte
Preview

3.6.1 Livro manual do professor

Nos livros que contenham uma seção de manual do professor, deve-se apresentar o número da página em algarismos romanos nas páginas referentes ao manual do professor. Para garantir que este número seja lido corretamente pelo leitor de tela, deve ser inserido o atributo "aria-label" nos algarismos romanos contendo o valor do numeral por extenso.

As páginas da seção do manual do professor devem incluir após o número da página, de forma oculta, que trata-se do manual do professor, a fim de possibilitar que as pessoas que estão ouvindo o livro consigam identificar que a página em questão é da seção do manual do professor. Sem essa informação os usuários que estão lendo o livro através de leitor de tela podem confundir-se com as páginas do livro do estudante contido dentro do manual do professor.

Código-fonte
Preview

3.6.2 Livros em outro idioma

Nos livros em outro idioma, como livros em inglês ou espanhol, os números das páginas devem ser apresentados em formato numérico, não sendo aceitável a escrita por extenso. Além disso, devem seguir as orientações anteriormente apresentadas sobre a numeração das páginas.

3.7 Quebra de páginas

Para garantir que leitores de tela identifiquem e anunciem corretamente a transição entre páginas em um livro digital, as quebras de página devem ser implementadas utilizando o atributo role="doc-pagebreak". Esse atributo deve ser aplicado sempre na tag <p> que contém a numeração da página. Essa prática melhora a navegação e a compreensão da estrutura do livro, tornando a leitura mais acessível para os usuários. Os exemplos apresentados na seção de paginação já incorporam essa técnica para assegurar uma experiência inclusiva.

3.8 Glossário

O glossário em livros digitais contém uma lista de termos técnicos e palavras menos comuns, com seus respectivos significados. Para garantir a acessibilidade, deve-se utilizar a semântica adequada, como o uso correto de listas de definição e links, facilitando a navegação e a compreensão por todos os usuários, incluindo aqueles que utilizam recursos de tecnologia assistiva.

3.8.1 Uso de tags data list (dl), data term (dt) e data definition (dd)

Para que um glossário seja acessível e facilmente compreendido pelos usuários, é fundamental que ele seja construído seguindo as tags definidas no edital. Isso significa que o glossário deve utilizar as tags <dl> (definition list), <dt> (definition term) e <dd> (description details), que são as tags recomendadas para a construção de glossários em HTML. Ao utilizar essas tags, é possível organizar as informações do glossário, facilitando a sua leitura e compreensão pelos usuários.

Com o propósito de facilitar a navegação até o glossário e de volta ao texto, deve-se adicionar um link, no próprio termo glossariado, endereçado ao seu respectivo termo <dt> e sua definição. Deve também haver um link, logo após o texto da definição do termo, ainda dentro da tag <dd>, que permita o retorno ao ponto de leitura onde o termo foi acessado. Isso permite que os leitores naveguem facilmente entre o texto principal e o glossário e voltem ao ponto exato de onde saíram, proporcionando uma experiência de leitura mais fluida e agradável.

Código-fonte
Preview

3.9 Notas de rodapé

Nota de rodapé em livros digitais é um recurso que fornece informações complementares sobre um trecho de texto e geralmente é apresentado na parte inferior da página. Elas são usadas para citar fontes, fornecer definições ou explicar termos, entre outras informações relevantes. As notas de rodapé em livros digitais devem ser interativas, permitindo que os leitores acessem seu conteúdo.

Da mesma forma que nos glossários, deve-se adicionar um link, em cada índice de nota de rodapé, endereçado ao texto da nota. Além disso, deve-se também haver um link, logo após o texto da nota, ainda dentro da mesma tag, que permita o retorno ao ponto de leitura onde a nota foi acessada, ou seja, logo após o índice da nota no texto principal. Além disso, deve-se posicionar o índice para a nota de rodapé antes de sinais de pontuação, quando aparecer em finais de sentenças, evitando que as notas fiquem separadas do texto relacionado. Isso permite que os leitores naveguem facilmente entre o texto principal e a nota de rodapé e voltem ao ponto exato de onde saíram, possibilitando uma navegação fluída e leitura agradável.

Os índices, inseridos em meio ao texto principal, contém um link para a respectiva nota. Ao final do texto da nota, há um link de retorno ao texto principal, logo após o índice.

Código-fonte
Preview

3.10 Descrição de imagens

A descrição de imagem em livros digitais é um recurso que fornece uma alternativa textual da imagem para pessoas com deficiência visual. Essa descrição é inserida no código HTML da página e pode ser lida pelos leitores de tela para que o usuário possa ter uma compreensão do conteúdo visual presente na obra. A descrição deve ser clara, concisa e objetiva, fornecendo informações relevantes sobre a imagem que permitam ao leitor formar uma ideia clara do que está sendo representado na imagem.

3.10.1 Texto descritivo

Para descrever uma imagem, deve-se inserir o texto apropriado no atributo “alt”, todas as imagens que contenham informações ou conteúdo relevante. Essa descrição deve fornecer informações precisas sobre o conteúdo da imagem, permitindo que usuários com deficiência visual possam compreender o contexto em que ela se encontra.

Para o exemplo a seguir, considere a imagem:

Código-fonte
Preview

3.10.2 Imagem decorativa

A fim de evitar poluição sonora no leitor de tela com imagens sem conteúdo significativo, ou seja, imagens decorativas presentes na obra, deve-se utilizar o atributo alt vazio (alt=””), com aspas e sem nada entre as aspas, e atributo ARIA role="presentation" para indicar ao leitor de tela que a imagem deve ser ignorada. É proibido utilizar o atributo alt sem valor definido, (<img alt src="decorativa.jpg" />), pois esse tipo de uso pode não garantir que o leitor de tela ignore a imagem. Além disso, um HTML mal formado pode causar problemas em parses e dificultar a realização de testes.

Exemplo 28: Imagem decorativa com atributo alt vazio.
 Exemplo 28: Imagem decorativa com atributo alt vazio.
Recomenda-se que imagens decorativas sejam inseridas por CSS

3.11 Acessibilidade a Fórmulas Matemáticas e Equações

A utilização do MathML para expressões matemáticas desempenha um papel fundamental na acessibilidade ao fornecer uma representação estruturada e semântica das fórmulas matemáticas. No entanto, os leitores de tela atuais ainda apresentam limitações, como a necessidade de plugins adicionais e a dificuldade em lidar com fórmulas matemáticas complexas. Por isso, deve-se complementar as expressões matemáticas em MathML com textos alternativos adequados em linguagem natural, permitindo que os usuários compreendam o significado e o contexto da expressão utilizada.

3.11.1 Fórmulas lineares simples

Quando se tratarem de fórmulas simples, deve-se usar a escrita em texto simples, usando os símbolos adequados, para fórmulas lineares simples.

Código-fonte
Preview

3.11.2 Fórmulas com símbolos matemáticos sem representação em texto simples

Caso a fórmula contenha símbolos matemáticos sem representação linear equivalente, deve-se usar MathML, bem como, complementar com texto alternativo usando uma tag <span> separada e vazia com o atributo aria-label contendo o texto alternativo. Somado a isso deve-se ocultar a fórmula em MathML dos leitores de tela a fim de garantir que a mesma não seja lida, já que dependendo do conteúdo ela pode não ser lida corretamente e assim confundir o usuário.

Código-fonte
Preview

3.11.3 Fórmulas complexas

Para fórmulas complexas, independente de haver símbolos matemáticos com representação linear equivalente, deve-se usar MathML para fórmulas complexas. Da mesma forma que ocorre em fórmulas com símbolos matemáticos sem representação em texto simples, deve-se complementar as expressões matemáticas com texto alternativo usando uma tag <span> separada e vazia com o atributo aria-label contendo o texto alternativo.

Código-fonte
Preview

3.12 Conteúdos ou elementos não acessíveis

A adequação de orientações espaciais e simbólicas é fundamental para garantir que o conteúdo de livros digitais seja acessível a todos os usuários, especialmente aqueles que dependem de recursos de tecnologia assistiva.

3.12.1 Posição de elementos adaptados

As expressões utilizadas para informar a posição de elementos devem ser adaptadas a fim de garantir a compatibilidade e acessibilidade do material. Assim, deve-se substituir referências espaciais, como "abaixo" e “acima” por termos mais apropriados, como "a seguir" e “anterior” tendo em vista que numa obra digital não temos garantia da posição do conteúdo, já que a obra se adapta ao tamanho do dispositivo e forma de visualização escolhida pelo usuário no software leitor de livros digitais.

Além disso, para pessoas cegas que estão apenas ouvindo o livro através do leitor de tela, não faz sentido informar que algo está acima, abaixo, à esquerda ou à direita. Para essas pessoas fará sentido se a informação foi apresentada antes ou será apresentada depois do ponto atual da leitura.

Exemplo 32: Uso da expressão “a seguir” para substituir “abaixo”
 Exemplo 32: Uso da expressão “a seguir” para substituir “abaixo”

3.12.2 Indicações/instruções incompatíveis com o livro digital

Deve-se utilizar termos e instruções que sejam relevantes, aplicáveis e compatíveis com o formato dos livros digitais. Por isso, evite empregar termos ou indicações específicas para livros físicos, como por exemplo “Não escreva no livro”.

Exemplo 33: Instrução adequada para o formato digital, orientando o usuário a fazer anotações em um caderno separado ou aplicativo de anotações
 a fazer anotações em um caderno separado ou aplicativo de anotações a fazer anotações em um caderno separado ou aplicativo de anotações

3.12.3 Caracteres, símbolos ou sinais lidos incorretamente

No intuito de evitar que símbolos ou sinais sejam lidos incorretamente, deve-se garantir o uso correto dos símbolos. Para isso, deve-se ter atenção aos detalhes e a utilização das entidades HTML apropriadas, como símbolo de graus (° - "°"), símbolo de mais (+ - "+"), símbolo de menos (− - "−"), símbolo de dividido (÷ - "÷"), letra grega alfa (α - "α"), entre outros.

Código-fonte
Preview

3.13 Abreviaturas e siglas

Na primeira menção de uma abreviatura ou sigla em um documento, seja um capítulo ou uma unidade, deve ser escrito o nome composto por extenso, seguido da sigla entre parênteses.

Evite o uso da tag <abbr> para forçar a pronúncia diferente de palavras pelo leitor de tela, isso não caracteriza uma boa prática e pode levar os leitores a confusão com palavras escritas erroneamente aparecendo no tooltip gerado pelo title.

Código-fonte
Preview
Código-fonte
Preview