Ministère de l’Enseignement Supérieur, de la Recherche Scientifique

et des Technologies de l'Information et de la Communication

Université de Carthage

Faculté des Sciences Département

de Bizerte Informatique

Classe : GLSI2 A-U : 2021/2022

Matière : UX DESIGN Durée : 4.5 heures
Enseignants : R. MAHOUACHI

TD1 – Les IHM Web

Eléments de base et accessibilité

Partie 1 : HTML5, CSS3 et accessibilité

- Lisez le document initiation au langage HTML5 et CSS3

- Ouvrez la page template2.html (source : https://www.w3schools.com/w3css/tryw3css_templates_interior_design.htm)

1. Regroupez les styles de la page dans une même feuille de style

2. Enlevez la ligne <link rel="stylesheet"

href="https://fonts.googleapis.com/css?family=Poppins">, que remarquez-vous ? A quoi
sert cette ligne ?

3. Passez le curseur sur les images de la section Showcase, que remarquez-vous ?

Ajoutez la propriété CSS : cursor:pointer; pour changer la forme du curseur quand il pointe sur
les images (.w3-half img).

4. Passez le curseur sur le bouton « send message » et sur les éléments du menu. Que remarquez-
vous ?

Corrigez la forme du curseur pour la classe .w3-btn,.w3-button

5. Vous allez maintenant émuler une navigation avec le clavier, pour cela, cliquez sur l’url de la
page dans la barre d’adresse et naviguez en utilisant le bouton de tabulation. Que remarquez-
vous ?

Ajoutez la pseudo classe :focus (dans .w3-btn:hover). Recommencez la relecture par clavier.

6. Installez l’extension headingsMap sur votre navigateur (pour Chrome :

https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmb
i?hl=fr) et testez la sur les sites suivants :

• https://www.alsacreations.com/article/lire/1337-html5-elements-figure-et-
figcaption.html
• http://www.fsb.rnu.tn/

1
Que permet de faire cette extension ? Que pouvez-vous dire sur les deux exemples ?

Partie 2 : les couleurs

7. Examinez les couleurs utilisées dans la page. Utilisez les outils : Color Contrast Analyser (à
télécharger sur : https://developer.paciellogroup.com/resources/contrastanalyser/) et Contrast
Checker (https://contrastchecker.com/) pour cela.

Indication : Pour que les pages soient lisibles par tous, quel que soit le handicap visuel, la
méthode la plus simple à mettre en œuvre est l'emploi d'un contraste élevé entre l'arrière plan et
les couleurs utilisées pour le contenu de la page. Dans cet exemple on voit bien que C et E sont
plus facilement lisibles parce que le contraste est assez fort.

8. Aidez-vous par l’outil en ligne Tanaguru Contrast-Finder : https://contrast-

finder.tanaguru.com pour choisir d’autres couleurs.

9. Examinez l’adresse suivante : w3schools.com/w3css/tryw3css_templates_interior_design.htm

par l’outil en ligne Colorblind Web Page Filter (https://www.toptal.com/designers/colorfilter)

Changez le filtre à chaque fois pour examiner les différents rendus selon le type d’anomalie.

Partie 3 : Lecteurs d’écran et accessibilité des formulaires

Regardez les vidéos qui vous sont fournies sous format mp4:

- Comment les aveugles utilisent internet

(https://www.youtube.com/watch?v=DePdWynmd_Y)

2
- How Blind People Use YouTube & Twitter on the iPhone (avec sous-titres en français)
(https://www.youtube.com/watch?v=c0nvdiRdehw)

10. Installez l’extension : Screen Reader (https://chrome.google.com/webstore/detail/screen-

reader/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en-GB ) et utilisez la pour lire le contenu de la page
par l’ordinateur. (dans les options de l’extension sélectionnez : Voix > Google français)

11. Que remarquez-vous quand vous sélectionnez une image pour la lecture ? Comment
expliquez-vous cela ?

12. Rendez-vous dans la section Contact. Sélectionnez la phrase avant le formulaire puis naviguez
avec la touche tabulation tout en écoutant la lecture automatique. Comment sont lus les champs
de saisie de texte ? Corrigez ce problème.

13. Ajoutez les champs suivants au formulaire sachant que :

- Tous les champs sont obligatoires sauf l’adresse email et le code de promotion.

- Pour le code de promotion, utilisez le pattern suivant : pattern="[A-Za-z0-9]{6}"

- Enlevez w3-block dans :

<button type="submit" class="w3-button w3-block w3-padding-large w3-red w3-margin-

bottom">

14. Proposez des améliorations pour rendre le formulaire plus accessible.

Inspirez vous de la vidéo : Des formulaires accessibles - Accessible forms.mp4

(https://www.youtube.com/watch?v=itGwtZY3J-M)