Retour aux projets numériques

Site des Bibliothèques Universitaires de Strasbourg

UX/UI design

Accessibilité

Ce projet est une refonte fictive du site des bibliothèques de Strasbourg afin de le rendre accessible selon les normes RGAA.

  • Date

  • Contexte

  • Secteur

  • 2026

  • Projet de Master

  • Culture

Page d'accueil du site

Une refonte accessible comme objectif principal

Le site actuel des Bibliothèques Universitaires de Strasbourg n'est pas accessible. Pourtant, 49 % des étudiants en France sont en situation de handicap (physique, moteur ou cognitif) selon une étude de 2017.

L'accessibilité ne concerne pas seulement les handicaps, mais aussi la langue, la taille des caractères et la difficulté du parcours sur le site.

Page d'accueil du site actuel
Page d'accueil de la refonte

Enquête auprès des utilisateurs pour définir les points de friction

Des profils variés utilisent le site. C'est, par exemple, le cas de :

⊹ Marco, étudiant en Erasmus qui ne parle pas français

⊹ Marie, étudiante en droit et aveugle de naissance

⊹ Amina, bibliothécaire portant des lunettes pour sa presbytie

Ces personas ont été réalisés à partir des données de notre enquête préalable.

Fiches des trois personas

Amélioration du parcours pour rechercher et emprunter un livre

⊹ Réalisation de tests utilisateurs pour déterminer les problèmes sur le parcours actuel

⊹ Amélioration de l'arborescence en conséquence pour accéder plus facilement aux informations

⊹ Conception des wireframes selon les informations que nous avons choisies pour les utilisateurs

Schéma de parcours utilisateur
Wireframe de la page de recherche

Une maquette annotée pour un développement respectant l'accessibilité RGAA

La maquette est accessible d'un point de vue du design, mais nécessite aussi une cohérence dans le code.

Pour faciliter le travail des développeurs, nous avons annoté la maquette en conséquence. La hiérarchie des titres H1, H2, etc., doit être respectée pour les lecteurs d'écran. Les "alt" doivent être indiqués ou bien signalés comme images décoratives, par exemple.

Interface avec annotations pour le développement
Interface avec annotations pour le développement
Mockup de la page de recherche de documents Mockup de la page de localisation du document
Revenir en haut