From df82bcd9dcfa4cb7053950ba950ba306d60f374f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Thu, 11 Nov 2021 07:53:42 +0100 Subject: Prepare Accessibility section for Markdown conversion (#2975) * Remove summary and seoSummary * Fix hidden blocks * Remove spans * Remove notranslate * Remove extra ids * Fixing links * Fixing another link * Fixing headings with name * Fix one offs and other isolated issues * Fix warnings * Fix notes * fix absolute and english links * fix images --- .../accessibility/understanding_wcag/index.html | 12 ++--- .../perceivable/color_contrast/index.html | 15 ++----- .../understanding_wcag/perceivable/index.html | 52 +++++++++++----------- 3 files changed, 36 insertions(+), 43 deletions(-) (limited to 'files/fr/web/accessibility/understanding_wcag') diff --git a/files/fr/web/accessibility/understanding_wcag/index.html b/files/fr/web/accessibility/understanding_wcag/index.html index 5e99ef795d..23805dc3ca 100644 --- a/files/fr/web/accessibility/understanding_wcag/index.html +++ b/files/fr/web/accessibility/understanding_wcag/index.html @@ -7,7 +7,7 @@ tags: - Web Content Accessibility Guidelines translation_of: Web/Accessibility/Understanding_WCAG --- -

Cet ensemble d'articles fournit des explications rapides pour vous aider à comprendre les étapes à suivre pour vous conformer aux recommandations décrites dans les Directives d'accessibilité du contenu Web 2.0 ou 2.1 du W3C (ou simplement WCAG, aux fins de cet article).

+

Cet ensemble d'articles fournit des explications rapides pour vous aider à comprendre les étapes à suivre pour vous conformer aux recommandations décrites dans les Directives d'accessibilité du contenu Web 2.0 ou 2.1 du W3C (ou simplement WCAG, aux fins de cet article).

Les WCAG 2.0 et 2.1 fournissent un ensemble détaillé de lignes directrices pour rendre le contenu Web plus accessible aux personnes ayant une grande variété de handicaps. Il est complet mais incroyablement détaillé et assez difficile à comprendre rapidement. Pour cette raison, nous avons résumé les étapes pratiques que vous devez suivre pour satisfaire les différentes recommandations, avec d'autres liens vers plus de détails si nécessaire.

@@ -18,10 +18,10 @@ translation_of: Web/Accessibility/Understanding_WCAG

Chacun des liens ci-dessous vous mènera à des pages qui développent davantage ces domaines, vous donnant des conseils pratiques sur la façon de rédiger votre contenu Web afin qu'il soit conforme aux critères de succès décrits dans chacune des directives WCAG 2.0 et 2.1 qui se subdivisent davantage en chaque principe.

Dois-je utiliser WCAG 2.0 ou 2.1?

@@ -55,4 +55,4 @@ translation_of: Web/Accessibility/Understanding_WCAG

Ce guide est destiné à fournir des informations pratiques pour vous aider à créer de meilleurs sites Web plus accessibles. Cependant, nous ne sommes pas des avocats et rien de tout cela ne constitue un avis juridique. Si vous êtes préoccupé par les implications juridiques de l'accessibilité du Web, nous vous recommandons de vérifier la législation spécifique régissant l'accessibilité du Web / des ressources publiques dans votre pays ou région, et de demander l'avis d'un avocat qualifié.

-

Qu'est ce que l'accessibilité? et particularité, les directives d'Accessibility et la section sur la loi fournissent des informations complémentaires.

+

Qu'est ce que l'accessibilité? et particularité, les directives d'Accessibility et la section sur la loi fournissent des informations complémentaires.

diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html index 32d2c8465d..98d4766bd9 100644 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html @@ -68,8 +68,7 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_

Les deux textes ont leur couleur noire par défaut. La "bonne" <div> a un fond violet clair, ce qui rend le texte facile à lire:

- -

{{EmbedLiveSample('exemple1', '100%', '100')}}

+

{{EmbedLiveSample('Bon_exemple', '100%', '100')}}

+

Mauvais exemple

La "mauvaise" <div>, en revanche, a un fond violet très foncé, ce qui rend le texte beaucoup plus difficile à lire:

- -

{{EmbedLiveSample('exemple2', '100%', '100')}}

+

{{EmbedLiveSample('Mauvais_exemple', '100%', '100')}}

-
-

Solution

diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/index.html index e8059d8fca..9ed3ff530a 100644 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/index.html +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/index.html @@ -14,10 +14,10 @@ tags: - time-based media translation_of: Web/Accessibility/Understanding_WCAG/Perceivable --- -

This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses.

+

This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses.

-

Note: To read the W3C definitions for Perceivable and its guidelines and success criteria, see Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

+

Note : To read the W3C definitions for Perceivable and its guidelines and success criteria, see Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

Guideline 1.1 — Providing text alternatives for non-text content

@@ -36,28 +36,28 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable 1.1.1 Provide text equivalents  (A) All images that convey meaningful content should be given suitable alternative text. - Text alternatives. + Text alternatives. Complex images or charts should have an accessible alternative provided, either on the same page or linked to. Use a regular link rather than the longdesc attribute. -

A text description may work, or an accessible data table (see HTML table advanced features and accessibility). Also see Other text alternative mechanisms for the argument against longdesc.

+

A text description may work, or an accessible data table (see HTML table advanced features and accessibility). Also see Other text alternative mechanisms for the argument against longdesc.

Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar). -

See Text alternatives for static caption options, and Audio transcripts, Video text tracks, and Other multimedia content for other alternatives.

+

See Text alternatives for static caption options, and Audio transcripts, Video text tracks, and Other multimedia content for other alternatives.

UI Controls such as form elements and buttons should have text labels that describe their purpose. - Buttons are simple — you should make sure the button text describes the function of the button (e.g. <button>Upload image</button>). For further information on other UI controls, see UI controls. + Buttons are simple — you should make sure the button text describes the function of the button (e.g. <button>Upload image</button>). For further information on other UI controls, see UI controls. Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users. -

Decorative images should be implemented using CSS background images (see Backgrounds).  If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (alt=""), otherwise screenreaders may try to read out the filepath, etc.

+

Decorative images should be implemented using CSS background images (see Backgrounds).  If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (alt=""), otherwise screenreaders may try to read out the filepath, etc.

If you are including background video or audio that autoplays, make it as unobtrusive as possible. Don't make it look/sound like content, and provide a control to turn it off. Ideally, don't include it at all.

@@ -66,7 +66,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable
-

Note: Also see the WCAG description for Guideline 1.1: Text alternatives.

+

Note : Also see the WCAG description for Guideline 1.1: Text alternatives.

Guideline 1.2 — Providing text alternatives for time-based media

@@ -83,17 +83,17 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable 1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A) A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video). - See Audio transcripts for transcript information. No audio description tutorial available as yet. + See Audio transcripts for transcript information. No audio description tutorial available as yet. 1.2.2 Provide captions for web-based video (A) You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video. - See Video text tracks for HTML5 video captions, and Other multimedia content for other technologies. See also Add your own subtitles & closed captions (YouTube). + See Video text tracks for HTML5 video captions, and Other multimedia content for other technologies. See also Add your own subtitles & closed captions (YouTube). 1.2.3 Provide text transcript or audio description for web-based video (A) You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone. - See Audio transcripts for transcript information. No audio description tutorial available as yet. + See Audio transcripts for transcript information. No audio description tutorial available as yet. 1.2.4 Provide captions for live audio (AA) @@ -118,18 +118,18 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable 1.2.8 Provide an alternative for prerecorded media (AAA) For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content. - See Audio transcripts for transcript information. + See Audio transcripts for transcript information. 1.2.9 Provide a transcript for live audio (AAA) For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content. - See Audio transcripts for transcript information. + See Audio transcripts for transcript information.
-

Note: Also see the WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media.

+

Note : Also see the WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media.

Guideline 1.3 — Create content that can be presented in different ways

@@ -155,13 +155,13 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable The whole of -

HTML: A good basis for accessibility is packed with information about this, but you should particularly refer to Good semantics, UI controls, and Text alternatives.

+

HTML: A good basis for accessibility is packed with information about this, but you should particularly refer to Good semantics, UI controls, and Text alternatives.

1.3.2 Meaningful content sequence (A) A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup. - Again, refer to HTML: A good basis for accessibility. + Again, refer to HTML: A good basis for accessibility. 1.3.3 Sensory characteristics (A) @@ -175,7 +175,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable
-

Note: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.

+

Note : Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.

  @@ -205,7 +205,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable
-

Note: Also see the WCAG description for Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.

+

Note : Also see the WCAG description for Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.

Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background

@@ -224,12 +224,12 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable

Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of "required" would be more appropriate.

- See Color and color contrast and Multiple labels. + See Color and color contrast and Multiple labels. 1.4.2 Audio controls (A) For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume. - Use native <button>s to provide accessible keyboard controls, as shown in Video player syling basics. + Use native <button>s to provide accessible keyboard controls, as shown in Video player syling basics. 1.4.3 Minimum contrast (AA) @@ -241,7 +241,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable
  • Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.
    • - See Color and color contrast. + See Color and color contrast. 1.4.4 Resize text (AA) @@ -263,7 +263,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable
  • Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.
    • - See Color and color contrast. + See Color and color contrast. 1.4.7 Low or no background audio (AAA) @@ -337,7 +337,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable
    -

    Note: Also see the WCAG description for Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background..

    +

    Note : Also see the WCAG description for Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background..

     

    @@ -349,9 +349,9 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable
    1. Perceivable
      2. -
    2. Operable
      3. -
    3. Understandable
      4. -
    4. Robust
      5. +
    5. Operable
      6. +
    6. Understandable
      7. +
    7. Robust
    -- cgit v1.2.3-54-g00ecf