1174 sujets
Accessibilité du Web
merci Safsup pour cette réponse
mais cela ne fonctionne pas avec une page toute simple
exemple page index.html:
si j'ouvre cette page avec Firefox je n'ai pas de mode de lecture...
A+
Modifié par escalinet (21 Dec 2020 - 06:49)
mais cela ne fonctionne pas avec une page toute simple
exemple page index.html:
<!DOCTYPE html>
<html>
<head>
<!-- En-tête de la page -->
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
<!-- Corps de la page -->voici un texte
</body>
</html>si j'ouvre cette page avec Firefox je n'ai pas de mode de lecture...
A+
Modifié par escalinet (21 Dec 2020 - 06:49)
Bonjour,
On n'active pas le mode lecture via du code dans la page. C'est le navigateur qui décide si la page qu'on lui propose est susceptible de fonctionner en mode lecture (dans le cas de firefox il ajoute dans la barre d'adresse l'icone du mode lecture, sur laquelle l'utilisateur peut ensuite cliquer pour déclencher le mode lecture).
Le processus de décision du navigateur me semble obscure et est probablement variable d'un navigateur à l'autre.
Techniquement, il semble qu'il faille que la page soit conforme (à quoi ? on ne sait pas !). Il semble aussi qu'il faille que des balise <p> soient présentes.
Par exemple, la page ci-dessous semble fonctionner en mode lecture avec firefox :
Par contre, la page ci-dessous (qui est identique à la précédente sauf que la balise <p> a été remplacée par une balise <div>) semble ne pas fonctionner en mode lecture avec firefox :
Après, il y a surement des combines avec des plugins. Mais je n'ai jamais utilisé ça. Et c'est à l'utilisateur de décider s'il installe ces plugins ou pas de toute façon. La page ne peut pas faire ça toute seule.
Amicalement,
On n'active pas le mode lecture via du code dans la page. C'est le navigateur qui décide si la page qu'on lui propose est susceptible de fonctionner en mode lecture (dans le cas de firefox il ajoute dans la barre d'adresse l'icone du mode lecture, sur laquelle l'utilisateur peut ensuite cliquer pour déclencher le mode lecture).
Le processus de décision du navigateur me semble obscure et est probablement variable d'un navigateur à l'autre.
Techniquement, il semble qu'il faille que la page soit conforme (à quoi ? on ne sait pas !). Il semble aussi qu'il faille que des balise <p> soient présentes.
Par exemple, la page ci-dessous semble fonctionner en mode lecture avec firefox :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas. Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla. Duis tincidunt diam id ullamcorper ultrices. Ut mattis nibh vel leo vulputate viverra. In hac habitasse platea dictumst. Nam at maximus diam. Sed interdum nunc nec laoreet blandit. Praesent consequat nunc nulla, sed tempus dolor ornare eget. Donec rutrum eros ut purus sodales, ac facilisis massa porttitor. Mauris pulvinar sodales metus a consectetur. Fusce sem purus, gravida vel ultrices quis, blandit sed metus. Nunc elementum odio eu nibh pretium, tincidunt laoreet erat auctor. Proin hendrerit vestibulum erat eu laoreet. Nullam id vestibulum urna. Etiam semper vehicula nibh, id fringilla velit vestibulum eu.</p>
</main>
</body>
</html>Par contre, la page ci-dessous (qui est identique à la précédente sauf que la balise <p> a été remplacée par une balise <div>) semble ne pas fonctionner en mode lecture avec firefox :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<h1>Lorem ipsum</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas. Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla. Duis tincidunt diam id ullamcorper ultrices. Ut mattis nibh vel leo vulputate viverra. In hac habitasse platea dictumst. Nam at maximus diam. Sed interdum nunc nec laoreet blandit. Praesent consequat nunc nulla, sed tempus dolor ornare eget. Donec rutrum eros ut purus sodales, ac facilisis massa porttitor. Mauris pulvinar sodales metus a consectetur. Fusce sem purus, gravida vel ultrices quis, blandit sed metus. Nunc elementum odio eu nibh pretium, tincidunt laoreet erat auctor. Proin hendrerit vestibulum erat eu laoreet. Nullam id vestibulum urna. Etiam semper vehicula nibh, id fringilla velit vestibulum eu.</div>
</main>
</body>
</html>Après, il y a surement des combines avec des plugins. Mais je n'ai jamais utilisé ça. Et c'est à l'utilisateur de décider s'il installe ces plugins ou pas de toute façon. La page ne peut pas faire ça toute seule.
Amicalement,
Bonjour,
Ta page n'a pas de balise <p>, et le texte est trop court (il semble qu'il faille qu'il contienne au moins 512 caractères ou peut-être un peu plus).
La page ci-dessous fonctionne :
Amicalement,
Modifié par parsimonhi (16 Jan 2021 - 18:32)
escalinet a écrit :
...mais cela ne fonctionne pas avec une page toute simple...
Ta page n'a pas de balise <p>, et le texte est trop court (il semble qu'il faille qu'il contienne au moins 512 caractères ou peut-être un peu plus).
La page ci-dessous fonctionne :
<!DOCTYPE html>
<html>
<head>
<!-- En-tête de la page -->
<meta charset="utf-8">
<title>Titre</title>
</head>
<body>
<!-- Corps de la page -->
<p>
Voici un texte. Voici un texte. Voici un texte. Voici un texte.
Voici un texte. Voici un texte. Voici un texte. Voici un texte.
Voici un texte. Voici un texte. Voici un texte. Voici un texte.
Voici un texte. Voici un texte. Voici un texte. Voici un texte.
Voici un texte. Voici un texte. Voici un texte. Voici un texte.
Voici un texte. Voici un texte. Voici un texte. Voici un texte.
Voici un texte. Voici un texte. Voici un texte. Voici un texte.
Voici un texte. Voici un texte. Voici un texte. Voici un texte.
Voici un texte. Voici un texte. Voici un texte. Voici un texte.
</p>
</body>
</html>Amicalement,
Modifié par parsimonhi (16 Jan 2021 - 18:32)
Bonjour,
d'après https://stackoverflow.com/questions/30730300/optimize-website-to-show-reader-view-in-firefox ce sont en effet les paragraphes (élément p) d'une certaine longueur (100 ou 140 caractères ?) qui sont pris en compte. Et les div comportant au moins un <br>.
En ignorant ceux qui se trouvent dans un form par exemple.
Perso je crée des gabarits HTML5 avec header, nav, MAIN, aside, footer (*) ( https://schnaps.it/ pour de bons exemples) mais c'est plus mon habitude d'utiliser des paragraphes pour tout texte étant une phrase qui semble activer systématiquement ce mode.
(*) et je n'ai pas assez le réflexe des section et article mais je sais que d'un autre côté il ne faut pas non plus en abuser : 10 par page de chaque c'est nimp'
Modifié par Felipe (25 Jan 2021 - 18:31)
d'après https://stackoverflow.com/questions/30730300/optimize-website-to-show-reader-view-in-firefox ce sont en effet les paragraphes (élément p) d'une certaine longueur (100 ou 140 caractères ?) qui sont pris en compte. Et les div comportant au moins un <br>.
En ignorant ceux qui se trouvent dans un form par exemple.
Perso je crée des gabarits HTML5 avec header, nav, MAIN, aside, footer (*) ( https://schnaps.it/ pour de bons exemples) mais c'est plus mon habitude d'utiliser des paragraphes pour tout texte étant une phrase qui semble activer systématiquement ce mode.
(*) et je n'ai pas assez le réflexe des section et article mais je sais que d'un autre côté il ne faut pas non plus en abuser : 10 par page de chaque c'est nimp'
Modifié par Felipe (25 Jan 2021 - 18:31)
Bonjour,
On t'a déjà donné 3 exemples !!!
Donc tu prends un des exemples, et tu rajoutes ton contenu (sans supprimer le contenu de l'exemple). Tu testes. Si ça marche, tu tentes de supprimer le contenu de l'exemple.
Rappel : il faut sans doute mettre un <p> avec assez de texte (de l'ordre de 500 ou 600 caractères avec un seul <p>), moins dans chaque <p> s'il y en a plusieurs.
Dans ton exemple à toi, tu n'avais pas de balise <p>, et tes textes étaient trop courts.
Il y a peut-être d'autres possibilités pour que le mode de lecture s'active, mais c'est très mal documenté.
Le navigateur calcule plus ou moins au pif une note de ta page, et selon le résultat, active ou non le mode de lecture. Donc faut avoir du bol pour que ça marche.
Amicalement
escalinet a écrit :
Est-ce que vous auriez un exemple de code pour une page html ?
Merci
On t'a déjà donné 3 exemples !!!
Donc tu prends un des exemples, et tu rajoutes ton contenu (sans supprimer le contenu de l'exemple). Tu testes. Si ça marche, tu tentes de supprimer le contenu de l'exemple.
Rappel : il faut sans doute mettre un <p> avec assez de texte (de l'ordre de 500 ou 600 caractères avec un seul <p>), moins dans chaque <p> s'il y en a plusieurs.
Dans ton exemple à toi, tu n'avais pas de balise <p>, et tes textes étaient trop courts.
Il y a peut-être d'autres possibilités pour que le mode de lecture s'active, mais c'est très mal documenté.
Le navigateur calcule plus ou moins au pif une note de ta page, et selon le résultat, active ou non le mode de lecture. Donc faut avoir du bol pour que ça marche.
Amicalement