2. Apresentação da obra

Para garantir a organização e a padronização dos livros didáticos digitais, este capítulo apresenta requisitos fundamentais quanto à estrutura e ao empacotamento dos arquivos em HTML5. Esses critérios visam assegurar a compatibilidade entre diferentes plataformas e dispositivos, bem como a correta exibição e funcionalidade dos conteúdos interativos.

A adoção de uma estrutura bem definida facilita a manutenção, a atualização e a validação dos materiais. A seguir, são detalhadas as regras para a organização interna dos arquivos e sua configuração dentro do pacote digital.

2.1. Conteúdo de cada livro

O conteúdo de cada livro deverá estar empacotado em um zip contendo todos os elementos e estruturado em diretório e subdiretórios, facilitando a navegação por páginas, capítulos, imagens, notas e demais recursos.

2.1.1. Página inicial

A raiz do pacote deve conter o arquivo index.html, com os seguintes elementos: capa do livro, texto de apresentação da obra e ficha catalográfica.

Não é recomendada a inclusão de um "sumário digital", pois o livro já possui um sumário interno e outro gerado automaticamente a partir do arquivo toc.ncx, o qual fica disponível em leitores de livros digitais. A capa da obra deve ser a primeira página do index.html e apresentar o título do livro em nível 1 (<h1>)

Figura 1 - Exemplo de sumário digital não recomendado
Figura 1 - Exemplo de sumário digital não recomendado
Fonte: os autores (captura de tela de um livro aberto no Leitor Interativo do PNLD - LIP).

Figura 2 - Índice do Leitor Interativo do PNLD (LIP) gerado automaticamente pelo arquivo toc.ncx com o mesmo conteúdo do sumário digital
Figura 2 - Índice do Leitor Interativo do PNLD (LIP) gerado automaticamente
Fonte: os autores (captura de tela de um livro aberto no Leitor Interativo do PNLD - LIP).

Figura 3 - Trecho do código fonte do arquivo toc.ncx que gera o índice apresentado na figura 2
Figura 3 - Trecho do código fonte do arquivo toc.ncx que gera o índice apresentado na figura 2
Fonte: os autores (captura de trecho do código fonte do arquivo toc.ncx da mesma obra aberta no LIP nas imagens anteriores; para preservar a descaracterização da obra, os elementos referentes a autoria, título da obra foram tachados em vermelho [linhas 17, 24 e 27]).

2.2 Organização da obra por unidades e capítulos

A separação em arquivos HTML distintos garante que a obra irá funcionar adequadamente mesmo em dispositivos com menor capacidade de processamento, além de melhorar a organização e facilitar a manutenção da obra.

Um arquivo HTML que contém todo o conteúdo da obra é chamado de arquivo monolítico, justamente por concentrar unicamente nele toda a informação, tornando-o muito extenso e mais difícil de ser carregado. Arquivos monolíticos podem causar problemas de funcionamento das obras que os têm em sua estrutura. Quando o dispositivo no qual a obra está sendo lida for apresentar tal arquivo, ele precisará renderizar todo o conteúdo de uma só vez, isso inclui todo conteúdo textual, todas as imagens além dos demais outros recursos possíveis, tais como vídeos e outros recursos interativos. Isso pode gerar travamentos na aplicação ou simplesmente exibir o conteúdo da obra de forma incompleta, somente até a página que o dispositivo conseguiu processar.

Com isso, deve-se organizar a obra separando suas partes em arquivos HTML diferentes, de modo estruturado, permitindo que os conteúdos sejam acessados de modo independente e em tamanhos de arquivo menores.

2.2.1 Obras com divisão por unidade

Deve-se utilizar separação de pelo menos um arquivo por unidade. Recomenda-se ainda a divisão por capítulos, para evitar arquivo HTML muito extensos e com muito conteúdo.

2.2.2 Obras sem divisão por unidade

Para obras que não possuem divisão por unidades, sendo divididas apenas em capítulos, deve-se utilizar separação de pelo menos um arquivo por capítulo.

2.2.3 Obras com divisão por seções

Em obras que não possuem divisão por unidades ou capítulos, deve-se dividir a obra de acordo com as seções, sendo um arquivo HTML por seção. Essa regra se adequa mais a livros que não são didáticos, tais como livros literários com contos, poemas, poesias e outros.

2.3 Estrutura do livro

Deve-se seguir a estrutura base proposta para organização dos arquivos e pastas da obra. O projeto deverá conter em sua estrutura raíz os seguintes elementos.

  • Pasta de conteúdo (content)
  • Pasta de recursos (resources)
  • Arquivo de navegação (toc.ncx)
  • Página inicial da obra (index.html)
  • Capa (cover.jpeg)
  • Tabela de conteúdo (content.opf)
Exemplo 1: Estrutura do livro
Exemplo 1: Estrutura do livro

2.4. Listas

Deve-se utilizar o elemento <ul> para listas não ordenadas e <ol> para listas ordenadas para que se tenha a semântica apropriada. Não deve-se usar quebras de linhas e elementos visuais a fim de formar listas, pois desta forma errônea será uma lista apenas visualmente, impedindo usuários de leitores de tela de compreenderem o conteúdo corretamente.

Código-fonte
Preview

As listas devem ser compostas por dois ou mais itens de lista <li> dentro de uma tag de lista não ordenada <ul> ou dentro de uma tag de lista ordenada <ol>

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

Listas com apenas um item podem confundir os leitores e dificultar a navegação do conteúdo. No entanto, em listas encadeadas ou em contextos específicos, pode ser aceitável ter uma lista com apenas um item de lista <li>.

Código-fonte
Preview

Neste exemplo, a lista encadeada foi utilizada para incluir o planeta anão Plutão como uma sub lista separada. A estrutura lógica e coerente torna a exceção aceitável, mesmo que a lista interna de Plutão tenha apenas um item.

Em situações em que a lista é interrompida para a inserção de outros conteúdos que não fazem parte da lista, o atributo start possibilita a retomada da numeração sem perda de continuidade pois ele define o ponto de partida para a classificação dos itens de uma lista ordenada.

A sua utilização é feita da seguinte forma:

Start="*" – O sinal * deverá ser substituído por um número que será tomado como referência para o início da classificação em uma lista ordenada.

Quando type="1" e start="0", a classificação será iniciada no número 0 (valor aplicado apenas quando for usado o sistema cardinal para a classificação).

Quando type="A" e start="11", a classificação será iniciada no caracter K.

Quando type="I" e start="10", a classificação será iniciada no algarismo romano X.

Tanto o atributo type como o start, deverão ser inseridos dentro da tag <ol>, definindo um mesmo estilo para todos os itens da lista.

Exemplificando o uso do atributo, imagine uma lista que precisou ser interrompida, por exemplo, para a quebra de página depois do item 11. Neste caso, pode-se usar o atributo para que a lista tenha continuidade, como se observa no trecho de código a seguir:

Código-fonte
Preview

2.5 Títulos e ordem hierárquica

Os títulos em seus diferentes níveis (H1 a H6) são elementos fundamentais na estrutura dos livros digitais acessíveis. Além de organizarem o conteúdo de forma hierárquica, eles desempenham um papel essencial na acessibilidade, garantindo que leitores com deficiência visual ou cognitiva possam navegar e compreender o material com maior facilidade antes mesmo de lê-lo na íntegra. Mesmo para leitores sem deficiência, uma boa estrutura de títulos melhora a experiência de leitura, tornando o livro mais organizado e intuitivo.

Os leitores de tela, como o NVDA, permitem percorrer rapidamente os títulos em seus diferentes níveis, ou seja, as seções e subseções da obra. Com isso, permite ao usuário pular para a parte desejada sem precisar rolar página por página.

Os títulos, dos livros digitais, devem seguir uma estrutura lógica e obedecer a ordem hierárquica, sem saltos entre os diferentes níveis, do mais amplo até o mais específico (<h1> → <h2> → <h3> etc.), levando em consideração a obra completa, ou seja, todos os arquivos HTML da obra. Adicionalmente, os itens do sumário devem ser consistentes com os títulos ao longo do livro, isso é, devem seguir a mesma hierarquia.

Essa prática não limita os autores na criação de suas obras visto que trata-se apenas de semântica, da marcação adequada no HTML. Ainda há liberdade criativa que pode ser aplicada através de classes CSS aos níveis de título.

2.5.1 Padronização do uso dos níveis de títulos

Os leitores de tela permitem que usuários naveguem por um livro digital saltando entre os títulos, o que torna a estruturação correta essencial para a compreensão da obra por pessoas com deficiência visual.

Para evitar que cada obra tenha uma organização diferente fazendo com que os usuários precisem aprender a estrutura de cada obra individualmente, definiu-se uma padronização do uso dos níveis de título seguindo uma hierarquia lógica. Deve-se utilizar, os seguintes níveis de título para os respectivos conteúdos:

<h1> Título do livro

<h2> Sumário, paratextos e unidades

<h3> Capítulos

Os níveis de título <h4>, <h5> e <h6> podem ser utilizados em outras partes do livro, como seções, subseções, quadros complementares, entre outros, a critério das editoras, desde que respeitadas as restrições apresentadas em 4.5.2 e 4.5.3.

Desta maneira, os leitores em qualquer obra que seguir esta publicação, saberão qual o propósito dos três principais níveis de título. Além disso, manter essa hierarquia clara permite que o usuário compreenda a relação entre os conteúdos e encontre rapidamente as informações desejadas.

Código-fonte
Preview

2.5.2 Títulos de mesmo nível sem conteúdo entre eles

Não deve haver, no HTML, títulos de mesmo nível em sequência sem conteúdo entre eles. Essa prática pode dificultar a compreensão dos usuários de leitores de tela e torna a navegação pelo conteúdo confusa. Caso isso ocorra deve-se juntar os títulos de mesmo nível consecutivos sem conteúdo entre eles.

Código-fonte
Preview

Código-fonte
Preview

2.5.3 Dois ou mais títulos de nível 1

Deve-se utilizar apenas um título de nível 1 <h1> por livro. Usuários que utilizam recursos de tecnologia assistiva, como leitores de tela, usam a hierarquia de títulos para navegar pelo conteúdo. Ter múltiplos <h1> pode causar confusão e dificultar a compreensão da estrutura do documento.

2.6 Sumário da obra

O sumário deve utilizar links ancorados que permitam a navegação direta entre capítulos e seções do livro digital, permitindo que qualquer pessoa encontre e acesse rapidamente o conteúdo desejado e assim garantindo uma experiência acessível e intuitiva para todos os leitores.

É fundamental evitar o uso do atributo target, no intuito de abrir novas janelas ou abas, pois isso além de confundir usuários de leitores de tela e comprometer a previsibilidade da navegação, nos principais leitores de livros digitais não é permitido a abertura de novas abas ou janelas. Mesmo que o código contenha target="_blank", ele geralmente será ignorado ou tratado de forma diferente dependendo do leitor.

Código-fonte
Preview

2.6.1 Estrutura do sumário

O sumário de um livro digital deve ser estruturado de forma clara e hierárquica. Os itens do sumário devem ser consistentes com os títulos ao longo do livro, isso é, devem seguir a mesma hierarquia utilizando listas ou níveis de título.

Ao utilizar listas, elas podem ser ordenadas ou não ordenadas para espelhar a organização da obra. Quando necessário, listas encadeadas podem ser usadas para representar subníveis de conteúdo. Alternativamente, níveis títulos corretamente marcados (h2, h3, h4, etc.) também podem ser empregados para definir a estrutura do sumário.

Além disso, deve-se utilizar a palavra página antes do número indicativo da página para facilitar a compreensão aos usuários de leitores de tela. É importante destacar que a palavra página não precisa estar visível, podendo permanecer oculta.

Código-fonte
Preview

2.6.2 Sumário que ocupa múltiplas páginas

Quando o sumário de um livro digital se estende por mais de uma página, deve-se informar ao usuário que o sumário continua na página seguinte. Como cada página possui a numeração no início, o sumário deve ser segmentado em duas partes ou mais partes.

Para garantir a acessibilidade, especialmente para usuários de leitores de tela, deve-se inserir textos ocultos no final da página do sumário e no início da próxima página, indicando a continuidade do conteúdo. Isso deve se repetir até a última página que contenha sumário. Esses textos ocultos visualmente através de CSS, mas visíveis apenas para recursos de tecnologia assistiva, asseguram que o leitor compreenda a progressão do sumário sem confusão, evitando que a quebra de página cause desorientação. Essa prática aprimora a experiência de leitura e reforça o compromisso com um design acessível e inclusivo.

No exemplo a seguir, os textos foram ocultos usando a classe CSS "sr-only", definida da seguinte forma:

Código-fonte
Código-fonte
Preview