Le document aborde l'importance de l'utilisabilité et de l'accessibilité des applications web, en insistant sur la nécessité d'une navigation claire et d'un contenu organisé pour faciliter l'expérience utilisateur. Il présente également les lignes directrices WCAG 2.0 pour rendre le contenu web accessible aux personnes handicapées, en évoquant divers types de handicaps. Enfin, il souligne la responsabilité des développeurs de créer des pages web accessibles et utilisables tout en respectant des normes établies.

1. Utilisabilité et Accessibilité au Web

2. Utilisabilité Utilisabilite est l'étude de la facilité avec laquelle les gens peuvent utiliser un outil particulier ou tout autre objet par l'homme afin d'atteindre un objectif particulier Une application web doit fonctionner et doit être utilisable Il ya beaucoup de livres sur le sujet - nous avons que le temps de présenter quelques trucs

3. navigation sur le site Web Vous devez offrir de recherche + navigation Le contenu doit être placé dans une hiérarchie / classification L'utilisateur doit savoir où il se trouve dans le site Web L'utilisateur doit savoir comment il est arrive dans la page Navigation dans le contenu et dans les options du site

4. Conventions utilisées dans la navigation Where am I How we got here Site logo “ utilities” sections Simple search + instructions + options

5. Page d'accueil - ce qu'elle doit contenir Logo + tag line Sections/classification Recherche Teasing (des choses intéressantes qui peuvent être trouvées sur le site web) Du contenu dynamique [publicite] Raccourcis - des liens vers les pages les plus visitées [inscription]

6. Page d'accueil - objectifs Montre a l’utilisateur ce qu’il recherche Offre des alternatives (nous ne proposons pas seulement ce que l'utilisateur veut, mais aussi quelque chose de plus) Montre comment commencer à utiliser votre site web Montre crédibilité et confiance

7. logo tagline search navigation Dynamic content sections commercials Welcome What it offers teasing

8. Quels éléments pouvez-vous identifier

9. Accessibilité Web Content Accessibility Guidelines (WCAG) 2.0 définit la façon de rendre le contenu Web plus accessible aux personnes handicapées. L'accessibilité implique un large éventail de handicaps, y compris visuelles, auditives, physiques, de la parole, cognitif, langagier, l'apprentissage et des troubles neurologiques. Ces lignes directrices sont doivent rendre le contenu Web plus utilisable par les personnes âgées et, souvent, d'améliorer la utilisabilite pour les utilisateurs en général.

10. Introduction environ 160 millions de personnes ont une forme de handicap visuel Environ 40 millions de personnes sont aveugles Il existe des outils qui permettent aux personnes ayant une déficience visuelle à utiliser l'ordinateur et l'internet Il ya des gens souffrant d'autres handicaps que l'utilisation des différents types d'outils Il ya des gens souffrant d'autres handicaps qui l'utilise des différents types d'outils

11. Guides for accessible web sites Web Accessibility Initiative – Le groupe de travail W3C pour améliorer l'accessibilité du Web Web Content Accessibility Guidelines 1.0 – paru en 1999 - édité par le W3C Web Content Accessibility Guidelines 2 .0 – paru en 2008 Les instructions présentées dans ces guides sont regroupés selon les caractéristiques qui ils s'adressent, et chaque instruction a une priorité (niveau 1 ou A étant le plus important)

12. Objectif n ° 1: l'information et des éléments de l'interface doivent être perçus Tout le contenu non-texte doit avoir un texte alternatif Pour une image nous pouvons spécifier un texte alternatif qui décrit l'image (<img alt=&quot;description&quot;> ..) Si un son a une signification spécifique (c'est à dire qu'il annonce qu'une erreur s'est produite), il doit être accompagné d'un texte expliquant. Les objets multimédia (audio-vidéo) devrait être associé à des textes qui expliquent le contenu

13. Examples Image with an associated explanation Video with explanations

14. Objectif n ° 1: l'information et des éléments de l'interface doivent être perçus Le contenu de la page devrait maintenir l'importance lors du changement de présentation Comprendre les relations entre les éléments du contenu de ces liens par des éléments graphiques S'assurer que le texte de la page est lue dans un ordre correct Les instructions sur comment faire fonctionner une page ne doit pas être fondée exclusivement sur des symboles graphiques ex: les flèches qui marquent la page suivante sont expliqués avec le texte

15. Examples Le * ne signifie pas pour tout le monde que les champs sont obligatoires <img src=&quot;../graphics/fback.gif&quot; alt=&quot;Previous chapter&quot; border=&quot;0&quot;> Utilisez &quot;tabindex&quot; pour spécifier l'ordre dans lequel les éléments d'une page doit être « lu »

17. Objectif n ° 1: l'information et des éléments de l'interface doivent être perçus Le contenu doit être facile à comprendre par la séparation du premier plan à l'arrière-plan La couleur ne doit pas être le seul moyen par lequel une information est offerte. Il devrait y avoir un moyen d'arrêter le son en arrière-plan d'une page afin de ne pas chevaucher le son de l'écran-lecteur

18. Examples test pour identifier la perception correcte des couleurs L'utilisation de couleurs pour les messages d'erreur doivent être expliqué

19. Objectif n °. 2: Les composants de la page doit être facile a actionner Toutes les fonctionnalités devraient être accessibles à partir du clavier Si pour la navigation de page sont mis en oeuvre des caractéristiques non-standard (autre que Tab et les flèches), l'utilisateur doit être averti L'utilisateur doit avoir suffisamment de temps pour lire le contenu de la page Il devrait être en mesure d'arrêter ou de régler une minuterie éventuelle Dans une page, il ne devrait pas être clignote (flashes) car ils peuvent provoquer des convulsions ( see . http://www.w3.org/TR/2007/WD-WCAG20-20071211/#general-thresholddef )

20. Examples Flash peut être mis en œuvre en utilisant le <blink> ou comme des objets Flash ou GIF, ... Les menus flash ne peuvent généralement pas être contrôlée en utilisant uniquement le clavier Certains sites Web pour e-banking permet très courtes sessions de travail dans lequel les utilisateurs ayant un handicap ne peut pas finir à «lire» l'information (ex: www.brdoffice.ro) (ex: www.brdoffice.ro )

21. Objectif n °. 2: Les composants de la page doit pouvoir être actionnés Les utilisateurs doivent être autorisés à sauter par-dessus le texte que de le répéter à chaque page Les pages doivent avoir des titres explicites Les composants d'une page doit obtenir focus dans un ordre intelligible

22. Examples How to avoid a repeating component titres explicites Précisez la section Ne pas utiliser le même titre pour chaque page tabindex permet de spécifier l'ordre de navigation

23. Objectif n °. 3 L'interface et le contenu de la page doivent être compréhensibles Les utilisateurs devraient être permis d'éviter ou de corriger les erreurs dans l'utilisation de l'interface Utilisez des étiquettes ou des instructions quand vous avez besoin de données de l'utilisateur

24. Examples Éviter / corriger les erreurs Eviter et corriger les erreurs Correction des erreurs (incomplète) Les étiquettes et les instructions - le format correct des données d'entrée

25. Conclusions Lorsque nous développons une page web, nous devons prendre soin non seulement sur que la page fonctionne correctement, mais aussi sur la Utilisabilité Accessibilité Pensez quelles personnes sont plus susceptibles d'utiliser votre page web Connaître les normes et recommandations existantes

26. References Web Content Accessibility Guidelines 2.0 – W3C working draft Accessible Web Design Examples Web Content Accessibility Guidelines 1.0 See the links inside the presentation

27. A propos de l'examen 75 minutes Vous avez la possibilite de venir avec 1 A4 qui peut contenir seulement des descriptions des éléments HTML ou CSS ou des proprietes des objets Javascript La page A4 ne doit pas contenir des exemples complets de code Vous ne serez pas autorisé à échanger ces pages lors de l'examen

28. A propos de l'examen Si votre page de documentation n'est pas selon les règles ci-dessus, il sera confisqué, sans droit de le remplacer L'examen consistera en 3-5 questions théoriques (max 5 lignes pour la réponse) des questions pratiques Mettre en œuvre une fonctionnalité décrite dans une image Valider certaines entrées dans un formulaire Comment est affiché un élément HTML étant donné une entrée CSS

29. About the exam The exam does not repeat this session If you fail you will have to take it again in september Any attempt of cheating will be severely punished (automatically failing the subject+ proposal of expulsion from the faculty) In order to pass you need to score at least 50% of the exam points