Date : 2024 – 2025
Sujet : Refonte du site web de l’UTBM (Université de Technologie Belfort-Montbéliard)
Projet Professionnel
Problématique :
Rendre accessible et attrayant le site web de l’UTBM. Pour l’instant, ce dernier a un design vieillissant et il contient trop de contenus qui ne sont pas utiles pour un site vitrine. L’enjeu est donc à la fois de rendre le design plus moderne mais aussi de réduire le nombre de contenus tout en prenant en compte les critères d’accessibilité du RGAA (Référentiel Général d’Amélioration de l’Accessibilité).
Date : 2024 – 2025
Sujet : Refonte du site web de l’UTBM (Université de Technologie Belfort-Montbéliard)
Projet Professionnel
Problématique :
Rendre accessible et attrayant le site web de l’UTBM. Pour l’instant, ce dernier a un design vieillissant et il contient trop de contenus qui ne sont pas utiles pour un site vitrine. L’enjeu est donc à la fois de rendre le design plus moderne mais aussi de réduire le nombre de contenus tout en prenant en compte les critères d’accessibilité du RGAA (Référentiel Général d’Amélioration de l’Accessibilité).
Je viens de terminer le travail de maquettage du site sur Figma. Cette phase a commencé par des wireframes, puis j’ai créé des maquettes de la page d’accueil avant de décliner l’esthétique finale sur deux autres pages. Enfin, j’ai prototypé le menu de navigation.
À présent, je dois transformer ce design en site fonctionnel. Pour ce faire, une copie du site actuel a été faite sur une autre URL afin de travailler sans risquer de rendre inaccessible ce qui est déjà en ligne.
Wireframes
Maquettes
Pour faciliter l’accès à l’information, j’ai travaillé sur une nouvelle arborescence. Pour ce faire, j’ai fait le choix d’écrire chaque item du menu existant dans un post-it sur Figma puis de les relier entre eux dans un diagramme en arbre. Cela me permet d’une part de mieux visualiser l’arborescence actuelle et d’autre part de pouvoir plus facilement changer de position et / ou de regrouper certains items afin de construire le nouveau menu.
Ancienne arborescence
Nouvelle arborescence
L’objectif principal de ce projet est de rendre accessible le nouveau site web en prenant en compte les critères du RGAA (Référentiel Général d’Amélioration de l’Accessibilité). Pour répondre à cette problématique, j’ai commencé par chercher un maximum d’informations sur l’accessibilité dans le web et sur la réglementation du RGAA. Une fois formé à ces sujets, j’ai décidé de commencer par faire un premier audit d’accessibilité sur le site web actuel en l’évaluant sur 50 des 106 critères du référentiel. Cela m’a permis de faire un constat des éléments à améliorer et de la façon dont je peux les rendre accessibles.
Le RGAA est une réglementation instaurée par le gouvernement qui oblige chaque service public et chaque entreprise à compter d’un seuil de chiffre d’affaires de 250 millions d’euros à rendre leur site web accessible à tout type d’utilisateur. Le site du gouvernement (https://accessibilite.numerique.gouv.fr/) permet de mieux comprendre cette réglementation, les obligations légales qui en découlent et la méthode technique permettant d’estimer le taux d’accessibilité d’un site web. Une liste de 106 critères d’accessibilité à évaluer et à prendre en compte lors de la création d’une nouvelle interface web est aussi mis à disposition. Ces critères sont définis à partir du WCAG 2 et on peut notamment y retrouver l’écriture de balises “alt” pertinentes sur chaque image, le taux de contraste minimal à respecter avec les couleurs, la compatibilité du site avec les technologies d’assistance, etc… Un outil d’audit est également mis à disposition, permettant ainsi d’auto-évaluer son site web et d’avoir une certification légale du taux d’accessibilité.
En parallèle de cet audit d’accessibilité, je suis en immersion toutes les deux semaines avec un groupe de personnes en situation de handicap afin de mieux me rendre compte des limites auxquels ils sont confrontés au quotidien. De plus, mon tuteur d’alternance est le directeur régional de l’association APF France Handicap ce qui me permet d’avoir une grande ouverture sur les sujets du handicap et de l’accessibilité.
Afin de gérer au mieux ce projet, j’ai mis en place différents outils de gestion de projet. Tout d’abord j’ai défini un cahier des charges regroupant les principaux objectifs de cette refonte de site web. Ensuite, j’ai mis en place un planning (GANTT) permettant de lister toutes les étapes du projet et le temps de travail estimé pour chacune. Enfin, j’ai créé un Power Point et une page Notion pour tenir compte de l’avancée de chacune des étapes et regrouper les informations essentielles.
1. Intégration du site
2. Tests utilisateurs
3. Audit final du site avec le RGAA