Création de diaporamas accessibles: un guide complet

Les diaporamas sont répandus sur les sites Web organisationnels, mais souvent inaccessibles en raison des exigences d'accessibilité négligées. Les cadres de développement Web populaires comme Bootstrap et Foundation ne prennent pas en charge intrinsèquement les diaporamas accessibles, nécessitant des modifications substantielles. Cet article décrit les principaux principes d'accessibilité pour la création de diaporamas inclusifs. Un article ultérieur fournira des exemples de code pratiques.

Types de diaporamas communs (figures 1 et 2) manquent souvent de caractéristiques cruciales: capacités de pause et accessibilité du clavier. De nombreux conceptions ne parviennent pas à maintenir la mise au point du clavier lors de la navigation des diapositives.

Cinq principes principaux garantissent des diaporamas accessibles:

1. Contr?le de l'utilisateur sur le mouvement: WCAG 2.2.2 Mandate un mécanisme pour faire une pause, arrêter ou masquer automatiquement le contenu en déménagement de plus de cinq secondes. Un simple lien de pause / arrêt est efficace. évitez les transitions animées distrayantes dans la mesure du possible.

2. Contr?les visibles et accessibles: Les contr?les (arrêt, démarrage, navigation) doivent être:

   • clairement visible: assez grand, avec un contraste de couleur suffisant.
   • ACCESSIBLE via le clavier, la souris et le toucher: Les boutons ou les liens sont idéaux; évitez de compter uniquement sur tabindex.
   • Indication claire de mise au point / de survol: Changements visuels distincts sur la concentration, répondant aux exigences de contraste. Les changements de forme sont préférables aux changements de couleur seuls.

   Des exemples de commandes bien con?ues peuvent être trouvées sur des sites tels que AccessibilityOz (Figure 3 et 4) et Griffith University (figure 6), démontrant des boutons de pause clairs et des commandes de navigation pour le bureau et le mobile. L'Université Monash fournit un exemple de diaporama adapté aux mobiles sans mouvement automatique (figure 5).

3. Ordre de mise au point logique: L'ordre des onglets doit refléter la disposition visuelle et la structure HTML. Les contr?les (en particulier la pause) devraient précéder le contenu. Les changements de contenu ne doivent pas se produire avant l'élément de mise au point actuel.

4. Code et styles valides: Les diaporamas doivent fonctionner avec des feuilles de style désactivées, bien que la présentation puisse différer. évitez les décalages ou les chevauchements de contenu inattendus lorsque les feuilles de styles sont désactivées. Le texte doit évoluer avec les ajustements de taille de texte du navigateur; Les versions mobiles doivent prendre en charge le pincement-zoom.

5. Alternatives significatives: Fournir une alternative textuelle aux utilisateurs qui ne peuvent pas accéder au diaporama. Cela pourrait inclure une section "lecteur d'écran uniquement", répétant le contenu et les liens de diapositive, idéalement placés où le diaporama appara?t. Assurez-vous que cette alternative est équivalente au diaporama en termes d'informations fournies. Les images nécessitent des attributs alt appropriés.

Conclusion: Créer des diaporamas vraiment accessibles nécessite une attention particulière à ces principes. Le prochain article offrira des implémentations de code pratiques pour atteindre ces objectifs.

Questions fréquemment posées (FAQ) sur les diaporamas accessibles (Cette section reste largement inchangée à partir de l'entrée d'origine, car elle fournit des informations supplémentaires précieuses.)

Qu'est-ce qu'un diaporama accessible? Comment rendre mon diaporama accessible? Qu'est-ce que le texte alt et pourquoi est-il important? Comment ajouter des légendes à mon diaporama? Pourquoi la navigation au clavier est-elle importante? Comment puis-je rendre le langage de mon diaporama clair et simple? Qu'est-ce qu'une transcription et pourquoi est-ce important? Comment créer une transcription pour mon diaporama? Puis-je utiliser des outils automatisés pour rendre mon diaporama accessible? Quels sont les avantages de rendre mon diaporama accessible?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!