From 10f3d04782f6146b67bc437b764433920264e7aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Fri, 2 Aug 2024 07:05:30 +0200 Subject: [PATCH] docs: add accessibility statement (#2665) Co-authored-by: Louis-Maxime Piton --- .cspell.json | 8 + site/assets/scss/_boosted.scss | 243 +++++++++++++++++ .../5.3/accessibility-statement/_index.md | 257 ++++++++++++++++++ site/layouts/partials/footer.html | 33 ++- 4 files changed, 528 insertions(+), 13 deletions(-) create mode 100644 site/content/docs/5.3/accessibility-statement/_index.md diff --git a/.cspell.json b/.cspell.json index e0555287e7..8a9716b1f8 100644 --- a/.cspell.json +++ b/.cspell.json @@ -21,6 +21,7 @@ "callout", "callouts", "camelCase", + "CEDEX", "clearfix", "clic", "Codesniffer", @@ -34,6 +35,8 @@ "Csvg", "Datalists", "Deduping", + "Défenseur", + "Défenseurs", "Deque", "discoverability", "docsearch", @@ -46,6 +49,7 @@ "dgst", "errorf", "evenodd", + "extranet", "favicon", "favicons", "fieldsets", @@ -88,6 +92,7 @@ "Packagist", "paginations", "pinterest", + "pluri", "popperjs", "prebuild", "preconnect", @@ -99,6 +104,8 @@ "printf", "rects", "relref", + "réponse", + "RGAA", "rgba", "roboto", "RTLCSS", @@ -142,6 +149,7 @@ "WCAG", "whatsapp", "WICG's", + "ydette", "zindex", "بالعالم", "مرحبًا" diff --git a/site/assets/scss/_boosted.scss b/site/assets/scss/_boosted.scss index a4798cf721..1c1f878d9a 100644 --- a/site/assets/scss/_boosted.scss +++ b/site/assets/scss/_boosted.scss @@ -87,3 +87,246 @@ body { } } } + +// Accessibility statement + +.pie { + position: relative; + width: 200px; + height: 200px; + font-size: 3em; + text-align: center; + background: var(--bs-secondary-bg); + background-image: linear-gradient(to right, transparent 50%, var(--bs-primary) 0); + border-radius: 50%; // stylelint-disable-line property-disallowed-list +} + +.pie::after, +.pie::before { + position: absolute; + display: block; + width: 50%; + height: 100%; + margin-left: 50%; + content: ""; + background-color: inherit; + border-radius: 0 100% 100% 0 / 50%; // stylelint-disable-line property-disallowed-list + transform-origin: left; +} + +.pie::after { + background-color: var(--bs-primary); +} + +.pie-val { + position: absolute; + top: 15px; + right: 15px; + bottom: 15px; + left: 15px; + z-index: 2; + padding-top: 25%; + background-color: var(--bs-body-bg); + border-radius: 50%; // stylelint-disable-line property-disallowed-list +} + +// .pie[data-value="1"]::before { transform: rotate(3.6deg); } +// .pie[data-value="1"]::after { display: none; } +// .pie[data-value="2"]::before { transform: rotate(7.2deg); } +// .pie[data-value="2"]::after { display: none; } +// .pie[data-value="3"]::before { transform: rotate(10.8deg); } +// .pie[data-value="3"]::after { display: none; } +// .pie[data-value="4"]::before { transform: rotate(14.4deg); } +// .pie[data-value="4"]::after { display: none; } +// .pie[data-value="5"]::before { transform: rotate(18deg); } +// .pie[data-value="5"]::after { display: none; } +// .pie[data-value="6"]::before { transform: rotate(21.6deg); } +// .pie[data-value="6"]::after { display: none; } +// .pie[data-value="7"]::before { transform: rotate(25.2deg); } +// .pie[data-value="7"]::after { display: none; } +// .pie[data-value="8"]::before { transform: rotate(28.8deg); } +// .pie[data-value="8"]::after { display: none; } +// .pie[data-value="9"]::before { transform: rotate(32.4deg); } +// .pie[data-value="9"]::after { display: none; } +// .pie[data-value="10"]::before { transform: rotate(36deg); } +// .pie[data-value="10"]::after { display: none; } +// .pie[data-value="11"]::before { transform: rotate(39.6deg); } +// .pie[data-value="11"]::after { display: none; } +// .pie[data-value="12"]::before { transform: rotate(43.2deg); } +// .pie[data-value="12"]::after { display: none; } +// .pie[data-value="13"]::before { transform: rotate(46.8deg); } +// .pie[data-value="13"]::after { display: none; } +// .pie[data-value="14"]::before { transform: rotate(50.4deg); } +// .pie[data-value="14"]::after { display: none; } +// .pie[data-value="15"]::before { transform: rotate(54deg); } +// .pie[data-value="15"]::after { display: none; } +// .pie[data-value="16"]::before { transform: rotate(57.6deg); } +// .pie[data-value="16"]::after { display: none; } +// .pie[data-value="17"]::before { transform: rotate(61.2deg); } +// .pie[data-value="17"]::after { display: none; } +// .pie[data-value="18"]::before { transform: rotate(64.8deg); } +// .pie[data-value="18"]::after { display: none; } +// .pie[data-value="19"]::before { transform: rotate(68.4deg); } +// .pie[data-value="19"]::after { display: none; } +// .pie[data-value="20"]::before { transform: rotate(72deg); } +// .pie[data-value="20"]::after { display: none; } +// .pie[data-value="21"]::before { transform: rotate(75.6deg); } +// .pie[data-value="21"]::after { display: none; } +// .pie[data-value="22"]::before { transform: rotate(79.2deg); } +// .pie[data-value="22"]::after { display: none; } +// .pie[data-value="23"]::before { transform: rotate(82.8deg); } +// .pie[data-value="23"]::after { display: none; } +// .pie[data-value="24"]::before { transform: rotate(86.4deg); } +// .pie[data-value="24"]::after { display: none; } +// .pie[data-value="25"]::before { transform: rotate(90deg); } +// .pie[data-value="25"]::after { display: none; } +// .pie[data-value="26"]::before { transform: rotate(93.6deg); } +// .pie[data-value="26"]::after { display: none; } +// .pie[data-value="27"]::before { transform: rotate(97.2deg); } +// .pie[data-value="27"]::after { display: none; } +// .pie[data-value="28"]::before { transform: rotate(100.8deg); } +// .pie[data-value="28"]::after { display: none; } +// .pie[data-value="29"]::before { transform: rotate(104.4deg); } +// .pie[data-value="29"]::after { display: none; } +// .pie[data-value="30"]::before { transform: rotate(108deg); } +// .pie[data-value="30"]::after { display: none; } +// .pie[data-value="31"]::before { transform: rotate(111.6deg); } +// .pie[data-value="31"]::after { display: none; } +// .pie[data-value="32"]::before { transform: rotate(115.2deg); } +// .pie[data-value="32"]::after { display: none; } +// .pie[data-value="33"]::before { transform: rotate(118.8deg); } +// .pie[data-value="33"]::after { display: none; } +// .pie[data-value="34"]::before { transform: rotate(122.4deg); } +// .pie[data-value="34"]::after { display: none; } +// .pie[data-value="35"]::before { transform: rotate(126deg); } +// .pie[data-value="35"]::after { display: none; } +// .pie[data-value="36"]::before { transform: rotate(129.6deg); } +// .pie[data-value="36"]::after { display: none; } +// .pie[data-value="37"]::before { transform: rotate(133.2deg); } +// .pie[data-value="37"]::after { display: none; } +// .pie[data-value="38"]::before { transform: rotate(136.8deg); } +// .pie[data-value="38"]::after { display: none; } +// .pie[data-value="39"]::before { transform: rotate(140.4deg); } +// .pie[data-value="39"]::after { display: none; } +// .pie[data-value="40"]::before { transform: rotate(144deg); } +// .pie[data-value="40"]::after { display: none; } +// .pie[data-value="41"]::before { transform: rotate(147.6deg); } +// .pie[data-value="41"]::after { display: none; } +// .pie[data-value="42"]::before { transform: rotate(151.2deg); } +// .pie[data-value="42"]::after { display: none; } +// .pie[data-value="43"]::before { transform: rotate(154.8deg); } +// .pie[data-value="43"]::after { display: none; } +// .pie[data-value="44"]::before { transform: rotate(158.4deg); } +// .pie[data-value="44"]::after { display: none; } +// .pie[data-value="45"]::before { transform: rotate(162deg); } +// .pie[data-value="45"]::after { display: none; } +// .pie[data-value="46"]::before { transform: rotate(165.6deg); } +// .pie[data-value="46"]::after { display: none; } +// .pie[data-value="47"]::before { transform: rotate(169.2deg); } +// .pie[data-value="47"]::after { display: none; } +// .pie[data-value="48"]::before { transform: rotate(172.8deg); } +// .pie[data-value="48"]::after { display: none; } +// .pie[data-value="49"]::before { transform: rotate(176.4deg); } +// .pie[data-value="49"]::after { display: none; } +// .pie[data-value="50"]::before { transform: rotate(180deg); } +// .pie[data-value="50"]::after { display: none; } +// .pie[data-value="51"]::after { transform: rotate(3.6deg); } +// .pie[data-value="51"]::before { display: none; } +// .pie[data-value="52"]::after { transform: rotate(7.2deg); } +// .pie[data-value="52"]::before { display: none; } +// .pie[data-value="53"]::after { transform: rotate(10.8deg); } +// .pie[data-value="53"]::before { display: none; } +// .pie[data-value="54"]::after { transform: rotate(14.4deg); } +// .pie[data-value="54"]::before { display: none; } +// .pie[data-value="55"]::after { transform: rotate(18deg); } +// .pie[data-value="55"]::before { display: none; } +// .pie[data-value="56"]::after { transform: rotate(21.6deg); } +// .pie[data-value="56"]::before { display: none; } +// .pie[data-value="57"]::after { transform: rotate(25.2deg); } +// .pie[data-value="57"]::before { display: none; } +// .pie[data-value="58"]::after { transform: rotate(28.8deg); } +// .pie[data-value="58"]::before { display: none; } +// .pie[data-value="59"]::after { transform: rotate(32.4deg); } +// .pie[data-value="59"]::before { display: none; } +// .pie[data-value="60"]::after { transform: rotate(36deg); } +// .pie[data-value="60"]::before { display: none; } +// .pie[data-value="61"]::after { transform: rotate(39.6deg); } +// .pie[data-value="61"]::before { display: none; } +// .pie[data-value="62"]::after { transform: rotate(43.2deg); } +// .pie[data-value="62"]::before { display: none; } +// .pie[data-value="63"]::after { transform: rotate(46.8deg); } +// .pie[data-value="63"]::before { display: none; } +.pie[data-value="64"]::after { transform: rotate(50.4deg); } +.pie[data-value="64"]::before { display: none; } +// .pie[data-value="65"]::after { transform: rotate(54deg); } +// .pie[data-value="65"]::before { display: none; } +// .pie[data-value="66"]::after { transform: rotate(57.6deg); } +// .pie[data-value="66"]::before { display: none; } +// .pie[data-value="67"]::after { transform: rotate(61.2deg); } +// .pie[data-value="67"]::before { display: none; } +// .pie[data-value="68"]::after { transform: rotate(64.8deg); } +// .pie[data-value="68"]::before { display: none; } +// .pie[data-value="69"]::after { transform: rotate(68.4deg); } +// .pie[data-value="69"]::before { display: none; } +// .pie[data-value="70"]::after { transform: rotate(72deg); } +// .pie[data-value="70"]::before { display: none; } +// .pie[data-value="71"]::after { transform: rotate(75.6deg); } +// .pie[data-value="71"]::before { display: none; } +// .pie[data-value="72"]::after { transform: rotate(79.2deg); } +// .pie[data-value="72"]::before { display: none; } +// .pie[data-value="73"]::after { transform: rotate(82.8deg); } +// .pie[data-value="73"]::before { display: none; } +// .pie[data-value="74"]::after { transform: rotate(86.4deg); } +// .pie[data-value="74"]::before { display: none; } +// .pie[data-value="75"]::after { transform: rotate(90deg); } +// .pie[data-value="75"]::before { display: none; } +// .pie[data-value="76"]::after { transform: rotate(93.6deg); } +// .pie[data-value="76"]::before { display: none; } +// .pie[data-value="77"]::after { transform: rotate(97.2deg); } +// .pie[data-value="77"]::before { display: none; } +// .pie[data-value="78"]::after { transform: rotate(100.8deg); } +// .pie[data-value="78"]::before { display: none; } +// .pie[data-value="79"]::after { transform: rotate(104.4deg); } +// .pie[data-value="79"]::before { display: none; } +// .pie[data-value="80"]::after { transform: rotate(108deg); } +// .pie[data-value="80"]::before { display: none; } +// .pie[data-value="81"]::after { transform: rotate(111.6deg); } +// .pie[data-value="81"]::before { display: none; } +// .pie[data-value="82"]::after { transform: rotate(115.2deg); } +// .pie[data-value="82"]::before { display: none; } +// .pie[data-value="83"]::after { transform: rotate(118.8deg); } +// .pie[data-value="83"]::before { display: none; } +// .pie[data-value="84"]::after { transform: rotate(122.4deg); } +// .pie[data-value="84"]::before { display: none; } +// .pie[data-value="85"]::after { transform: rotate(126deg); } +// .pie[data-value="85"]::before { display: none; } +// .pie[data-value="86"]::after { transform: rotate(129.6deg); } +// .pie[data-value="86"]::before { display: none; } +.pie[data-value="87"]::after { transform: rotate(133.2deg); } +.pie[data-value="87"]::before { display: none; } +// .pie[data-value="88"]::after { transform: rotate(136.8deg); } +// .pie[data-value="88"]::before { display: none; } +// .pie[data-value="89"]::after { transform: rotate(140.4deg); } +// .pie[data-value="89"]::before { display: none; } +// .pie[data-value="90"]::after { transform: rotate(144deg); } +// .pie[data-value="90"]::before { display: none; } +// .pie[data-value="91"]::after { transform: rotate(147.6deg); } +// .pie[data-value="91"]::before { display: none; } +// .pie[data-value="92"]::after { transform: rotate(151.2deg); } +// .pie[data-value="92"]::before { display: none; } +// .pie[data-value="93"]::after { transform: rotate(154.8deg); } +// .pie[data-value="93"]::before { display: none; } +// .pie[data-value="94"]::after { transform: rotate(158.4deg); } +// .pie[data-value="94"]::before { display: none; } +// .pie[data-value="95"]::after { transform: rotate(162deg); } +// .pie[data-value="95"]::before { display: none; } +// .pie[data-value="96"]::after { transform: rotate(165.6deg); } +// .pie[data-value="96"]::before { display: none; } +// .pie[data-value="97"]::after { transform: rotate(169.2deg); } +// .pie[data-value="97"]::before { display: none; } +// .pie[data-value="98"]::after { transform: rotate(172.8deg); } +// .pie[data-value="98"]::before { display: none; } +// .pie[data-value="99"]::after { transform: rotate(176.4deg); } +// .pie[data-value="99"]::before { display: none; } +// .pie[data-value="100"]::after { transform: rotate(180deg); } +// .pie[data-value="100"]::before { display: none; } diff --git a/site/content/docs/5.3/accessibility-statement/_index.md b/site/content/docs/5.3/accessibility-statement/_index.md new file mode 100644 index 0000000000..9d0129de9f --- /dev/null +++ b/site/content/docs/5.3/accessibility-statement/_index.md @@ -0,0 +1,257 @@ +--- +layout: single +title: "Accessibility statement: Boosted documentation" +aliases: + - "/accessibility-statement/" + - "/docs/accessibility-statement/" +--- + +## Context + +Orange undertakes to make its websites internet, intranet, extranet and its mobile applications accessible in accordance with article 47 of Law No. 2005-102 of February 11, 2005. + +To this end, it implements the following strategy and actions: [the pluri-annual accessibility framework (French)](https://oran.ge/accessibilite-schema). + +This accessibility statement applies to the Boosted documentation. + +## Conformity level + +"Boosted Documentation" is partially compliant to the criteria with [WCAG version 2.2, level AA](https://www.w3.org/TR/WCAG22/). + +ORANGE SA refers to the WCAG international recommendations. [Here is the correspondence link between the RGAA and the WCAG (French)](https://a11y-guidelines.orange.com/fr/cadrage/correspondance-rgaa-wcag/). + +The audit was carried out via [the Orange va11ydette](https://la-va11ydette.orange.com/?lang=en). + +### Tests result + +
+
+

+ + 64% +

+

Global compliance +

+
+
+

+ + 87% +

+

Average compliance

+
+
+ +The compliance audit carried out by ORANGE SA reveals that: +* 64% of WCAG level A and AA criteria are met. +* The average compliance rate of the online service is 87%. + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Summary by levels
LevelAAATotal
Number of criteria322456
Compliant91221
Non-compliant7512
Not applicable16723
Compliance56%71%64%
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compliance rate by pages according to the two levels of criteria A and AA
Criteria / LevelCompliant / ACompliant / AANon-compliant / ANon-compliant / AANot applicable / ANot applicable / AACompliance rate
Home12134216981%
Docs14132316884%
Examples14142216888%
Design guidelines14152116891%
Overview15131316888%
Brand14142216888%
Translations15141316788%
Cookies14132216987%
+
+ +## Content not accessible + +The contents listed below are not accessible for the following reasons. + +### Non-compliances + +List of non-compliant WCAG criteria: +* 1.1.1 Non-text Content, Level A +* 1.3.1 Info and Relationships, Level A +* 1.4.3 Contrast (Minimum), Level AA +* 2.4.2 Page Titled, Level A +* 2.4.3 Focus Order, Level A +* 2.4.4 Link Purpose (In Context), Level A +* 2.4.6 Headings and Labels, Level AA +* 2.5.3 Label in Name, Level A +* 2.5.8 Target size, Level AA +* 3.1.2 Language of Parts, Level AA +* 3.3.2 Labels or Instructions, Level A +* 4.1.3 Status Messages, Level AA + +## Establishment of this accessibility statement + +This declaration was established on 7/30/2024. + +### Technical specifications of the site + +* HTML +* CSS +* JavaScript + +### Testing environment + +The verifications were performed with the following software combinations: +* Edge 126.0 +* Firefox 115.13 + +### Methods and tools to evaluate accessibility + +* **Automatic testing:** axe DevTools 4.83.0 (axe-Core 4.9.1), Wave 3.2.5.3 +* **Functional testing:** NVDA 2023.3.1, Keyboard navigation + +### Pages which have been the subject of compliance verification + +The verification audit was performed on the following pages using the Orange va11ydette: + +* Home: https://boosted.orange.com/ +* Docs: https://boosted.orange.com/docs +* Examples: https://boosted.orange.com/docs/5.3/examples/ +* Design guidelines: https://boosted.orange.com/docs/5.3/guidelines/ +* Overview: https://boosted.orange.com/docs/5.3/about/overview/ +* Brand: https://boosted.orange.com/docs/5.3/about/brand/ +* Translations: https://boosted.orange.com/docs/5.3/about/translations/ +* Cookies: https://boosted.orange.com/docs/5.3/about/cookies/ + +## Feedback and contact information + +If you are unable to access content or a service, you can contact the site manager to be directed to an accessible alternative or obtain the content in another form. + +We welcome your feedback on the accessibility of this site. Please let us know if you encounter accessibility problems by sending an email to accessibilite.france@orange.com. + +## Legal remedies + +You have reported to the website manager an accessibility problem that prevents you from accessing content or one of the portal's services and you have not received a satisfactory response, in this case: +* Write a message to the [Défenseurs des Droits](https://formulaire.defenseurdesdroits.fr/). +* Or contact the [Défenseurs des Droits delegate in your department](https://www.defenseurdesdroits.fr/saisir/delegues). +* Or send a letter by post (free of charge, do not put a stamp): +
Défenseur des droits
Libre réponse 71120
75342 Paris CEDEX 07
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html index 642ee207f3..2d6adeff66 100644 --- a/site/layouts/partials/footer.html +++ b/site/layouts/partials/footer.html @@ -71,20 +71,27 @@