Publier un roman graphique en ligne?
Mon employeur organise un concours de rédaction chaque année. Chaque année, nous publions les trois meilleurs résultats dans chaque catégorie sur notre site Web. Pas grave. Cette année, une catégorie a été ajoutée pour un roman graphique.
Quelles normes et meilleures pratiques existe-t-il pour publier cela sur notre site? Je suppose qu'un PDF serait terrible pour l'accessibilité. Mon instinct est juste de le scanner et de mettre en place des JPG. Serais-je préférable de transcrire le texte en paragraphes ou de le laisser comme texte alternatif?
Toute aide serait appréciée.
PDATE: Je pense que ma solution finale aura des morceaux des réponses ci-dessous.
- Options pour l'affichage et le téléchargement
- Le téléchargement déclenchera un PDF pour les personnes à la recherche d'une qualité d'impression
- View affichera éventuellement une nouvelle fenêtre/onglet avec un en-tête réduit à la seule marque de l'entreprise.
- La vue aura une page entière JPG de la page actuelle et bascule pour naviguer en avant et en arrière.
- La vue comportera également une explication textuelle, basée sur un paragraphe, de la ou des scènes sur la page. Ce texte sera masqué des navigateurs avec CSS.
- Les images de vue auront un texte alternatif définissant simplement la nature de l'image (titre et page IE).
Je crois que cela couvrira toutes les bases, tout en restant relativement libre de poster.
J'ai vu un roman graphique vraiment fou + canvas expériences de Google il y a quelque temps. Tout le texte était en clair (très facile d’accès), mais toutes les images étaient clairement visibles. Je n'arrive pas à le trouver, mais 20 choses que j'ai apprises montre un peu ce que je veux dire.
Je dirais que c'est exagéré pour ce que vous voulez faire, alors je ferais ceci:
<img src="page1.jpg" alt="Page 1" width="800" height="1000" />
<div class="hidden">
<h1>Panel 1</h1>
<p>Name1: Lorem ipsum....</p>
<p>Name2: Lorem ipsum....</p>
<strong>WOOSH</strong><!-- Sound Effect -->
<h1>Panel 2</h1>
<p>Name1: <em>Lorem ipsum....</em><!-- Emphasis on words -->
<!-- And so on -->
</div>
Et j'appellerais le div en tant que tel:
.hidden { text-indent: -9999em; }
De cette manière, vous obtenez une image clairement visible pour les personnes à regarder et un texte en clair à lire à haute voix pour les lecteurs d'écran. On pourrait aussi mettre une transcription de la bande dessinée dans la balise alt, mais à mon sens, vous pouvez ajouter un sens plus sémantique à la transcription.
Vous pouvez également ajouter du Javascript pour faire basculer le text-indent afin de le rendre visible si les personnes malvoyantes veulent le voir.
Vous devriez jeter un oeil à " Never Mind The Bullets ", réalisé avec HTML5 et canvas. Je ne sais pas si c'est accessible, mais vous constaterez peut-être que cela vous donne quelques idées. Gardez toutefois à l'esprit que l'approche HTML5 exclut IE8 et les versions antérieures (IE9 convient). Selon votre public, cela pourrait ne pas être un démarreur.
HTML a un attribut longdesc qui pointe vers l'URL d'une "description longue". Plutôt que beaucoup de balises alt, pourquoi ne pas l'utiliser?
Oof, c'est une question difficile. C'est vraiment difficile de présenter quelque chose comme un roman graphique avec une bonne accessibilité. Les images sont bien meilleures que PDF bien que vous ayez raison à ce sujet. De plus, je ne recommanderais pas de mettre la description complète de chaque volet en tant que texte alternatif, sans parler de la page entière. Je pense que le meilleur moyen serait d'ajouter des paragraphes avec des transcriptions et d'utiliser l'alt comme indicateur de la nature de l'image (alt="graphic novel x, page y").
Peut-être que ce serait une idée de le lire à haute voix et de le fournir également sous forme de fichier audio?
Pourquoi ne pas opter pour de nouveaux éléments HTML5?
En ce qui concerne l’accessibilité, vous pouvez compter sur de nombreux petits scripts (comme celui de Remy Sharp, disponible à l’adresse http://whatwg.org , dans la section des exemples) ou dans les bibliothèques. ( modernizr ).
Maintenant, ma solution: balayez tout pour le format jpeg, utilisez élément de figure avec figcaption pour ajouter toutes les images sous forme de balises img tout en les maintenant accessibles, et bien sûr, en utilisant du texte alternatif. Lire section HTML5 sur l'utilisation de l'attribut alt . Il contient quelques exemples intéressants de la manière dont cela peut être utile pour l'accessibilité.
MODIFIER
Pour ceux qui recherchent un niveau d'accessibilité vraiment très élevé, abandonnons toutes les nouvelles ressources sur lesquelles nous pouvons compter, comme les nouveaux éléments HTML5, CSS @ font-face, le texte de remplissage à masquer ... Passons maintenant au format brut POSH (Plain Old Semantic HTML) .
Je choisirais la solution extrême extrême suivante: créer des fichiers jpeg et utiliser l’attribut alt pour décrire le tout aussi bien que nécessaire, de la même manière dans le guide HTML5, mais amélioré, c’est-à-dire amélioré par des textes très très discriminants aucune limite à la taille de l'attribut alt).
<img src='novel15/image24.jpg' alt='As Mr. Smith enters the room, he sees his brother with a knife stabbed in the chest and, in with a horror face scream out loud: "Nooooooooooooooo!"'>
Méfiez-vous d'un détail: les fichiers JPG lors du rendu d'un texte peuvent être terribles. Vous devrez configurer votre logiciel graphique pour exporter avec une qualité très . Si cela est fait, l'itinéraire est bon. PDF se bloque/prend du temps à charger dans de nombreux navigateurs/machines, en fait. Mais parfois, c’est la seule option possible, cela dépend du contenu, de l’audience ... Le problème que je vois avec HTML 5 ne semble pas encore totalement adopté ... Vous pouvez aussi choisir une solution flash avancée (je viens de répondre à un pdf question flash flipbook ici)
Si vous choisissez la route JPG, je vous conseille irfanview.com (autorise également la création de petits fichiers jpgs en KS). Vous y trouverez un utilitaire gratuit très utile comme visionneuse d’images de bureau, mais également comme convertisseur de lots avec opérations par lots et filtres. Cela pourrait être essentiel pour la route JPG.
edit: Vous parlez de l'option "laisser comme texte". Si vous avez besoin de l'aide d'un programmeur, optez pour une solution permettant de traiter les données textuelles et les images afin de générer un format HTML formaté, et c'est tout. Je pense qu'il existe des utilitaires gratuits comme celui-ci, qui exportent du HTML. Cela éliminerait le problème de texte jpg (mais même si vous optez pour la route tout jpg, en réalité, un gros jpg peut prendre moins de temps à charger qu'un pdf gonflé ou une autre solution et serait moins fatal ...)
C'est une question qui donne à réfléchir et vos réponses sont très variées. Choisir la meilleure réponse sera assez subjectif, mais la discussion et les différences entre les réponses seront utiles à tous.
Cela étant dit, voici une idée ...
Voici mon interprétation des exigences:
- Adaptez-le à la structure du site existant, en particulier au paradigme de pagination
- Présenter au navigateur le texte actuel de l’histoire sous forme de texte ("accessibilité"). Cela active également d'autres fonctionnalités telles que l'indexation externe des pages par les moteurs de recherche, la recherche sur le site (si vous en avez une), le référencement sur les pages.
- Maintenir l'intégrité artistique: présentez le texte dans chaque cellule tel qu'il a été écrit à la main par l'artiste.
- Présentez, si possible, toutes les cellules telles qu'elles ont été rassemblées sur la page. [Les petites boîtes sont-elles appelées "cellules" et les avez-vous? Je conçois une bande dessinée comme une œuvre d'art, mais cela pourrait être différent.]
Compte tenu de ces éléments, je pense que la meilleure approche serait de présenter à l'utilisateur deux "cadres" de matériel (vous pouvez utiliser iFrames si vous le souhaitez, mais ce n'est pas nécessaire); Je ne suggère pas l'utilisation de cadres HTML.
- Premier "cadre" du contenu: une vue réduite de la page entière sous forme d'image unique, non destinée à être lue, mais utilisée à la fois pour afficher la composition complète et pour faciliter la navigation. du livre.
- Deuxième "cadre" de contenu: une grande image de chaque cellule dessinée, accompagnée du texte faisant partie de l'image de cette cellule, mais sous forme de texte. Donnez à l'utilisateur la possibilité de masquer le texte, mais affichez-le par défaut.
L'utilisateur feuilleterait les cellules en cliquant, par exemple, sur un triangle pointant vers la droite, ce qui lui permettrait de remonter une cellule avec un triangle pointant vers la gauche.
Je suggérerais également deux autres vignettes: une vue encore plus petite de l'image de la page suivante (avec plus de cellules) et une vue de la même taille de l'image de la page précédente. De cette façon, l'utilisateur peut accéder aux pages réelles du livre, pas seulement en cliquant cellule par cellule.
Je pense que cela vaut également la peine de masquer le reste des éléments de votre site. Vous pouvez en faire une option sur laquelle l'utilisateur peut cliquer (comme pour masquer le texte) ou simplement masquer l'interface utilisateur typique du site lors de l'ouverture du livre - en immergeant l'utilisateur dans l'expérience la plus complète du roman graphique en ligne. Vous pouvez également offrir une bascule de l'interface utilisateur du site en donnant un logo/bouton de site [reste du site: SHOW | CACHER].
Voici pourquoi je suggère cette approche:
- Vous évitez l'incorporation d'un document ou d'un fichier (PDF, DjVu, par exemple).
- Vous fournissez une "accessibilité", mais pas uniquement à des fins d'accessibilité, vous obtenez le texte du contenu sur la page, ce qui est évidemment bon pour la recherche, etc.
- Vous présentez à l'utilisateur le plus de sens artistique possible - en affichant la page complète et une vue agrandie de chaque cellule.
- Si vous masquez le reste de l'interface utilisateur de votre site, le lecteur est plongé dans le roman, perdant ainsi le sentiment de naviguer sur un site Web. OMI cela aide à maintenir l'intégrité artistique.
- Il ne nécessite ni HTML5 ni une technologie limitant le nombre de lecteurs potentiels.
- Vous ne mettez pas le contenu du roman dans
alttext.