Skip to content

Accessibility audit #2667

New issue
New issue
Open
Open
Accessibility audit#2667

Description

@julien-deramond

julien-deramond
openedon Aug 1, 2024

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.

Pages

Homepage

🟢 issue-0-1
🟢 isssue-0-2
🟠 isssue-0-3
🔴🔴 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
🟢 isssue-0-6
🟢 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
🟢 isssue-1-2
🟠 isssue-1-3
🟢 isssue-1-4
🔴🔴 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
🟢 isssue-1-8

Examples

🟠 isssue-2-1
🔴🔴 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: Docs: Make "Edit in Stackblitz" links explicit twbs/bootstrap#40766 (merged)
🟢 isssue-2-4
🔴🔴 isssue-2-5

Design guidelines

🟢 isssue-3-1
🟢 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: Fix a11y audit 3-2: Update aria-label and title #2703
🔴🔴 isssue-3-3

Overview

🟢 isssue-4-1
🟢 isssue-4-2
🔴🔴 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

Brand

🟢 isssue-5-1
🟢 isssue-5-2
🟢 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:
🟢 isssue-5-4
🔴🔴 isssue-5-5

Translations

🟢 isssue-6-1
🟢 isssue-6-2
🔴🔴 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

Cookies

🟢 isssue-7-1
🟢 isssue-7-2
🟢 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
🔴🔴 Bonus
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    accessibilitydocsImprovements or additions to documentation

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions