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

Jump to bottom

Accessibility audit #2667

Open
julien-deramond opened this issue Aug 1, 2024 · 1 comment
Open

Accessibility audit #2667

julien-deramond opened this issue Aug 1, 2024 · 1 comment
Labels
accessibility docs Improvements or additions to documentation

Comments

@julien-deramond
Copy link
Member

julien-deramond commented Aug 1, 2024 •
edited by hannahiss
Loading

Note

Total issues: 42

  • 🟢 Done => 9 issues
  • 🟡 Ongoing (approved, almost ok) => 9 issues
  • 🟠 Ongoing (not reviewed nor approved yet) => 8 issues
  • 🔴 Not started (questions still pending) => 0 issues
  • 🔴🔴 Won't be done (because we can't fix it) => 15 issues (covering 5 subjects)

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 (approved)
🟡 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
@julien-deramond julien-deramond added accessibility docs Improvements or additions to documentation labels Aug 1, 2024
This was referenced Aug 19, 2024
Open
Open
Closed
@louismaximepiton louismaximepiton mentioned this issue Aug 20, 2024
Open
@hannahiss hannahiss mentioned this issue Aug 20, 2024
Open
This was referenced Aug 20, 2024
Merged
Open
Open
Closed
Merged
Open
Merged
Merged
This was referenced Aug 23, 2024
Open
Merged
Merged
Open
Merged
@julien-deramond julien-deramond mentioned this issue Sep 4, 2024
Merged
6 tasks
@hannahiss hannahiss mentioned this issue Sep 6, 2024
Merged
@hannahiss
Copy link
Member

hannahiss commented Sep 10, 2024 •
edited
Loading

New meeting with EASE today:

  • Wether or not switch to dark mode can be considered as an alternative regarding links accessibility (orange on hover) => the answer is no, each mode should be accessible, since some people having some deficiencies have to use a specific mode.
  • Links visibility => the hand cursor on hover is considered a 2nd way to know that it is a link, and does not go through the color
  • Nested SVG:
    • Decorative: aria-hidden for parent and child
    • Informative: aria-label on the parent and aria-hidden on the child
    • NB about question: is aria-hidden really necessary on decorative SVG? or are SVGs ignored by default when they contain no text? (they are ignored by NVDA but some further tests would be needed) => Yes it is regarding this criterion (level A):

From https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html:

Decoration, Formatting, Invisible
If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

  • <figure>: no role + alt on the image + <figcaption> is OK
  • Left menu: aside should be used for a content that differs of <main> (like stock price on the Orange website) => we should replace <aside> with <nav> => to see if it should be done in Bootstrap? And then, do we do it in Boosted?
  • Right menu: tags' hierarchy OK but add a title, linked to the nav (we did had a title on 'On this page' but we can't link it to the <nav> since it is generated by Hugo tool

This was referenced Sep 10, 2024
Merged
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
accessibility docs Improvements or additions to documentation
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hannahiss @julien-deramond