Podcaccessible
Pod-quoi ?
En 2020, j’ai créé un compte pour sensibiliser autour de la surdité, souligner des discriminations et aborder le manque d’accessibilité des medias, plus particulièrement les podcasts. Suite à diverses discussions aussi bien avec des personnes concernées que des créateur·ices de contenu, j’en suis venu à la conclusion qu’il fallait non seulement parler du manque d’accessibilité mais également visibiliser les initiatives existantes autour du podcast.
Ainsi est née l’idée de créer un listing. Au départ, ce site s’appelait sobrement “Les mal·entendus”, puis finalement, podcaccessible, mot-valise pour podcast et accessible.
Comment mettre en place ?
La première idée qui m’est venu est de faire une simple liste sur github, comme cette liste, mais je trouvais cela peu user-friendly.
Alors je me suis dit qu’il fallait que je profite de mes compétences pour construire mon site.
Un petit site web dynamique. Pas de base de données, c’est too much pour un petit listing. Un simple fichier JSON, ce serait parfait.
Voilà la première ébauche de ma structure JSON :
[
{
"title":"",
"subtitle":"",
"podcastDescription":"",
"authors": [""],
"accessDescription":"",
"warning":null,
"sources": [
{
"type":"", // possible value: podcast, youtube, site
"url":""
}
]
}
]
Le HTML devait alors refléter facilement cette structure :
<div class="podcast">
<h2>Title</h2>
<h3>Subtitle</h3>
<p>Podcast géré par ...<br>Vidéos en Closed-Captions.</p>
<a
type="button"
class="youtube"
data-message="Accéder à YouTube"
href="https://www.youtube.com/channel/UCnoZQdGz4JVva8bR7m3QZSg"
target="_blank">YouTube</a>
</div>
Step-by-step
Malheureusement, en 2021, j’avais peu de temps à consacrer à ce projet, alors j’ai construit un site web statique, avec des valeurs en dur, tout en gardant la structure HTML imaginée.
En 2022, Emmanuelle Aboaf est intervenue pour améliorer la structure et ajouter de nouveaux podcasts.
Je décide de revenir sur le développement du site en 2024. Dans un premier temps, je voulais juste améliorer le design pour qu’il soit plus accessible et plus joli.
Au menu:
- fil d’Ariane
- mode clair/sombre
- une page d’accueil plus visuelle sous forme de cartes
Pour ce dernier point, j’ai opté pour des images au format WebP, pour un gain de taille considérable, permettant à la fois un chargement rapide de la page mais également un impact écologique moindre.
Puis finalement, je me suis dit :
zut à la fin, allez, je me lance dans une refonte intégrale du site en Angular 17; si ce n’est pas maintenant ce ne sera jamais !
Cela me permit d’affiner ma structure JSON ainsi que la structure du projet, en appliquant du mieux que je pouvais les principes SOLID (et du Clean Code).
La migration consistait finalement à mettre en place le service pour récupérer les données définies dans le fichier json prévu à cet effet. Aucune modification complexe à mettre en place côté HTML et CSS, tout était déjà bien structuré. Juste quelques ajustements mais rien de bien folichon.
Extrait du fichier medias.json :
[
{
"title": "6foisdys",
"subtitle": null,
"mainDescription": null,
"informationMessage": null,
"authors": null,
"mediaType": "podcast",
"sources": [
{
"type": "youtube",
"url": "https://www.youtube.com/@6foisdys262",
"accessDescription": "Accéder à la chaîne 6foisdys sur YouTube"
},
{
"type": "link",
"url": "https://www.6foisdys.fr/transcription-posdcast1-confiance-en-soi-et-estime-de-soi.html",
"accessDescription": "Episode 1 - Confiance en soi et estime de soi avec Emmanuelle BRIOUDE, sophrologue à Orléans"
},
{
"type": "link",
"url": "https://www.6foisdys.fr/transcription-posdcast2-jeu-dechecs-et-troubles-dys.html",
"accessDescription": "Episode 2 - Jeu d'échecs et troubles DYS"
},
{
"type": "link",
"url": "https://www.6foisdys.fr/transcription-posdcast3-lacher-prise-entrepreneuriat.html",
"accessDescription": "Episode 3 - Comment j'ai lâcher prise pour avancer plus efficacement dans mes projets ?"
}
]
},
{
"title": "La Manie du Cinéma",
"subtitle": "Vulgarisation Ciné",
"mainDescription": "Et si je vous faisais découvrir les coulisses du monde du cinéma ? \nAnecdotes, petites et grandes histoires du 7ème Art, références cachées, faufilons-nous derrière le grand écran pour y déceler ses petits secrets.",
"authors": ["Mélanie Toubeau"],
"mediaType": "video",
"sources": [
{
"type": "youtube",
"url": "https://www.youtube.com/@lamanieducinema_",
"accessDescription": "Accéder à la chaîne La Manie du Cinéma sur YouTube"
}
]
},
// other medias
]
J’en ai profité également pour ajouter un formulaire de contact et des champs de recherche pour faciliter le parcours utilisateur. Il reste encore sans doute pléthore de modifications, de fonctionnalités et de contenu à ajouter.
Un grand merci encore à Emmanuelle pour son soutien mais aussi sa collaboration et ses correctifs, notamment concernant l’accessibilité numérique.