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.

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.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne