orange-opensource / a11y-guidelines Goto Github PK

Bonjour,

J'ai participé à une session d'information il y a quelques années au cours de laquelle une plaquette a été distribuée. Ou puis-je la retrouver sur le site https://a11y-guidelines.orange.com ?

Cordialement,

Jean-Michel Guy

Bonjour,

Section : Masquer des éléments à l’accessibilité
Erreur de type (string au lieu de int) dans l'exemple Kotlin suivant :
myTextView1.importantForAccessibility = "4" // JELLY_BEAN
Remplacer par :
myTextView1.importantForAccessibility = 4 // JELLY_BEAN

Hi,

I am facing multiple issue's while reading the content using NVDA. The below statement is reading in Chrome perfectly but when it comes to IE it is not reading the data from aria-label.

1. The NVDA need to read "Questions?" as "Questions"
2. Phone Number should spell individually
3. Phone Hours should read as "Phone Hours: 7:00 AM to 7:00 PM CT"

*When I point mouse to span element such as "Questions?" then it is not reading the line. Do I need to change any setting in NVDA?

`

Thanks
Selvakumar R

The Calibre Image Action might be very interesting to do that

Hi @PigeardSylvain -

Please have a native English speaker review my commits for all files in home_EN/inputs/md/focus*.md before publishing it to the Guidelines site as it's a sensitive subject and a wrong terminology would not be cool for concerned people.

For example :

• https://a11y-guidelines.orange.com/mobile_EN/dev-ios is correctly redirected
• https://a11y-guidelines.orange.com/mobile_EN/dev-ios.html is not

Suggestion de @creativejuiz remontée pendant Paris Web : mettre un lien visible vers github dans nos guidelines afin de permettre plus facilement des remontées, des avis, des corrections.

@PigeardSylvain jouable selon toi ?

@PigeardSylvain j'arrive à ces fichiers-là :

• web/inputs/html/exemples/tag-exemples/Exemple destinataire.html
• web/inputs/html/exemples/tag-exemples/Exemple filtre.html
• web/inputs/html/exemples/tag-exemples/index.html

Et je ne vois aucun lien vers eux dans aucun fichier, sauf erreur.

Je les mets de côté en attendant ton retour, dis-mois s'ils sont utilisés ou si on les supprime s'il te plaît.

The images in Charlene's best practice page look like they are not in the correct boxes. i.e. The first row seems to talk about inputs, but the relevant images are on row 2

Bonjour tous,

La technique évoquée sur https://a11y-guidelines.orange.com/web/exemples/masquage/index.html mentionne clip, or @emmanuelclement me fait remonter que clip est déprécié.

cf. la section Spécifications sur MDN

Je ne sais pas si on en fait quelque chose pour le moment, mais peut-être une petite note liminaire dans la page pour dire que cette propriété est en cours de dépréciation et qu'une nouvelle méthode sera peut-être conseillée dans un futur proche.

Hello !

Sur l'article français concernant les CAPTCHAS, le lien vers l'article AcceDe Web est cassé.

J'ai trouvé deux pages qui peuvent s'y rapprocher, peut-être devrait-il pointer maintenant sur une d'entre elles :

• https://www.accede-web.com/notices/fonctionnelle-graphique/regles-supplementaires-pour-la-conformite/prevoir-une-alternative-pour-chaque-captcha-uniquement-visuel/
• https://www.accede-web.com/notices/fonctionnelle-graphique/bonnes-pratiques/privilegier-des-tests-de-securite-sous-forme-de-tests-logiques-plutot-que-sous-forme-de-captcha/

Dans la rubrique "Situations de handicap numérique" on trouve des situations de handicap lié à un autre persona nommé Thierry.
Il faut remplace Thierry par Michel.

Hello !

Je reviens de ma lecture de l'article à propos de l'accessibilité des CAPTCHAS.

J'ai vu récemment que hCaptcha semble proposer une alternative qu'ils disent accessible. Elle serait basée sur un dépôt de cookie à la suite d'une création de compte chez eux. Vous avez eu l'occasion de le tester ? Peut-être une piste pour enrichir l'article 🙂

https://www.hcaptcha.com/accessibility

Hi,

If you go to http://a11y-guidelines.orange.com/ and scroll with the down key, the "back to top" widget appears (text +arrow).
If you scroll back to the top of the page, the arrow disappears but not the text bubble.

Please fix 😉

@Lausselloic who do we assign this to, by the way?

Currently, 11ty does not provide a way to minify/uglify assets out of the box. Gonna have to check how to do it !

Sur la page Créer des documents PDF accessibles la version de PAC n'est pas à jour.

La dernière version en date est celle-ci: PAC2021

Translate to English:

• others/input/md/word.md
• others/input/md/powerpoint.md
• others/input/md/PDF.md

@PigeardSylvain any other translation needed?

Hi @GaetanBt

Please add a redirection from http://a11y-guidelines.orange.com/web/fondamentaux-nontech.html
to a valid URL, possibly https://a11y-guidelines.orange.com/fr/web/designer/ ?

Google indexe l'url ci-dessous, hors elle ne semble pas être réellement en production sur le site (on ne trouve pas l'article depuis "web > component examples" ou depuis "articles" :

Stepbar or multi-step process

In both pages:
- https://a11y-guidelines.orange.com/fr/web/designer/couleurs-et-contrastes/,
- https://a11y-guidelines.orange.com/fr/web/developper/couleurs-et-contrastes/,
the following fixes should be done:

• the words "suffit" and "est" in the sentence "De 3:1 minimum suffit pour une taille est supérieure à 24px CSS et 19px CSS en gras" should be removed.

  

• In the sentence "S'assurer que Les objets graphiques porteurs d'information...", replace the "L" in "Les" by "l".

  

• Replace the sentence "On n'est pas tenus d'appliquer ce critère" par "Nous ne sommes pas tenus d'appliquer ce critère"

  

• In the sentence "Si un texte, comme un label, un tableau de donnée...", add an "s" at the word "donnée"

  

Les deux liens dans le texte ci-dessous sont KO :
"If the mobile application is for Orange, it is necessary to follow the group's design recommendations. The respect of the Orange charter for Android, especially in the use of colors is a prerequisite. We invite you to refer to the Orange group's accessibility guideline and to the group's Android design charter."

L'url "desing.orange.com" utilisé n'est plus à jour, à remplacer avec les nouvelles "https://system.design.orange.com/0c1af118d/p/15657e-accessibility" et "https://system.design.orange.com/0c1af118d/p/0127c5-the-orange-design-system/b/02c3d2"
(à vérifier tout de même que j'ai bien récup' les bonnes)

Hi -
What a terrific resource this is!

In particular, I am exploring your proposed markup in your "sample chatbot" demo: Works flawlessly in NVDA on Windows, but Apple Voiceover

• starts out by repeating everything in the container (maybe even repeating twice, I'm not sure there)
• then seems to work Ok
• then very soon starts gobbling the spoken "Djingo says" aria prefixes as well as, "me says,"
• and eventually gets where it doesn't read any responses but what I wrote

Has anyone observed the same behavior? Know the cause? Surely it isn't this markup, but I thought I might start here to find a sympathetic hear and poll for solutions.. Maybe artificial delays would help? Maybe it's unique to me and my system?

Thanks :)
-Bronius

Bonjour,
Les boîtes à onglets utilisées dans la section Guide pour les développeurs iOS ne sont pas navigables au clavier : la tabulation permet d’accéder à l'onglet affiché par défaut (Description) mais il n'est pas possible d'atteindre les autres onglets que ce soit par la tabulation ou les flèches de direction.

File path : './src/en/articles/aria-attributes-that-can-save-you.md'

You can also reference content that is visually hidden by: CSS, visibility:hidden; ou display:none;, et avec l'attribut HTML5 hidden.

should be...

You can also reference content that is visually hidden by: CSS, visibility:hidden; or display:none;, and with the HTML5 attribute hidden.

Page : aria-live-alert

Le premier lien sous le titre "Références #", "Utilisation du rôle alerte", est une lien mort.

Salut @PigeardSylvain et @Aniort

On me fait remonter que la lisibilité des articles de veille gagnerait si on avait :

1. un interlignage plus important (déjà si on le fait au moins sur les li ce serait bien),
2. des liens lisibles et pas des liens bruts (« http:[…] »).

Je veux bien m'occuper de réécrire les contenus si ça peut aider, mais pour la CSS je ne peux rien faire.

In page https://a11y-guidelines.orange.com/fr/web/tester/#test-contenu-textuel:

• in the sentence "1. Tous les éléments présentes des balises de débuts et de fin...":

  • replace "présentes" by "présentent"
  • replace "débuts" by "début"

• in the sentence "4. Absence d'attributs id dupliqué", add an "s" to "dupliqué"

FYI there is a breaking change in Boosted/Bootstrap 5 regarding a11y helpers.

“Screen reader” classes are now “visually hidden” classes.
[...]

• Renamed .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable

So it means that a11y guidelines are perfect for Boosted/Bootstrap 4 (e.g. https://a11y-guidelines.orange.com/en/web/components-examples/accessible-hiding/) but won't work anymore for Boosted/Bootstrap 5.

IMO most of the Orange projects mostly still use Boosted 4 so a11y guidelines are perfect for them. On the other hand maybe that the new users (new projects) won't understand easily that .sr-only doesn't exist anymore.

I don't know if you have an idea on how to handle that yet (could be a dropdown switching between Boosted 4 and 5 🤷 ) but I can help if needed :)

Get rid of that ugly, not localised Github Pages' 404 page 😄

Hi,

at Affichage et vocalisation des prix this code is provided:

<p class="example" aria-hidden="true">
à partir de
<span class="price">
120<sup>,90€</sup><sub>/mois</sub>
</span>
<p>
<span class="sr-only">à partir de 120,90€ par mois</span>

Several problems arise:

1. The semantics of sup and sub are wrong, these tags must be used for indicia, not for formatting. (These elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation for presentation's sake.)
2. Doubling content will not be properly understood in any case when CSS is disabled or not loaded.

Suggestion:

<p class="example"> <!-- aria-hidden="true" removed -->
à partir de
<span class="price">
120<span class="cents">,90€</span><span class="sr-only">par </span><span class="payment-cycle">/mois</span>
</span>
</p>

(The “/” in “/mois” can be left, I think, as it will not be read by screen readers and will only be seen as a small glitch in the case when CSS does not load properly. YMMV though 😉 )

Same goes here:

<p aria-hidden="true">
    <strong>à partir de </strong><span class="price">1€*</span>
    <s>129,90€</s><br>
    *voir conditions
</p>
<span class="sr-only">à partir de 1€ au lieu de 129,90€ voir conditions</span>

That could be

<p>
    <strong>à partir de </strong><span class="price">1€*</span>
    <span class="sr-only">au lieu de</span>
    <s>129,90€</s><br>
    *voir conditions
</p>

Beware: the Cognition image has changed. This:

https://a11y-guidelines.orange.com/images/accessibility_cognition.png

should be replaced by that you can find in the Orange Library (please do not use my cheap screenshot).

Hi,

In the va11ydette when a hn is referred to (h1, h2, etc.) it is described as a “title”.

Please correct to “heading”.

Dans la page "Le nom accessible en HTML", paragraphe "Accéder au nom accessible via le navigateur" (https://a11y-guidelines.orange.com/fr/articles/le-nom-accessible-en-html/#acceder-au-nom-accessible-via-le-navigateur) :

Il semble manquer des mots dans la phrase :

Proposition de correction :

• Dans Chrome, il faut utiliser les Chrome dev tools (Ctrl+ Maj. + i) pour inspecter un élément...
• Vous pouvez utiliser les Chrome dev tools (Ctrl+ Maj. + i) pour inspecter un élément...
• Chrome met à disposition les Chrome dev tools (Ctrl+ Maj. + i) pour inspecter un élément...
• ...

I'm thinking that since title attributes on abbr tags aren't read out loud by screen readers (to my knowledge), we should provide on any first occurrence of an abbr a link to a glossary.

Votes? @Lausselloic @Aniort @PigeardSylvain

In the page https://a11y-guidelines.orange.com/fr/articles/masquage-accessible/, in the sentence "Le contenu peut toujours être rend accessible...", replace "rend" by "rendu"

Hi,

Le timeOut dans la fonction srSpeak() est à 1000 :

Ça fait 1000ms, soit 1s. Est-ce que ce ne serait pas un peu court si le texte est long ?

(Je demande juste, ce n'est peut-être pas un problème au final.)

On the page https://a11y-guidelines.orange.com/fr/articles/masquage-accessible/, there is a lacking image. Only its accessible name shows.

Bonjour,

Il y a une erreur dans le code proposé pour configurer l'élément TextView :

<TextView
android:id="@+id/usernameLabel" ...
android:text="@string/username"
android:importantForAccessibility="no"
android:labelFor="@+id/usernameEntry" />

L'attribut android:importantForAccessibility="no" rend inopérant l'attribut android:labelFor en sortant l'élément de l'arbre d'accessibilité et de fait l'élément EditText associé n'a pas de label. La remarque concernant le masquage du texte valant pour label (présente avant l'exemple) ne vaut pas dans ce cas de figure, et il reste normal de pouvoir restituer le label en navigation linéaire lorsqu'il est rencontré par le curseur de TalkBack.

Regarding the Tarteaucitron wiki we can just remove the services we don't need from the tarteaucitron.services.js file. This would decrease this file size from 113kb to 1kb. This is definitely something to do !

Dans others\inputs\md\editorial.md je lis :

Éviter les tableaux de mise en page ou de données.

Mise en page OK, mais « de données » ne me semble pas forcément un problème.

Il faudrait peut-être donner des cas d'usage plus spécifiques :

• email : OK / NOK ?
• Word : OK / NOK ?
• LibreOffice : OK / NOK ?
• Web : OK 👏

Proposition de formulation à court terme :

Éviter les tableaux de mise en page ou de données, sauf en HTML si la structure du tableau est accessible (+ lien vers la reco tableaux accessibles)

Hello,

Both FR and EN "text zoom" pages have multiple broken images.

https://a11y-guidelines.orange.com/fr/web/outils/methodes-et-outils-de-test/agrandissement-texte/
https://a11y-guidelines.orange.com/en/web/toolbox/methods-and-test-tools/text-zoom/

http/https link should be disable on computer browser not in Android apk.
In Android apk it should be open.
Please guide me.

Pankaj Mahajan
Email : [email protected]

In the page https://a11y-guidelines.orange.com/fr/web/audit-wcag/, the left navigation menu "Thématiques" is not showing as it does on the other pages of this section.

Where it's not showing:

Where, it's showing:

Bonjour,
Suite au redesign des pages du guide, j'ai constaté quelques soucis d'agencement ou de traitement du contenu, par exemple :

• A la page https://a11y-guidelines.orange.com/mobile/lecteur-ecran-voiceover.html, une partie des images des gestes n'est plus alignée correctement avec le texte associé.
• A la page https://a11y-guidelines.orange.com/mobile/criteria-ios-dev.html, dans les différents tabpanel les contenus en markdown ne sont pas convertis en HTML.

Dans tous les cas, un grand merci pour la tenue à jour de ces guides.

I would like to suggest an evolution of the writing in the "Contraste des couleurs" paragraph in that page: https://a11y-guidelines.orange.com/fr/articles/couleur-et-taille-du-texte/
Currently, the writing distinguishes between "Texte standard", "Texte en gras". It make sense from the accessibility standard standpoint. But from a typography design standpoint, the writing is not correct. "Texte standard" lacks of clarity because in typography we differentiate by the weight. We can find Regular, Thin, Semi Bold, Bold, Extra Bold, etc... depending on the font.
"Texte standard" is not a weight. "Texte en gras" is a weight.
I suggest that we write "Texte standard (non gras)".

Hi non-French friends,

We translated a few documents to English, but our software is in french and we would love to document the proper menu and command names for the tutorials.

So if you can take a moment to check on those documents that would be awesome:

• https://github.com/Orange-OpenSource/a11y-guidelines/blob/master/others_EN/inputs/md/powerpoint.md
• https://github.com/Orange-OpenSource/a11y-guidelines/blob/master/others_EN/inputs/md/word.md
• https://github.com/Orange-OpenSource/a11y-guidelines/blob/master/others_EN/inputs/md/PDF.md

(Please remember that these tutorials are under the CC BY SA 3.0 license, so they are for everyone, not just Orange.)

Hi,

When I am using JAWS or NVDA it's not reading the latest message inserted inside the chat-content where you have given aria-live="polite". Whenever you give any message via textbox it starts reading from the top unnecessarily. It is specific to Chrome only.

Some links need to be updated due to some sitemap changes that happened in https://www.w3.org/WAI/ARIA/apg/.

For example https://www.w3.org/TR/wai-aria-practices-1.1/#combobox is now https://www.w3.org/WAI/ARIA/apg/patterns/combobox/.

Basically it concerns at least all the URLs beginning with https://www.w3.org/TR/wai-aria-practices.

⚠️ If I remember well some are not that easy to "translate" since some sections are different.

For reference, here are some updates we've made recently on Bootstrap:

• https://github.com/twbs/bootstrap/pull/36488/files
• https://github.com/twbs/bootstrap/pull/36490/files
• https://github.com/twbs/bootstrap/pull/35427/files