+---
+
+This [Web Accessibility Perspectives]({% link _perspective-videos/index.md %}) resource was developed by the [Education Outreach Working Group (EOWG)](https://www.w3.org/WAI/EO/) with support from the [WAI-DEV project](https://www.w3.org/WAI/DEV/), co-funded by the European Commission. Updated with support from the Ford Foundation.
+
+Project Leadership
+------------------
+
+- **Editor and Project Lead:** [Shadi
+ Abou-Zahra](https://www.w3.org/People/shadi), W3C WAI
+- **Task Force Participants:**
+ - [Shadi Abou-Zahra](https://www.w3.org/People/shadi), W3C WAI
+ - Brent Bakken, Pearson
+ - Adina Halter, Comcast
+- **EOWG Co-Chairs:**
+ - Sharron Rush, Knowbility
+ - Brent Bakken, Pearson
+- **EOWG Staff Contact:** [Shawn Lawton
+ Henry](https://www.w3.org/People/shawn), W3C WAI
+
+Major Contributors
+------------------
+
+- Adina Halter, Comcast
+- [Kevin White](https://www.w3.org/People/kevin), W3C WAI
+- [Shawn Lawton Henry](https://www.w3.org/People/shawn), W3C WAI
+- [Eric Eggert](https://www.w3.org/People/yatil), W3C WAI
+- Sally Cain, RNIB
+
+Contributing EOWG Participants
+------------------------------
+
+- Andrew Arch
+- Anna Belle Leiserson
+- Brent Bakken
+- Caleb Watson
+- David Berman
+- Eric Eggert
+- Kevin White
+- George Heake
+- Howard Kramer
+- James Green
+- Judy Brewer
+- Laura Keen
+- Lydia Harkey
+- Paul Schantz
+- Shadi Abou-Zahra
+- Sharron Rush
+- Shawn Lawton Henry
+- Susan Hewitt
+- Sylvie Duchateau
+- Victoria Menezes Miller
+- Wayne Dick
+
+Special Thanks
+--------------
+
+- Alan Benson
+- Artur Ortega
+- Christiane Link
+- Faezeh Seyedarabi
+- Jeff Harvey
+- Mercer HappyGuidedog
+- Peter Janecek
+- Sarah Bailey
+
+Many thanks also to Claudia Lee, Rachel Siegel, and George Parkes.
diff --git a/collections/_perspective-videos/captions.fr.md b/collections/_perspective-videos/captions.fr.md
new file mode 100644
index 00000000000..bcb303a794d
--- /dev/null
+++ b/collections/_perspective-videos/captions.fr.md
@@ -0,0 +1,151 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after #.
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:".
+
+title: "Les sous-titres de vidéo"
+nav_title: "Sous-titres de vidéo"
+lang: fr
+last_updated: 2023-10-12 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 6
+
+translators:
+- name: "Sofia Ahmed"
+- name: "Rémi Bétin"
+contributors:
+- name: "Sandra Velarde Gonzalez (ETNIC)"
+
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/captions/fr # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/captions/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Courte vidéo à propos des sous-titres de vidéos pour l’accessibilité Web - de quoi s’agit-il, qui en bénéficie, comment ils aident chacun, et comment mettre cela en pratique.
+image: /content-images/perspective-videos/captions.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below, including "Date:" and "Editor and project lead:"
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
Statut : Mise à jour : 23 janvier 2019.
+
Rédacteur et chef du projet : Shadi Abou-Zahra. ACKNOWLEDGEMENTS liste les contributions.
+
+---
+
+L’accessibilité Web est essentielle pour les personnes en situation de handicap et utile à tous. Découvrez les effets de l’accessibilité et les bénéfices pour tous dans diverses situations.
+
+## Vidéo sur les sous-titres de vidéo
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="captions"
+ yt-id="iWO5N3n1DXU"
+ yt-id-ad="4qIordU8vT8"
+%}
+
+Les informations de cette vidéo sont disponibles sous forme de [Transcription avec description des visuels](#transcript) en bas de la page.
+
+Qu’est-ce que des « sous-titres de vidéo » ? {#what}
+-------------------------
+
+Les sous-titres sont une version texte des informations audio d’une vidéo ou animation.
+Cela inclut les mots prononcés, l’identification de qui parle lorsque ce n’est pas clair, et les sons importants comme la musique, les rires et les bruits. Les sous-titres doivent être synchronisés avec le contenu visuel pour les contextualiser.
+
+Qui dépend de cette fonctionnalité ? {#who}
+----------------------------
+
+- Les personnes sourdes qui ne peuvent pas entendre l’audio.
+- Les personnes malentendantes qui ne peuvent pas entendre certaines parties du contenu.
+- Les personnes avec des troubles cognitifs et d’apprentissage qui ont besoin de voir et d’entendre le contenu pour mieux le comprendre.
+
+Quels sont les autres bénéfices ? {#others}
+---------------------------------
+
+- Le contenu peut être utilisé dans des environnements bruyants où il n’est pas possible d’entendre l’audio.
+- Le contenu peut être utilisé dans des environnements calmes où il n’est pas possible de mettre le son.
+- Le contenu peut être mieux compris par des personnes qui, à la fois, écoutent et regardent l’information ; par exemple, des personnes qui maîtrisent moins la langue parlée.
+- Le contenu peut être lu plutôt que visionné, ce qui est plus simple et plus rapide pour certaines personnes.
+- Le contenu sous forme de texte, tel que les sous-titres et les transcriptions, peut être mieux indexé par les moteurs de recherche.
+- Le contenu peut être utilisé sans nécessité de télécharger des fichiers vidéo ; par exemple, pour économiser des données mobiles.
+
+Comment mettre cela en pratique ? {#action}
+--------------------------------------
+
+Les sous-titres doivent être disponibles à la fois pour les vidéos pré-enregistrées, et pour les vidéos en direct. Un logiciel de reconnaissance vocale peut aider à créer des sous-titres pour certains types de vidéos. Parfois, de tels logiciels de reconnaissance vocale sont intégrés à l’ordinateur ou au réseau social. Les sous-titres générés automatiquement nécessitent souvent une post-édition. Pour de nombreuses langues, il existe des services de sous-titrage, qui peuvent souvent être réalisés à distance.
+
+Plus d’informations {#resources}
+----------
+
+- **Principes d’accessibilité :**
+ - [Sous-titres et autres alternatives pour le multimédia](/fundamentals/accessibility-principles/#captions)
+- **Pour démarrer :**
+ - [Créez des transcriptions et des sous-titres pour les contenus multimédias](/tips/writing/#create-transcripts-and-captions-for-multimedia)
+- **Vérification simple :**
+ - [Équivalents des contenus multimédia (vidéo, audio)](/test-evaluate/preliminary/#media)
+- **Témoignage d’utilisateur :**
+ - [Martine, étudiante en ligne, malentendante](/people-use-web/user-stories/#onlinestudent)
+- **Règles pour l’accessibilité des contenus Web ([Vue d’ensemble des WCAG](/standards-guidelines/wcag/)) :**
+ - [Critères de succès relatifs aux « sous-titres »](https://www.w3.org/WAI/WCAG21/quickref/?tags=captions)
+- **Applicabilité mobile :**
+ - [Contenu multimédia sans sous-titres](https://www.w3.org/WAI/mobile/experiences.html#multimedia)
+
+## Transcription avec audiodescription {#transcript}
+
+
+
+
+
Audio
+
Visuel
+
+
+
+
+
L’accessibilité Web illustrée : Sous-titres de vidéo
+
L’accessibilité Web illustrée : Sous-titres de vidéo
+
+
+
Une vidéo ne se résume pas à des images, le son est également impliqué. Sans l’audio, vous devriez deviner de quoi parle cette vidéo.
+
Un homme assis à son bureau commence à regarder une vidéo sur son ordinateur.
+
+
+
[aucun son]
+
La vidéo sur son ordinateur montre une personne qui parle à la caméra. Il n’y a pas d’audio.
+
+
+
Frustrant, n’est-ce pas ? De ne pas savoir ce qu’il se passe. C’est la situation que vivent toutes les personnes qui n’entendent pas.
+
L’homme qui regarde la vidéo a un appareil auditif.
+
+
+
Les sous-titres rendent les vidéos accessibles.
+
Il active les sous-titres de la vidéo.
+
+
+
C’est aussi pratique pour les personnes qui veulent regarder des vidéos dans un environnement bruyant.
+
Un autre homme regarde une vidéo sous-titrée avec un groupe de personnes en pleine discussion à côté de lui.
+
+
+
Ou là où il faut rester très, très silencieux.
+
Ils sont en fait dans une bibliothèque. La bibliothécaire fait signe au groupe de se taire.
+
+
+
L’accessibilité Web : essentielle pour certains, utile à tous.
+
La vidéo est à présent montrée avec des sous-titres.
+
+
+
Allez sur w3.org/WAI/perspectives pour plus d’informations concernant Sous-titres de vidéo
+
Allez sur
+ w3.org/WAI/perspectives
+ pour plus d’information concernant
+ Sous-titres de vidéo.
+ Logo de l’Initiative pour l’accessibilité du Web du W3C
+
+
+
diff --git a/collections/_perspective-videos/captions.md b/collections/_perspective-videos/captions.md
new file mode 100644
index 00000000000..7eef2944493
--- /dev/null
+++ b/collections/_perspective-videos/captions.md
@@ -0,0 +1,150 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after #.
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:".
+
+title: "Video Captions"
+nav_title: "Video Captions"
+lang: en # Change "en" to the translated-language shortcode
+last_updated: 2019-01-23 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 6
+
+# translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
+# - name: "Jan Doe" # Replace Jan Doe with translator name
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
+# contributors:
+# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/captions/ # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/captions/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Short video about captions for web accessibility - what are they, who depends on them, how they help everyone, and what needs to happen to make them work.
+image: /content-images/perspective-videos/captions.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below, including "Date:" and "Editor and project lead:"
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
Date: Updated 23 January 2019.
+
Editor and project lead:Shadi Abou-Zahra. ACKNOWLEDGEMENTS lists contributors.
+
Developed by the Accessibility Education and Outreach Working Group (EOWG). Developed as part of the WAI-DEV project, co-funded by the European Commission. Updated as part of the WAI Expanding Access Project, supported by the Ford Foundation.
+---
+
+Web accessibility is essential for people with disabilities and useful for all. Learn about the impact of accessibility and the benefits for everyone in a variety of situations.
+
+## Video on Video Captions
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="captions"
+ yt-id="iWO5N3n1DXU"
+ yt-id-ad="4qIordU8vT8"
+%}
+
+This video information is available as a [Text Transcript with Description of Visuals](#transcript) below.
+
+What is "Video Captions"? {#what}
+-------------------------
+
+Captions are a text form of audio information in video and animations. This includes the words that are spoken, who is speaking when it is not evident, and important sounds like music, laughter, and noises. Captions must be synchronized with the visual content to contextualize them.
+
+Who depends on this feature? {#who}
+----------------------------
+
+- People who are deaf and cannot hear the audio.
+- People who are hard of hearing and cannot hear some of the content.
+- People with cognitive and learning disabilities who need to see and hear the content to better understand it.
+
+What are the additional benefits? {#others}
+---------------------------------
+
+- Content can be used in loud environments where you cannot hear the audio.
+- Content can be used in silent environments where you cannot turn on sound.
+- Content can be better understood by people hearing and seeing the information, for example, people who are less fluent in the language spoken.
+- Content can be read rather than watched, which is easier and quicker for some people.
+- Content in text form, such as caption files and transcripts, can be better indexed by search engines.
+- Content can be used without needing to download video files, for example, to save data on mobile.
+
+What needs to happen for this to work? {#action}
+--------------------------------------
+
+Captions must be made available with pre-recorded and live video content. Voice recognition software can help create captions for some type of videos. Sometimes such voice recognition software is built into the computer or social media platform. Automatically-generated captions often need editing. For many languages there are captioning services, often also remote services.
+
+Learn more {#resources}
+----------
+
+- **Accessibility Principle:**
+ - [Captions and other alternatives for multimedia](/fundamentals/accessibility-principles/#captions)
+- **Getting Started:**
+ - [Create transcripts and captions for multimedia](/tips/writing/#create-transcripts-and-captions-for-multimedia)
+- **Easy Check:**
+ - [Multimedia (video, audio) alternatives](/test-evaluate/preliminary/#media)
+- **User Story:**
+ - [Martine, online student who is hard of hearing](/people-use-web/user-stories/#onlinestudent)
+- **Web Content Accessibility Guidelines ([WCAG Overview](/standards-guidelines/wcag/)):**
+ - [Success Criteria relating to "captions"](https://www.w3.org/WAI/WCAG21/quickref/?tags=captions)
+- **Mobile Applicability:**
+ - [Multimedia with no captions](https://www.w3.org/WAI/mobile/experiences.html#multimedia)
+
+## Text Transcript with Description of Visuals {#transcript}
+
+
+
+
+
Audio
+
Visual
+
+
+
+
+
Web Accessibility Perspectives: Video Captions
+
Web Accessibility Perspectives: Video Captions
+
+
+
Video isn't just about pictures, it's also about sound. Without the audio, you would have to guess what this film is about.
+
A man sat at a desk starts watching a video on his computer.
+
+
+
[no sound]
+
The video on his computer shows a person speaking to the camera. It is playing with no audio.
+
+
+
Frustrating isn't it? Not knowing what's going on. That's the situation for everyone who can't hear.
+
The man watching the video has a hearing aid.
+
+
+
Captions make videos accessible.
+
He turns on captions for the video playing.
+
+
+
Which is also handy for people who want to watch video in loud environments.
+
Another man is watching the captioned video with a group of people chatting away next to him.
+
+
+
Or where you need to be very, very quiet.
+
Turns out that they are in a library. The group is shushed by the librarian.
+
+
+
Web accessibility: Essential for some, useful for all.
+
The video is shown playing with the captions on.
+
+
+
Visit w3.org/WAI/perspectives for more information on Video Captions
+
Visit
+ w3.org/WAI/perspectives
+ for more information on
+ Video Captions.
+ W3C Web Accessibility Initiative logo
+
+
+
diff --git a/collections/_perspective-videos/changelog.md b/collections/_perspective-videos/changelog.md
new file mode 100644
index 00000000000..b9f25d4f18d
--- /dev/null
+++ b/collections/_perspective-videos/changelog.md
@@ -0,0 +1,41 @@
+---
+# Do not translate Changelog
+title: Changelog for Web Accessibility Perspectives Videos
+title_html: Changelog for Web Accessibility Perspectives Videos
+lang: en
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/changelog/
+ref: /perspective-videos/changelog/
+
+nosidenav: true
+image: /content-images/perspective-videos/overview.jpg
+---
+
+**_Pending updates:_ frontmatter for translations.**
+
+## June 2023
+
+* Added link to compilation on W3C server
+
+## April 2021
+
+* Changed "Voice Recognition" to "Speech Recognition" throughout [sub-page](https://www.w3.org/WAI/perspective-videos/voice/) and on main page. **[diff of April 2021 changes](https://github.com/w3c/wai-perspective-videos/pull/41/files)**
+
+## 2 February 2021
+
+* To first page (index.md)
+ * added "Videos" to title
+ * added to frontmatter:
+ ```
+ title_html: "Web Accessibility Perspectives Videos: Explore the Impact and Benefits for Everyone"
+ ```
+ * added CHANGELOG in footer
+ * added to frontmatter:
+ ```
+ changelog: /perspective-videos/changelog/
+ ```
+* To Acknowledgements page, added "Videos" to title
+* [Videos diff](https://github.com/w3c/wai-perspective-videos/pull/39/files), [changelog diff](https://github.com/w3c/wai-perspective-videos/pull/40/files)
diff --git a/collections/_perspective-videos/contrast.fr.md b/collections/_perspective-videos/contrast.fr.md
new file mode 100644
index 00000000000..19196c75cb6
--- /dev/null
+++ b/collections/_perspective-videos/contrast.fr.md
@@ -0,0 +1,148 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:".
+
+title: Des couleurs bien contrastées
+nav_title: Couleurs bien contrastées
+lang: fr
+last_updated: 2023-10-12 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+
+translators:
+- name: "Sofia Ahmed"
+- name: "Rémi Bétin"
+contributors:
+- name : "Sandra Velarde Gonzalez (ETNIC)"
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/contrast/fr # Add the language shortcode to the end, with no / at the end. For example /standards-guidelines/fr
+ref: /perspective-videos/contrast/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+order: 2
+description: Courte vidéo à propos des couleurs bien contrastées pour l’accessibilité Web – de quoi s’agit-il, qui en bénéficie, et comment mettre cela en pratique.
+image: /content-images/perspective-videos/contrast.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below, including "Date:" and "Editor:"
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
Statut : Mise à jour : 29 novembre 2021.
+ Rédacteur et chef du projet :Shadi Abou-Zahra. Développé par le Groupe de travail Éducation et Promotion avec le soutien du projet WAI-DEV, co-financé par la Commission européenne. Mis à jour avec le soutien de la Fondation Ford. ACKNOWLEDGEMENTS.
+---
+
+L’accessibilité Web est essentielle pour les personnes en situation de handicap et utile à tous. Découvrez les effets de l’accessibilité et les bénéfices pour tous dans diverses situations.
+
+## Vidéo sur des couleurs bien contrastées
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="contrast"
+ yt-id="Hui87z2Vx8o"
+ yt-id-ad="a9kNUv6N8Rk"
+%}
+
+Les informations de cette vidéo sont disponibles sous forme de [Transcription avec description des visuels](#transcript) en bas de la page.
+
+## Que signifie des « couleurs bien contrastées » ?
+{:#what}
+
+Les couleurs utilisées doivent avoir un contraste suffisant (appelé techniquement rapport de contraste de luminance), par exemple entre la couleur du texte et la couleur d’arrière-plan. Cela inclut le texte sur des images, des icônes, et des boutons. Les couleurs utilisées pour communiquer des informations sur les diagrammes, les cartes, et d’autres types d’images doivent également être perceptibles.
+
+## Qui dépend de cette fonctionnalité ?
+{:#who}
+
+- Les personnes avec une faible sensibilité au contraste, ce qui est courant chez les personnes âgées.
+- Les personnes qui ne peuvent pas distinguer certaines couleurs (souvent appelé « daltonisme »).
+
+## Quels sont les autres bénéfices ?
+{:#others}
+
+- Le contenu est utilisable dans différentes conditions de luminosité, comme l’exposition à la lumière du soleil ou à une lumière éblouissante.
+- Le contenu est plus facile à lire pour tout le monde, y compris pour ceux qui n’ont pas de problèmes visuels particuliers.
+
+## Comment mettre cela en pratique ?
+{:#action}
+
+Choisissez des couleurs de texte et d’arrière-plan qui fournissent suffisamment de contraste. Des outils existent pour vous aider à vérifier et sélectionner des combinaisons de couleurs adéquates. On réalise idéalement cette action tôt dans la phase de conception et de choix des palettes de couleurs. Si certaines personnes ont besoin d’un contraste élevé, d’autres sont sensibles à la luminosité et ont besoin de [modifier les couleurs](/perspective-videos/customizable/).
+
+## Plus d’informations
+{:#resources}
+
+- **Principe d’accessibilité :**
+ - [Du contenu plus facile à voir et à entendre](/fundamentals/accessibility-principles/#distinguishable)
+- **Pour démarrer :**
+ - [Fournissez un contraste suffisant entre le premier plan et l’arrière-plan](/tips/designing/#provide-sufficient-contrast-between-foreground-and-background)
+- **Vérification simple :**
+ - [Rapport de contraste ("contraste des couleurs")](/test-evaluate/preliminary/#contrast)
+- **Témoignages d’utilisateurs :**
+ - [Lee, client de site Web marchand qui ne peut pas distinguer certaines couleurs (daltonisme)](/people-use-web/user-stories/#shopper)
+ - [Yun, retraité avec une mauvaise vue, un tremblement des mains, et une perte de mémoire à court terme](/people-use-web/user-stories/#retiree)
+- **Besoins des utilisateurs :**
+ - [Exigences d’accessibilité pour les personnes malvoyantes](https://www.w3.org/TR/low-vision-needs/)
+- **Règles pour l’accessibilité des contenus Web ([Vue d’ensemble des WCAG](/standards-guidelines/wcag/)) :**
+ - [Critères de succès liés au "contraste"](https://www.w3.org/WAI/WCAG21/quickref/?tags=contrast)
+- **Applicabilité aux appareils mobiles :**
+ - [Informations transmises seulement par la couleur](/standards-guidelines/shared-experiences/#color)
+
+## Transcription avec description des visuels {#transcript}
+
+
+
+
+
Audio
+
Visuel
+
+
+
+
+
L’accessibilité Web illustrée : des couleurs bien contrastées
+
L’accessibilité Web illustrée : des couleurs bien contrastées
+
+
+
Un bon design passe pratiquement inaperçu.
+
Des panneaux directionnels sont affichés. Une jeune femme marche gaiement dans la rue.
+
+
+
Mais il en faut peu pour rendre les choses confuses et frustrantes.
+
Les panneaux changent et ont désormais un contraste insuffisant. La jeune femme semble perdue.
+
+
+
Choisir des couleurs peu contrastées rend la navigation, la lecture et l’interaction très pénibles.
+
Elle regarde une application de navigation sur son téléphone mobile.
+
+
+
Un bon design implique un contraste suffisant entre les couleurs au premier plan et à l’arrière-plan. Cela ne concerne pas que le texte et les images, mais aussi les liens, les icônes, et les boutons.
+
L’application montre un bouton avec un mauvais contraste, qui se transforme peu à peu pour devenir lisible.
+
+
+
Toute chose suffisamment importante pour être vue doit apparaître clairement.
+ C’est essentiel pour les personnes avec une faible sensibilité au contraste,
+ qui devient courante avec l’âge.
+
Un homme âgé est assis sur un canapé et regarde une tablette. Il se lève pour aller lire un message sur son téléphone mobile.
+
+
+
Avec des couleurs bien choisies, l’utilisation des sites Web et des applications peut être facilitée dans plus de situations. Par exemple, dans différentes conditions de luminosité.
+
Le soleil se reflète sur l’écran du téléphone, mais le texte reste lisible.
+
+
+
L’accessibilité Web : essentielle pour certains, utile à tous.
+
+
+
+
Visitez w3.org/WAI/perspectives pour plus d’informations concernant Des couleurs bien contrastées
+
Visitez
+ w3.org/WAI/perspectives
+ pour plus d’informations concernant
+ Des couleurs bien contrastées.
+ Logo de l’Initiative pour l’accessibilité du Web de W3C
+
+
+
diff --git a/collections/_perspective-videos/contrast.md b/collections/_perspective-videos/contrast.md
new file mode 100644
index 00000000000..22819003af5
--- /dev/null
+++ b/collections/_perspective-videos/contrast.md
@@ -0,0 +1,150 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "Colors with Good Contrast"
+nav_title: "Colors with Good Contrast"
+lang: en # Change "en" to the translated-language shortcode
+last_updated: 2024-07-15 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 2
+
+# translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
+# - name: "Jan Doe" # Replace Jan Doe with translator name
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
+# contributors:
+# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
+
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/contrast/ # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/contrast/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Short video about colors with good contrast for web accessibility - what is it, who depends on it, and what needs to happen to make it work.
+image: /content-images/perspective-videos/contrast.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
+---
+
+Web accessibility is essential for people with disabilities and useful for all. Learn about the impact of accessibility and the benefits for everyone in a variety of situations.
+
+## Video on Colors with Good Contrast
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="contrast"
+ yt-id="Hui87z2Vx8o"
+ yt-id-ad="a9kNUv6N8Rk"
+%}
+
+This video information is available as a [Text Transcript with Description of Visuals](#transcript) below.
+
+## What is "Colors with Good Contrast"?
+{:#what}
+
+Colors must have sufficient contrast, for example, between the text color and the background color (technically called luminance contrast ratio). This includes text on images, icons, and buttons. Also colors used to convey information on interactive elements, diagrams, maps, and other types of content must be distinguishable.
+
+## Who depends on this feature?
+{:#who}
+
+- People with low contrast sensitivity, which is common in older people.
+- People who cannot distinguish between certain colors (often called “color blindness”).
+
+## What are the additional benefits?
+{:#others}
+
+- Content works in different lighting conditions, such as sunlight and glare.
+- Content is easier to read by everyone, including those who do not have specific visual conditions.
+
+## What needs to happen for this to work?
+{:#action}
+
+Select colors that provide sufficient contrast. There are tools to help check and select appropriate color combinations. This is ideally done during the early design stage and the selection of color palettes. While some people need high contrast, some people are sensitive to brightness and need to [change the colors](/perspective-videos/customizable/).
+
+## Learn more
+{:#resources}
+
+- **Accessibility Principle:**
+ - [Content is easier to see and hear](/fundamentals/accessibility-principles/#distinguishable)
+- **Getting Started:**
+ - [Provide sufficient contrast between foreground and background](/tips/designing/#provide-sufficient-contrast-between-foreground-and-background)
+- **Easy Check:**
+ - [Contrast ratio ("color contrast")](/test-evaluate/preliminary/#contrast)
+- **User Story:**
+ - [Lee, online shopper who cannot distinguish between certain colors (color blindness)](/people-use-web/user-stories/#shopper)
+ - [Yun, retiree with low vision, hand tremor, and mild short-term memory loss](/people-use-web/user-stories/#retiree)
+- **User Needs:**
+ - [Accessibility Requirements for People with Low Vision](https://www.w3.org/TR/low-vision-needs/)
+- **Web Content Accessibility Guidelines ([ WCAG Overview](/standards-guidelines/wcag/)):**
+ - [Success Criteria relating to "contrast"](https://www.w3.org/WAI/WCAG21/quickref/?tags=contrast)
+- **Mobile Applicability:**
+ - [Information conveyed solely with color](/standards-guidelines/shared-experiences/#color)
+
+## Text Transcript with Description of Visuals {#transcript}
+
+
+
+
+
Audio
+
Visual
+
+
+
+
+
Web Accessibility Perspectives: Colors with Good Contrast
+
Web Accessibility Perspectives:
+ Colors with Good Contrast
+
+
+
There's something about great design that allows it to go practically unnoticed.
+
Signs with directions are shown. A woman is walking happily down the street.
+
+
+
But it doesn't take much to make things confusing and frustrating.
+
The signs change to have poor contrast. The woman now looks confused.
+
+
+
Choosing colors with poor contrast makes navigating, reading and interacting a real pain
+
She looks at a navigation app on her phone.
+
+
+
Good design means sufficient contrast between foreground background and colors. That's not just text and images but links, icons, and buttons.
+
The app has a button with low contrast that changes to become clear.
+
+
+
If it's important enough to be seen, then it needs to be clear.
+ And this is essential for people with low contrast sensitivity.
+ Which becomes more common as we age.
+
An older man on a sofa is looking at a tablet. He goes to read a message on his mobile phone.
+
+
+
With good colors, websites and applications can be easier to use in more situations. Like in different lighting conditions.
+
Sun glares on the phone but the text is still readable.
+
+
+
Web accessibility: Essential for some, useful for all.
+
+
+
+
Visit w3.org/WAI/perspectives for more information on Colors with Good Contrast
+
Visit
+ w3.org/WAI/perspectives
+ for more information on
+ Colors with Good Contrast.
+ W3C Web Accessibility Initiative logo
+
+
+
diff --git a/collections/_perspective-videos/controls.fr.md b/collections/_perspective-videos/controls.fr.md
new file mode 100644
index 00000000000..cfd86b79194
--- /dev/null
+++ b/collections/_perspective-videos/controls.fr.md
@@ -0,0 +1,142 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "Des liens, boutons, et composants d’interface assez grands"
+nav_title: "Liens, boutons, et composants assez grands"
+lang: fr
+last_updated: 2023-10-12 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 5
+
+translators:
+- name: "Sofia Ahmed"
+- name: "Rémi Bétin"
+contributors:
+- name: "Sandra Velarde Gonzalez (ETNIC)"
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/controls/fr # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/controls/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Courte vidéo à propos des liens, des boutons, et des commandes assez grands pour l’accessibilité Web - de quoi s’agit-il, qui en bénéficie, et comment mettre cela en pratique.
+image: /content-images/perspective-videos/controls.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
Statut : Mise à jour : 23 janvier 2019.
+ Rédacteur et chef du projet :Shadi Abou-Zahra. Développé par le Groupe de travail Éducation et Promotion avec le soutien du projet WAI-DEV, co-financé par la Commission européenne (CE). Mis à jour avec le soutien de la Fondation Ford. ACKNOWLEDGEMENTS.
+---
+
+L’accessibilité Web est essentielle pour les personnes en situation de handicap et utile à tous. Découvrez les effets de l’accessibilité et les bénéfices pour tous dans diverses situations.
+
+## Vidéo concernant des liens, des boutons, et des composants d'interface assez grands
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="controls"
+ yt-id="CzfKB3PuuIY"
+ yt-id-ad="65G_twR47OQ"
+%}
+
+Les informations de cette vidéo sont disponibles sous forme de [Transcription avec description des visuels](#transcript) en bas de la page.
+
+Que signifie « des liens, des boutons, et des composants d’interface assez grands » ? {#what}
+---------------------------------------------
+
+La zone pour cliquer et toucher sur des composants d’interface doit être suffisamment grande pour pouvoir les activer. Cela comprend les liens, les boutons, les cases à cocher, et les autres composants d’interface. Les petits composants d’interfaces, et les composants d’interface trop rapprochés, sont difficiles à utiliser pour de nombreuses personnes. C'est particulièrement le cas sur les appareils mobiles avec de petits écrans.
+
+Qui dépend de cette fonctionnalité ? {#who}
+----------------------------
+
+- Les personnes en situation de handicap physique avec une dextérité réduite.
+
+Quels sont les autres bénéfices ? {#others}
+---------------------------------
+
+- Le contenu est plus facile à utiliser sur les écrans tactiles, particulièrement sur des petits appareils mobiles.
+- Le contenu est plus facile à utiliser pour les personnes qui ne maîtrisent pas l’utilisation de la souris ou du pavé tactile de leur ordinateur.
+- Le contenu est plus facile à utiliser dans les situations où l’appareil ne peut pas être maintenu stable.
+
+Comment mettre cela en pratique ? {#action}
+--------------------------------------
+
+Créez des composants d’interface ou des zones d’activation assez grands autour des composants d’interface.
+(Augmenter la taille de la police du composant d’interface n’est parfois pas suffisant).
+Séparez de manière adéquate les composants d’interface sélectionnables. Fournissez des étiquettes pour les composants d’interface, qui élargissent la zone d’activation dans de nombreux navigateurs car l’étiquette des cases à cocher et des boutons d’options est également cliquable.
+
+Plus d’informations {#resources}
+----------
+
+- **Principes d’accessibilité :**
+ - [Les utilisateurs peuvent facilement naviguer, trouver des contenus, et déterminer où ils sont](/fundamentals/accessibility-principles/#navigable)
+- **Pour démarrer :**
+ - [Créez des designs pour différentes tailles de fenêtres d’affichage](/tips/designing/#create-designs-for-different-viewport-sizes)
+ - [Assurez-vous que les éléments de formulaire incluent des étiquettes clairement associées](/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels)
+- **Vérification simple :**
+ - [Formulaires, étiquettes, et erreurs](/test-evaluate/preliminary/#forms)
+- **Témoignage d’utilisateur :**
+ - [Yun, retraité avec une mauvaise vue, un tremblement des mains, et une perte de mémoire à court terme](/people-use-web/user-stories/#retiree)
+- **Règles d’accessibilité pour les contenus Web ([Vue d’ensemble des WCAG](/standards-guidelines/wcag/)) :**
+ - [Critères de succès liés aux "étiquettes"](https://www.w3.org/WAI/WCAG21/quickref/?tags=labels)
+
+## Transcription avec description des visuels {#transcript}
+
+
+
+
+
Audio
+
Visuel
+
+
+
+
+
L’accessibilité Web illustrée : Des liens, boutons, et composants d’interface assez grands
+
L’accessibilité Web illustrée :
+ des liens, boutons, et composants d’interface assez grands
+
+
+
Essayer d’atteindre une petite cible demande beaucoup d’efforts.
+
Une femme tente d’enfiler du fil dans une aiguille, mais n’y parvient pas.
+
+
+
+
De nombreux sites Web et applications tentent d’enfiler du fil dans une aiguille.
+
La femme n’arrive pas à taper sur des petits liens d’un site Web.
+
+
+
Mais sur le Web, il est possible de rendre les zones cliquables et touchables plus faciles à utiliser.
+
Les liens deviennent plus grands et la jeune femme peut désormais appuyer dessus.
+
+
+
C’est pratique sur les appareils mobiles, en particulier lorsque l’on est en mouvement.
+
La femme utilise une tablette en préparant un café.
+
+
+
C’est indispensable pour les personnes avec une dextérité réduite.
+
Une autre femme dont la main tremble est incapable de naviguer de manière précise avec la souris et ne réussit pas à cliquer sur des petits boutons d’un site Web.
+
+
+
L’accessibilité Web : essentielle pour certains, utile à tous.
+
Les boutons deviennent plus grands et la femme atteinte de tremblements est maintenant capable de cliquer dessus.
+
+
+
Visitez w3.org/WAI/perspectives pour plus d’informations sur Des liens, des boutons, et des commandes assez grands.
+
Visitez
+ w3.org/WAI/perspectives
+ pour plus d’informations sur
+ Des liens, des boutons, et des commandes assez grands.
+ Logo de l’Initiative pour l’accessibilité du Web de W3C
+
+
+
diff --git a/collections/_perspective-videos/controls.md b/collections/_perspective-videos/controls.md
new file mode 100644
index 00000000000..4e54890930d
--- /dev/null
+++ b/collections/_perspective-videos/controls.md
@@ -0,0 +1,140 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "Large Links, Buttons, and Controls"
+nav_title: "Large Links, Buttons, and Controls"
+lang: en # Change "en" to the translated-language shortcode
+last_updated: 2019-01-23 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 5
+
+# translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
+# - name: "Jan Doe" # Replace Jan Doe with translator name
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
+# contributors:
+# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/controls/ # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/controls/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Short video about large links, buttons, and controls for web accessibility - what is it, who depends on it, and what needs to happen to make it work.
+image: /content-images/perspective-videos/controls.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
+---
+
+Web accessibility is essential for people with disabilities and useful for all. Learn about the impact of accessibility and the benefits for everyone in a variety of situations.
+
+## Video on Large Links, Buttons, and Controls
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="controls"
+ yt-id="CzfKB3PuuIY"
+ yt-id-ad="65G_twR47OQ"
+%}
+
+This video information is available as a [Text Transcript with Description of Visuals](#transcript) below.
+
+What is "Large Links, Buttons, and Controls"? {#what}
+---------------------------------------------
+
+The area for clicking and tapping controls must be large enough for people to activate them. This includes links, buttons, checkboxes, and other controls. Small controls, and controls that are placed too close to each other, are difficult for many people to use. This is particularly relevant on mobile devices with small screens.
+
+Who depends on this feature? {#who}
+----------------------------
+
+- People with physical disabilities who have reduced dexterity.
+
+What are the additional benefits? {#others}
+---------------------------------
+
+- Content is more usable on touch screens, especially on smaller mobile devices.
+- Content is more usable for people who are not experienced with the mouse or touch-pad on the computer they are using.
+- Content is more usable in situations where the device cannot be held steady.
+
+What needs to happen for this to work? {#action}
+--------------------------------------
+
+Design large controls or activation areas around the controls. (Increasing the font size of the control sometimes isn't enough.) Provide adequate separation between selectable controls. Provide labels for controls, which enlarges the activation area in many browsers because the label for checkboxes and option buttons is also clickable.
+
+Learn more {#resources}
+----------
+
+- **Accessibility Principle:**
+ - [Users can easily navigate, find content, and determine where they are](/fundamentals/accessibility-principles/#navigable)
+- **Getting Started:**
+ - [Create designs for different viewport sizes](/tips/designing/#create-designs-for-different-viewport-sizes)
+ - [Ensure that form elements include clearly associated labels](/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels)
+- **Easy Check:**
+ - [Forms, labels, and errors](/test-evaluate/preliminary/#forms)
+- **User Story:**
+ - [Yun, retiree with low vision, hand tremor, and mild short-term memory loss](/people-use-web/user-stories/#retiree)
+- **Web Content Accessibility Guidelines ([WCAG Overview](/standards-guidelines/wcag/)):**
+ - [Success Criteria relating to "labels"](https://www.w3.org/WAI/WCAG21/quickref/?tags=labels)
+
+## Text Transcript with Description of Visuals {#transcript}
+
+
+
+
+
Audio
+
Visual
+
+
+
+
+
Web Accessibility Perspectives: Large Links, Buttons, and Controls
+
Web Accessibility Perspectives:
+ Large Links, Buttons, and Controls
+
+
+
Trying to hit a small target requires lots of effort.
+
A woman tries to thread a needle but misses.
+
+
+
+
Many websites and applications try to thread the needle.
+
The woman fails to tap small links on a website.
+
+
+
But on the Web, we can make areas for clicking and tapping easier to use.
+
The links become larger in size and the woman now easily taps them.
+
+
+
Which is handy on mobile devices especially when we might be moving around at the time.
+
The woman is using a tablet while preparing a coffee.
+
+
+
Which is critical for people with reduced dexterity.
+
Another woman with a hand tremor is unable to navigate precisely with the mouse and fails to click small buttons on a website.
+
+
+
Web accessibility: Essential for some, useful for all.
+
The buttons become larger and the woman with the tremor is now able to click them.
+
+
+
Visit w3.org/WAI/perspectives for more information on Large Links, Buttons, and Controls
+
Visit
+ w3.org/WAI/perspectives
+ for more information on
+ Large Links, Buttons, and Controls.
+ W3C Web Accessibility Initiative logo
+
+
+
diff --git a/collections/_perspective-videos/customizable.fr.md b/collections/_perspective-videos/customizable.fr.md
new file mode 100644
index 00000000000..cf2160e3b71
--- /dev/null
+++ b/collections/_perspective-videos/customizable.fr.md
@@ -0,0 +1,141 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "Un texte personnalisable"
+nav_title: "Texte personnalisable"
+lang: fr
+last_updated: 2023-10-16 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 7
+
+translators:
+- name: "Sofia Ahmed"
+- name: "Rémi Bétin"
+contributors:
+- name: "Sandra Velarde Gonzalez (ETNIC)"
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/customizable/fr # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/customizable/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Courte vidéo à propos du texte personnalisable pour l’accessibilité Web – de quoi s’agit-il, qui en bénéficie, et comment mettre cela en pratique.
+image: /content-images/perspective-videos/customizable.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
Statut : Mise à jour : 23 janvier 2019.
+ Rédacteur et chef du projet :Shadi Abou-Zahra. Développé par le Groupe de travail Éducation et Promotion avec le soutien du projet WAI-DEV, co-financé par la Commission européenne (CE). Mis à jour avec le soutien de la Fondation Ford. ACKNOWLEDGEMENTS.
+---
+
+L’accessibilité Web est essentielle pour les personnes en situation de handicap et utile à tous. Découvrez les effets de l’accessibilité et les bénéfices pour tous dans diverses situations.
+
+
+## Vidéo sur le texte personnalisable
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="customizable"
+ yt-id="rbiI65Jcz5s"
+ yt-id-ad="L4WLeVc5l5k"
+%}
+
+Les informations de cette vidéo sont disponibles sous forme de [Transcription avec description des visuels](#transcript) en bas de la page.
+
+Qu’est-ce que du « texte personnalisable » ? {#what}
+----------------------------
+
+Certains utilisateurs ont besoin de changer la manière dont le texte est présenté pour pouvoir le lire. Notamment la taille, l’espacement, la police de caractères, la couleur, et d’autres propriétés du texte. Lorsque les utilisateurs changent ces propriétés, aucune information ou fonctionnalité ne devrait être perdue, et le texte devrait se réajuster pour éviter aux utilisateurs de devoir faire défiler le texte horizontalement pour lire les phrases. La personnalisation du texte va au-delà de la fonctionnalité de zoom, qui ne modifie que la taille du texte.
+
+Qui dépend de cette fonctionnalité ? {#who}
+----------------------------
+
+- Les personnes malvoyantes qui n’utilisent pas d’agrandisseurs d’écran.
+- Les personnes avec certaines formes de dyslexie et d’autres troubles cognitifs et d’apprentissage qui ont besoin d’une présentation particulière du texte pour le lire.
+
+Quels sont les autres bénéfices ? {#others}
+---------------------------------
+
+- Le contenu est plus adaptable aux petites et aux grandes tailles d’écrans.
+- Le contenu est plus adaptable aux préférences et au confort personnels.
+- Le contenu est plus adaptable après traduction, étant donné que la longueur des mots et des phrases varie en fonction de la langue.
+
+Comment mette cela en pratique ? {#action}
+--------------------------------------
+
+Le contenu doit être codé et conçu correctement pour s’adapter à différents paramètres de personnalisation. Cela inclut l’utilisation d’unités relatives plutôt que d’unités absolues pour la taille des caractères, des composants d’interface, et d’autres objets. Les applications devraient utiliser les paramètres du système d’exploitation et du navigateur Web relatifs au texte. Les sites Web et les applications pourraient également fournir des consignes pour aider les utilisateurs à modifier leurs paramètres. Les navigateurs Web et les autres outils Web doivent fournir à leurs utilisateurs une fonctionnalité de personnalisation du texte.
+
+Plus d’informations {#resources}
+----------
+
+- **Principe d’accessibilité :**
+ - [Du contenu qui peut être présenté de différentes façons](/fundamentals/accessibility-principles/#adaptable)
+- **Pour démarrer :**
+ - [Créez un code qui s’adapte aux technologies des utilisateurs](/tips/developing/#write-code-that-adapts-to-the-users-technology)
+- **Vérification facile :**
+ - [Modifiez la taille du texte](/test-evaluate/preliminary/#resize)
+- **Témoignages d’utilisateurs :**
+ - [Yun, retraité avec une mauvaise vue, un tremblement des mains, et une perte de mémoire à court terme](/people-use-web/user-stories/#retiree)
+ - [Preety, élève de collège avec un trouble du déficit de l’attention avec hyperactivité et dyslexique](/people-use-web/user-stories/#classroomstudent)
+- **Règles pour l’accessibilité des contenus Web ([Vue d’ensemble des WCAG](/standards-guidelines/wcag/)) :**
+ - [Critères de succès liés au « texte »](https://www.w3.org/WAI/WCAG21/quickref/?tags=text)
+- **Règles pour l’accessibilité des agents utilisateurs ([Vue d’ensemble des UAGG](/standards-guidelines/uaag/)) :**
+ - [Permettez le paramétrage du texte](https://www.w3.org/TR/2015/NOTE-UAAG20-20151215/#gl-text-config)
+ - [Réajustement du texte présenté en plusieurs colonnes](https://www.w3.org/TR/UAAG20/#sc_1813)
+ - [Linéarisation du contenu](https://www.w3.org/TR/UAAG20/#sc_1815)
+- **Besoins utilisateurs :**
+ - [Exigences d’accessibilité pour les personnes malvoyantes](https://www.w3.org/TR/low-vision-needs/)
+
+## Transcription avec description des visuels {#transcript}
+
+
+
+
Audio
+
Visuel
+
+
+
+
+
L’accessibilité Web illustrée : un texte personnalisable
+
L’accessibilité Web illustrée : Un texte personnalisable
+
+
+
Ce qui vous convient ne convient pas forcément à quelqu’un d’autre.
+
Des tranches de pain grillé avec différentes cuissons.
+
+
+
Toutefois, la personnalisation n’est pas qu’une question de préférence. Parfois, c’est une nécessité.
+
Deux hommes sont assis face à un grille-pain. L’un d’eux tourne le bouton de réglage.
+
+
+
Pouvoir ajuster le texte est crucial pour les personnes malvoyantes et dyslexiques.
+
Une femme met ses lunettes pour consulter un site Web sur son ordinateur portable. Elle plisse les yeux pour lire le texte, qui est écrit petit et avec une police d’écriture inhabituelle.
+
+
+
Les sites Web et les applications correctement codés permettent au texte d’être personnalisé. Par exemple, pour modifier sa taille, son espacement, sa police de caractères et ses couleurs, sans perdre en fonctionnalités et en clarté.
+
La femme utilise les paramètres de son navigateur Web pour ajuster la taille et le style du texte. Le texte devient plus lisible et la femme est soulagée.
+
+
+
L’accessibilité Web : essentielle pour certains, utile à tous.
+
Retour sur les deux hommes : l’un d’eux remet une tranche de pain grillé dans le grille-pain.
+
+
+
Allez sur w3.org/WAI/perspectives pour plus d’informations sur Un texte personnalisable
+
Allez sur
+ w3.org/WAI/perspectives
+ pour plus d’informations sur
+ Un texte personnalisable.
+ Logo de l’Initiative pour l’accessibilité du Web du W3C
+
+
+
diff --git a/collections/_perspective-videos/customizable.md b/collections/_perspective-videos/customizable.md
new file mode 100644
index 00000000000..0beb9874aab
--- /dev/null
+++ b/collections/_perspective-videos/customizable.md
@@ -0,0 +1,146 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "Customizable Text"
+nav_title: "Customizable Text"
+lang: en # Change "en" to the translated-language shortcode
+last_updated: 2019-01-23 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 7
+
+# translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
+# - name: "Jan Doe" # Replace Jan Doe with translator name
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
+# contributors:
+# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/customizable/ # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/customizable/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Short video about customizable text for web accessibility - what is it, who depends on it, and what needs to happen to make it work.
+image: /content-images/perspective-videos/customizable.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
+---
+
+Web accessibility is essential for people with disabilities and useful for all. Learn about the impact of accessibility and the benefits for everyone in a variety of situations.
+
+## Video on Customizable Text
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="customizable"
+ yt-id="rbiI65Jcz5s"
+ yt-id-ad="L4WLeVc5l5k"
+%}
+
+This video information is available as a [Text Transcript with Description of Visuals](#transcript) below.
+
+What is "Customizable Text"? {#what}
+----------------------------
+
+Some users need to be able to change the way text is displayed so that they can read the text. This includes changing the size, spacing, font, color, and other text properties. When users change these properties, no information or functionality should be lost, and the text should re-flow so users don't have to scroll horizontally to read sentences. Text customization is more than the zoom functionality, which only changes the text size.
+
+Who depends on this feature? {#who}
+----------------------------
+
+- People with low vision who are not using screen magnification software.
+- People with some forms of dyslexia and other cognitive and learning disabilities who need a particular presentation of text to read it.
+
+What are the additional benefits? {#others}
+---------------------------------
+
+- Content is more adaptable to smaller and larger screen sizes.
+- Content is more adaptable to personal preferences and comfort.
+- Content is more adaptable when translated, since words and sentences are different lengths in different languages.
+
+What needs to happen for this to work? {#action}
+--------------------------------------
+
+Content must be properly designed and coded so that it can adapt to different customization settings. This includes using relative rather than absolute units for the size of fonts, controls, and other objects. Applications should use the operating system and web browser text settings. Websites and applications could also provide information to help users change their settings. Web browsers and other web tools need to provide users with text customization functionality.
+
+Learn more {#resources}
+----------
+
+- **Accessibility Principle:**
+ - [Content can be presented in different ways](/fundamentals/accessibility-principles/#adaptable)
+- **Getting Started:**
+ - [Write code that adapts to the user's technology](/tips/developing/#write-code-that-adapts-to-the-users-technology)
+- **Easy Check:**
+ - [Resize text](/test-evaluate/preliminary/#resize)
+- **User Story:**
+ - [Yun, retiree with low vision, hand tremor, and mild short-term memory loss](/people-use-web/user-stories/#retiree)
+ - [Preety, middle school student with attention deficit hyperactivity disorder and dyslexia](/people-use-web/user-stories/#classroomstudent)
+- **Web Content Accessibility Guidelines ([WCAG Overview](/standards-guidelines/wcag/)):**
+ - [Success Criteria relating to "text"](https://www.w3.org/WAI/WCAG21/quickref/?tags=text)
+- **User Agent Accessibility Guidelines ([UAAG
+ Overview](/standards-guidelines/uaag/)):**
+ - [Provide text configuration](https://www.w3.org/TR/2015/NOTE-UAAG20-20151215/#gl-text-config)
+ - [Multi-Column Text Reflow](https://www.w3.org/TR/UAAG20/#sc_1813)
+ - [Linearize Content](https://www.w3.org/TR/UAAG20/#sc_1815)
+- **User Needs:**
+ - [Accessibility Requirements for People with Low Vision](https://www.w3.org/TR/low-vision-needs/)
+
+## Text Transcript with Description of Visuals {#transcript}
+
+
+
+
Audio
+
Visual
+
+
+
+
+
Web Accessibility Perspectives: Customizable Text
+
Web Accessibility Perspectives: Customizable Text
+
+
+
What's right for you doesn't necessarily work for the next person.
+
Toast with different levels of darkness.
+
+
+
Customization isn't always just the question of preference though. Sometimes it's a necessity.
+
Two men are sitting with a toaster between them. One of the men turns the toaster dial.
+
+
+
Being able to adjust the text is crucial for people with low vision and dyslexia.
+
A woman puts on glasses to read a website on her laptop. The woman is squinting at the website with small text and an unusual font.
+
+
+
Properly coded websites and applications allow the text to be customized. For example, to change its size, spacing, font, and colors without loss of functions or clarity.
+
The woman uses the web browsers settings to adjust the
+ text size and style. It appears more legible and the woman is relieved.
+
+
+
Web accessibility: Essential for some, useful for all.
+
Cutback to the two men: One of the men takes a piece of
+ toast out of the toaster.
+
+
+
Visit w3.org/WAI/perspectives for more information on Customizable
+ Text
+
Visit
+ w3.org/WAI/perspectives
+ for more information on
+ Customizable Text.
+ W3C Web Accessibility Initiative logo
+
+
+
+
+
diff --git a/collections/_perspective-videos/index.fr.md b/collections/_perspective-videos/index.fr.md
new file mode 100644
index 00000000000..8f62bf0be20
--- /dev/null
+++ b/collections/_perspective-videos/index.fr.md
@@ -0,0 +1,72 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "L’accessibilité Web illustrée : explorez ses effets et ses bénéfices pour tous"
+title_html: "L’accessibilité Web illustrée : explorez ses effets et ses bénéfices pour tous"
+nav_title: "Vue d’ensemble : vidéos d’illustration"
+lang: fr
+last_updated: 2023-10-11 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 0
+
+translators:
+- name: "Sofia Ahmed"
+contributors:
+- name: "Sandra Velarde Gonzalez (ETNIC)"
+- name: "Rémi Bétin"
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/fr # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/ # Do not change this
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+resource:
+ title: "L’accessibilité Web illustrée : explorez ses effets et ses bénéfices pour tous"
+ ref: /perspective-videos/ # Do not change this
+
+changelog: /perspective-videos/changelog/ # Do not change this
+
+description: Courtes vidéos montrant en quoi l’accessibilité Web est essentielle pour les personnes en situation de handicap et utile pour tous dans diverses situations.
+image: /content-images/perspective-videos/overview.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change CHANGELOG and ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
Statut : Mise à jour : 5 juin 2023. CHANGELOG.
+ Rédacteur et chef de projet :Shadi Abou-Zahra. Développé par le Groupe de travail Éducation et Promotion avec le soutien du projet WAI-DEV, co-financé par la Commission européenne (CE). ACKNOWLEDGEMENTS.
+
+# Read Translations Notes for this resource at https://www.w3.org/WAI/about/translating/resources/resource-specific-instructions/
+---
+
+L’accessibilité Web est essentielle pour les personnes en situation de handicap, et utile à tous. Découvrez les effets de l’accessibilité et ses bénéfices pour tous dans diverses situations.
+
+## Vidéos d’illustration
+
+- [![]({{ "/content-images/perspective-videos/thumbnails/keyboard.jpg" | relative_url }}) Compatibilité avec le clavier]({{ "/perspective-videos/keyboard/fr" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/contrast.jpg" | relative_url }}) Des couleurs bien contrastées]({{ "/perspective-videos/contrast/fr" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/layout.jpg" | relative_url }}) Une mise en page et une conception claires]({{ "/perspective-videos/layout/fr" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/speech.jpg" | relative_url }}) La synthèse vocale]({{ "/perspective-videos/speech/fr" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/controls.jpg" | relative_url }}) Des liens, boutons et commandes assez grands]({{ "/perspective-videos/controls/fr" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/captions.jpg" | relative_url }}) Les sous-titres]({{ "/perspective-videos/captions/fr" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/customizable.jpg" | relative_url }}) Un texte personnalisable]({{ "/perspective-videos/customizable/fr" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/voice.jpg" | relative_url }}) La reconnaissance vocale]({{ "/perspective-videos/voice/fr" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/understandable.jpg" | relative_url }}) Un contenu compréhensible]({{ "/perspective-videos/understandable/fr" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/notifications.jpg" | relative_url }}) Les notifications et les feedbacks]({{ "/perspective-videos/notifications/fr" | relative_url }})
+{:.two.columns.linklist}
+
+**Compilation des 10 vidéos (7 min 36) : [compilation sur YouTube {% include icon.html name="external-link" label="Lien externe" %}](https://www.youtube.com/watch?v=3f31oufqFSM)**, [compilation sur le serveur de W3C (format du fichier : MP4, taille du fichier : 73 Mo) {% include icon.html name="external-link" label="Lien externe" %}](https://media.w3.org/wai/perspective-videos/compilation.mp4), [fichier des sous-titres originaux en anglais (SRT) {% include icon.html name="external-link" label="Lien externe" %}](https://media.w3.org/wai/perspective-videos/compilation.srt)
+
+## En savoir plus sur l’accessibilité Web
+
+Ce site Web fournit divers standards, recommandations, et ressources pour démarrer :
+
+- [Introduction à l’accessibilité Web](/fundamentals/accessibility-intro/) ;
+- [Comment les personnes en situation de handicap utilisent le Web](/people-use-web/) – expose dans les grandes lignes des témoignages d’utilisateurs, les technologies d’assistance, et les principes d’accessibilité ;
+- [Conseils pour démarrer](/tips/) – premières étapes essentielles pour les concepteurs, les auteurs et les développeurs Web ;
+- [Bénéfices business](/business-case/) – met en avant des arguments, notamment des facteurs sociaux, techniques, financiers, et légaux ;
+- [Tutoriels sur l’accessibilité Web](/tutorials/) – des conseils plus détaillés pour développer des contenus Web accessibles.
diff --git a/collections/_perspective-videos/index.md b/collections/_perspective-videos/index.md
new file mode 100644
index 00000000000..1586d8cd388
--- /dev/null
+++ b/collections/_perspective-videos/index.md
@@ -0,0 +1,73 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "Web Accessibility Perspectives Videos: Explore the Impact and Benefits for Everyone"
+title_html: "Web Accessibility Perspectives Videos: Explore the Impact and Benefits for Everyone"
+nav_title: "Perspective Videos Overview"
+lang: en # Change "en" to the translated-language shortcode
+last_updated: 2023-06-05 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 0
+
+# translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
+# - name: "Jan Doe" # Replace Jan Doe with translator name
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
+# contributors:
+# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/ # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/ # Do not change this
+
+resource:
+ title: "Web Accessibility Perspectives Videos: Explore the Impact and Benefits for Everyone"
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+changelog: /perspective-videos/changelog/ # Do not change this
+
+description: Short videos demonstrating how Web accessibility is essential for people with disabilities and useful for all in a variety of situations.
+image: /content-images/perspective-videos/overview.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change CHANGELOG and ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
+
+# Read Translations Notes for this resource at https://www.w3.org/WAI/about/translating/resources/resource-specific-instructions/
+---
+
+Web accessibility is essential for people with disabilities and useful for all. Learn about the impact of accessibility and the benefits for everyone in a variety of situations.
+
+## Perspectives Videos
+
+- [![]({{ "/content-images/perspective-videos/thumbnails/keyboard.jpg" | relative_url }}) Keyboard Compatibility]({{ "/perspective-videos/keyboard/" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/contrast.jpg" | relative_url }}) Colors with Good Contrast]({{ "/perspective-videos/contrast/" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/layout.jpg" | relative_url }}) Clear Layout and Design]({{ "/perspective-videos/layout/" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/speech.jpg" | relative_url }}) Text to Speech]({{ "/perspective-videos/speech/" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/controls.jpg" | relative_url }}) Large Links, Buttons, and Controls]({{ "/perspective-videos/controls/" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/captions.jpg" | relative_url }}) Video Captions]({{ "/perspective-videos/captions/" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/customizable.jpg" | relative_url }}) Customizable Text]({{ "/perspective-videos/customizable/" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/voice.jpg" | relative_url }}) Speech Recognition]({{ "/perspective-videos/voice/" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/understandable.jpg" | relative_url }}) Understandable Content]({{ "/perspective-videos/understandable/" | relative_url }})
+- [![]({{ "/content-images/perspective-videos/thumbnails/notifications.jpg" | relative_url }}) Notifications and Feedback]({{ "/perspective-videos/notifications/" | relative_url }})
+{:.two.columns.linklist}
+
+**Compilation of all 10 videos (7:36 minutes): [compilation on YouTube {% include icon.html name="external-link" label="External Link" %}](https://www.youtube.com/watch?v=3f31oufqFSM)**, [compilation on W3C server (file format: MP4, file size: 73MB) {% include icon.html name="external-link" label="External Link" %}](https://media.w3.org/wai/perspective-videos/compilation.mp4), [captions file (SRT) {% include icon.html name="external-link" label="External Link" %}](https://media.w3.org/wai/perspective-videos/compilation.srt)
+
+## Learn More about Web Accessibility
+
+This website provides a variety of standards, guidelines, and resources
+to get you started:
+
+- [Introduction to Web Accessibility](/fundamentals/accessibility-intro/)
+- [How People with Disabilities Use the Web](/people-use-web/) - outlines users stories, assistive technologies, and accessibility principles
+- [Getting Started Tips](/tips/) - basic first steps for web designers, writers, and developers
+- [Business Case](/business-case/) - highlights arguments including social, technical, financial, and legal factors
+- [Web Accessibility Tutorials](/tutorials/) - more in-depth guidance for developing accessible web content
diff --git a/collections/_perspective-videos/keyboard.fr.md b/collections/_perspective-videos/keyboard.fr.md
new file mode 100644
index 00000000000..b38a3c2c3fe
--- /dev/null
+++ b/collections/_perspective-videos/keyboard.fr.md
@@ -0,0 +1,150 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "Compatibilité avec le clavier"
+nav_title: "Compatibilité avec le clavier"
+lang: fr
+last_updated: 2023-10-12 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 1
+
+translators:
+ - name: "Sofia Ahmed"
+ - name: "Rémi Bétin"
+contributors:
+ - name: "Sandra Velarde Gonzalez (ETNIC)"
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/keyboard/fr # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/keyboard/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Courte vidéo à propos de la compatibilité du clavier pour l’accessibilité Web - de quoi s’agit-il, qui en bénéficie, et comment mettre cela en pratique.
+image: /content-images/perspective-videos/keyboard.jpg
+teaser_text: Toutes les fonctionnalités doivent être faciles d’utilisation au clavier. Cela signifie que les utilisateurs doivent pouvoir accéder aux liens, aux boutons, aux formulaires, et aux autres commandes en utilisant la touche Tab et les autres touches. Les sites Web ne devraient pas nécessiter de souris. L’accessibilité Web est essentielle pour les personnes atteintes de handicaps et avantageuse pour tous dans diverses situations.
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
Statut : Mise à jour 23 janvier 2019.
+ Rédacteur et chef de projet :Shadi Abou-Zahra. Développé par le Groupe de travail Éducation et Promotion avec le soutien du projet WAI-DEV, co-financé par la Commission européenne (CE). Mis à jour avec le soutien de la Fondation Ford. ACKNOWLEDGEMENTS.
+---
+
+L’accessibilité Web est essentielle pour les personnes en situation de handicap et utile à tous. Découvrez les effets de l’accessibilité et les bénéfices pour tous dans diverses situations.
+
+## Vidéo sur la compatibilité avec le clavier
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="keyboard"
+ yt-id="93UgG72os8M"
+ yt-id-ad="1rBwxGMT9ZM"
+%}
+
+Les informations de cette vidéo sont disponibles sous forme de [Transcription avec description des visuels](#transcript) en bas de la page.
+
+## Que signifie la « compatibilité avec le clavier » ?
+{:#what}
+
+Toutes les fonctionnalités doivent être accessibles au clavier. L’utilisateur doit donc pouvoir accéder et naviguer entre les liens, les boutons, les formulaires, et les autres composants d’interface en utilisant la touche de tabulation et les autres touches. Les sites Web ne devraient pas nécessiter l’utilisation d’une souris ; par exemple, les calendriers devraient aussi permettre aux utilisateurs de saisir une date.
+
+## Qui dépend de cette fonctionnalité ?
+{:#who}
+
+- Les personnes porteuses de handicaps physiques qui ne peuvent pas utiliser la souris.
+- Les personnes aveugles, et qui ne peuvent pas voir le curseur de la souris sur l’écran.
+- Les personnes souffrant de maladies chroniques, telles que des troubles musculo-squelettiques (TMS), qui devraient limiter ou éviter l’utilisation d’une souris.
+
+## Quels sont les autres bénéfices ?
+{:#others}
+
+- Le contenu est utilisable pour les personnes en situation de handicap temporaire, telle qu’un bras cassé ou une souris cassée.
+
+## Comment mettre cela en pratique ?
+{:#action}
+
+Les composants d’interface HTML natifs, comme les liens, les boutons, et les éléments de formulaire, fonctionnent nativement avec le clavier et devraient être utilisés dans la mesure du possible. Les composants d’interface personnalisés, les styles CSS, et les scripts qui contrôlent l’interaction pourraient nécessiter du codage supplémentaire pour assurer leur compatibilité avec le clavier. Assurez-vous que l’ordre de tabulation soit logique pour permettre la navigation avec le clavier au sein du contenu et des composants d’interface. Fournissez un moyen aux utilisateurs de se déplacer rapidement entre les blocs de contenu et les composants d’interface. Les problèmes de clavier surviennent particulièrement dans les formulaires, les menus, et les applications contenant de nombreux composants d’interface.
+
+## Plus d’informations
+{:#resources}
+
+- **Principe d’accessibilité :**
+ - [Des fonctionnalités disponibles au clavier](/fundamentals/accessibility-principles/#keyboard)
+- **Pour démarrer :**
+ - [Assurez-vous que tous les éléments interactifs sont accessibles au clavier](/tips/developing/#ensure-that-all-interactive-elements-are-keyboard-accessible)
+- **Vérification simple :**
+ - [Accès au clavier et focus visible](/test-evaluate/preliminary/#interaction)
+- **Témoignages d’utilisateurs :**
+ - [Alex, journaliste avec un trouble musculosquelettique](/people-use-web/user-stories/#reporter)
+ - [Ilya, cadre supérieure, aveugle](/people-use-web/user-stories/#accountant)
+ - [Kaseem, adolescente sourde et aveugle](/people-use-web/user-stories/#teenager)
+- **Règles pour l’accessibilité des contenus Web ([Vue d’ensemble des WCAG](/standards-guidelines/wcag/)) :**
+ - [Critères de succès relatifs au « clavier »](https://www.w3.org/WAI/WCAG21/quickref/?tags=keyboard)
+- **Applicabilité aux appareils mobiles :**
+ - [La souris est requise pour l’interaction et la navigation](/standards-guidelines/shared-experiences/#mouse)
+- **Tutoriel :**
+ - [Tutoriels sur l’accessibilité Web](/tutorials/) (plusieurs sujets à ce propos)
+
+## Transcription avec description des visuels {#transcript}
+
+
+
+
+
Audio
+
Visuel
+
+
+
+
+
L’accessibilité Web illustrée : la compatibilité avec le clavier
+
L’accessibilité Web illustrée :
+ La compatibilité avec le clavier
+
+
+
Il est frustrant de ne pas pouvoir utiliser son ordinateur parce que la souris ne fonctionne pas.
+
Un homme fait tomber sa souris de son bureau. La souris ne fonctionne plus.
+
+
+
De nombreuses personnes utilisent uniquement le clavier pour naviguer sur des sites Web — soit par préférence, soit en fonction des circonstances.
+
+
+
+
Qu’il s’agisse d’une mobilité temporairement limitée,
+
Une dame dont le bras est en écharpe tape sur un clavier — mais le site Web nécessite l’utilisation d’une souris pour sélectionner la date.
+
+
+
d’un handicap physique permanent,
+
Un homme en fauteuil roulant utilise une baguette buccale pour taper au clavier.
+
+
+
ou simplement d’une souris cassée,
+ le résultat est le même :
+
L’homme en fauteuil roulant ne peut pas non plus naviguer sur le site.
+
+
+
Les sites Web et applications Web doivent fonctionner au clavier.
+
Il se rend sur un autre site qui permet de saisir la date au clavier.
+
+
+
L’accessibilité Web : essentielle pour certains, utile à tous.
+
+
+
+
Visitez w3.org/WAI/perspectives pour plus d’informations concernant Compatibilité avec le clavier
+
Visitez
+ w3.org/WAI/perspectives
+ pour plus d’informations concernant
+ Compatibilité avec le clavier.
+ Logo de l’Initiative pour l’accessibilité du Web de W3C
+
+
+
diff --git a/collections/_perspective-videos/keyboard.md b/collections/_perspective-videos/keyboard.md
new file mode 100644
index 00000000000..4c16dbb59a4
--- /dev/null
+++ b/collections/_perspective-videos/keyboard.md
@@ -0,0 +1,150 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "Keyboard Compatibility"
+nav_title: "Keyboard Compatibility"
+lang: en # Change "en" to the translated-language shortcode
+last_updated: 2024-07-15 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 1
+
+# translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
+# - name: "Jan Doe" # Replace Jan Doe with translator name
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
+# contributors:
+# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/keyboard/ # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/keyboard/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Short video about keyboard compatibility for web accessibility - what is it, who depends on it, and what needs to happen to make it work.
+image: /content-images/perspective-videos/keyboard.jpg
+teaser_text: All functionality must be usable with the keyboard. That is, users can access links, buttons, forms, and other controls using the Tab key and other keystrokes. Websites should not require a mouse. Keyboard accessibility is essential for people with disabilities and benefits everyone in a variety of situations.
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
+---
+
+Web accessibility is essential for people with disabilities and useful for all. Learn about the impact of accessibility and the benefits for everyone in a variety of situations.
+
+## Video on Keyboard Compatibility
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="keyboard"
+ yt-id="93UgG72os8M"
+ yt-id-ad="1rBwxGMT9ZM"
+%}
+
+This video information is available as a [Text Transcript with Description of Visuals](#transcript) below.
+
+## What is "Keyboard Compatibility"?
+{:#what}
+
+All functionality must be usable with the keyboard. That is, users can access and move between links, buttons, forms, and other controls using the Tab key and other keystrokes. Websites should not require a mouse; for example, pop-up calendars should also let users type in a date.
+
+## Who depends on this feature?
+{:#who}
+
+- People with physical disabilities who cannot use the mouse.
+- People who are blind, and cannot see the mouse pointer on the screen.
+- People with chronic conditions, such as repetitive stress injuries (RSI), who should limit or avoid use of a mouse.
+
+## What are the additional benefits?
+{:#others}
+
+- Content works for people with temporary limitations, such as a broken arm or broken mouse.
+
+## What needs to happen for this to work?
+{:#action}
+
+Native HTML controls, like links, buttons, and form elements, work with the keyboard by default and should be used where possible. Custom-made controls, CSS styles, and scripts that control interaction may need additional coding for keyboard compatibility. Ensure that the tab order is logical, to allow keyboard navigation around the content and controls. Provide a way for users to jump between blocks of content and controls, and to close pop-up boxes and menus using the keyboard. Keyboard issues occur particularly in forms, menus, and applications with many controls.
+
+## Learn more
+{:#resources}
+
+- **Accessibility Principle:**
+ - [Functionality is available from a keyboard](/fundamentals/accessibility-principles/#keyboard)
+- **Getting Started:**
+ - [Ensure that all interactive elements are keyboard accessible](/tips/developing/#ensure-that-all-interactive-elements-are-keyboard-accessible)
+- **Easy Check:**
+ - [Keyboard access and visual focus](/test-evaluate/preliminary/#interaction)
+- **User Story:**
+ - [Alex, reporter with repetitive stress injury](/people-use-web/user-stories/#reporter)
+ - [Ilya, senior staff member who is blind](/people-use-web/user-stories/#accountant)
+ - [Kaseem, teenager who is deaf and blinc](/people-use-web/user-stories/#teenager)
+- **Web Content Accessibility Guidelines ([WCAG Overview](/standards-guidelines/wcag/)):**
+ - [Success Criteria relating to "keyboard"](https://www.w3.org/WAI/WCAG21/quickref/?tags=keyboard)
+- **Mobile Applicability:**
+ - [Mouse required for interaction and navigation](/standards-guidelines/shared-experiences/#mouse)
+- **Tutorial:**
+ - [Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/) (several related topics)
+
+## Text Transcript with Description of Visuals {#transcript}
+
+
+
+
+
Audio
+
Visual
+
+
+
+
+
Web Accessibility Perspectives: Keyboard Compatibility
+
Web Accessibility Perspectives:
+ Keyboard Compatibility
+
+
+
Not being able to use your computer because your mouse doesn't work, is frustrating.
+
A man drops his computer mouse off the desk. The computer mouse no longer works.
+
+
+
Many people use only the keyboard to navigate websites — either through preference or circumstance.
+
+
+
+
Whether it's temporarily limited mobility,
+
A woman with her arm in a sling is typing on a keyboard — but the website requires the use of a mouse to select the date.
+
+
+
a permanent physical disability,
+
A man with a wheelchair is using a mouth-stick to type.
+
+
+
or simply a broken mouse,
+ the result is the same:
+
The man with the wheelchair also cannot use the site.
+
+
+
Websites and apps need to be operable by keyboard.
+
He switches to a different website that allows typing the date.
+
+
+
Web accessibility: Essential for some, useful for all.
+
+
+
+
Visit w3.org/WAI/perspectives for more information on Keyboard Compatibility
+
Visit
+ w3.org/WAI/perspectives
+ for more information on
+ Keyboard Compatibility.
+ W3C Web Accessibility Initiative logo
+
+
+
diff --git a/collections/_perspective-videos/layout.fr.md b/collections/_perspective-videos/layout.fr.md
new file mode 100644
index 00000000000..e5c8b3bb21c
--- /dev/null
+++ b/collections/_perspective-videos/layout.fr.md
@@ -0,0 +1,150 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "Une mise en page et une conception claires"
+nav_title: "Mise en page et conception claires"
+lang: fr
+last_updated: 2023-10-12 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 3
+
+translators:
+ - name: "Sofia Ahmed"
+ - name: "Rémi Bétin"
+contributors:
+ - name: "Sandra Velarde Gonzalez (ETNIC)"
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/layout/fr # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/layout/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Courte vidéo à propos d’une mise en page et d’une conception claires pour l’accessibilité Web - de quoi s’agit-il, qui en bénéficie, et comment mettre cela en pratique.
+image: /content-images/perspective-videos/layout.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
Statut : Mise à jour : 23 janvier 2019.
+ Rédacteur et chef du projet :Shadi Abou-Zahra. Développé par le Groupe de travail Éducation et Promotion avec le soutien du projet WAI-DEV, co-financé par la Commission européenne (CE). Mis à jour avec le soutien de la Fondation Ford. ACKNOWLEDGEMENTS.
+---
+
+L’accessibilité Web est essentielle pour les personnes en situation de handicap et utile à tous. Découvrez les effets de l’accessibilité et les bénéfices pour tous dans diverses situations.
+
+## Vidéo sur une mise en page et une conception claires
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="layout"
+ yt-id="tfkzj5VC9P8"
+ yt-id-ad="w-2nFEUBELo"
+%}
+
+Les informations de cette vidéo sont disponibles sous forme de [Transcription avec description des visuels](#transcript) en bas de la page.
+
+## Que signifie « une mise en page et une conception claires ? » {#what}
+
+Les différentes parties d’une page Web doivent être faciles à trouver et à identifier. Cela inclut les menus de navigation, les liens, et les sections de texte. Ils devraient être faciles à trouver et clairement identifiés. Par ailleurs, les étiquettes et les instructions des formulaires doivent être clairement associées à leur composant d’interface.
+
+## Qui dépend de cette fonctionnalité ? {#who}
+
+- Les personnes malvoyantes qui utilisent l’agrandissement d’écran et qui ne voient qu’une partie de l’écran à la fois.
+- Les personnes avec des troubles cognitifs ou d’apprentissage qui ont besoin de clarté et de cohérence pour s’orienter sur un site Web.
+
+## Quels sont les autres bénéfices ? {#others}
+
+- Le contenu est plus facile à utiliser pour les personnes qui ne connaissent pas le site Web ou l’application en question.
+- Le contenu est plus facile à utiliser pour les personnes qui ne sont pas à l’aise dans l’utilisation d’ordinateurs et du Web.
+- Le contenu est plus facile à utiliser pour les utilisateurs d’appareils mobiles, qui le voient sur un écran plus petit ; en particulier s’ils sont pressés ou distraits.
+- Le contenu et les fonctionnalités sont plus faciles à trouver et à identifier pour la plupart des utilisateurs.
+
+## Comment mettre cela en pratique ? {#action}
+
+Créez une structure claire, aussi bien visuellement qu’au niveau du balisage. Par exemple, faites en sorte que les sections puissent facilement être distinguées, comme la navigation, ou les composants d’interface liés entre eux dans un formulaire ; et fournissez des en-têtes pour identifier les groupes d’information. Fournissez aux utilisateurs des pages Web avec une présentation et des comportements cohérents à travers le site.
+
+## Plus d’informations {#resources}
+
+- **Principe d’accessibilité :**
+ - [Les utilisateurs peuvent facilement naviguer, trouver des contenus, et déterminer où ils sont](/fundamentals/accessibility-principles/#navigable)
+ - [Le contenu apparaît et fonctionne de manière prévisible](/fundamentals/accessibility-principles/#predictable)
+- **Pour démarrer :**
+ - [Fournissez des options de navigation claires et cohérentes](/tips/designing/#provide-clear-and-consistent-navigation-options)
+ - [Assurez-vous que les éléments interactifs sont facilement identifiables](/tips/designing/#ensure-that-interactive-elements-are-easy-to-identify)
+ - [Assurez-vous que les éléments de formulaire incluent des étiquettes clairement associées](/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels)
+- **Vérification facile :**
+ - [Formulaires, étiquettes, et erreurs](/test-evaluate/preliminary/#forms)
+- **Témoignages d’utilisateurs :**
+ - [Preety, élève de collège avec un trouble du déficit de l’attention avec hyperactivité et dyslexique](/people-use-web/user-stories/#classroomstudent)
+ - [Yun, retraité avec une mauvaise vue, un tremblement des mains, et une perte de mémoire à court terme](/people-use-web/user-stories/#retiree)
+ - [Luis, assistant en supermarché, atteint du syndrome de Down](/people-use-web/user-stories/#supermarketassistant)
+- **Règles pour l’accessibilité des contenus Web ([Vue d’ensemble des WCAG](/standards-guidelines/wcag/)) :**
+ - [Critères de succès liés à la « mise en page »](https://www.w3.org/WAI/WCAG21/quickref/?tags=layout)
+- **Tutoriel :**
+ - [Structure de page - Tutoriels sur l’accessibilité Web](/tutorials/page-structure/) (version préliminaire)
+
+## Transcription avec description des visuels {#transcript}
+
+
+
+
+
Audio
+
Visuel
+
+
+
+
+
L’accessibilité Web illustrée : une mise en page et une conception claires
+
L’accessibilité Web illustrée :
+ une mise en page et une conception claires
+
+
+
Un mauvais agencement peut être très frustrant.
+
Un homme dans une cuisine cherche de quoi faire du café. L’homme est frustré de ne pas trouver ce qu’il cherche.
+
+
+
Il en est de même pour le Web. Un bon design implique une bonne mise en page, qui offre une meilleure expérience utilisateur.
+
L’homme réorganise la cuisine en accéléré.
+
+
+
Cela suppose des en-têtes et des barres de navigation clairs, et un style cohérent.
+
L’homme navigue maintenant sur un site Web de livraison de pizzas mal conçu et secoue sa tête.
+
+
+
N’importe quel utilisateur du Web est frustré par une mauvaise mise en page et un mauvais design.
+
Une femme utilise le même site Web complexe avec un agrandisseur d’écran. Elle ne voit qu’une partie de l’écran à la fois, ce qui rend le site Web encore plus confus.
+
+
+
Avec des mises en page complexes, la recherche d’information est difficile voire impossible pour les personnes atteintes de troubles de la vision.
+
La femme secoue sa tête et est incapable d’utiliser ce site Web.
+
+
+
Elles sont aussi déroutantes pour les personnes avec des troubles cognitifs et d’apprentissage, qui ont besoin d’une présentation claire et cohérente.
+
L’homme appelle une amie pour l’aider.
+
+
+
Un mauvais design affecte aussi toute personne qui n’est pas particulièrement à l’aise avec les ordinateurs.
+
L’amie est tout aussi déroutée et navigue vers un meilleur site Web de pizzas.
+
+
+
L’accessibilité Web : essentielle pour certains, utile à tous.
+
Ce second site Web est bien plus clair et facile d’utilisation. Tous les deux sont heureux. La femme utilisant un agrandisseur d’écran a elle aussi utilisé ce site Web et savoure une pizza.
+
+
+
Visitez w3.org/WAI/perspectives pour plus d’informations concernant Une mise en page et une conception claires
+
Visitez
+ w3.org/WAI/perspectives
+ pour plus d’informations concernant
+ Une mise en page et une conception claires.
+ Logo de l’Initiative pour l’accessibilité du Web de W3C
+
+
+
diff --git a/collections/_perspective-videos/layout.md b/collections/_perspective-videos/layout.md
new file mode 100644
index 00000000000..4f1c9cc1415
--- /dev/null
+++ b/collections/_perspective-videos/layout.md
@@ -0,0 +1,152 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "Clear Layout and Design"
+nav_title: "Clear Layout and Design"
+lang: en # Change "en" to the translated-language shortcode
+last_updated: 2019-01-23 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 3
+
+# translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
+# - name: "Jan Doe" # Replace Jan Doe with translator name
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
+# contributors:
+# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/layout/ # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/layout/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Short video about clear layout and design for web accessibility - what is it, who depends on it, and what needs to happen to make it work.
+image: /content-images/perspective-videos/layout.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
+---
+
+Web accessibility is essential for people with disabilities and useful
+for all. Learn about the impact of accessibility and the benefits for
+everyone in a variety of situations.
+
+## Video on Clear Layout and Design
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="layout"
+ yt-id="tfkzj5VC9P8"
+ yt-id-ad="w-2nFEUBELo"
+%}
+
+This video information is available as a [Text Transcript with Description of Visuals](#transcript) below.
+
+## What is "Clear Layout and Design"? {#what}
+
+The different parts of a web page must be easy to locate and identify. This includes navigation menus, links, and text sections. These should be at predictable locations and consistently identified. Also form labels and instructions have to be clearly associated with their controls.
+
+## Who depends on this feature? {#who}
+
+- People with low vision who are using screen magnification and only see a portion of the screen at a time.
+- People with cognitive and learning disabilities who need clarity and consistency to orient themselves on a website.
+
+## What are the additional benefits? {#others}
+
+- Content is more usable for people who are new to the particular website or application.
+- Content is more usable for people who are not confident using computers and the web.
+- Content is more usable for mobile device users who are seeing it on smaller screens, especially if they are in a hurry or distracted.
+- Content and functionality is easier to locate and identify by most users.
+
+## What needs to happen for this to work? {#action}
+
+Design clear structure, both visually and through the markup. For example, make it easy to distinguish sections such as navigation, group related controls in a form, and provide headers to identify groups of information. Provide consistent presentation and behavior of web pages across a website.
+
+## Learn more {#resources}
+
+- **Accessibility Principle:**
+ - [Users can easily navigate, find content, and determine where they are](/fundamentals/accessibility-principles/#navigable)
+ - [Content appears and operates in predictable ways](/fundamentals/accessibility-principles/#predictable)
+- **Getting Started:**
+ - [Provide clear and consistent navigation options](/tips/designing/#provide-clear-and-consistent-navigation-options)
+ - [Ensure that interactive elements are easy to identify](/tips/designing/#ensure-that-interactive-elements-are-easy-to-identify)
+ - [Ensure that form elements include clearly associated labels](/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels)
+- **Easy Check:**
+ - [Forms, labels, and errors](/test-evaluate/preliminary/#forms)
+- **User Story:**
+ - [Preety, classroom student with attention deficit hyperactivity disorder (ADHD) and dyslexia](/people-use-web/user-stories/#classroomstudent)
+ - [Yun, retiree with low vision, hand tremor, and mild short-term memory loss](/people-use-web/user-stories/#retiree)
+ - [Luis, supermarket assistant with Down syndrome](/people-use-web/user-stories/#supermarketassistant)
+- **Web Content Accessibility Guidelines ([WCAG Overview](/standards-guidelines/wcag/)):**
+ - [Success Criteria relating to "layout"](https://www.w3.org/WAI/WCAG21/quickref/?tags=layout)
+- **Tutorial:**
+ - [Page Structure - Web Accessibility Tutorials](/tutorials/page-structure/) (draft)
+
+## Text Transcript with Description of Visuals {#transcript}
+
+
+
+
+
Audio
+
Visual
+
+
+
+
+
Web Accessibility Perspectives: Clear Layout and Design
+
Web Accessibility Perspectives:
+ Clear Layout and Design
+
+
+
Poor layout can be very frustrating.
+
A man in a kitchen is looking for things to make a coffee. The man is frustrated about not finding what he is looking for.
+
+
+
And the same applies to the Web. Good design involves good layout and that means a better user experience.
+
The man rearranges the kitchen in a time-lapse.
+
+
+
This includes clear headings, navigation bars, and consistent styling.
+
The man is now browsing a badly laid out pizza delivery website and is shaking his head.
+
+
+
Any web user will get frustrated with bad layout and design.
+
A woman is using the same complex website with screen magnification. She only sees a portion of the screen at a time, so the website appears even more confusing.
+
+
+
Complex layouts also make finding information difficult or impossible for people with visual disabilities.
+
The woman is shaking her head and is unable to use that website.
+
+
+
And they are confusing for people with cognitive and learning disabilities who need clarity and consistency of the presentation.
+
The man calls a friend over to help.
+
+
+
Bad design also impacts anyone who isn't particularly confident around computers.
+
The friend is just as confused and navigates to a different, better pizza website.
+
+
+
Web accessibility: Essential for some, useful for all.
+
This second website is much clearer and easier to use. They are both happy. The woman using screen magnification has also used that website and is delightfully eating a pizza.
+
+
+
Visit w3.org/WAI/perspectives for more information on Clear Layout and Design
+
Visit
+ w3.org/WAI/perspectives
+ for more information on
+ Clear Layout and Design.
+ W3C Web Accessibility Initiative logo
+
+
+
diff --git a/collections/_perspective-videos/notifications.fr.md b/collections/_perspective-videos/notifications.fr.md
new file mode 100644
index 00000000000..23c71c9f751
--- /dev/null
+++ b/collections/_perspective-videos/notifications.fr.md
@@ -0,0 +1,158 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "Notifications et retours d’information"
+nav_title: "Notifications et retours d’information"
+lang: fr
+last_updated: 2023-10-16 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 10
+
+translators:
+- name: "Sofia Ahmed"
+- name: "Rémi Bétin"
+contributors:
+- name: "Sandra Velarde Gonzalez (ETNIC)"
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/notifications/fr # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/notifications/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Courte vidéo à propos des notifications et du feedback de vidéos pour l’accessibilité Web - de quoi s’agit-il, qui en bénéficie, et comment mettre cela en pratique.
+image: /content-images/perspective-videos/notifications.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
Statut : Mise à jour : 23 janvier 2019.
+ Rédacteur et chef du projet :Shadi Abou-Zahra. Développé par l’ Groupe de travail Éducation et Promotion avec le soutien du projet WAI-DEV, co-financé par la Commission européenne (CE). Mis à jour avec le soutien de la Fondation Ford. ACKNOWLEDGEMENTS.
+---
+
+L’accessibilité Web est essentielle pour les personnes en situation de handicap et utile à tous. Découvrez les effets de l’accessibilité et les bénéfices pour tous dans diverses situations.
+
+## Vidéo sur les notifications et le retour d’information
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="notifications"
+ yt-id="E1fEv4Vpexg"
+ yt-id-ad="jtteu0ilDXk"
+%}
+
+Les informations de cette vidéo sont disponibles sous forme de [Transcription avec description des visuels](#transcript) en bas de la page.
+
+Qu’est-ce que des « notifications et retours d’information » ? {#what}
+-------------------------------------
+
+Les utilisateurs ont besoin de savoir ce qu’il se passe, et de recevoir un retour d’information approprié lors de l’interaction. Par exemple, les utilisateurs ont besoin de messages de confirmation quand les actions sont terminées ; par exemple, lorsqu’un formulaire est soumis. De plus, les messages d’erreur doivent fournir des instructions claires plutôt que créer de la confusion chez les utilisateurs.
+
+Qui dépend de cette fonctionnalité ? {#who}
+----------------------------
+
+- Les personnes avec des troubles cognitifs et d’apprentissage, qui peuvent être facilement perdues par un comportement inattendu et des messages d’erreur peu clairs.
+- Les personnes malvoyantes ou aveugles, qui comptent sur les notifications, les instructions, et les messages d’erreur pour comprendre le contexte et les interactions.
+
+Quels sont les autres bénéfices ? {#others}
+---------------------------------
+
+- Le contenu est plus utilisable pour les personnes qui ne connaissent pas le site Web ou l’application en question.
+- Le contenu est plus utilisable pour les personnes qui ne sont pas à l’aise avec les ordinateurs et le Web.
+- Le contenu est moins déroutant et intimidant pour tous, indépendamment des compétences.
+
+Comment mettre cela en pratique ? {#action}
+--------------------------------------
+
+Utilisez un langage clair et simple pour que les messages d’erreur soient plus compréhensibles. Par exemple, décrivez comment corriger l’erreur. Lorsque les formulaires sont soumis, fournissez un message de confirmation. Lorsqu’un changement apparaît à l’écran, comme l’ajout d’un nouveau contenu, prévenez les utilisateurs de ce changement.
+
+Plus d’informations {#resources}
+----------
+
+- **Principe d’accessibilité :**
+ - [Le contenu apparaît et fonctionne de façon prévisible](/fundamentals/accessibility-principles/#predictable)
+ - [Les utilisateurs sont accompagnés pour éviter et corriger les erreurs](/fundamentals/accessibility-principles/#tolerant)
+- **Pour démarrer :**
+ - [Fournissez des instructions claires](/tips/writing/#provide-clear-instructions)
+ - [Aider les utilisateurs à éviter et corriger les erreurs](/tips/developing/#help-users-avoid-and-correct-mistakes)
+- **Vérification facile :**
+ - [Formulaires, étiquettes, et erreurs (incluant les champs de recherche)](/test-evaluate/preliminary/#forms)
+- **Témoignages d’utilisateurs :**
+ - [Preety, collégienne atteinte d’un trouble du déficit de l’attention avec hyperactivité et dyslexie](/people-use-web/user-stories/#classroomstudent)
+ - [Yun, retraité avec une mauvaise vue, un tremblement des mains, et une perte de mémoire à court terme](/people-use-web/user-stories/#retiree)
+ - [Luis, assistant en supermarché, atteint du syndrome de Down](/people-use-web/user-stories/#supermarketassistant)
+- **Règles d’accessibilité pour les contenus Web ([Vue d’ensemble des WCAG](/standards-guidelines/wcag/)) :**
+ - [Critères de succès liés aux « erreurs »](https://www.w3.org/WAI/WCAG21/quickref/?tags=errors)
+- **Tutoriel :**
+ - [Formulaires – Tutoriels sur l’accessibilité Web](/tutorials/)
+
+## Transcription avec description des visuels {#transcript}
+
+
+
+
+
Audio
+
Visuel
+
+
+
+
+
L’accessibilité Web illustrée : des notifications et retour d’information
+
L’accessibilité Web illustrée :
+ Des notifications et retours d’information
+
+
+
Tous les bons mécanismes peuvent être en mouvement. Les aiguilles peuvent être exactement là où elles doivent être.
+
Les aiguilles d’une pendule à coucou atteignent le chiffre douze…
+
+
+
Mais si vous ne recevez pas la réponse attendue, vous finirez par vous demander s’il y a un problème.
+
… mais le coucou ne surgit pas pour signaler l’heure.
+
+
+
Il en est de même pour le Web.
+ Sans des notifications et un retour d’information clairs, les gens sont vite désorientés et perdus.
+
Un homme complète et soumet un formulaire sur un site Web puis son écran devient blanc, sans confirmation de sa soumission. Il semble perdu.
+
+
+
En particulier avec les messages d’erreur, qui sont souvent complexes et déroutants.
+
Un autre homme reçoit un message d’erreur technique de la part du formulaire d’inscription d’un site Web. Il lit :« Erreur ead#234532 données invalides ».
+
+
+
Pourtant, les rendre compréhensibles est généralement simple.
+
Le message d’erreur change et indique : « Format invalide, le format requis est “jour/mois/année” ».
+
+
+
Créer des sites Web et des applications prévisibles et compréhensibles les rend accessibles aux personnes avec des troubles cognitifs et d’apprentissage…
+
Une femme essaie de se connecter au Wi-Fi dans un café et reçoit un message d’erreur énigmatique.
+
+
+
… et plus utilisable pour tous.
+
D’autres personnes dans le café semblent rencontrer le même problème.
+
+
+
En particulier les personnes moins à l’aise avec les ordinateurs.
+
Le message d’erreur devient plus compréhensible. La femme du café semble soulagée.
+
+
+
L’accessibilité Web : essentielle pour certains, utile à tous.
+
Le coucou surgit de l’horloge.
+
+
+
Allez sur w3.org/WAI/perspectives pour plus d’informations sur « Des notifications et retours d’information »
+
Allez sur
+ w3.org/WAI/perspectives
+ pour plus d’informations sur
+ « Des notifications et retours d’information ».
+ Logo d’Initiative pour l’accessibilité du Web du W3C
+
+
+
diff --git a/collections/_perspective-videos/notifications.md b/collections/_perspective-videos/notifications.md
new file mode 100644
index 00000000000..2d0af64b3d9
--- /dev/null
+++ b/collections/_perspective-videos/notifications.md
@@ -0,0 +1,158 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "Notifications and Feedback"
+nav_title: "Notifications and Feedback"
+lang: en # Change "en" to the translated-language shortcode
+last_updated: 2019-01-23 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 10
+
+# translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
+# - name: "Jan Doe" # Replace Jan Doe with translator name
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
+# contributors:
+# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/notifications/ # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/notifications/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Short video about notifications and feedback for web accessibility - what are they, who depends on them, and what needs to happen to make them work.
+image: /content-images/perspective-videos/notifications.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
+---
+
+Web accessibility is essential for people with disabilities and useful for all. Learn about the impact of accessibility and the benefits for everyone in a variety of situations.
+
+## Video on Notifications and Feedback
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="notifications"
+ yt-id="E1fEv4Vpexg"
+ yt-id-ad="jtteu0ilDXk"
+%}
+
+This video information is available as a [Text Transcript with Description of Visuals](#transcript) below.
+
+What is "Notifications and Feedback"? {#what}
+-------------------------------------
+
+Users need to know what is going on, and get appropriate feedback during interaction. For example, users need confirmation messages when actions are completed, such as when forms are submitted. Also, error messages must provide clear directions rather than confuse users.
+
+Who depends on this feature? {#who}
+----------------------------
+
+- People with some cognitive and learning disabilities, who may be easily confused by unexpected behavior and unclear error messages.
+- People with partial sight and blindness, who rely on notifications, instructions, and errors messages to understand the context and interactions.
+
+What are the additional benefits? {#others}
+---------------------------------
+
+- Content is more usable for people who are new to the particular website or application.
+- Content is more usable for people who are not confident using computers and the web.
+- Content is less confusing and daunting to everyone, regardless of skills.
+
+What needs to happen for this to work? {#action}
+--------------------------------------
+
+Use clear and simple language to make error messages more understandable. For example, describe how to fix an error. When forms are submitted, provide a confirmation message. When a change is made on the screen, such as new content added, alert users to the change.
+
+Learn more {#resources}
+----------
+
+- **Accessibility Principle:**
+ - [Content appears and operates in predictable ways](/fundamentals/accessibility-principles/#predictable)
+ - [Users are helped to avoid and correct mistakes](/fundamentals/accessibility-principles/#tolerant)
+- **Getting Started:**
+ - [Provide clear instructions](/tips/writing/#provide-clear-instructions)
+ - [Help users avoid and correct mistakes](/tips/developing/#help-users-avoid-and-correct-mistakes)
+- **Easy Check:**
+ - [Forms, labels, and errors (including Search fields)](/test-evaluate/preliminary/#forms)
+- **User Story:**
+ - [Preety, middle school student with attention deficit hyperactivity disorder (ADHD) and dyslexia](/people-use-web/user-stories/#classroomstudent)
+ - [Yun, retiree with low vision, hand tremor, and mild short-term memory loss](/people-use-web/user-stories/#retiree)
+ - [Luis, supermarket assistant with Down syndrome](/people-use-web/user-stories/#supermarketassistant)
+- **Web Content Accessibility Guidelines ([WCAG Overview](/standards-guidelines/wcag/)):**
+ - [Success Criteria relating to "errors"](https://www.w3.org/WAI/WCAG21/quickref/?tags=errors)
+- **Tutorial:**
+ - [Forms - Web Accessibility Tutorials](/tutorials/)
+
+## Text Transcript with Description of Visuals {#transcript}
+
+
+
+
+
Audio
+
Visual
+
+
+
+
+
Web Accessibility Perspectives: Notifications and Feedback
+
Web Accessibility Perspectives:
+ Notifications and Feedback
+
+
+
All the right gears can be put in motion. The hands can be at the exact place they need to be.
+
The hands on a cuckoo clock reach twelve...
+
+
+
But if you don't get the response that you're expecting, you'll end up wondering if there's some sort of problem.
+
... but the cuckoo bird does not pop out of its door to signal the time.
+
+
+
It's the same on the Web.
+ Without clear notifications and feedback, people are quickly disorientated and confused.
+
A man completes and submits a form on a website to get a rather blank screen with no confirmation of his submission. He looks confused.
+
+
+
Especially error messages which are often complex and confusing.
+
Another man receives a technical error message from a website registration form. It reads: "Error ead#234532 invalid data".
+
+
+
Yet making them understandable is usually quite simple.
+
The error message changes to say: "Invalid format, required format is 'day/month/year'.
+
+
+
Making websites and apps predictable and understandable makes them accessible for people with cognitive and learning disabilities...
+
A woman is trying to log into the Wi-Fi of a cafe and receives a cryptic error message.
+
+
+
... and more usable for everyone.
+
Other people at the cafe also seem to be having this problem.
+
+
+
Especially people with lower computer skills.
+
The error message changes to something more understandable. The woman at the cafe looks relieved.
+
+
+
Web accessibility: Essential for some, useful for all.
+
The cuckoo bird pops out of the clock.
+
+
+
Visit w3.org/WAI/perspectives for more information on Notifications and Feedback
+
Visit
+ w3.org/WAI/perspectives
+ for more information on
+ Notifications and Feedback.
+ W3C Web Accessibility Initiative logo
+
+
+
diff --git a/collections/_perspective-videos/speech.fr.md b/collections/_perspective-videos/speech.fr.md
new file mode 100644
index 00000000000..b63e2c4b879
--- /dev/null
+++ b/collections/_perspective-videos/speech.fr.md
@@ -0,0 +1,160 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "La synthèse vocale"
+nav_title: "Synthèse vocale"
+lang: fr
+last_updated: 2023-10-12 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 4
+
+translators:
+- name: "Sofia Ahmed"
+- name: "Rémi Bétin"
+contributors:
+- name: "Sandra Velarde Gonzalez (ETNIC)"
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/speech/fr # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/speech/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Courte vidéo à propos de la synthèse vocale pour l’accessibilité Web - de quoi s’agit-il, qui en bénéficie, et comment mettre cela en pratique.
+image: /content-images/perspective-videos/speech.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
Statut : Mise à jour : 23 janvier 2019.
+ Rédacteur et chef du projet :Shadi Abou-Zahra. Développé par le Groupe de travail Éducation et Promotion avec le soutien du projet WAI-DEV, co-financé par la Commission européenne (CE). Mis à jour avec le soutien de la Fondation Ford. ACKNOWLEDGEMENTS.
+---
+
+L’accessibilité Web est essentielle pour les personnes en situation de handicap et utile à tous. Découvrez les effets de l’accessibilité et les bénéfices pour tous dans diverses situations.
+
+## Vidéo sur la synthèse vocale
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="speech"
+ yt-id="8Rn5pXCdZWU"
+ yt-id-ad="F3A1VffiOH4"
+%}
+
+Les informations de cette vidéo sont disponibles sous forme de [Transcription avec description des visuels](#transcript) en bas de la page.
+
+Qu’est-ce que la « synthèse vocale » ? {#what}
+-------------------------
+
+De nombreux ordinateurs et appareils mobiles intègrent aujourd’hui un logiciel de conversion du texte en parole. Certaines personnes en situation de handicap, notamment les personnes aveugles, utilisent des logiciels spécialisés appelés lecteurs d’écran. Les lecteurs d’écran fournissent des fonctionnalités importantes telles que naviguer à travers les en-têtes, prononcer les équivalents textuels des images, et identifier les liens internes et externes. Ils peuvent également mettre le texte en surbrillance au fur et à mesure de la lecture à haute voix du texte, pour les personnes qui souhaitent voir et entendre le contenu en même temps. Le contenu doit être codé correctement pour que toutes les fonctionnalités du logiciel de conversion de texte en parole fonctionnent pour le contenu en question.
+
+Qui dépend de cette fonctionnalité ? {#who}
+----------------------------
+
+- Les personnes aveugles qui ne peuvent pas voir ce qui est affiché à l’écran.
+- Les personnes malvoyantes (souvent considérées comme légalement aveugles) qui ne peuvent pas voir certains types de contenus.
+- Les personnes dyslexiques et les personnes avec d’autres troubles cognitifs et d’apprentissage qui ont besoin d’entendre et de voir le texte pour mieux le comprendre.
+
+Quels sont les autres bénéfices ? {#others}
+---------------------------------
+
+- Le contenu peut être lu à voix haute pour les personnes qui ne peuvent pas lire le langage écrit.
+- Le contenu peut être lu à voix haute pour les personnes qui préfèrent écouter ; par exemple, en faisant autre chose.
+
+Comment mettre cela en pratique ? {#action}
+--------------------------------------
+
+Utilisez du balisage HTML sémantique pour les éléments de structure telles que les en-têtes, les paragraphes, les listes, les formulaires et les tableaux. Fournissez des équivalents textuels pour les images, les icônes, et les autres contenus non textuels. Assurez-vous de la [compatibilité avec le clavier](/perspective-videos/keyboard/), et assurez-vous que l’information textuelle est compréhensible sans le contexte visuel.
+
+Plus d’informations {#resources}
+----------
+
+- **Principes d’accessibilité :**
+ - [Équivalents textuels pour les contenus non textuels](/fundamentals/accessibility-principles/#alternatives)
+ - [Le contenu apparaît et fonctionne de façon prévisible](/fundamentals/accessibility-principles/#adaptable)
+- **Pour démarrer :**
+ - [Rédigez des équivalents textuels pertinents pour les images](/tips/writing/#write-meaningful-text-alternatives-for-images)
+ - [Utilisez des en-têtes pour donner du sens et de la structure](/tips/writing/#use-headings-to-convey-meaning-and-structure)
+ - [Identifiez la langue de la page et les changements de langue](/tips/developing/#identify-page-language-and-language-changes)
+- **Vérifications faciles :**
+ - [Équivalents textuels pour les images (« alt text »)](/test-evaluate/preliminary/#images)
+ - [Vérification de la structure de base](/test-evaluate/preliminary/#structure)
+- **Témoignages d’utilisateurs :**
+ - [Ilya, cadre supérieure, aveugle](/people-use-web/user-stories/#accountant)
+ - [Kasseem, adolescente sourde et aveugle](/people-use-web/user-stories/#teenager)
+ - [Preety, élève de collège avec un trouble du déficit de l’attention avec hyperactivité et dyslexique](/people-use-web/user-stories/#classroomstudent)
+- **Règles pour l’accessibilité des contenus Web ([Vue d’ensemble des WCAG](/standards-guidelines/wcag/)):**
+ - [Critères de succès liés aux « images » et à la « structure »](https://www.w3.org/WAI/WCAG21/quickref/?tags=images%2Cstructure)
+- **Applicabilité aux appareils mobiles :**
+ - [Objets non textuels (images, son, vidéo) sans équivalents textuels](/standards-guidelines/shared-experiences/#non-text)
+ - [Information transmise en utilisant seulement du CSS (formatage visuel)](/standards-guidelines/shared-experiences/#visual-formatting)
+ - [Étiquette de lien non descriptive](/standards-guidelines/shared-experiences/#link-label)
+- **Tutoriel :**
+ - [Tutoriels sur l’accessibilité](/tutorials/) (plusieurs sujets à ce propos)
+
+## Transcription avec description des visuels {#transcript}
+
+
+
+
+
Audio
+
Visuel
+
+
+
+
+
L’accessibilité Web illustrée : la synthèse vocale
+
L’accessibilité Web illustrée :
+ la synthèse vocale
+
+
+
(Ordinateur) « Certaines personnes ne peuvent pas voir le texte sur cet écran. »
+(Ordinateur) « Heureusement, les ordinateurs peuvent convertir du texte en parole. »
+
Un homme utilise un ordinateur portable dont l’écran montre un texte mis en surbrillance à mesure qu’il est prononcé.
+
+
+
C’est une technologie dont dépendent de nombreuses personnes aveugles depuis des années.
+
Un chien-guide est couché aux pieds de l’homme. Il pourrait s’agir d’une personne aveugle.
+
+
+
Mais c’est également important pour de nombreuses personnes dyslexiques.
+
Une femme lit sur une tablette et écoute avec un casque.
+
+
+
Et cela est très utile pour des personnes qui ont des difficultés à lire un texte.
+
Un homme enlève ses lunettes et écoute un article d’actualité sur sa tablette.
+
+
+
Tout comme pour les personnes qui aiment faire autre chose en même temps.
+
Un homme écoute un article de revue en faisant la vaisselle.
+
+
+
Mais pour que cela fonctionne, les sites Web et les applications doivent être codés correctement.
+
Le site Web de la femme portant un casque ne fonctionne pas correctement. Elle est frustrée.
+
+
+
Ce qui a pour bénéfice supplémentaire d’aider les moteurs de recherche à mieux indexer les contenus des sites Web.
+
+
+
+
L’accessibilité Web : essentielle pour certains, utile à tous.
+
L’homme avec le chien-guide utilise son appareil mobile dehors avec un casque à conduction osseuse. La vidéo montre les personnes précédentes utiliser la synthèse vocale.
+
+
+
Allez sur w3.org/WAI/perspectives pour plus d’informations concernant La synthèse vocale.
+
Allez sur
+ w3.org/WAI/perspectives
+ pour plus d’informations sur
+ La synthèse vocale.
+ Logo de l’Initiative pour l’accessibilité du Web du W3C
+
+
+
diff --git a/collections/_perspective-videos/speech.md b/collections/_perspective-videos/speech.md
new file mode 100644
index 00000000000..c468b8571c2
--- /dev/null
+++ b/collections/_perspective-videos/speech.md
@@ -0,0 +1,160 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "Text to Speech"
+nav_title: "Text to Speech"
+lang: en # Change "en" to the translated-language shortcode
+last_updated: 2019-01-23 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 4
+
+# translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
+# - name: "Jan Doe" # Replace Jan Doe with translator name
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
+# contributors:
+# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/speech/ # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/speech/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Short video about text to speech for web accessibility - what is it, who depends on it, and what needs to happen to make it work.
+image: /content-images/perspective-videos/speech.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
+---
+
+Web accessibility is essential for people with disabilities and useful for all. Learn about the impact of accessibility and the benefits for everyone in a variety of situations.
+
+## Video on Text to Speech
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="speech"
+ yt-id="8Rn5pXCdZWU"
+ yt-id-ad="F3A1VffiOH4"
+%}
+
+This video information is available as a [Text Transcript with Description of Visuals](#transcript) below.
+
+What is "Text to Speech"? {#what}
+-------------------------
+
+Many computers and mobile devices today have built in text-to-speech software. Some people with disabilities, including people who are blind, use specialized software called screen readers. Screen readers provide important functionality such as navigating through headings, speaking image alternatives, and identifying internal and external links. They can also highlight the text as it is being read aloud for people to see and hear the content at the same time. Content must be coded properly so that all of the functionality of the text-to-speech software works with the content.
+
+Who depends on this feature? {#who}
+----------------------------
+
+- People who are blind and cannot see what is on the screen.
+- People who have partial sight (often legally blind) and cannot see certain types of content.
+- People with dyslexia and other cognitive and learning disabilities who need to hear and see the text to better understand it.
+
+What are the additional benefits? {#others}
+---------------------------------
+
+- Content can be read aloud for people who cannot read the written language.
+- Content can be read aloud for people who prefer to listen, for example, while multi-tasking.
+
+What needs to happen for this to work? {#action}
+--------------------------------------
+
+Use semantic HTML markup for structures such as headings, paragraphs, lists, forms, and tables. Provide text alternatives for images, icons, and other non-text content. Ensure [keyboard compatibility](/perspective-videos/keyboard/), and ensure that text information is understandable without the visual context.
+
+Learn more {#resources}
+----------
+
+- **Accessibility Principle:**
+ - [Text alternatives for non-text content](/fundamentals/accessibility-principles/#alternatives)
+ - [Content can be presented in different ways](/fundamentals/accessibility-principles/#adaptable)
+- **Getting Started:**
+ - [Write meaningful text alternatives for images](/tips/writing/#write-meaningful-text-alternatives-for-images)
+ - [Use headings to convey meaning and structure](/tips/writing/#use-headings-to-convey-meaning-and-structure)
+ - [Identify page language and language changes](/tips/developing/#identify-page-language-and-language-changes)
+- **Easy Check:**
+ - [Image text alternatives ("alt text")](/test-evaluate/preliminary/#images)
+ - [Basic Structure Check](/test-evaluate/preliminary/#structure)
+- **User Story:**
+ - [Ilya, senior staff member who is blind](/people-use-web/user-stories/#accountant)
+ - [Kaseem, teenager who is deaf and blind](/people-use-web/user-stories/#teenager)
+ - [Preety, middle school student with attention deficit hyperactivity disorder and dyslexia](/people-use-web/user-stories/#classroomstudent)
+- **Web Content Accessibility Guidelines ([WCAG Overview](/standards-guidelines/wcag/)):**
+ - [Success Criteria relating to "images" and "structure"](https://www.w3.org/WAI/WCAG21/quickref/?tags=images%2Cstructure)
+- **Mobile Applicability:**
+ - [Non-text objects (images, sound, video) with no text alternative](/standards-guidelines/shared-experiences/#non-text)
+ - [Information conveyed only using CSS (visual formatting)](/standards-guidelines/shared-experiences/#visual-formatting)
+ - [Non-descriptive link label](/standards-guidelines/shared-experiences/#link-label)
+- **Tutorial:**
+ - [Web Accessibility Tutorials](/tutorials/) (several related topics)
+
+## Text Transcript with Description of Visuals {#transcript}
+
+
+
+
+
Audio
+
Visual
+
+
+
+
+
Web Accessibility Perspectives: Text to Speech
+
Web Accessibility Perspectives:
+ Text to Speech
+
+
+
(Computer) "Some people can't see the text on this screen."
+(Computer) "Fortunately, computers can convert text to speech."
+
A man is using a laptop with the text on the screen being highlighted as it is spoken.
+
+
+
It's technology that many people who are blind have been relying on for years.
+
A service dog is next to the man. He may be blind.
+
+
+
But it's also important for many people with dyslexia.
+
A woman is reading on a tablet and listen with headphones.
+
+
+
And very useful for people with difficulty reading text.
+
A man removes his glasses and listens to a news article on his tablet.
+
+
+
As well as some people who just like to multi-task.
+
A man listens to a magazine article as they do the washing.
+
+
+
But for this to work, websites and apps need to be properly coded.
+
The website is not properly working for the woman with headphones. She is frustrated.
+
+
+
Which has the added benefit of helping search engines index websites' contents better.
+
+
+
+
Web accessibility: Essential for some, useful for all.
+
The man with the service dog is using his mobile device outside with bone conducting headphones. Different people from earlier are seen using text-to-speech.
+
+
+
Visit w3.org/WAI/perspectives for more information on Text to Speech
+
Visit
+ w3.org/WAI/perspectives
+ for more information on
+ Text to Speech.
+ W3C Web Accessibility Initiative logo
+
+
+
diff --git a/collections/_perspective-videos/understandable.fr.md b/collections/_perspective-videos/understandable.fr.md
new file mode 100644
index 00000000000..fb37e541534
--- /dev/null
+++ b/collections/_perspective-videos/understandable.fr.md
@@ -0,0 +1,140 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "Un contenu compréhensible"
+nav_title: "Contenu compréhensible"
+lang: fr
+last_updated: 2023-10-16 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 9
+
+translators:
+- name: "Sofia Ahmed"
+- name: "Rémi Bétin"
+contributors:
+- name: "Sandra Velarde Gonzalez (ETNIC)"
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/understandable/fr # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/understandable/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Courte vidéo à propos du contenu compréhensible pour l’accessibilité Web - de quoi s’agit-il, qui en bénéficie, et comment mettre cela en pratique.
+image: /content-images/perspective-videos/understandable.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
Statut : Mise à jour : 23 janvier 2019.
+ Rédacteur et chef du projet :Shadi Abou-Zahra. Développé par le Groupe de travail Éducation et Promotion avec le soutien du projet WAI-DEV, co-financé par la Commission européenne (CE). Mis à jour avec le soutien de la Fondation Ford. ACKNOWLEDGEMENTS.
+---
+
+L’accessibilité Web est essentielle pour les personnes en situation de handicap et utile à tous. Découvrez les effets de l’accessibilité et les bénéfices pour tous dans diverses situations.
+
+## Vidéo sur le contenu compréhensible
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="understandable"
+ yt-id="BYRxF2yInfA"
+ yt-id-ad="MNlT1Qy3pvQ"
+%}
+
+Les informations de cette vidéo sont disponibles sous forme de [Transcription avec description des visuels](#transcript) en bas de la page.
+
+Qu’est-ce qu’un « contenu compréhensible » ? {#what}
+---------------------------------
+
+Le contenu doit être facile à suivre et à comprendre pour de nombreux utilisateurs. Pour la plupart des contenus, il suffit d’éviter les phrases trop complexes et le jargon, et de fournir une mise en page et un design clairs. Pour certains contenus plus complexes tels que de l’information médicale, des informations supplémentaires, faciles à lire, peuvent être nécessaires.
+
+Qui dépend de cette fonctionnalité ? {#who}
+----------------------------
+
+- Les personnes avec des troubles d’apprentissage qui ne comprennent pas le vocabulaire et les structures de phrases complexes.
+- Les personnes avec des troubles cognitifs qui ont des difficultés à se concentrer sur les longs passages d’un texte dense.
+
+Quels sont les autres bénéfices ? {#others}
+---------------------------------
+
+- Le contenu est plus utilisable pour les personnes moins à l’aise avec les langues, comme les personnes qui ne connaissent pas couramment la langue du site Web et les personnes avec un faible niveau d’alphabétisation.
+- Le contenu est plus facile à comprendre par les utilisateurs qui ne sont pas familiers avec le sujet.
+- Le contenu est plus facile à parcourir, et donne une vue d’ensemble de l’information.
+
+Comment mettre cela en pratique ? {#action}
+--------------------------------------
+
+Évitez les mots trop complexes, le jargon, et les acronymes ; ou fournissez des explications lorsqu’ils sont nécessaires. Structurez le contenu en utilisant les en-têtes, les listes, et l’espacement. Fournissez des illustrations qui clarifient le contenu, lorsque nécessaire. Faites [une mise en page et une conception claires](/perspective-videos/layout/) avec des repères de navigation et d’orientation cohérents.
+
+Plus d’informations {#resources}
+----------
+
+- **Principe d’accessibilité :**
+ - [Des informations et une interface utilisateur compréhensibles](/fundamentals/accessibility-principles/#understandable)
+- **Pour démarrer :**
+ - [Gardez un contenu clair et concis](/tips/writing/#keep-content-clear-and-concise)
+ - [Fournissez des instructions claires](/tips/writing/#provide-clear-instructions)
+ - [Utilisez des en-têtes pour donner du sens et une structure](/tips/writing/#use-headings-to-convey-meaning-and-structure)
+- **Vérification simple :**
+ - [En-têtes](/test-evaluate/preliminary/#headings)
+- **Témoignages d’utilisateurs :**
+ - [Preety, collégienne atteinte d’un trouble du déficit de l’attention avec hyperactivité et dyslexie](/people-use-web/user-stories/#classroomstudent)
+ - [Yun, retraité avec une mauvaise vue, un tremblement des mains, et une perte de mémoire à court terme](/people-use-web/user-stories/#retiree)
+ - [Luis, assistant en supermarché, atteint du syndrome de Down](/people-use-web/user-stories/#supermarketassistant)
+- **Règles d’accessibilité pour les contenus Web ([Vue d’ensemble des WCAG](/standards-guidelines/wcag/)) :**
+ - [Critères de succès liés au « texte »](https://www.w3.org/WAI/WCAG21/quickref/?tags=text)
+- **Applicabilité aux appareils mobiles :**
+ - [Mots longs, phrases longues et complexes, jargon](/standards-guidelines/shared-experiences/#complex)
+ - [Le contenu fait apparaître de nouvelles fenêtres sans avertir l’utilisateur](/standards-guidelines/shared-experiences/#popups)
+ - [Clignotement, déplacement, défilement ou mise à jour automatique du contenu](/standards-guidelines/shared-experiences/#dynamic)
+
+## Transcription avec description des visuels {#transcript}
+
+
+
+
+
Audio
+
Visuel
+
+
+
+
+
L’accessibilité Web illustrée : un contenu compréhensible
+
L’accessibilité Web illustrée :
+ Du contenu compréhensible
+
+
+
Au lieu de dire : « Postuler une notion de manière plus hérissante qu’avec une syntaxe quintessenciée est incommodant »,
+ il est préférable de dire : « Un langage inutilement long et complexe est pénible à lire ».
+
Deux personnes essaient de suivre les instructions d’un site Web de cuisine qui utilise beaucoup de texte, sans illustration ni structure.
+
+
+
Pourtant, de nombreux sites Web n’utilisent pas d’en-têtes, de listes ni de séparations. Ou bien ils utilisent un langage trop complexe, du jargon, et des acronymes sans explications.
+
Elles recherchent des mots dans un dictionnaire pour comprendre la recette.
+
+
+
Cela les rend difficiles et désagréables à lire pour beaucoup de personnes — y compris ceux dont ce n’est pas la langue maternelle ; et cela les rend inutilisables pour les personnes avec des troubles cognitifs et d’apprentissage.
+
Elles sont perdues et frustrées à cause du site Web.
+
+
+
L’accessibilité Web : essentielle pour certains, utile à tous.
+
Elles cherchent et trouvent un site Web de cuisine différent avec un texte plus structuré et des illustrations.
+
+
+
Allez sur w3.org/WAI/perspectives pour plus d’informations sur « Un contenu compréhensible »
+
Allez sur
+ w3.org/WAI/perspectives
+ pour plus d’informations sur
+ "Un contenu compréhensible".
+ Logo de l’Initiative pour l’accessibilité du Web du W3C
+
+
+
diff --git a/collections/_perspective-videos/understandable.md b/collections/_perspective-videos/understandable.md
new file mode 100644
index 00000000000..f80021d958d
--- /dev/null
+++ b/collections/_perspective-videos/understandable.md
@@ -0,0 +1,140 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "Understandable Content"
+nav_title: "Understandable Content"
+lang: en # Change "en" to the translated-language shortcode
+last_updated: 2019-01-23 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 9
+
+# translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
+# - name: "Jan Doe" # Replace Jan Doe with translator name
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
+# contributors:
+# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/understandable/ # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/understandable/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Short video about understandable content for web accessibility - what is it, who depends on it, and what needs to happen to make it work.
+image: /content-images/perspective-videos/understandable.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
+---
+
+Web accessibility is essential for people with disabilities and useful for all. Learn about the impact of accessibility and the benefits for everyone in a variety of situations.
+
+## Video on Understandable Content
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="understandable"
+ yt-id="BYRxF2yInfA"
+ yt-id-ad="MNlT1Qy3pvQ"
+%}
+
+This video information is available as a [Text Transcript with Description of Visuals](#transcript) below.
+
+What is "Understandable Content"? {#what}
+---------------------------------
+
+Content must be easy to follow and understand for many users. For most content, this means simply avoiding overly complex sentences and jargon, and providing clear layout and design. For some complex content such as medical information, separate, easy-to-read information may be necessary.
+
+Who depends on this feature? {#who}
+----------------------------
+
+- People with learning disabilities who cannot understand complex sentence structures and vocabulary.
+- People with cognitive disabilities who have difficulty focusing on long passages of dense text.
+
+What are the additional benefits? {#others}
+---------------------------------
+
+- Content is more usable for people with lower language skills, such as people who are not fluent in the language of the website and people with low literacy.
+- Content is easier to understand by users who are not familiar with the topic.
+- Content is easier to skim, and get an overview of the information.
+
+What needs to happen for this to work? {#action}
+--------------------------------------
+
+Avoid overly complex words, jargon, and acronyms, or provide explanations when they need to be used. Provide structure using headings, lists, and spacing. Provide illustrations that clarify the content, when helpful. Provide [clear layout and design](/perspective-videos/layout/) with consistent orientation and navigation cues.
+
+Learn more {#resources}
+----------
+
+- **Accessibility Principle:**
+ - [Understandable information and user interface](/fundamentals/accessibility-principles/#understandable)
+- **Getting Started:**
+ - [Keep content clear and concise](/tips/writing/#keep-content-clear-and-concise)
+ - [Provide clear instructions](/tips/writing/#provide-clear-instructions)
+ - [Use headings to convey meaning and structure](/tips/writing/#use-headings-to-convey-meaning-and-structure)
+- **Easy Check:**
+ - [Headings](/test-evaluate/preliminary/#headings)
+- **User Story:**
+ - [Preety, middle school student with attention deficit hyperactivity disorder and dyslexia](/people-use-web/user-stories/#classroomstudent)
+ - [Yun, retiree with low vision, hand tremor, and mild short-term memory loss](/people-use-web/user-stories/#retiree)
+ - [Luis, supermarket assistant with Down syndrome](/people-use-web/user-stories/#supermarketassistant)
+- **Web Content Accessibility Guidelines ([WCAG Overview](/standards-guidelines/wcag/)):**
+ - [Success Criteria relating to "text"](https://www.w3.org/WAI/WCAG21/quickref/?tags=text)
+- **Mobile Applicability:**
+ - [Long words, long and complex sentences, jargon](/standards-guidelines/shared-experiences/#complex)
+ - [Content spawning new windows without warning user](/standards-guidelines/shared-experiences/#popups)
+ - [Blinking, moving, scrolling or auto-updating content](/standards-guidelines/shared-experiences/#dynamic)
+
+## Text Transcript with Description of Visuals {#transcript}
+
+
+
+
+
Audio
+
Visual
+
+
+
+
+
Web Accessibility Perspectives: Understandable Content
+
Web Accessibility Perspectives:
+ Understandable Content
+
+
+
Instead of saying: "To postulate a conceit more irksome than being addressed in sesquipedalian syntax is adamantine",
+ it is better to say: "Being spoken to in unnecessarily long and complicated language is a pain".
+
Two people are trying to follow instructions on a cooking website using lots of text with no illustrations or structure.
+
+
+
Yet many websites lack structuring using headings, lists and separation. Or they use overly complex language, jargon, and unexplained acronyms.
+
They are looking up words in a dictionary to understand the recipe.
+
+
+
It makes them difficult and unappealing to use for many people, including non-native speakers, and makes them unusable for people with cognitive and learning disabilities.
+
They are confused and frustrated by the website.
+
+
+
Web accessibility: Essential for some, useful for all.
+
They search and find a different cooking website with more structured text and illustrations.
+
+
+
Visit w3.org/WAI/perspectives for more information on Understandable Content
+
Visit
+ w3.org/WAI/perspectives
+ for more information on
+ Understandable Content.
+ W3C Web Accessibility Initiative logo
+
+
+
diff --git a/collections/_perspective-videos/voice.fr.md b/collections/_perspective-videos/voice.fr.md
new file mode 100644
index 00000000000..7ee2b08b1f2
--- /dev/null
+++ b/collections/_perspective-videos/voice.fr.md
@@ -0,0 +1,178 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "La reconnaissance vocale"
+nav_title: "Reconnaissance vocale"
+lang: fr
+last_updated: 2023-10-16 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 8
+
+translators:
+- name: "Sofia Ahmed"
+- name: "Rémi Bétin"
+contributors:
+- name: "Sandra Velarde Gonzalez (ETNIC)"
+
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/voice/fr # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/voice/ # Do not change this
+changelog: /perspective-videos/changelog/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Courte vidéo à propos de la reconnaissance vocale pour l’accessibilité Web – de quoi s’agit-il, qui en bénéficie, et comment mettre cela en pratique.
+image: /content-images/perspective-videos/voice.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
Statut : Mise à jour : 26 février 2021. Première publication en mai 2016. CHANGELOG.
+ Rédacteur et chef de projet :Shadi Abou-Zahra. Développé par le Groupe de travail Éducation et Promotion avec le soutien du projet WAI-DEV, co-financé par la Commission européenne (CE). Mis à jour avec le soutien de la Fondation Ford. ACKNOWLEDGEMENTS.
+---
+
+L’accessibilité Web est essentielle pour les personnes en situation de handicap et utile à tous. Découvrez les effets de l’accessibilité et les bénéfices pour tous dans diverses situations.
+
+La « reconnaissance vocale » (ou « reconnaissance automatique de la parole ») concerne la reconnaissance des mots pour la transcription de la parole en texte, les assistants virtuels et les autres interfaces de commande vocale. La « reconnaissance des voix » ou « reconnaissance des locuteurs » est une technologie qui identifie qui est le locuteur, et non les mots qu’il prononce.
+
+## Vidéo sur la reconnaissance vocale
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="voice"
+ yt-id="7RHG_XiQ0ck"
+ yt-id-ad="21yWr7evHTs"
+%}
+
+Les informations de cette vidéo sont disponibles sous forme de [Transcription avec description des visuels](#transcript) en bas de la page.
+
+Qu’est-ce que la « reconnaissance vocale » ? {#what}
+----------------------------
+
+La reconnaissance vocale peut être utilisée pour dicter du texte dans un champ de formulaire, mais également pour naviguer et activer des liens, des boutons, et d’autres composants d’interface. La plupart des ordinateurs et des appareils mobiles possèdent une fonctionnalité de reconnaissance vocale intégrée. Certains outils de reconnaissance vocale permettent un contrôle complet sur l’interaction avec l’ordinateur ; les utilisateurs pouvant, de cette manière, faire défiler l’écran, copier et coller du texte, activer des menus, et utiliser d’autres fonctions.
+
+Qui dépend de cette fonctionnalité ? {#who}
+----------------------------
+
+- Les personnes en situation de handicap physique qui ne peuvent pas utiliser le clavier ou la souris.
+- Les personnes souffrant de maladies chroniques, telles que des troubles musculo-squelettiques (TMS), qui ont besoin de limiter ou d’éviter l’utilisation du clavier ou de la souris.
+- Les personnes avec des troubles cognitifs et d’apprentissage qui ont besoin d’utiliser la parole plutôt que taper au clavier.
+
+Quels sont les autres bénéfices ? {#others}
+---------------------------------
+
+- Le contenu est utilisable par les personnes en situation de handicap temporaire, telle qu’un bras cassé.
+- Le contenu est plus utilisable par les personnes qui préfèrent parler plutôt que taper au clavier ; par exemple, en faisant autre chose.
+
+Comment mettre cela en pratique ? {#action}
+--------------------------------------
+
+Le contenu doit être conçu et codé correctement pour pouvoir être contrôlé par la voix. La [compatibilité avec le clavier](/perspective-videos/keyboard/) est la base d’un tel codage. De plus, les étiquettes et les identifiants des composants d’interface dans le code source doivent correspondre à leur présentation visuelle, de manière à clarifier quelle instruction vocale activera un composant d’interface.
+
+Plus d’informations {#resources}
+----------
+
+- **Principe d’accessibilité :**
+ - [Des fonctionnalités sont accessibles au clavier](/fundamentals/accessibility-principles/#keyboard)
+ - [Le contenu apparaît et fonctionne de façon prévisible](/fundamentals/accessibility-principles/#predictable)
+- **Pour démarrer :**
+ - [Assurez-vous que tous les éléments interactifs sont accessibles au clavier](/tips/developing/#ensure-that-all-interactive-elements-are-keyboard-accessible)
+ - [Transmettez une signification pour les éléments interactifs non standards](/tips/developing/#provide-meaning-for-non-standard-interactive-elements)
+ - [Incluez des équivalents aux images](/tips/designing/#include-image-and-media-alternatives-in-your-design)
+- **Vérifications faciles :**
+ - [Accès au clavier et visibilité du focus](/test-evaluate/preliminary/#interaction)
+ - [Formulaires, étiquettes, et erreurs](/test-evaluate/preliminary/#forms)
+- **Témoignages d’utilisateurs :**
+ - [Alex, journaliste avec un trouble musculo-squelettique](/people-use-web/user-stories/#reporter)
+- **Règles pour l’accessibilité des contenus Web ([Vue d’ensemble des WCAG](/standards-guidelines/wcag/)):**
+ - [Critères de succès liés au « clavier » et aux « commandes »](https://www.w3.org/WAI/WCAG21/quickref/?tags=keyboard%2Ccontrols)
+- **Applicabilité aux appareils mobiles :**
+ - [La souris est requise pour l’interaction et la navigation](/standards-guidelines/shared-experiences/#mouse)
+ - [Étiquette de lien non descriptive](/standards-guidelines/shared-experiences/#link-label)
+- **Tutoriel :**
+ - [Tutoriels sur l’accessibilité Web](/tutorials/) (plusieurs sujets à ce propos)
+
+## Transcription avec description des visuels {#transcript}
+
+
+
+
+
Audio
+
Visuel
+
+
+
+
+
L’accessibilité Web illustrée : la reconnaissance vocale
+
L’accessibilité Web illustrée : la reconnaissance vocale
+
+
+
Imaginez si vous ne pouviez communiquer avec votre famille que par écrit.
+
Une femme écrit : « Que veux-tu manger pour le petit-déjeuner ? », et donne le papier à l’homme assis à côté d’elle.
+
+
+
Parfois, il est juste plus facile de parler.
+ Un des progrès de la technologie est la reconnaissance vocale.
+ Que ce soit pour effectuer une recherche sur le Web :
+
Un homme utilise une tablette grâce à sa voix.
+
+
+
(Un utilisateur de tablette) « Architecture du dix-neuvième siècle »,
+
Des résultats de recherche apparaissent à l’écran.
+
+
+
dicter des e-mails,
+
Un homme âgé utilise également une tablette grâce à sa voix.
+
+
+
ou contrôler votre application de navigation.
+
Une femme parle à son téléphone mobile et suit les instructions de navigation sur l’écran.
+
+
+
De nombreuses personnes en situation de handicap physique dépendent de la reconnaissance vocale pour utiliser un ordinateur.
+ (Un homme dans un fauteuil roulant) « Passer commande. »
+
+
Un homme en fauteuil roulant utilise un casque pour l’ordinateur.
+
+
+
Mais pour que cela soit possible, les sites Web et les applications doivent être codés correctement.
+(Un homme dans un fauteuil roulant) « Annuler ? »
+
Rien ne se passe sur l’ordinateur.
+
+
+
La reconnaissance vocale peut également aider de nombreuses autres personnes en situation de handicap temporaire, telle qu’un bras cassé.
+(Une jeune femme) « Passer commande.
+
Une femme avec un bras dans une écharpe utilise la reconnaissance vocale avec succès.
+
+
+
Cela peut aussi prévenir l’aggravation d’un trouble, tel les troubles musculo-squelettiques (TMS).
+
Un homme est dehors avec son chien et dicte des notes sur son téléphone mobile.
+
+
+
Ou simplement être utile aux personnes qui préfèrent utiliser la voix.
+ (Un homme dans un fauteuil roulant) « Passer commande. »
+
L’homme dans le fauteuil roulant utilise désormais un site Web qui fonctionne.
+
+
+
L’accessiblité Web : essentielle pour certains, utile à tous.
+
+
+
+
Visitez w3.org/WAI/perspectives pour plus d’information sur La reconnaissance vocale.
+
Visitez
+ w3.org/WAI/perspectives
+ pour plus d’informations sur
+ La reconnaissance vocale.
+ Logo de l’Initiative pour l’accessibilié du Web du W3C
+
+
+
diff --git a/collections/_perspective-videos/voice.md b/collections/_perspective-videos/voice.md
new file mode 100644
index 00000000000..4d61f2b0744
--- /dev/null
+++ b/collections/_perspective-videos/voice.md
@@ -0,0 +1,178 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "Speech Recognition"
+nav_title: "Speech Recognition"
+lang: en # Change "en" to the translated-language shortcode
+last_updated: 2021-02-26 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+order: 8
+
+# translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
+# - name: "Jan Doe" # Replace Jan Doe with translator name
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
+# contributors:
+# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
+
+
+github:
+ label: wai-perspective-videos
+
+permalink: /perspective-videos/voice/ # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /perspective-videos/voice/ # Do not change this
+
+resource:
+ ref: /perspective-videos/ # Do not change this
+
+acknowledgements: /perspective-videos/acknowledgements/ # Do not change this
+
+description: Short video about speech recognition for web accessibility - what is it, who depends on it, and what needs to happen to make it work.
+image: /content-images/perspective-videos/voice.jpg
+
+# In the footer below:
+# Do not change the dates
+# Do not translate or change ACKNOWLEDGEMENTS
+# Translate the other words below.
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+
+---
+
+Web accessibility is essential for people with disabilities and useful for all. Learn about the impact of accessibility and the benefits for everyone in a variety of situations.
+
+Update: The video uses "voice recognition". This page is updated to use "speech recognition". "Speech recognition" is about recognizing words for speech-to-text (STT) transcription, virtual assistants, and other speech user interfaces. "Voice recognition" or "speaker recognition" is technology that identifies who the speaker is, not the words they're saying. We hope to update the video to use "speech recognition" in late 2022.
+
+## Video on Speech Recognition
+{:#film.no-display}
+
+{% include video-player-data.html
+ video-id="voice"
+ yt-id="7RHG_XiQ0ck"
+ yt-id-ad="21yWr7evHTs"
+%}
+
+This video information is available as a [Text Transcript with Description of Visuals](#transcript) below.
+
+What is "Speech Recognition"? {#what}
+----------------------------
+
+Speech recognition can be used for dictating text in a form field, as well as navigating to and activating links, buttons, and other controls. Most computers and mobile devices today have built-in speech recognition functionality. Some speech recognition tools allow complete control over computer interaction, allowing users to scroll the screen, copy and paste text, activate menus, and perform other functions.
+
+Who depends on this feature? {#who}
+----------------------------
+
+- People with physical disabilities who cannot use the keyboard or mouse.
+- People with chronic conditions, such as repetitive stress injuries (RSI), who need to limit or avoid using the keyboard or mouse.
+- People with cognitive and learning disabilities who need to use speech rather than to type.
+
+What are the additional benefits? {#others}
+---------------------------------
+
+- Content works for people with temporary limitations, such as a broken arm.
+- Content is more usable for people who prefer to speak rather than type, for example, while multi-tasking.
+
+What needs to happen for this to work? {#action}
+--------------------------------------
+
+Content must be properly designed and coded so that it can be controlled by speech. [keyboard compatibility](/perspective-videos/keyboard/) is the basis for such coding. In addition, labels and identifiers for controls in the source code need to match their visual presentation, so that it is clear which speech command will activate a control.
+
+Learn more {#resources}
+----------
+
+- **Accessibility Principle:**
+ - [Functionality is available from a keyboard](/fundamentals/accessibility-principles/#keyboard)
+ - [Content appears and operates in predictable ways](/fundamentals/accessibility-principles/#predictable)
+- **Getting Started:**
+ - [Ensure that all interactive elements are keyboard accessible](/tips/developing/#ensure-that-all-interactive-elements-are-keyboard-accessible)
+ - [Provide meaning for non-standard interactive elements](/tips/developing/#provide-meaning-for-non-standard-interactive-elements)
+ - [Provide alternative text for images](/tips/designing/#include-image-and-media-alternatives-in-your-design)
+- **Easy Check:**
+ - [Keyboard access and visual focus](/test-evaluate/preliminary/#interaction)
+ - [Forms, labels, and errors](/test-evaluate/preliminary/#forms)
+- **User Story:**
+ - [Alex, reporter with repetitive stress injury](/people-use-web/user-stories/#reporter)
+- **Web Content Accessibility Guidelines ([WCAG Overview](/standards-guidelines/wcag/)):**
+ - [Success Criteria relating to "keyboard" and "controls"](https://www.w3.org/WAI/WCAG21/quickref/?tags=keyboard%2Ccontrols)
+- **Mobile Applicability:**
+ - [Mouse required for interaction and navigation](/standards-guidelines/shared-experiences/#mouse)
+ - [Non descriptive link label](/standards-guidelines/shared-experiences/#link-label)
+- **Tutorial:**
+ - [Web Accessibility Tutorials](/tutorials/) (several related topics)
+
+## Text Transcript with Description of Visuals {#transcript}
+
+
+
+
+
Audio
+
Visual
+
+
+
+
+
Web Accessibility Perspectives: [Speech] Recognition
+
Web Accessibility Perspectives:
+ [Speech] Recognition
+
+
+
Imagine if you could only communicate with your family by writing.
+
A woman writes "what would you like for breakfast?", and passes the note to the man next to her.
+
+
+
Sometimes it's just easier to speak.
+ One of the advances of technology is [speech] recognition.
+ Whether it's searching the web:
+
A man is using a tablet by speech.
+
+
+
(Tablet user) "Nineteenth century architecture."
+
Search results appear on the screen.
+
+
+
Dictating emails.
+
An older man is also using a tablet by speech.
+
+
+
Or controlling your navigation app.
+
A woman is speaking to her mobile phone and follows the directions on the screen.
+
+
+
Many people with physical disabilities rely on [speech] recognition to use the computer.
+ (Man in wheelchair) "Place order."
+
+
A man with a wheelchair is using a headset for the computer.
+
+
+
But for that to happen websites and apps need to be properly coded.
+(Man in wheelchair) "Cancel?"
+
Nothing happens on the computer.
+
+
+
[Speech] recognition can help lots of other people with temporary limitations too, like an injured arm.
+(Woman) "Place order."
+
A woman with her arm in a sling successfully using speech.
+
+
+
It can also prevent injuries becoming worse, like RSI: Repetitive Stress Injury.
+
A man is outside with a dog taking speech notes on his mobile phone.
+
+
+
Or for people simple preferring [speech].
+ (Man in wheelchair) "Place Order."
+
The man with the wheelchair is now using a website that works.
+
+
+
Web accessibility: Essential for some, useful for all.
+
+
+
+
Visit w3.org/WAI/perspectives for more information on [Speech] Recognition
+
Visit
+ w3.org/WAI/perspectives
+ for more information on
+ [Speech] Recognition.
+ W3C Web Accessibility Initiative logo
+
+
+
diff --git a/content-images/perspective-videos/audio-description.svg b/content-images/perspective-videos/audio-description.svg
new file mode 100644
index 00000000000..9825b78e3d0
--- /dev/null
+++ b/content-images/perspective-videos/audio-description.svg
@@ -0,0 +1,6 @@
+
+
+
+
diff --git a/content-images/perspective-videos/captions.jpg b/content-images/perspective-videos/captions.jpg
new file mode 100644
index 00000000000..721317e1f64
Binary files /dev/null and b/content-images/perspective-videos/captions.jpg differ
diff --git a/content-images/perspective-videos/contrast.jpg b/content-images/perspective-videos/contrast.jpg
new file mode 100644
index 00000000000..c3cdba87fca
Binary files /dev/null and b/content-images/perspective-videos/contrast.jpg differ
diff --git a/content-images/perspective-videos/controls.jpg b/content-images/perspective-videos/controls.jpg
new file mode 100644
index 00000000000..2adae0dd76b
Binary files /dev/null and b/content-images/perspective-videos/controls.jpg differ
diff --git a/content-images/perspective-videos/customizable.jpg b/content-images/perspective-videos/customizable.jpg
new file mode 100644
index 00000000000..bc009b551b1
Binary files /dev/null and b/content-images/perspective-videos/customizable.jpg differ
diff --git a/content-images/perspective-videos/keyboard.jpg b/content-images/perspective-videos/keyboard.jpg
new file mode 100644
index 00000000000..8c21caccc70
Binary files /dev/null and b/content-images/perspective-videos/keyboard.jpg differ
diff --git a/content-images/perspective-videos/layout.jpg b/content-images/perspective-videos/layout.jpg
new file mode 100644
index 00000000000..050bf9ea952
Binary files /dev/null and b/content-images/perspective-videos/layout.jpg differ
diff --git a/content-images/perspective-videos/notifications.jpg b/content-images/perspective-videos/notifications.jpg
new file mode 100644
index 00000000000..b25c1fb3c77
Binary files /dev/null and b/content-images/perspective-videos/notifications.jpg differ
diff --git a/content-images/perspective-videos/overview.jpg b/content-images/perspective-videos/overview.jpg
new file mode 100644
index 00000000000..40dcce895a3
Binary files /dev/null and b/content-images/perspective-videos/overview.jpg differ
diff --git a/content-images/perspective-videos/play.svg b/content-images/perspective-videos/play.svg
new file mode 100644
index 00000000000..e432fef31ad
--- /dev/null
+++ b/content-images/perspective-videos/play.svg
@@ -0,0 +1,6 @@
+
+
+
+
diff --git a/content-images/perspective-videos/speech.jpg b/content-images/perspective-videos/speech.jpg
new file mode 100644
index 00000000000..1e38bc37122
Binary files /dev/null and b/content-images/perspective-videos/speech.jpg differ
diff --git a/content-images/perspective-videos/thumbnails/captions.jpg b/content-images/perspective-videos/thumbnails/captions.jpg
new file mode 100644
index 00000000000..11b58089e1f
Binary files /dev/null and b/content-images/perspective-videos/thumbnails/captions.jpg differ
diff --git a/content-images/perspective-videos/thumbnails/contrast.jpg b/content-images/perspective-videos/thumbnails/contrast.jpg
new file mode 100644
index 00000000000..b9b87e3246b
Binary files /dev/null and b/content-images/perspective-videos/thumbnails/contrast.jpg differ
diff --git a/content-images/perspective-videos/thumbnails/controls.jpg b/content-images/perspective-videos/thumbnails/controls.jpg
new file mode 100644
index 00000000000..d4901a8ad04
Binary files /dev/null and b/content-images/perspective-videos/thumbnails/controls.jpg differ
diff --git a/content-images/perspective-videos/thumbnails/customizable.jpg b/content-images/perspective-videos/thumbnails/customizable.jpg
new file mode 100644
index 00000000000..de91cb07056
Binary files /dev/null and b/content-images/perspective-videos/thumbnails/customizable.jpg differ
diff --git a/content-images/perspective-videos/thumbnails/keyboard.jpg b/content-images/perspective-videos/thumbnails/keyboard.jpg
new file mode 100644
index 00000000000..06bdf94f647
Binary files /dev/null and b/content-images/perspective-videos/thumbnails/keyboard.jpg differ
diff --git a/content-images/perspective-videos/thumbnails/layout.jpg b/content-images/perspective-videos/thumbnails/layout.jpg
new file mode 100644
index 00000000000..0fb7d03503e
Binary files /dev/null and b/content-images/perspective-videos/thumbnails/layout.jpg differ
diff --git a/content-images/perspective-videos/thumbnails/notifications.jpg b/content-images/perspective-videos/thumbnails/notifications.jpg
new file mode 100644
index 00000000000..4178394eaf7
Binary files /dev/null and b/content-images/perspective-videos/thumbnails/notifications.jpg differ
diff --git a/content-images/perspective-videos/thumbnails/overview.jpg b/content-images/perspective-videos/thumbnails/overview.jpg
new file mode 100644
index 00000000000..9a10b455a2c
Binary files /dev/null and b/content-images/perspective-videos/thumbnails/overview.jpg differ
diff --git a/content-images/perspective-videos/thumbnails/speech.jpg b/content-images/perspective-videos/thumbnails/speech.jpg
new file mode 100644
index 00000000000..2c7412496af
Binary files /dev/null and b/content-images/perspective-videos/thumbnails/speech.jpg differ
diff --git a/content-images/perspective-videos/thumbnails/understandable.jpg b/content-images/perspective-videos/thumbnails/understandable.jpg
new file mode 100644
index 00000000000..fee15230757
Binary files /dev/null and b/content-images/perspective-videos/thumbnails/understandable.jpg differ
diff --git a/content-images/perspective-videos/thumbnails/voice.jpg b/content-images/perspective-videos/thumbnails/voice.jpg
new file mode 100644
index 00000000000..c6013701a34
Binary files /dev/null and b/content-images/perspective-videos/thumbnails/voice.jpg differ
diff --git a/content-images/perspective-videos/understandable.jpg b/content-images/perspective-videos/understandable.jpg
new file mode 100644
index 00000000000..031ffbbb1cc
Binary files /dev/null and b/content-images/perspective-videos/understandable.jpg differ
diff --git a/content-images/perspective-videos/voice.jpg b/content-images/perspective-videos/voice.jpg
new file mode 100644
index 00000000000..dcd2cbc25c5
Binary files /dev/null and b/content-images/perspective-videos/voice.jpg differ