Une page de flux lisible et accessible
L’an dernier, j’ai passé un peu de temps à ajouter un flux RSS au site.
Je m’étais notamment attelée à créer une page de flux lisible au lieu du code XML affiché par défaut en adaptant le fichier pretty-feed-v3.xsl d’About feeds.
Dans ce billet, je prends enfin le temps de détailler les corrections d’accessibilité effectuées et de proposer ma version.
Ajout d’un doctype HTML5
En reprenant le code de la page HTML générée, j’ai vu qu’il n'y avait pas de doctype HTML5. L’été dernier, je n’avais pas su le corriger, car l’ajout en dur ne fonctionnait pas.
En lisant ces échanges, la solution qui fonctionne pour moi :
<xsl:output method="html" doctype-system="about:legacy-compat" encoding="UTF-8" indent="yes"/>
- Localiser
xsl:output
. - Remplacer
version="1.0"
pardoctype-system="about:legacy-compat"
. Pour info, j’ai tenté de remplacer parversion="5.0"
, sans succès.
Ce qui génère un doctype HTML5, sauf chez Firefox qui affiche :<!DOCTYPE html "about:legacy-compat">
au lieu de <!DOCTYPE html SYSTEM "about:legacy-compat">
comme le demande la spécification.
Ça m’embête un peu, mais je ne vois pas comment aller plus loin et j'imagine que l’impact utilisateur est faible.
Ajout d’un attribut lang sur la balise <html>
Ajouter l’attribut lang="[code-langue]"
sur la balise <html>
.
Structuration HTML5 et régions
J’ai revu la structuration HTML5. Il manquait une balise <header>
et <main>
. J’ai eu besoin d’ajouter une balise <footer>
pour mes propres besoins.
J’ai également supprimé la balise <nav>
, car il n’y a pas de navigation sur cette page.
En parallèle, j’ai doublé avec les rôles régions appropriés (banner, main, contentinfo) comme demandé par RGAA.
SVG décoratif
J’ai masqué le SVG décoratif avec aria-hidden=true
.
Autres modifications
Champ de formulaire
Un des inconvénients de proposer une page lisible pour les flux, c’est que le lien n’ouvre plus directement un lecteur de flux.
Pour compenser, j’ai piquée une excellente idée chez Dotclear, j’ai ajouté un champ de formulaire avec l’URL du flux.
J’avais bêtement repris un script inutile dans mon cas. En effet, je connais déjà l’URL du flux en avance ; contrairement à un blog Dotclear qui propose par défaut plusieurs flux (billets, commentaires, catégories…).
Cet été, j’ai donc retiré le script et simplement renseigné l’attribut value
.
Externalisation des styles
En plus de nettoyer un peu les styles CSS1, j’ai tout externalisé dans une feuille de style dédiée.
Fichier
J’ai mis à disposition le fichier dans un Gist pour que vous puissiez les adapter à vos besoins en n’ayant pas à refaire toutes les modifications listées dans ce billet.
-
Il y aurait encore des choses à supprimer, mais j’ai décidé de laisser ce travail de côté puisqu’un jour je reverrai les styles de cette page. ↩︎
Contact
Vous souhaitez réagir ? N’hésitez pas à m’écrire à contact@luce.carevic.eu.