Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fix] Change all links from WCAG 2.1 to WCAG 2.2 #578

Merged
merged 2 commits into from
Nov 6, 2024
Merged

[Fix] Change all links from WCAG 2.1 to WCAG 2.2 #578

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8923e21
[Fix] Change all links from WCAG 2.1 to WCAG 2.2
MewenLeHo Oct 29, 2024
b60f3d9
Merge branch 'master' into master-mlh-update-links-WCAG-21-to-22
MewenLeHo Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/assets/json/checklist/tests-web-en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@
"title": "Provide accessible flashes",
"type": ["Manual test"],
"tests": ["Inspect the animation and video contents of the page that flashes"],
"verifier": ["Make sure that any content does not show rapid flashes (more than 3 flashes per second) or the flashes are below the <a href='https://www.w3.org/TR/WCAG21/#dfn-general-flash-and-red-flash-thresholds' target='_blank'>general flash and red flash thresholds</a>."],
"verifier": ["Make sure that any content does not show rapid flashes (more than 3 flashes per second) or the flashes are below the <a href='https://www.w3.org/TR/WCAG22/#dfn-general-flash-and-red-flash-thresholds' target='_blank'>general flash and red flash thresholds</a>."],
"resultat": ["No rapid flash or beyond the general flash and red flash thresholds."],
"exception": "",
"raccourcis": "",
Expand Down Expand Up @@ -813,7 +813,7 @@
"title": "Make sure the autocomplete attribute is present to avoid entry errors",
"type": ["Manual test"],
"tests": ["Manual test", "Browse the forms", "Fill in the forms with specific information about the user"],
"verifier": ["For any field that collects specific information about the user (<a href='https://www.w3.org/TR/WCAG21/#input-purposes' target='_blank' aria-label='exhaustive list (new window)'> exhaustive list </a>), the <code> autocomplete </code> attribute of the field must be present and have an appropriate value "],
"verifier": ["For any field that collects specific information about the user (<a href='https://www.w3.org/TR/WCAG22/#input-purposes' target='_blank' aria-label='exhaustive list (new window)'> exhaustive list </a>), the <code> autocomplete </code> attribute of the field must be present and have an appropriate value "],
"resultat": ["The <code>autocomplete</code> attribute is:", "present", "and the value of this attribute is relevant"],
"exception": [],
"raccourcis": "",
Expand Down
4 changes: 2 additions & 2 deletions src/assets/json/checklist/tests-web-fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@
"title": "Rendre accessible les clignotements",
"type": ["Test manuel"],
"tests": ["Examiner les contenus de type animations et vidéos de la page qui clignotent"],
"verifier": ["Vérifier qu'il n'y a pas de contenu présentant des clignotements rapides (plus de 3 flash à la seconde) ou les <a href='https://www.w3.org/TR/WCAG21/#dfn-general-flash-and-red-flash-thresholds' target='_blank' hreflang='en'>flashs sont inférieurs au seuil général ou seuil de rouge</a>."],
"verifier": ["Vérifier qu'il n'y a pas de contenu présentant des clignotements rapides (plus de 3 flash à la seconde) ou les <a href='https://www.w3.org/TR/WCAG22/#dfn-general-flash-and-red-flash-thresholds' target='_blank' hreflang='en'>flashs sont inférieurs au seuil général ou seuil de rouge</a>."],
"resultat": ["Absence de clignotement ou de flash rapide ou dépassant le seuil général ou de rouge"],
"exception": "",
"raccourcis": "",
Expand Down Expand Up @@ -813,7 +813,7 @@
"title": "S'assurer que l'attribut autocomplete est mis en place afin d'éviter les erreurs de saisie",
"type": ["Test manuel"],
"tests": ["Test manuel", "Parcourir les formulaires", "Renseigner les formulaires avec des informations spécifiques sur l'utilisateur"],
"verifier": ["Pour tout champ qui permet de collecter des informations spécifiques sur l'utilisateur (<a href='https://www.w3.org/TR/WCAG21/#input-purposes' target='_blank' aria-label='liste exhaustive (nouvelle fenêtre)'>liste exhaustive</a>), l'attribut <code>autocomplete</code> du champ doit être présent et avoir une valeur adéquate"],
"verifier": ["Pour tout champ qui permet de collecter des informations spécifiques sur l'utilisateur (<a href='https://www.w3.org/TR/WCAG22/#input-purposes' target='_blank' aria-label='liste exhaustive (nouvelle fenêtre)'>liste exhaustive</a>), l'attribut <code>autocomplete</code> du champ doit être présent et avoir une valeur adéquate"],
"resultat": ["L'attribut <code>autocomplete</code> est présent", "et la valeur de cet attribut est pertinente"],
"exception": [],
"raccourcis": "",
Expand Down
2 changes: 1 addition & 1 deletion src/en/accessibility.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ css:

<h3 class="h6 mt-4">Standard applied</h3>
<p>
<a href="https://www.w3.org/TR/WCAG21/"><abbr title="Web Content Accessibility Guidelines">WCAG</abbr> version 2.1, level AA</a>.
<a href="https://www.w3.org/TR/WCAG22/"><abbr title="Web Content Accessibility Guidelines">WCAG</abbr> version 2.2, level AA</a>.
</p>
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/en/articles/aria-status-messages.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ tags:
---

## Status message and accessibility
The WCAG 2.1 criterion <a href="https://www.w3.org/TR/WCAG21/#status-messages">4.1.3 Status Messages</a> requires that important informations for the user, which do not induce a change of context (no opening of a new window, no focus on the content, no modification of the content or the viewport), are seen via properties and roles (<abbr>ARIA</abbr>) by anyone using <abbr>AT</abbr> without taking focus on the message.
The WCAG 2.1 criterion <a href="https://www.w3.org/TR/WCAG22/#status-messages">4.1.3 Status Messages</a> requires that important informations for the user, which do not induce a change of context (no opening of a new window, no focus on the content, no modification of the content or the viewport), are seen via properties and roles (<abbr>ARIA</abbr>) by anyone using <abbr>AT</abbr> without taking focus on the message.

## Some examples of status messages

Expand Down
8 changes: 4 additions & 4 deletions src/en/articles/font-size-and-colors.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,19 @@ In this article, we will try to answer the following questions concerning the ac
## What do the guidelines say ?

The [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) do not impose a minimum size or colors for texts. However two criteria must be taken into consideration:
- <a href="https://www.w3.org/TR/WCAG21/#resize-text"> 1.4.4 Resize text </a>
- <a href="https://www.w3.org/TR/WCAG21/#contrast-minimum"> 1.4.3 Contrast (Minimum) </a>
- <a href="https://www.w3.org/TR/WCAG22/#resize-text"> 1.4.4 Resize text </a>
- <a href="https://www.w3.org/TR/WCAG22/#contrast-minimum"> 1.4.3 Contrast (Minimum) </a>

### Text size enlargement

If the guidelines do not impose a minimum size for characters, [criterion 1.4.4](https://www.w3.org/TR/WCAG21/#resize-text) indicates that the user must be able to increase text size up to 200% without loss of content or functionality. To comply with this criterion, it is essential to test. The procedure to increase text size is available on the following page: [Text size enlargement](https://a11y-guidelines.orange.com/en/web/toolbox/methods-and-test-tools/text-zoom/).
If the guidelines do not impose a minimum size for characters, [criterion 1.4.4](https://www.w3.org/TR/WCAG22/#resize-text) indicates that the user must be able to increase text size up to 200% without loss of content or functionality. To comply with this criterion, it is essential to test. The procedure to increase text size is available on the following page: [Text size enlargement](https://a11y-guidelines.orange.com/en/web/toolbox/methods-and-test-tools/text-zoom/).
Sometimes the sizing of certain blocks of text, in particular using sizes in pixels, can lead to loss of information (truncated texts), it is therefore advisable to use relative units (%, em, rem ...).

### Color contrast

The guidelines do not require the use or even prohibit the use of certain colors for texts. However, a light gray text on a white background, for example, could be difficult. It is therefore essential to check that the text color and the background color provide a sufficient level of contrast (see levels below). This can be done easily with help [of tools](https://a11y-guidelines.orange.com/en/web/toolbox/methods-and-test-tools/color-contrast-level/).

[Criterion 1.4.3 of the standard](https://www.w3.org/TR/WCAG21/#contrast-minimum) details the required contrast levels.
[Criterion 1.4.3 of the standard](https://www.w3.org/TR/WCAG22/#contrast-minimum) details the required contrast levels.

For standard texts (not bold):
- size less than 24px: contrast of 4.5:1 minimum
Expand Down
2 changes: 1 addition & 1 deletion src/en/articles/form/part2/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,7 @@ In the example above:

### Using the autocomplete attribute

The <code>autocomplete</code> attribute makes it easier to fill in fields that contain personal information. All fields whose type is listed in <a href="https://www.w3.org/TR/WCAG21/#input-purposes" lang="en">7. InputPurposes for User Interface Components</a> must contain the <code>autocomplete</code> attribute.
The <code>autocomplete</code> attribute makes it easier to fill in fields that contain personal information. All fields whose type is listed in <a href="https://www.w3.org/TR/WCAG22/#input-purposes" lang="en">7. InputPurposes for User Interface Components</a> must contain the <code>autocomplete</code> attribute.

In our example the fields below should have an <code>autocomplete</code> attribute:
<ul>
Expand Down
2 changes: 1 addition & 1 deletion src/en/articles/test-wcag-253.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ tags:

### General explanation

The purpose of [this criterion](https://www.w3.org/TR/WCAG21/#label-in-name) is to ensure that if a button, link, or other interface element contains some screen visible text, its <a href="/en/articles/accessible-name/">accessible name</a> must contain at least the same text as the one displayed.
The purpose of [this criterion](https://www.w3.org/TR/WCAG22/#label-in-name) is to ensure that if a button, link, or other interface element contains some screen visible text, its <a href="/en/articles/accessible-name/">accessible name</a> must contain at least the same text as the one displayed.
This is to ensure that users of technical aids can understand and interact with the component. Indeed, the technical aids are based on the accessible name of the components. For example, a voice recognition user will be able to click on a button simply by pronouncing its accessible name.

The visible text and the accessible name do not have to be identical, but the visible text must be present in the accessible name, preferably first.
Expand Down
8 changes: 4 additions & 4 deletions src/en/mobile/android/design/colors-and-contrasts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ The text "film | 20h40 ..." does not have sufficient contrast. It will not be re


**Reference <abbr>WCAG</abbr>&nbsp;:**
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#contrast-minimum">1.4.3 Contrast minimum</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#non-text-contrast">1.4.11 Non text contrast</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#contrast-minimum">1.4.3 Contrast minimum</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#non-text-contrast">1.4.11 Non text contrast</a>

<br/><br/>

Expand Down Expand Up @@ -80,5 +80,5 @@ Do not use color or sensory information (shape, size, sound, orientation, visual


**Référence <abbr>WCAG</abbr>&nbsp;:**
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#sensory-characteristics">1.3.3 Sensory characteristics</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#use-of-color">1.4.1 Use of color</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#sensory-characteristics">1.3.3 Sensory characteristics</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#use-of-color">1.4.1 Use of color</a>
12 changes: 6 additions & 6 deletions src/en/mobile/android/design/focus-navigation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ To manage keyboard and Switch Access navigation, there are 2 things to check:


**Reference <abbr>WCAG</abbr>&nbsp;:**
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#keyboard">2.1.1 Keyboard</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#name-role-value">4.1.2 Name, Role, Value</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#focus-visible">2.4.7 Focus Visible</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#keyboard">2.1.1 Keyboard</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#name-role-value">4.1.2 Name, Role, Value</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#focus-visible">2.4.7 Focus Visible</a>


## Order keyboard navigation
Expand All @@ -51,8 +51,8 @@ For more information on [focus management on Android](http://developer.android.c
- You are never trapped in a part of the screen (what we call a keyboard trap)

**Reference <abbr>WCAG</abbr>&nbsp;:**
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#meaningful-sequence">1.3.2 Meaningful Sequence</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#no-keyboard-trap">2.1.2 No Keyboard Trap</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#focus-order">2.4.3 Focus Order</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#meaningful-sequence">1.3.2 Meaningful Sequence</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#no-keyboard-trap">2.1.2 No Keyboard Trap</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#focus-order">2.4.3 Focus Order</a>


10 changes: 5 additions & 5 deletions src/en/mobile/android/design/form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ It is essential to indicate to the user, for a good understanding of the input s


**Reference <abbr>WCAG</abbr>&nbsp;:**
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#headings-and-labels">2.4.6 Headings and labels</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#labels-or-instructions">3.3.2 Labels or instructions</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#identify-input-purpose">1.3.5 Identify input purpose</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#headings-and-labels">2.4.6 Headings and labels</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#labels-or-instructions">3.3.2 Labels or instructions</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#identify-input-purpose">1.3.5 Identify input purpose</a>


## Identify input errors in the form
Expand All @@ -52,5 +52,5 @@ It is also recommended to provide the user with a correction suggestion.


**Reference <abbr>WCAG</abbr>&nbsp;:**
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#error-identification">3.3.1 Error identification</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#error-suggestion">3.3.3 Error suggestion</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#error-identification">3.3.1 Error identification</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#error-suggestion">3.3.3 Error suggestion</a>
14 changes: 7 additions & 7 deletions src/en/mobile/android/design/general-navigation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ In the examples below, the frame with border corresponds to the size of the inte


**Reference <abbr>WCAG</abbr>&nbsp;:**
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#target-size">2.5.5 Target Size</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#pointer-cancellation">2.5.2 Pointer Cancellation</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#target-size">2.5.5 Target Size</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#pointer-cancellation">2.5.2 Pointer Cancellation</a>


<br/><br/>
Expand All @@ -65,7 +65,7 @@ The application can be used in both portrait and landscape mode.


**Reference <abbr>WCAG</abbr>&nbsp;:**
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#orientation">1.3.4 Orientation</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#orientation">1.3.4 Orientation</a>

<br/><br/>
## Propose an alternative to gestural actions
Expand All @@ -92,8 +92,8 @@ Navigating between several pages using a horizontal swipe (especially with ViewP


**Reference <abbr>WCAG</abbr>&nbsp;:**
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#pointer-gestures">2.5.1 Pointer Gestures</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#motion-actuation">2.5.4 Motion Actuation</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#pointer-gestures">2.5.1 Pointer Gestures</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#motion-actuation">2.5.4 Motion Actuation</a>

<br/><br/>
## Have readable texts
Expand All @@ -115,7 +115,7 @@ Android natively offers the Roboto font which has 16 variants, including many sa


**Reference <abbr>WCAG</abbr>&nbsp;:**
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#text-spacing">1.4.12 Text Spacing</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#text-spacing">1.4.12 Text Spacing</a>

<br/><br/>
## Use native components
Expand Down Expand Up @@ -151,5 +151,5 @@ However, not all phones use a recent version of Android, it is recommended to pr
- A timeout has a configurable delay.

**Reference <abbr>WCAG</abbr>&nbsp;:**
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#timing-adjustable">2.2.1 Timing Adjustable</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#timing-adjustable">2.2.1 Timing Adjustable</a>

2 changes: 1 addition & 1 deletion src/en/mobile/android/design/headers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,4 @@ A common mistake is to put a unique title for all the pages of an application (o


**Reference <abbr>WCAG</abbr>&nbsp;:**
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#page-titled">2.4.2 Page titled</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#page-titled">2.4.2 Page titled</a>
4 changes: 2 additions & 2 deletions src/en/mobile/android/design/magnification.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,6 @@ The text size magnification accessibility option, present in the phone settings.


**Reference <abbr>WCAG</abbr>&nbsp;:**
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#resize-text">1.4.4 Resize text</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#reflow">1.4.10 Reflow</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#resize-text">1.4.4 Resize text</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#reflow">1.4.10 Reflow</a>

16 changes: 8 additions & 8 deletions src/en/mobile/android/design/multimedia.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ In addition, multimedia content must be able to be controlled at any time by the
- There is no automatic start of the video when the page loads.

**Reference <abbr>WCAG</abbr>&nbsp;:**
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#audio-control">1.4.2 Audio Control</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#pause-stop-hide">2.2.2 Pause, Stop, Hide</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#audio-control">1.4.2 Audio Control</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#pause-stop-hide">2.2.2 Pause, Stop, Hide</a>

## Transcribe audio or video content

Expand All @@ -44,11 +44,11 @@ It is essential to provide an access to visual and auditory information for peop


**Reference <abbr>WCAG</abbr>&nbsp;:**
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#audio-only-and-video-only-prerecorded">1.2.1 Audio-only and Video-only (Prerecorded)</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#captions-prerecorded">1.2.2 Captions (Prerecorded)</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#audio-description-or-media-alternative-prerecorded">1.2.3 Audio Description or Media Alternative (Prerecorded)</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#captions-live">1.2.4 Captions (Live)</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#audio-description-prerecorded">1.2.5 Audio Description (Prerecorded)</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#audio-only-and-video-only-prerecorded">1.2.1 Audio-only and Video-only (Prerecorded)</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#captions-prerecorded">1.2.2 Captions (Prerecorded)</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#audio-description-or-media-alternative-prerecorded">1.2.3 Audio Description or Media Alternative (Prerecorded)</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#captions-live">1.2.4 Captions (Live)</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#audio-description-prerecorded">1.2.5 Audio Description (Prerecorded)</a>


## Avoid epileptic risk contents
Expand All @@ -64,4 +64,4 @@ In order to prevent the content of the application from causing epileptic seizur


**Reference <abbr>WCAG</abbr>&nbsp;:**
- <a lang="en" href="https://www.w3.org/TR/WCAG21/#three-flashes-or-below-threshold">2.3.1 Three Flashes or Below Threshold</a>
- <a lang="en" href="https://www.w3.org/TR/WCAG22/#three-flashes-or-below-threshold">2.3.1 Three Flashes or Below Threshold</a>
Loading