Guide d'utilisation Annuler

Fonctions d’accessibilité sous Dreamweaver

  1. Guide de l’utilisateur de Dreamweaver
  2. Introduction
    1. Principes de base du design web réactif
    2. Nouveautés de Dreamweaver
    3. Développement web avec Dreamweaver - Présentation
    4. Dreamweaver / Questions fréquentes
    5. Raccourcis clavier
    6. Configuration requise pour Dreamweaver
    7. Récapitulatif des nouvelles fonctionnalités
  3. Dreamweaver et Creative Cloud
    1. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    2. Bibliothèques Creative Cloud dans Dreamweaver
    3. Utilisation de fichiers Photoshop dans Dreamweaver
    4. Utilisation d’Adobe Animate avec Dreamweaver
    5. Extraction de fichiers SVG optimisés pour le web depuis des Bibliothèques
  4. Espaces de travail et affichages Dreamweaver
    1. Espace de travail de Dreamweaver
    2. Optimisation de l’espace de travail Dreamweaver pour la conception visuelle
    3. Recherche de fichiers sur la base de leur nom ou de leur contenu | Mac OS
  5. Configuration de sites
    1. À propos des sites Dreamweaver
    2. Création d’une version locale de votre site
    3. Connexion à un serveur de publication
    4. Configuration d’un serveur d’évaluation
    5. Importation et exportation des paramètres d’un site Dreamweaver
    6. Importation de sites web d’un serveur distant vers la racine de votre site local
    7. Fonctions d’accessibilité dans Dreamweaver
    8. Paramètres avancés
    9. Définition des préférences de site pour le transfert de fichiers
    10. Indication des paramètres du serveur proxy dans Dreamweaver
    11. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    12. Utilisation de Git dans Dreamweaver
  6. Gestion des fichiers
    1. Création et ouverture de fichiers
    2. Gestion des fichiers et des dossiers
    3. Acquisition et placement de fichiers depuis ou vers votre serveur
    4. Archivage et extraction de fichiers
    5. Synchronisation de fichiers
    6. Comparaison de fichiers pour analyse de leurs différences
    7. Masquage de fichiers et de dossiers dans votre site Dreamweaver
    8. Activation des notes de conception pour les sites Dreamweaver
    9. Prévention de l’exploitation potentielle de Gatekeeper
  7. Mise en page et design
    1. Utilisation d’assistances visuelles pour la mise en forme
    2. À propos de l’utilisation de CSS pour mise en forme de votre page
    3. Création de sites web en responsive design avec Bootstrap
    4. Création et utilisation des requêtes de multimédia dans Dreamweaver
    5. Présentation de contenus dans des tableaux
    6. Couleurs
    7. Design réactif à l’aide de mises en forme à grille fluide
    8. Extract dans Dreamweaver
  8. CSS
    1. Description des feuilles de style en cascade
    2. Mise en forme de pages avec CSS Designer
    3. Utilisation de préprocesseurs CSS dans Dreamweaver
    4. Comment définir les préférences de Style CSS dans Dreamweaver
    5. Déplacement des règles CSS dans Dreamweaver
    6. Conversion de code CSS intégré en règle CSS dans Dreamweaver
    7. Utilisation de balises div
    8. Application de dégradés à l’arrière-plan
    9. Permet de créer et modifier des effets de transition CSS3 dans Dreamweaver.
    10. Formatage du code
  9. Contenu de page et actifs
    1. Définition des propriétés de page
    2. Définition des propriétés d’en-tête CSS et des propriétés de lien CSS
    3. Utilisation du texte
    4. Recherche et remplacement de texte, de balises et d’attributs
    5. Panneau DOM
    6. Modification en mode En direct
    7. Le codage de documents dans Dreamweaver
    8. Sélection et affichage d’éléments dans la fenêtre de document
    9. Définition des propriétés de texte dans l’inspecteur Propriétés
    10. Vérification de l’orthographe d’une page web
    11. Utilisation de règles horizontales dans Dreamweaver
    12. Ajout et modification de combinaisons de polices dans Dreamweaver
    13. Utilisation d’actifs
    14. Insertion et mise à jour des dates dans Dreamweaver
    15. Création et gestion des actifs favoris dans Dreamweaver
    16. Insertion et modification d’images dans Dreamweaver
    17. Ajout d’objets multimédias
    18. Ajout de vidéos dans Dreamweaver
    19. Insertion de vidéo HTML5
    20. Insertion de fichiers SWF
    21. Ajout d’effets audio
    22. Insertion de fichiers audio HTML5 dans Dreamweaver
    23. Utilisation d’éléments de bibliothèque
    24. Utilisation de texte arabe et hébreu dans Dreamweaver
  10. Liens et navigation
    1. A propos des liens et de la navigation
    2. Etablissement de liens
    3. Cartes graphiques
    4. Résolution des problèmes de liens
  11. Effets et widgets jQuery
    1. Utilisation de widgets jQuery UI et Mobile dans Dreamweaver
    2. Utilisation d’effets jQuery dans Dreamweaver
  12. Codage de sites web
    1. À propos du codage dans Dreamweaver
    2. Environnement de codage dans Dreamweaver
    3. Définition des préférences de codage
    4. Personnalisation de la coloration du code
    5. Rédaction et modification de code
    6. Conseils et remplissage de code
    7. Réduction et développement de code
    8. Réutilisation de code à l’aide de fragments
    9. Analyse linting de code
    10. Optimisation du code
    11. Modification de code en mode Création.
    12. Utilisation de contenu d’en-tête pour les pages
    13. Insertion d’inclusions côté serveur dans Dreamweaver
    14. Utilisation des bibliothèques de balises dans Dreamweaver
    15. Importation de balises personnalisées dans Dreamweaver
    16. Utilisation de comportements JavaScript (instructions générales)
    17. Application de comportements JavaScript intégrés
    18. À propos de XML et de XSLT
    19. Exécution de transformations XSL côté serveur dans Dreamweaver
    20. Exécution de transformations XSL côté client dans Dreamweaver
    21. Ajout d’entités de caractère pour XSLT dans Dreamweaver
    22. Formatage du code
  13. Flux de travaux inter-produit
    1. Installation et utilisation des extensions pour Dreamweaver
    2. Mises à jour intégrées dans Dreamweaver
    3. Insertion de documents Microsoft Office dans Dreamweaver (Windows uniquement)
    4. Utilisation de Fireworks et Dreamweaver
    5. Édition de contenu sur des sites Dreamweaver à l’aide de Contribute
    6. Intégration entre Dreamweaver et Business Catalyst
    7. Création de campagnes de messagerie personnalisées
  14. Modèles
    1. À propos des modèles Dreamweaver
    2. Reconnaissance des modèles et des documents basés sur un modèle
    3. Création d’un modèle Dreamweaver
    4. Création de régions modifiables dans des modèles
    5. Création de régions et de tables modifiables dans Dreamweaver
    6. Utilisation de régions facultatives dans les modèles
    7. Définition d’attributs de balises modifiables dans Dreamweaver
    8. Comment créer des modèles imbriqués dans Dreamweaver
    9. Modification, mise à jour et suppression de modèles
    10. Exportation et importation de contenus xml dans Dreamweaver
    11. Application ou suppression d’un modèle depuis un document existant
    12. Modification de contenu dans les modèles de Dreamweaver
    13. Règles de syntaxe pour les balises de modèle dans Dreamweaver
    14. Définition des préférences de surbrillance pour des régions de modèle
    15. Avantages de l’utilisation de modèles dans Dreamweaver
  15. Terminaux mobiles et écrans multiples
    1. Création de requêtes multimédias
    2. Modification de l’orientation de la page pour les appareils mobiles
    3. Création d’applications web pour appareils mobiles à l’aide de Dreamweaver
  16. Sites dynamiques, pages et formulaires web
    1. En savoir plus sur les applications web
    2. Configuration de l’ordinateur pour le développement d’applications
    3. Résolution des problèmes de connexion aux bases de données
    4. Suppression des scripts de connexion dans Dreamweaver
    5. Conception de pages dynamiques
    6. Présentation des sources de contenu dynamique
    7. Définition de sources de contenu dynamique
    8. Ajout de contenus dynamiques aux pages
    9. Changement des contenus dynamiques dans Dreamweaver
    10. Affichage d’enregistrements d’une base de données
    11. Fourniture et dépannage de données en temps réel dans Dreamweaver
    12. Ajout de comportements de serveur personnalisés dans Dreamweaver
    13. Création de formulaires à l’aide de Dreamweaver
    14. Utilisation de formulaires pour la collecte des informations sur les utilisateurs
    15. Création et activations des formulaires ColdFusion dans Dreamweaver
    16. Création de formulaires web
    17. Prise en charge améliorée de HTML5 pour les éléments de formulaire
    18. Développement d’un formulaire à l’aide de Dreamweaver
  17. Création visuelle d’applications
    1. Création de pages principales et détaillées dans Dreamweaver
    2. Création de pages de recherche et de résultats
    3. Création d’une page d’insertion d’enregistrements
    4. Création de la mise à jour d’une page d’enregistrement dans Dreamweaver
    5. Création de pages de suppression d’enregistrement dans Dreamweaver
    6. Modification d’une base de données à l’aide des commandes ASP dans Dreamweaver
    7. Création d’une page d’enregistrement
    8. Création d’une page de connexion
    9. Création d’une page à accès restreint
    10. Sécurisation de dossiers dans ColdFusion à l’aide de Dreamweaver
    11. Utilisation de composants ColdFusion dans Dreamweaver
  18. Test, aperçu et publication de sites web
    1. Prévisualisation de pages
    2. Aperçu et inspection de pages web Dreamweaver sur plusieurs appareils
    3. Test de votre site Dreamweaver

 

Utilisez Dreamweaver pour rendre l’expérience utilisateur de vos sites web et vos produits web agréables pour les personnes vivant avec handicap visuel, auditif, moteur ou autre.

Remarque :

L’interface utilisateur a été simplifiée sous Dreamweaver CC et versions ultérieures. Par conséquent, il se peut que vous ne trouviez pas certaines options décrites dans cet article sous Dreamweaver CC et versions ultérieures. Pour plus d’informations, consultez cet article.

À propos du contenu accessible

L’accessibilité consiste à faire en sorte que les sites ou les produits web que vous créez puissent être utilisés par des personnes souffrant de handicaps visuels, auditifs, moteurs ou autres. Les fonctions d’accessibilité de produits logiciels et de sites web peuvent être : la prise en charge de lecteurs d’écran, des équivalents textuels pour les graphiques, des raccourcis clavier, des modifications dans les couleurs d’affichage pour augmenter le contraste, etc. Dreamweaver inclut des outils qui simplifient sa prise en main et permettent de créer un contenu accessible.

Pour les développeurs Dreamweaver souhaitant utiliser les fonctions d’accessibilité, l’application prend en charge des lecteurs d’écran, la navigation avec le clavier et les fonctions d’accessibilité de votre système d’exploitation.

Dreamweaver accompagne les designers web qui souhaitent créer des pages accessibles offrant des contenus adaptés aux lecteurs d’écran et conformes aux directives gouvernementales. Par exemple, des boîtes de dialogue vous invitent à entrer des attributs d’accessibilité, tels que l’équivalent texte d’une image, lorsque vous insérez des éléments de page. Ainsi, lorsque l’image s’affiche sur le système d’un utilisateur ayant des problèmes de vue, le lecteur d’écran lit la description.

Remarque :

Pour en savoir plus sur deux de ces importantes initiatives, consultez le site de la World Wide Web Consortium Web Accessibility Initiative (www.w3.org/wai) et la Section de la loi américaine Federal Rehabilitation Act (www.section508.gov).

Remarque :

Pour plus d’informations sur les consignes d’accessibilité de Japan Industry Standard, consultez la norme JIS X 8341-3 (www.jisc.go.jp).

Aucun outil de création web ne peut automatiser entièrement le processus de développement. Pour concevoir des sites web accessibles, vous devez comprendre les exigences liées à l’accessibilité et devez continuellement tenir compte lors de vos prises de décisions de la façon dont les personnes souffrant d’un handicap interagissent avec les pages web. La meilleure façon de s’assurer qu’un site web est accessible est de respecter toutes les procédures de préparation, de développement, de tests et d’évaluation.

Utilisation des lecteurs d’écran sous Dreamweaver

Un lecteur d’écran récite le texte qui s’affiche sur l’écran de l’ordinateur. Il lit aussi les informations non textuelles, telles que les étiquettes de boutons ou les descriptions d’images dans l’application, fournies dans les balises ou les attributs d’accessibilité lors de la création.

En tant que designer web utilisant Dreamweaver, vous pouvez utiliser un lecteur d’écran pour vous assister dans la création de vos pages web. Le lecteur d’écran commence sa lecture par le coin supérieur gauche de la fenêtre de document.

Dreamweaver prend en charge JAWS pour Windows, de Freedom Scientific (www.freedomscientific.com), et les lecteurs d’écran Window-Eyes de GW Micro (www.gwmicro.com).

Prise en charge des fonctions d’accessibilité du système d’exploitation

Dreamweaver prend en charge les fonctionnalités d’accessibilité des systèmes d’exploitation Windows et Macintosh. Par exemple, sur le Macintosh, définissez les préférences visuelles dans la boîte de dialogue Préférences d’accès universelles (Apple > Préférences système). Les paramètres sélectionnés sont alors repris par l’espace de travail de Dreamweaver.

Le paramètre de contraste élevé du système d’exploitation Windows est également pris en charge. Lorsque vous pouvez activer cette option à l’aide du Panneau de configuration de Windows, elle affecte Dreamweaver de la façon suivante :

  • Les boîtes de dialogue et les panneaux utilisent des paramètres de couleurs système. Par exemple, si vous choisissez un avant-plan blanc et arrière-plan noir, les boîtes de dialogue et les panneaux utiliserons du blanc en avant-plan et du noir en arrière-plan.

  • Le mode Code utilise les couleurs système des fenêtres et du texte de fenêtres. Par exemple, si vous avez fixé les couleurs système à Blanc sur Noir et que vous changez les couleurs de texte dans Édition > Préférences > Coloration du code, Dreamweaver ignore ces paramètres de couleur et affiche le texte de code avec du blanc comme couleur de premier plan et du noir en arrière-plan.

  • Le mode Création utilise les couleurs d’arrière-plan et de texte que vous avez définies dans Modifier > Propriétés de la page pour que les pages que vous créez aient un rendu des couleurs similaire à celui d’un navigateur.

Optimisation de l’espace de travail pour la conception de pages accessibles

Lorsque vous créez des pages accessibles, vous devez associer des informations aux objets présents sur les pages, telles que des étiquettes et des descriptions, pour rendre votre contenu accessible à tous les utilisateurs.

Pour ce faire, activez la boîte de dialogue Accessibilité de chaque objet. de cette façon, Dreamweaver vous invitera à entrer les informations d’accessibilité au moment de l’insertion des objets. Vous pouvez activer une boîte de dialogue pour n’importe quel objet de la catégorie Accessibilité dans les préférences.

  1. Cliquez sur Édition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
  2. Sélectionnez la catégorie Accessibilité dans la liste à gauche, sélectionnez un objet, définissez les options suivantes, puis cliquez sur OK.

    Affichage des attributs lors de l’insertion

    Sélectionnez les objets pour lesquels vous souhaitez activer les boîtes de dialogue d’accessibilité. Par exemple, les objets de formulaire, les cadres, les médias et les images.

    Laisser le focus sur le panneau

    Conserve le panneau à l’état actif afin qu’il soit disponible pour le lecteur d’écran. Si vous ne sélectionnez pas cette option, le focus demeure en mode Création ou Code lorsqu’un utilisateur ouvre un panneau.

    Restitution hors écran

    Sélectionnez cette option lorsque vous utilisez un lecteur d’écran.

    Remarque :

    Les attributs d’accessibilité apparaissent dans la boîte de dialogue Tableau lors de l’insertion d’un nouveau tableau.

Navigation sous Dreamweaver à l’aide du clavier

Vous pouvez utiliser le clavier pour parcourir les panneaux, les inspecteurs, les boîtes de dialogue, les cadres et les tableaux sans utiliser de souris.

Remarque :

L’utilisation de la touche de tabulation et des touches fléchées n’est prise en charge que sous Windows.

  1. Dans la fenêtre de document, appuyez sur Ctrl+F6 pour activer un panneau.

    Une ligne pointillée autour du titre du panneau indique que le panneau est actif. Le lecteur d’écran lit la barre de titre du panneau actif.

  2. Appuyez de nouveau sur Ctrl+F6 jusqu’à ce que le panneau dans lequel vous voulez travailler soit actif. Appuyez sur Ctrl+Maj+F6 pour activer le panneau précédent.
  3. Si le panneau dans lequel vous voulez travailler n’est pas ouvert, utilisez les raccourcis clavier indiqués dans le menu Fenêtre pour afficher le panneau approprié, puis appuyez sur Ctrl+F6.

    Si le panneau dans lequel vous voulez travailler est ouvert, mais affiché sous sa forme réduite, activez la barre de titre du panneau et appuyez sur la barre d’espace. Appuyez de nouveau sur la barre d’espace pour réduire le panneau.

  4. Appuyez sur la touche de tabulation pour passer d’une option à une autre dans le panneau.
  5. Utilisez les touches fléchées de façon appropriée :
    • Si une option comporte des choix, utilisez les touches fléchées pour faire défiler ces choix, puis appuyez sur la barre d’espace pour valider la sélection.

    • Si le groupe de panneaux comporte des onglets pour ouvrir d’autres panneaux, activez l’onglet ouvert puis utilisez la touche fléchée gauche ou droite pour ouvrir un autre onglet. Après avoir ouvert un nouvel onglet, appuyez sur la touche de tabulation pour faire défiler les options de ce panneau.

  1. Appuyez sur Ctrl+F3 pour afficher l’inspecteur Propriétés, s’il n’est pas visible.
  2. Appuyez sur Ctrl+F6 (Windows uniquement) jusqu’à ce que l’inspecteur Propriétés soit actif.
  3. Appuyez sur la touche de tabulation pour passer d’une option de l’inspecteur Propriétés à une autre.
  4. Utilisez les touches fléchées pour parcourir les différentes options.
  5. Appuyez sur Ctrl+Flèche vers le bas/Flèche vers le haut (Windows) ou sur Cmd+Flèche vers le bas/Flèche vers le haut (Macintosh) pour ouvrir ou fermer la section développée de l’inspecteur Propriétés, selon vos besoins. Alternativement, placez le focus sur la flèche de développement dans le coin inférieur droit puis appuyez sur la barre d’espace.
    Remarque :

    Pour pouvoir développer et réduire l’inspecteur Propriétés, le focus du clavier doit se trouver dans celui-ci, et pas sur le titre du panneau.

  1. Appuyez sur la touche de tabulation pour passer d’une option à une autre dans la boîte de dialogue.
  2. Utilisez les touches fléchées pour faire défiler les choix d’une option.
  3. Si la boîte de dialogue comporte une liste Catégorie, appuyez sur Ctrl+Tab (Windows) pour activer la liste Catégorie puis utilisez les touches fléchées pour vous déplacer vers le haut ou vers le bas dans la liste.
  4. Appuyez de nouveau sur Ctrl+Tab pour afficher les options d’une catégorie.
  5. Appuyez sur Entrée pour quitter la boîte de dialogue.
  1. Si votre document contient des cadres, vous pouvez utiliser les touches fléchées pour activer un cadre.

Sélection d’un cadre

  1. Appuyez sur Alt+Flèche vers le bas pour placer le point d’insertion dans la fenêtre de document.
  2. Appuyez sur Alt+Flèche vers le haut pour sélectionner le cadre actif.
  3. Continuez d’appuyer sur Alt+Flèche vers le haut pour activer le jeu de cadres, puis les jeux de cadres parents, s’il existe des jeux de cadres imbriqués.
  4. Appuyez sur Alt+Flèche vers le bas pour activer un jeu de cadres enfant ou un seul cadre dans un jeu de cadres.
  5. Lorsqu’un cadre est actif, appuyez sur Alt+Flèche gauche ou droite pour vous déplacer entre les cadres.
  1. Utilisez les touches fléchées ou appuyez sur la touche de tabulation pour vous déplacer vers d’autres cellules dans un tableau.
    Remarque :

    Si vous appuyez sur la touche de tabulation lorsque vous être dans la cellule la plus à droite, vous ajoutez une ligne au tableau.

  2. Pour sélectionner une cellule, appuyez sur Ctrl+A (Windows uniquement) lorsque le point d’insertion est dans la cellule.
  3. Pour sélectionner un tableau en entier, appuyez deux fois sur Ctrl+A (Windows) si le point d’insertion est dans une cellule ou une fois si une cellule est sélectionnée.
  4. Pour quitter le tableau, appuyez trois fois sur Ctrl+A (Windows) lorsque le point d’insertion est dans une cellule, deux fois si la cellule est sélectionnée ou une fois si le tableau est sélectionné, puis appuyez sur les touches Haut, Gauche ou Droite.
Logo Adobe

Accéder à votre compte