Skip to content

Commit

Permalink
deploy: ba377e1
Browse files Browse the repository at this point in the history
  • Loading branch information
@pya35
pya35 committed Nov 6, 2024
1 parent b787790 commit a004f54
Show file tree
Hide file tree
Showing 61 changed files with 284 additions and 284 deletions.
4 changes: 2 additions & 2 deletions assets/json/checklist/tests-web-en.json
View file
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 assets/json/checklist/tests-web-fr.json
View file
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 en/accessibility/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ <h3 class="h6 mt-4">Assessment approval</h3>

<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 en/articles/aria-status-messages/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ <h1>Use ARIA for status messages</h1>

<div class="mt-4">
<h2 id="status-message-and-accessibility">Status message and accessibility <a class="header-anchor" href="#status-message-and-accessibility" aria-labelledby="a11y_heading_anchor_label">#</a></h2>
<p>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.</p>
<p>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.</p>
<h2 id="some-examples-of-status-messages">Some examples of status messages <a class="header-anchor" href="#some-examples-of-status-messages" aria-labelledby="a11y_heading_anchor_label">#</a></h2>
<p>When a user presses a search button, the content of the page is updated asynchronously to add the search results displayed in a region below the search button. The message &quot;XX results found&quot; is at the top of this new content. A screen reader will have to announce &quot;XX results have been found&quot;. In this case, the information provided to the user is important and must be given immediately, so we will use the role <code>&quot;alert&quot;</code>.</p>
<pre><code class="language-html">&lt;h2 role=&quot;alert&quot;&gt;
Expand Down
8 changes: 4 additions & 4 deletions en/articles/font-size-and-colors/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,15 +195,15 @@ <h1>Text size and color </h1>
<h2 id="what-do-the-guidelines-say">What do the guidelines say ? <a class="header-anchor" href="#what-do-the-guidelines-say" aria-labelledby="a11y_heading_anchor_label">#</a></h2>
<p>The <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">WCAG</a> do not impose a minimum size or colors for texts. However two criteria must be taken into consideration:</p>
<ul>
<li><a href="https://www.w3.org/TR/WCAG21/#resize-text"> 1.4.4 Resize text </a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#contrast-minimum"> 1.4.3 Contrast (Minimum) </a></li>
<li><a href="https://www.w3.org/TR/WCAG22/#resize-text"> 1.4.4 Resize text </a></li>
<li><a href="https://www.w3.org/TR/WCAG22/#contrast-minimum"> 1.4.3 Contrast (Minimum) </a></li>
</ul>
<h3 id="text-size-enlargement">Text size enlargement <a class="header-anchor" href="#text-size-enlargement" aria-labelledby="a11y_heading_anchor_label">#</a></h3>
<p>If the guidelines do not impose a minimum size for characters, <a href="https://www.w3.org/TR/WCAG21/#resize-text">criterion 1.4.4</a> 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: <a href="https://a11y-guidelines.orange.com/en/web/toolbox/methods-and-test-tools/text-zoom/">Text size enlargement</a>.<br>
<p>If the guidelines do not impose a minimum size for characters, <a href="https://www.w3.org/TR/WCAG22/#resize-text">criterion 1.4.4</a> 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: <a href="https://a11y-guidelines.orange.com/en/web/toolbox/methods-and-test-tools/text-zoom/">Text size enlargement</a>.<br>
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 ...).</p>
<h3 id="color-contrast">Color contrast <a class="header-anchor" href="#color-contrast" aria-labelledby="a11y_heading_anchor_label">#</a></h3>
<p>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 <a href="https://a11y-guidelines.orange.com/en/web/toolbox/methods-and-test-tools/color-contrast-level/">of tools</a>.</p>
<p><a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">Criterion 1.4.3 of the standard</a> details the required contrast levels.</p>
<p><a href="https://www.w3.org/TR/WCAG22/#contrast-minimum">Criterion 1.4.3 of the standard</a> details the required contrast levels.</p>
<p>For standard texts (not bold):</p>
<ul>
<li>size less than 24px: contrast of 4.5:1 minimum</li>
Expand Down
2 changes: 1 addition & 1 deletion en/articles/form/part2/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -409,7 +409,7 @@ <h4 id="example-2">Example <a class="header-anchor" href="#example-2" aria-label
<li>The keyboard focus is put on the first field in error in order to be able to rescan the whole form</li>
</ul>
<h3 id="using-the-autocomplete-attribute">Using the autocomplete attribute <a class="header-anchor" href="#using-the-autocomplete-attribute" aria-labelledby="a11y_heading_anchor_label">#</a></h3>
<p>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.</p>
<p>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.</p>
<p>In our example the fields below should have an <code>autocomplete</code> attribute:</p>
<ul>
<li>Email with <span lang="en"><code>autocomplete="email"</code></span></li>
Expand Down
2 changes: 1 addition & 1 deletion en/articles/test-wcag-253/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ <h1>How to test the WCAG 2.5.3 ?</h1>
<div class="mt-4">
<h2 id="what-does-wcag-253-mean">What does WCAG 2.5.3 mean <a class="header-anchor" href="#what-does-wcag-253-mean" aria-labelledby="a11y_heading_anchor_label">#</a></h2>
<h3 id="general-explanation">General explanation <a class="header-anchor" href="#general-explanation" aria-labelledby="a11y_heading_anchor_label">#</a></h3>
<p>The purpose of <a href="https://www.w3.org/TR/WCAG21/#label-in-name">this criterion</a> 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.<br>
<p>The purpose of <a href="https://www.w3.org/TR/WCAG22/#label-in-name">this criterion</a> 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.<br>
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.</p>
<p>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.</p>
<h3 id="concrete-example">Concrete example <a class="header-anchor" href="#concrete-example" aria-labelledby="a11y_heading_anchor_label">#</a></h3>
Expand Down
8 changes: 4 additions & 4 deletions en/mobile/android/design/colors-and-contrasts/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,8 +293,8 @@ <h2 id="ensure-sufficient-contrast-between-foreground-and-background-colors">Ens
<p><img src="../../../images/contraste.png" alt="screenshot showing text with insufficient contrast" class="img-fluid"></p>
<p><strong>Reference <abbr>WCAG</abbr> :</strong></p>
<ul>
<li><a lang="en" href="https://www.w3.org/TR/WCAG21/#contrast-minimum">1.4.3 Contrast minimum</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG21/#non-text-contrast">1.4.11 Non text contrast</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG22/#contrast-minimum">1.4.3 Contrast minimum</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG22/#non-text-contrast">1.4.11 Non text contrast</a></li>
</ul>
<p><br/><br/></p>
<h2 id="make-sure-that-the-dark-mode-is-provided-by-the-application">Make sure that the dark mode is provided by the application <a class="header-anchor" href="#make-sure-that-the-dark-mode-is-provided-by-the-application" aria-labelledby="a11y_heading_anchor_label">#</a></h2>
Expand Down Expand Up @@ -324,8 +324,8 @@ <h2 id="ensure-that-color-or-sensory-information-is-not-the-only-source-of-infor
<img src="../../../images/couleur.png" alt="Dans un cas la couleur et la forme de l’objet porte l’information avec une légende, dans l’autre cas seule la couleur porte l’information." width="300" height="530">
<p><strong>Référence <abbr>WCAG</abbr> :</strong></p>
<ul>
<li><a lang="en" href="https://www.w3.org/TR/WCAG21/#sensory-characteristics">1.3.3 Sensory characteristics</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG21/#use-of-color">1.4.1 Use of color</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG22/#sensory-characteristics">1.3.3 Sensory characteristics</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG22/#use-of-color">1.4.1 Use of color</a></li>
</ul>

</div>
Expand Down
12 changes: 6 additions & 6 deletions en/mobile/android/design/focus-navigation/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,9 +286,9 @@ <h2 id="access-to-interactive-elements">Access to interactive elements <a class=
</ul>
<p><strong>Reference <abbr>WCAG</abbr> :</strong></p>
<ul>
<li><a lang="en" href="https://www.w3.org/TR/WCAG21/#keyboard">2.1.1 Keyboard</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG21/#name-role-value">4.1.2 Name, Role, Value</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG21/#focus-visible">2.4.7 Focus Visible</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG22/#keyboard">2.1.1 Keyboard</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG22/#name-role-value">4.1.2 Name, Role, Value</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG22/#focus-visible">2.4.7 Focus Visible</a></li>
</ul>
<h2 id="order-keyboard-navigation">Order keyboard navigation <a class="header-anchor" href="#order-keyboard-navigation" aria-labelledby="a11y_heading_anchor_label">#</a></h2>
<p><strong>Target :</strong> everyone and especially people with motor disabilities who use a keyboard to navigate.<br>
Expand All @@ -306,9 +306,9 @@ <h2 id="order-keyboard-navigation">Order keyboard navigation <a class="header-an
</ul>
<p><strong>Reference <abbr>WCAG</abbr> :</strong></p>
<ul>
<li><a lang="en" href="https://www.w3.org/TR/WCAG21/#meaningful-sequence">1.3.2 Meaningful Sequence</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG21/#no-keyboard-trap">2.1.2 No Keyboard Trap</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG21/#focus-order">2.4.3 Focus Order</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG22/#meaningful-sequence">1.3.2 Meaningful Sequence</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG22/#no-keyboard-trap">2.1.2 No Keyboard Trap</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG22/#focus-order">2.4.3 Focus Order</a></li>
</ul>

</div>
Expand Down
10 changes: 5 additions & 5 deletions en/mobile/android/design/form/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,9 +287,9 @@ <h2 id="have-explicit-input-fields">Have explicit input fields <a class="header-
</ul>
<p><strong>Reference <abbr>WCAG</abbr> :</strong></p>
<ul>
<li><a lang="en" href="https://www.w3.org/TR/WCAG21/#headings-and-labels">2.4.6 Headings and labels</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG21/#labels-or-instructions">3.3.2 Labels or instructions</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG21/#identify-input-purpose">1.3.5 Identify input purpose</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG22/#headings-and-labels">2.4.6 Headings and labels</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG22/#labels-or-instructions">3.3.2 Labels or instructions</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG22/#identify-input-purpose">1.3.5 Identify input purpose</a></li>
</ul>
<h2 id="identify-input-errors-in-the-form">Identify input errors in the form <a class="header-anchor" href="#identify-input-errors-in-the-form" aria-labelledby="a11y_heading_anchor_label">#</a></h2>
<p><strong>Target :</strong> everyone and in particular the visually impaired.<br>
Expand All @@ -305,8 +305,8 @@ <h2 id="identify-input-errors-in-the-form">Identify input errors in the form <a
</ul>
<p><strong>Reference <abbr>WCAG</abbr> :</strong></p>
<ul>
<li><a lang="en" href="https://www.w3.org/TR/WCAG21/#error-identification">3.3.1 Error identification</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG21/#error-suggestion">3.3.3 Error suggestion</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG22/#error-identification">3.3.1 Error identification</a></li>
<li><a lang="en" href="https://www.w3.org/TR/WCAG22/#error-suggestion">3.3.3 Error suggestion</a></li>
</ul>

</div>
Expand Down
Loading

0 comments on commit a004f54

Please sign in to comment.