Accessibility audit - Githubissues

[!NOTE]
Total issues: 42

🟢 Done => 23 issues

🟡 Ongoing (approved, almost ok) => 0 issue

🟠 Ongoing (not reviewed nor approved yet) => 3 issues

🔴 Not started (questions still pending) => 0 issue

🔴🔴 Won't be done (because we can't fix it) => 16 issues (covering 5 topics)

Description

An accessibility audit has been done on the v5.3.3 documentation Boosted website, the 30th of July 2024. Here are the results.

[!IMPORTANT]
Crucial information necessary for users to succeed.

These results are not exhaustive. They are given by way of example, to illustrate the anomalies. It is the responsibility of the project team to apply these corrective measures systematically to all similar cases.

Homepage

🟢 issue-0-1

Test: Is the page title appropriate?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#donner-un-titre-aux-pages
Summary: Irrelevant page title
Description: Each page should have a unique title, making it easy to understand its role. The role "home page" should be integrated into the page title.
Solution: Fill in the <title> element with keywords to help understand the page's role. Information can be ordered from the most specific to the least specific, or vice versa (no rules).
Technical solution: <title>Home - Orange Boosted....</title>
Priority: P1
PR: #2698

🟢 isssue-0-2

Test: Do the images have appropriate text alternatives? (decorative <img> should have empty alt)
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-non-textuel/#fournir-un-equivalent-textuel-pour-les-images-et-les-cadres
Summary: The ALT of a decorative image is irrelevant
Description: The ALT attribute of a decorative image must be empty, so that the image is ignored by technical aids. Case of the image "boosted-guidelines.png" with alt="Boosted design guidelines". This image is decorative.
Solution: Enter an empty alt.
Technical solution: <img src="[…]" alt=" >
Priority: P0
PR: #2690

🟠 isssue-0-3

Test: Do the images have appropriate text alternatives? (decorative SVGs should be aria-hidden)
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-non-textuel/#fournir-un-equivalent-textuel-pour-les-images-et-les-cadres
Summary: The aria-hidden attribute of a decorative SVG tag is not filled in
Description: A decorative SVG image (tag) must have an aria-hidden="true" attribute and a focusable="false" attribute.
Solution: Add the aria-hidden and focusable attributes to the element's SVG tag.
Technical solution: <svg aria-hidden="true" focusable="false"> ... </svg>. Find out more at https://a11y-guidelines.orange.com/fr/articles/svg-accessibles
Priority: P0
PR:
- 2691 TODO: finish this PR with nested SVGs
- https://github.com/twbs/bootstrap/pull/40756 on Bootstrap side

🔴🔴 isssue-0-4

Test: Is there sufficient contrast between the text color and the background color (except for special cases)?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/navigation-generale/#permettre-de-connaitre-le-resultat-dune-interaction-utilisateur-a-laide-de-messages-contextuels
Summary: Insufficient contrast for links
Description: Links must have a sufficient contrast ratio with surrounding text when hovered over.
Solution: Ensure a minimum contrast of 4.5:1 between a link and surrounding text of normal sizes (less than 24px CSS and 19px bold CSS). Ensure a minimum contrast of 3:1 between an unlined link and surrounding text of large sizes (greater than 24px CSS and 19px bold CSS).
Technical solution:
Priority: P1
seen with the accessibility team: this is a very important design issue and it can't be changed in all Boosted like this. This needs to be addressed when creating OUDS with a new design for the links.

🔴🔴 isssue-0-5

Test: Is information about the user's location within a page set available?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/navigation-generale/#permettre-de-connaitre-le-resultat-dune-interaction-utilisateur-a-laide-de-messages-contextuels
Summary: No ARIA roles (status, alert, alertdialog...) or dynamic aria-live regions
Description: Alert messages are not perceived from a screen reader. Case of the search result.
Solution: Apply an ARIA role ("status", "alert", "alertdialog", etc...) or "aria-live" attribute to the alert message so that it is automatically vocalized. Examples:
- <div role="status"> […] </div>
- <div aria-live="assertive">[...]</div>
Technical solution:
Priority: P2 (This comes from a tool and cannot be changed)

🟢 isssue-0-6

Test: If a keyboard shortcut using a single key is available, does it meet one of the conditions below?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/navigation-clavier/#rendre-le-parcours-du-focus-sequentiel-et-logique-sans-piege-clavier
Summary: Non-logical focus shift
Description: Focus movement does not follow a logical reading order. Focus on "Copy to clipboard" before content.
Solution: First go over the content, then suggest copying it.
Technical solution:
Priority: P3
PR: #2699

🟢 isssue-0-7

Test: Is the content still understandable after disabling CSS?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/mise-en-page/#separer-le-contenu-de-linteractivite-et-de-la-presentation
Summary: Content carrying information is not preserved
Description: After CSS deactivation, information-bearing content must be preserved. Content generated by CSS should be decorative only. Case of the character "{rows}quot; in the order examples.
Solution: No information should be contained in CSS properties (::before, ::after, content:...).
Technical solution:
Priority: P3
seen with accessibility team: false positive, nothing to do

Docs

🟢 isssue-1-1

Test: Is the information structured by the appropriate use of headings?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#donner-des-titres-aux-rubriques
Summary: Incomplete hierarchy
Description: The page must be structured using headings of different levels.
- Some content is visually displayed as headings in the left-hand pane/menu, and should be treated as such.
- The title of the right-hand menu "On this page" is visually a heading and should be treated as such.
- The headings of the sections in the left-hand menu.
Solution: All content treated visually as headings must have a title semantics (tags <h1> to <h6>).
Technical solution:
Priority: P1
PR:
- 2705 (for right side menu) (still having some questions for EASE team)
- 2727

🟢 isssue-1-2

Test: Is the content semantically structured?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#respecter-la-semantique-html
Summary: Text without semantics
Description: Textual content is not encompassed by a semantic tag. Without appropriate semantics, a text has no meaning in terms of the document's structure for technical aid users.
- Incompatibility with Orange Design System... and the link "More information".
- Orange Design System recommendation...
Solution: Add the appropriate semantic structure to this textual content, for example, a paragraph <p>, a quote <q>, <blockquote>... Note: <div> and <span> are not semantic tags.
Technical solution:
Priority: P2
PR: #2722

🟠 isssue-1-3

Test: Do the images have appropriate text alternatives?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-non-textuel/#fournir-un-equivalent-textuel-pour-les-images-et-les-cadres
Summary: The focusable attribute of a decorative SVG tag is not filled in
Description: A decorative SVG image (tag) must have an aria-hidden="true" attribute and a focusable="false" attribute.
Solution: Add the aria-hidden and focusable attributes to the element's SVG tag.
Technical solution: "<svg aria-hidden="true" focusable="false"> … </svg>. More information at https://a11y-guidelines.orange.com/fr/articles/svg-accessibles/
Priority: P0
PR: #2691 TODO: EASE confirmed aria-hidden is needed so TODO: finish this PR with nested SVGs

🟢 isssue-1-4

Test: Do the images have appropriate text alternatives?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-non-textuel/#fournir-un-equivalent-textuel-pour-les-images-et-les-cadres
Summary: The ALT of an image containing text is not filled in or is irrelevant
Description: The ALT attribute of an image containing text must contain the same text as the image.
- The image "Hello Boosted and Webpack!" for "your local development server should now look like this:" may be confusing because the ALT indicates "Webpack dev server running".
Solution: At a minimum, report in the ALT the text displayed by the image.
Technical solution:
Priority: P0
PR: #2696

🔴🔴 isssue-1-5

Test: Is there sufficient contrast between the text color and the background color (except for special cases)?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/couleurs-et-contrastes/#assurer-un-contraste-suffisant-entre-les-couleurs-de-premier-plan-et-de-fond
Summary: Insufficient contrast between text and background
Description: "Le contraste doit être suffisant pour comprendre l'information portée par tous les textes.
Description: The contrast between the text and the background must be sufficient to ensure that the information is legible.
- Links in orange on a white background are not compliant.
Solution: Ensure a minimum contrast of 4.5:1 between a link and surrounding text of normal sizes (less than 24px CSS and 19px bold CSS). Ensure a minimum contrast of 3:1 between an unlined link and surrounding text of large sizes (greater than 24px CSS and 19px bold CSS).
Technical solution:
Priority: P1 (seen with )

🔴🔴 isssue-1-6

Test: Is there sufficient contrast between the text color and the background color (except for special cases)?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/couleurs-et-contrastes/#assurer-un-contraste-suffisant-entre-les-couleurs-de-premier-plan-et-de-fond
Summary: Insufficient contrast for unlined links
Description: Unlined links must have a sufficient contrast ratio with surrounding text.
- Insufficient contrast for unlined links in the left-hand pane/menu.
Solution: Ensure a minimum contrast of 4.5:1 between an unlined link and surrounding text of normal sizes (less than 24px CSS and 19px bold CSS). Ensure a minimum contrast of 3:1 between an unlined link and surrounding text of large sizes (greater than 24px CSS and 19px bold CSS).
Technical solution:
Priority: P1
seen with the accessibility team: this is a very important design issue and it can't be changed in all Boosted like this. This needs to be addressed when creating OUDS with a new design for the links.

🔴🔴 isssue-1-7

Test: Are status messages correctly rendered?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/navigation-generale/#permettre-de-connaitre-le-resultat-dune-interaction-utilisateur-a-laide-de-messages-contextuels
Summary: No ARIA roles (status, alert, alertdialog...) or dynamic aria-live regions
Description: Alert messages are not perceived from a screen reader. Case of the search result.
Solution: Apply an ARIA role ("status", "alert", "alertdialog", etc...) or "aria-live" attribute to the alert message so that it is automatically vocalized. Examples:
- <div role="status"> […] </div>
- <div aria-live="assertive">[...]</div>
Technical solution:
Priority: P2 (This comes from a tool and cannot be changed)

🟢 isssue-1-8

Test: Is the size of clickable or touch-sensitive areas sufficient?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/mise-en-page/#definir-des-zones-sensibles-de-taille-suffisante
Summary: Overlapping clickable areas
Description: Navigation menu on the right: On this page.
Solution:
Technical solution:
Priority: P2
PR: #2726

Examples

🟠 isssue-2-1

Test: Do the images have appropriate text alternatives? (decorative SVGs missing aria-hidden)
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-non-textuel/#fournir-un-equivalent-textuel-pour-les-images-et-les-cadres
Summary: The aria-hidden attribute of a decorative SVG tag is not filled in
Description: A decorative SVG image (tag) must have an aria-hidden="true" attribute and a focusable="false" attribute.
- Decorative icons in the "Starters" section.
Solution: Add the aria-hidden and focusable attributes to the element's SVG tag.
Technical solution: <svg aria-hidden="true" focusable="false"> … </svg>. For more information: https://a11y-guidelines.orange.com/fr/articles/svg-accessibles/
Priority: P0
PR:
- 2691 TODO: finish this PR with nested SVGs
- https://github.com/twbs/bootstrap/pull/40756 on Bootstrap side

🔴🔴 isssue-2-2

Test: Is there sufficient contrast between the text color and the background color (except for special cases)?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/couleurs-et-contrastes/#assurer-un-contraste-suffisant-entre-les-couleurs-de-premier-plan-et-de-fond
Summary: Insufficient contrast between text and background
Description: The contrast between the text and the background must be sufficient to ensure that the information is legible.
- Links in orange on a white or grey background are not compliant (currently font = 18px gives an insufficient contrast ratio).
Solution: Ensure a minimum contrast of 4.5:1 between a link and surrounding text of normal sizes (less than 24px CSS and 19px bold CSS). Ensure a minimum contrast of 3:1 between an unlined link and surrounding text of large sizes (greater than 24px CSS and 19px bold CSS).
Technical solution:
Priority: P1
seen with the accessibility team: this is a very important design issue and it can't be changed in all Boosted like this. This needs to be addressed when creating OUDS with a new design for the links.

🟢 isssue-2-3

Test: Is each link label explicit, at least in its context?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/navigation-generale/#rendre-les-intitules-des-liens-et-des-boutons-accessibles
Summary: Presence of link labels that are not understandable in their contexts
Description: The target of a link is not understandable even with its direct context (surrounding text).
- Links "Edit in StackBlitz" point to different targets.
- No information about the link "Edit in StackBlitz" in the same paragraph (context).
Solution: Add a distinctive information in the surrounding text.
Technical solution: The solution depends on the context of use of the element:
- element in a paragraph: complete the paragraph text (<p>[…]</p>)
- element in a list: complete a list item (<ul>, <ol>)
- element in a table cell: complete the cell text (<td>[…]</td>) or complete the direct cell header (<th>[…]</th>).
Priority: P3
PR: https://github.com/twbs/bootstrap/pull/40766 (merged)

🟢 isssue-2-4

Test: Is each link label explicit, at least in its context?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/navigation-generale/#rendre-les-intitules-des-liens-et-des-boutons-accessibles
Summary: Presence of link labels that are not understandable in their contexts
Description: Links with identical labels that point to different destinations.
- "Bootstrap" in the footer.
Solution: Add a distinctive information in the surrounding text.
Technical solution:
Priority: P3
PR: #2706

🔴🔴 isssue-2-5

Test: Are status messages correctly rendered?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/navigation-generale/#permettre-de-connaitre-le-resultat-dune-interaction-utilisateur-a-laide-de-messages-contextuels
Summary: No ARIA roles (status, alert, alertdialog...) or dynamic aria-live regions
Description: Alert messages are not perceived from a screen reader. Case of the search result.
Solution: Apply an ARIA role ("status", "alert", "alertdialog", etc...) or "aria-live" attribute to the alert message so that it is automatically vocalized. Examples:
- <div role="status"> […] </div>
- <div aria-live="assertive">[...]</div>
Technical solution:
Priority: P2 (This comes from a tool and cannot be changed)

Design guidelines

🟢 isssue-3-1

Test: Is the content semantically structured?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#respecter-la-semantique-html
Summary: Absence of HTML list semantics
Description: "Les éléments présentés visuellement comme des listes doivent être structurés avec une sémantique de liste.
Description: Elements visually presented as lists must be structured with list semantics.
- The elements of "Other platforms in the Orange Design System" are visually list elements.
Solution: Use appropriate list semantics <ul>, <ol> or <dl>, <dt> and <dd>
Technical solution:
Priority: P2
PR: #2702

🟢 isssue-3-2

Test: Does the accessible name of the interface components contain at least the visible label on the screen?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/navigation-generale/#rendre-les-intitules-des-liens-et-des-boutons-accessibles
Summary: Absence of visible text in the accessible name
Description: The text of the displayed label (the textual label or the text of the image visible on the screen) must be present (first, if possible) in the (accessible) name of this component.
- Visit system.design.orange.com / Design system for web (Link has a title which is different from text content.)
Solution: Modify the accessible name of the element to include the text visible on the screen, if possible first.
Technical solution: Several solutions are possible to redefine the accessible name: aria-labelledby, aria-label, title, hidden accessible text.
Priority: P3
PR: #2703

🔴🔴 isssue-3-3

Test: Are status messages correctly rendered?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/navigation-generale/#permettre-de-connaitre-le-resultat-dune-interaction-utilisateur-a-laide-de-messages-contextuels
Summary: No ARIA roles (status, alert, alertdialog...) or dynamic aria-live regions
Description: Alert messages are not perceived from a screen reader. Case of the search result.
Solution: Apply an ARIA role ("status", "alert", "alertdialog", etc...) or "aria-live" attribute to the alert message so that it is automatically vocalized. Examples:
- <div role="status"> […] </div>
- <div aria-live="assertive">[...]</div>
Technical solution:
Priority: P2 (This comes from a tool and cannot be changed)

Overview

🟢 isssue-4-1

Test: Is the information structured by the appropriate use of headings?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#donner-des-titres-aux-rubriques
Summary: Incomplete hierarchy
Description: The page must be structured using headings of different levels.
- The headings of the sections in the left-hand menu.
Solution: All content treated visually as headings must have a title semantics (tags <h1> to <h6>).
Technical solution:
Priority: P1
PR: #2727

🟢 isssue-4-2

Test: Is the information structured by the appropriate use of headings?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#donner-des-titres-aux-rubriques
Summary: Inappropriate level titles
Description: Headings of different levels must be relevant and accurately describe the content section they present.
- h1 for "About" is not precise enough.
Solution: Specify the context.
Technical solution: <h1>About Boosted</h1>
Priority: P1
PR: #2720

🔴🔴 isssue-4-3

Test: Is there sufficient contrast between the text color and the background color (except for special cases)?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/couleurs-et-contrastes/#assurer-un-contraste-suffisant-entre-les-couleurs-de-premier-plan-et-de-fond
Summary: Insufficient contrast between text and background
Description: The contrast between the text and the background must be sufficient to ensure that the information is legible.
- Links in orange on a white background are not compliant.
Solution: Ensure a minimum contrast of 4.5:1 between a link and surrounding text of normal sizes (less than 24px CSS and 19px bold CSS). Ensure a minimum contrast of 3:1 between an unlined link and surrounding text of large sizes (greater than 24px CSS and 19px bold CSS).
Technical solution:
Priority: P1
seen with the accessibility team: this is a very important design issue and it can't be changed in all Boosted like this. This needs to be addressed when creating OUDS with a new design for the links.

🔴🔴 isssue-4-4

Test: Are status messages correctly rendered?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/navigation-generale/#permettre-de-connaitre-le-resultat-dune-interaction-utilisateur-a-laide-de-messages-contextuels
Summary: No ARIA roles (status, alert, alertdialog...) or dynamic aria-live regions
Description: Alert messages are not perceived from a screen reader. Case of the search result.
Solution: Apply an ARIA role ("status", "alert", "alertdialog", etc...) or "aria-live" attribute to the alert message so that it is automatically vocalized. Examples:
- <div role="status"> […] </div>
- <div aria-live="assertive">[...]</div>
Technical solution:
Priority: P2 (This comes from a tool and cannot be changed)

Brand

🟢 isssue-5-1

Test: Is the information structured by the appropriate use of headings?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#donner-des-titres-aux-rubriques
Summary: Incomplete hierarchy
Description: The page must be structured using headings of different levels.
- On this page is visually a heading.
Solution: All content treated visually as headings must have a title semantics (tags <h1> to <h6>).
Technical solution:
Priority: P1
PR: #2705

🟢 isssue-5-2

Test: Is the information structured by the appropriate use of headings?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#donner-des-titres-aux-rubriques
Summary: Incomplete hierarchy
Description: The page must be structured using headings of different levels.
- The headings of the sections in the left-hand menu.
Solution: All content treated visually as headings must have a title semantics (tags <h1> to <h6>).
Technical solution:
Priority: P1
PR: #2727

🟢 isssue-5-3

Test: Do the images have appropriate text alternatives? (figcaption label and structure)
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-non-textuel/#fournir-un-equivalent-textuel-pour-les-images-et-les-cadres
Summary: The ALT of a decorative image is irrelevant
Description: The content of the ALT attribute of an image is not relevant to its context.
- Case of the Orange and Orange Business Services logos with captions.
Solution: For a "figcaption", a role="group" must be added to the figure, and an aria-label that repeats the figcaption, in addition to having an alt that describes the image.

Technical solution: Example:

<figure role="figure" aria-label="Master Logo">   
<img src="…" alt="Logo Orange" />
<figcaption>Master Logo
</figcaption>
</figure>

Priority: P0
PR:
- 2709 for changing the label...
- Discussed with EASE experts: ok for the <figure>/<figcaption> as is

🟢 isssue-5-4

Test: Is there sufficient contrast between the text color and the background color (except for special cases)?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/couleurs-et-contrastes/#assurer-un-contraste-suffisant-entre-les-couleurs-de-premier-plan-et-de-fond
Summary: Insufficient contrast between text and background (figcaption color in dark mode)
Description: The contrast between the text and the background must be sufficient to ensure that the information is legible.
- The contrast ratio of the text in the figcaption of the Orange and Orange Business Services logos is insufficient.
Solution: Ensure a minimum contrast of 4.5:1 between a link and surrounding text of normal sizes (less than 24px CSS and 19px bold CSS). Ensure a minimum contrast of 3:1 between an unlined link and surrounding text of large sizes (greater than 24px CSS and 19px bold CSS).
Technical solution:
Priority: P1
PR: #2697

🔴🔴 isssue-5-5

Test: Are status messages correctly rendered?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/navigation-generale/#permettre-de-connaitre-le-resultat-dune-interaction-utilisateur-a-laide-de-messages-contextuels
Summary: No ARIA roles (status, alert, alertdialog...) or dynamic aria-live regions
Description: Alert messages are not perceived from a screen reader. Case of the search result.
Solution: Apply an ARIA role ("status", "alert", "alertdialog", etc...) or "aria-live" attribute to the alert message so that it is automatically vocalized. Examples:
- <div role="status"> […] </div>
- <div aria-live="assertive">[...]</div>
Technical solution:
Priority: P2 (This comes from a tool and cannot be changed)

Translations

🟢 isssue-6-1

Test: Is the information structured by the appropriate use of headings?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#donner-des-titres-aux-rubriques
Summary: Incomplete hierarchy
Description: The page must be structured using headings of different levels.
- The headings of the sections in the left-hand menu.
Solution: All content treated visually as headings must have a title semantics (tags <h1> to <h6>).
Technical solution:
Priority: P1
PR: #2727

🟢 isssue-6-2

Test: Are language changes indicated?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#indiquer-la-langue-principale-et-les-changements-de-langue
Summary: Language change not indicated
Description: Words and expressions in a foreign language must be indicated to users.
- Links to Bootstrap in a foreign language.
Solution: Add a lang attribute to content in a foreign language.
Technical solution: <a href="https://example.com" hreflang="en" lang="en">Click here</a>
Priority: P3
PR: https://github.com/twbs/bootstrap/pull/40767 and #2708

🔴🔴 isssue-6-3

Test: Is there sufficient contrast between the text color and the background color (except for special cases)?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/couleurs-et-contrastes/#assurer-un-contraste-suffisant-entre-les-couleurs-de-premier-plan-et-de-fond
Summary: Insufficient contrast between text and background
Description: The contrast between the text and the background must be sufficient to ensure that the information is legible.
- The contrast ratio is insufficient on mouseover between the text and the background for the Bootstrap links in a foreign language.
Solution: Ensure a minimum contrast of 4.5:1 between a link and surrounding text of normal sizes (less than 24px CSS and 19px bold CSS). Ensure a minimum contrast of 3:1 between an unlined link and surrounding text of large sizes (greater than 24px CSS and 19px bold CSS).
Technical solution:
Priority: P1 (questions on links)

🔴🔴 isssue-6-4

Test: Are status messages correctly rendered?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/navigation-generale/#permettre-de-connaitre-le-resultat-dune-interaction-utilisateur-a-laide-de-messages-contextuels
Summary: No ARIA roles (status, alert, alertdialog...) or dynamic aria-live regions
Description: Alert messages are not perceived from a screen reader. Case of the search result.
Solution: Apply an ARIA role ("status", "alert", "alertdialog", etc...) or "aria-live" attribute to the alert message so that it is automatically vocalized. Examples:
- <div role="status"> […] </div>
- <div aria-live="assertive">[...]</div>
Technical solution:
Priority: P2 (This comes from a tool and cannot be changed)

Cookies

🟢 isssue-7-1

Test: Is each form field labeled?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/formulaires/#rendre-accessibles-les-champs-de-formulaire
Summary: Visually distant label
Description: All form elements must have a visible label nearby.
- "Google Tag Manager" on the "Cookies management panel"
Solution: Place a relevant label, visible near each form field.
Technical solution:
Priority: P0
2695

🟢 isssue-7-2

Test: Is the information structured by the appropriate use of headings? (left menu)
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#donner-des-titres-aux-rubriques
Summary: Incomplete hierarchy
Description: The page must be structured using headings of different levels.
- The headings of the sections in the left-hand menu.
Solution: All content treated visually as headings must have a title semantics (tags <h1> to <h6>).
Technical solution:
Priority: P1
PR: #2727

🟢 isssue-7-3

Test: Is the information structured by the appropriate use of headings?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#donner-des-titres-aux-rubriques
Summary: Incomplete hierarchy
Description: The page must be structured using headings of different levels.
- "Manage cookies preferences" should be a title.
Solution: All content treated visually as headings must have a title semantics (tags <h1> to <h6>).
Technical solution:
Priority: P1
seen with accessibility team: false positive, nothing to do

🔴🔴 isssue-7-4

Test: Is there sufficient contrast between the text color and the background color (except for special cases)?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/couleurs-et-contrastes/#assurer-un-contraste-suffisant-entre-les-couleurs-de-premier-plan-et-de-fond
Summary: Insufficient contrast for hovered links
Description: Hovered links must have a sufficient contrast ratio with surrounding text.
- Orange on white with insufficient ratio.
Solution: Ensure a minimum contrast of 4.5:1 between a link and surrounding text of normal sizes (less than 24px CSS and 19px bold CSS). Ensure a minimum contrast of 3:1 between an unlined link and surrounding text of large sizes (greater than 24px CSS and 19px bold CSS).
Technical solution:
Priority: P1 (questions on links)

🔴🔴 isssue-7-5

Test: Are status messages correctly rendered?
Recommendation: https://a11y-guidelines.orange.com/fr/web/developper/navigation-generale/#permettre-de-connaitre-le-resultat-dune-interaction-utilisateur-a-laide-de-messages-contextuels
Summary: No ARIA roles (status, alert, alertdialog...) or dynamic aria-live regions
Description: Alert messages are not perceived from a screen reader. Case of the search result.
Solution: Apply an ARIA role ("status", "alert", "alertdialog", etc...) or "aria-live" attribute to the alert message so that it is automatically vocalized. Examples:
- <div role="status"> […] </div>
- <div aria-live="assertive">[...]</div>
Technical solution:
Priority: P2 (This comes from a tool and cannot be changed)

🔴🔴 Bonus

See https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2695#issuecomment-2345354812
We checked how to fix it from outside, and it's not possible right now as we should recreate the focus trap from scratch

Orange-OpenSource / Orange-Boosted-Bootstrap

Accessibility audit #2667