\ cc @ FreeCodeCamp / modérateurs

Oui, merci beaucoup d'avoir soulevé cela, nous sommes très ouverts à l'idée de rendre le site Web plus accessible et la prise en charge des lecteurs d'écran en est une partie importante.

Ouverture à la communauté pour des suggestions sur les implémentations.

Commentaire du développeur principal du lecteur d'écran NVDA:

Le 08/01/2017 17h11, mrugesh mohapatra a écrit:
>

Oui, merci beaucoup d'avoir soulevé cela, nous sommes très ouverts à l'idée de
rendre le site Web plus accessible et prendre en charge les lecteurs d'écran est un
partie importante de cela.

Ouverture à la communauté pour des suggestions sur les implémentations.

-
Vous recevez ceci parce que vous avez créé le fil.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271187374 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/APDp4ufBLExQL0QJK2q17hvMavLGwSBwks5rQW0kgaJpZM4LdzaT .

Commentaire du développeur principal du lecteur d'écran NVDA:

Cela est dû à des problèmes d'accessibilité dans l'éditeur de code utilisé.
Ces éditeurs de code choisissent de dessiner leur contenu de manière non standard,
plutôt que d'utiliser HTML contentEditable (qui est la manière standard de faire
contenu modifiable). Malheureusement, nous ne pouvons rien faire pour soutenir
ce; le problème doit être résolu dans l'éditeur.
-

Le 08/01/2017 17h11, mrugesh mohapatra a écrit:
>

Oui, merci beaucoup d'avoir soulevé cela, nous sommes très ouverts à l'idée de
rendre le site Web plus accessible et prendre en charge les lecteurs d'écran est un
partie importante de cela.

Ouverture à la communauté pour des suggestions sur les implémentations.

-
Vous recevez ceci parce que vous avez créé le fil.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271187374 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/APDp4ufBLExQL0QJK2q17hvMavLGwSBwks5rQW0kgaJpZM4LdzaT .

@mjanusauskas Salut Mathew! Cela vous dérange-t-il de nous indiquer le repo s'il s'agit d'une source ouverte pour soulever un rapport de problème?

Je ne sais pas exactement quel éditeur inaccessible est utilisé.

Le 09/01/2017 00h49, mrugesh mohapatra a écrit:
>

@mjanusauskas https://github.com/mjanusauskas Salut Mathew! Esprit
nous pointant vers le repo si c'est open source pour soulever un rapport de problème?

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271220175 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/APDp4iUWcvbQSZedazsn7H3_sOnWCuB7ks5rQdh_gaJpZM4LdzaT .

Eh bien, nous utilisons https://github.com/codemirror/CodeMirror pour l'éditeur, mais nous aimerions savoir si vous pouvez également nous aider avec le repo pour NVDA, le lecteur d'écran open source pour vérifier avec eux également?

@raisedadead c'est probablement tout pour le lecteur open source https://github.com/nvaccess/nvda

Ah, merci @erictleung!

D'accord, je ne vois aucun problème avec le dépôt qui concerne spécifiquement CodeMirror. Je suppose que nous devrions y aller, ouvrir des questions dans les deux pensions, demander de l'aide à ce sujet?

/ cc @ FreeCodeCamp / modérateurs

Le commentaire précédent que j'ai partagé du développeur principal de NVDA venait du
problème que j'ai ouvert dans leur repo. Leur position est qu'il n'y a rien
cela peut être fait dans le lecteur d'écran en raison de l'approche non standard
utilisé et que le problème d'accessibilité doit être résolu dans l'éditeur.

Le 09/01/2017 12h18, mrugesh mohapatra a écrit:
>

D'accord, je ne vois aucun problème avec le dépôt lié à CodeMirror
Plus précisément. Je suppose que nous devrions y aller, ouvrir des problèmes dans les deux
repos, cherchant de l'aide à ce sujet?

/ cc @ FreeCodeCamp / modérateurs
https://github.com/orgs/FreeCodeCamp/teams/moderators

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271361131 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/APDp4oyVgtLfIsZKxB51xxN08OxRhHhXks5rQnoFgaJpZM4LdzaT .

Pouvez-vous nous aider avec le numéro, le lien, etc., nous aimerions comprendre ce qui doit être mis en œuvre? Sans une idée technique claire de ce qui ne va pas, dans l'éditeur, il serait difficile de convaincre les responsables de l'éditeur d'un correctif.

Toutes mes excuses, mais sans plus d'informations, il est difficile de procéder, étant donné que nous aimerions soutenir autant d'accessibilité que possible.

Le problème que j'ai signalé aux développeurs de lecteurs d'écran NVDA est:

https://github.com/nvaccess/nvda/issues/6707

Merci pour tout ce que vous pouvez faire. J'aimerais pouvoir
participer au Free Code Camp une fois que le problème d'accessibilité a été
résolu.

Le 09/01/2017 12h41, mrugesh mohapatra a écrit:
>

Pouvez-vous nous aider avec le problème, le lien, etc., nous aimerions comprendre
que faut-il mettre en œuvre? Sans une idée technique claire de ce
faux, dans l'éditeur, il serait difficile de convaincre le
mainteneurs de l'éditeur pour un correctif.

Toutes mes excuses, mais sans plus d'informations, il est difficile de procéder,
étant donné que nous aimerions soutenir autant d'accessibilité que possible.

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271367297 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/APDp4rtyeVvew2edXgWaxr1eICnDpdKxks5rQn9wgaJpZM4LdzaT .

Quelques recherches sur Google m'ont conduit à ceci: http://bgrins.github.io/codemirror-accessible/
Ça vaut peut-être le coup d'œil

Je ne sais pas quel éditeur est utilisé ni s'il est utile, mais le
expérience de l'utilisation des cours html et css et des tests de code sur
www.w3schools.com était assez accessible en tant qu'utilisateur de lecteur d'écran.

Le 09/01/2017 12h55, Dylan a écrit:
>

Quelques recherches sur Google m'ont conduit à ceci:
http://bgrins.github.io/codemirror-accessible/
Ça vaut peut-être le coup d'œil

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271371504 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/APDp4p-8xX-xTVF0bqGhOkpAinPMDwNaks5rQoKagaJpZM4LdzaT .

@mjanusauskas Merci beaucoup, Mathew.

Nous examinons cela en priorité et au mieux de nos capacités ... nous pourrions être un peu retardés, mais soyez assurés que nous essaierons de trouver une solution dès que possible ... en attendant, nous vous invitons à consulter le wiki des articles sur notre forum à https://forum.freecodecamp.com et la série de vidéos pour continuer à apprendre.

/ cc @QuincyLarson

Je viens d'essayer la démo CodeMirror Accessible à laquelle @dhcodes est lié. Il est supposé être moins performant, bien que je n'ai pas remarqué de ralentissement lorsque je travaillais avec le fichier JavaScript de ~ 10 000 lignes qu'ils y avaient chargé. Les plus gros projets que je peux imaginer que nous ayons dans une seule zone de texte CodeMirror feraient peut-être 1000 lignes, donc je ne pense pas que le ralentissement soit si mauvais.

Cela dit, je suis sur un bureau.

Peut-être devrions-nous voir si nous pouvons avoir un bouton dans les paramètres qui bascule l'utilisation de CodeMirror Accessible?

CC @BerkeleyTrue @zersiax

Un très bon exemple de la façon dont ce type de chose peut être complètement fabriqué
accessible peut être trouvé à
https://teachaccess.github.io/tutorial/#/3

Le lun 9 janvier 2017 à 13 h 58, Quincy Larson [email protected]
a écrit:

Je viens d'essayer la démo accessible CodeMirror que @dhcodes
https://github.com/dhcodes lié à. Soi-disant c'est
performances inférieures, même si je n'ai remarqué aucun ralentissement lorsque je travaille avec
le fichier JavaScript de ~ 10 000 lignes qu'ils y avaient chargé. Le plus large
les projets que je peux imaginer que nous ayons dans une seule zone de texte CodeMirror seraient
peut-être 1 000 lignes, donc je ne pense pas que le ralentissement soit si grave.

Cela dit, je suis sur un bureau.

Peut-être devrions-nous voir si nous pouvons avoir un bouton dans les paramètres qui
bascule l'utilisation de CodeMirror Accessible?

CC @BerkeleyTrue https://github.com/BerkeleyTrue @zersiax
https://github.com/zersiax

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271390191 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/APDp4nMFLf9Ou0z2oNBFLPZdcxZwxMoOks5rQpFPgaJpZM4LdzaT
.

J'aime cette ressource, elle montre un exemple fonctionnel ... utilise-t-elle contentEditable sous le capot?

Je le soupçonne, mais je ne suis pas sûr.
Actuellement, le travail plutôt fastidieux que j'utilise pour chaque défi est
pour sélectionner tout le contenu dans l'éditeur CodeMirror> coller dans NotePad ++>
effectuez les modifications nécessaires> Tout sélectionner et copier> Coller dans l'éditeur CodeMirror>
soumettre.
De toute évidence, une expérience très médiocre et inefficace pour les utilisateurs de lecteurs d'écran.

Le dimanche 22 janvier 2017 à 16:19, Florian Beijers [email protected]
a écrit:

J'aime cette ressource, elle montre un exemple fonctionnel ... utilise-t-elle
contenuEditable sous le capot?

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-274364439 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/APDp4hHGQh0qVNCHAFDmlUzwq8u8DPIPks5rU9X5gaJpZM4LdzaT
.

Après avoir utilisé le travail fastidieux mentionné pour terminer le HTML, CSS
et les défis Bootstrap J'ai été déçu de constater que le prochain
Le défi de créer une page Web hommage de base utilise CodePen.

CodePen semble avoir des problèmes d'accessibilité majeurs similaires avec son
éditeur. Très frustrant pour un utilisateur de lecteur d'écran.

Le 22 janvier 2017 à 16 h 19, Florian Beijers a écrit:
>

J'aime cette ressource, elle montre un exemple fonctionnel ... utilise-t-elle
contenuEditable sous le capot?

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-274364439 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/APDp4hHGQh0qVNCHAFDmlUzwq8u8DPIPks5rU9X5gaJpZM4LdzaT .

@mjanusauskas nous suggérons Codepen pour l'éditeur de texte intégré et le rendu rapide. Cependant, je ne pense pas que nous nous limitons à Codepen. Pour terminer votre projet, il vous suffit de soumettre une URL vers votre projet opérationnel. N'hésitez donc pas à utiliser n'importe quel service d'hébergement pour rendre vos projets. Une alternative consiste à utiliser les pages GitHub https://pages.github.com/.

Remarque pour les contributeurs souhaitant aider, voici une ressource qui peut aider à résoudre ce problème http://bgrins.github.io/codemirror-accessible/

J'ai examiné cela un peu. Il semble que TeachAccess utilise le composant éditeur d'exerslide . D'après ce que je peux dire, ce qu'il fait, c'est copier tout le contenu dans la zone de texte.

Quelque chose d'autre que j'ai rencontré en travaillant sur # 12828 est l'option inputStyle de CodeMirror . Cela nous permet de changer l'éditeur pour utiliser contentEditable.
Je pensais que le support du navigateur pour contentEditable ne devrait pas être un problème, mais j'ai trouvé ce commentaire sur leur discours , qui indique qu'il est bogué dans les anciens navigateurs. Cependant, ils déclarent que c'est la valeur par défaut sur mobile, et cela fonctionne bien pour nous là-bas. Je pense que nous devrions être bien en utilisant cette option (ils l'ont depuis deux ans maintenant).
La seule différence que j'ai pu repérer lors de mon test rapide est que le curseur change de couleur en fonction de la coloration syntaxique.
Je ne suis pas un utilisateur expert du lecteur d'écran, mais d'après ce que je peux dire, cela fonctionne bien avec NVDA.

Dois-je soumettre ceci en tant que PR?

@mjanusauskas @zersiax Avez-vous des conseils sur les choses que je devrais tester? Seriez-vous prêt à aider avec l'assurance qualité?

Si quelqu'un a besoin d'un autre exemple sur la façon dont cela devrait fonctionner, je suis juste tombé sur l'IDE d'Orion en ligne qui fait beaucoup de ce que je voudrais d'un système comme celui-ci. Je doute cependant de son open source

@QuincyLarson ouais, envoyez-moi un lien vers un bac à sable où vous avez cela en cours d'exécution? Je vais lui donner un tourbillon.

@zersiax Salut! Je ne sais pas comment déployer une version sandbox de freeCodeCamp. Peut-être que Quincy peut en obtenir un pour vous, ou je serais heureux de vous guider pour l'installer localement.

L'un ou l'autre fonctionne :) J'ai un environnement de nœud en cours d'exécution, j'aurais besoin de
dépoussiérer cependant :)

@zersiax Local est probablement la solution la plus rapide 👍 Voici la version abrégée du guide d'installation (le guide complet est CONTRIBUTING.md ):

1. Assurez-vous que Node v6 et MongoDB v3 sont installés
2. Cloner freeCodeCamp
3. Assurez-vous que MongoDB fonctionne tout au long de tout cela
4. Exécutez les commandes suivantes dans le cl freeCodeCamp:

npm install
npm install -g gulp
cp sample.env .env
npm run only-once
gulp

1. Votre instance locale devrait désormais fonctionner à localhost:3000
2. Pour vérifier mes modifications, arrêtez de gulp et exécutez:

git remote add systimotic https://github.com/systimotic/FreeCodeCamp.git
git fetch systimotic
git checkout --track systimotic/fix/accessible-editor

1. Redémarrez gulp et vous devriez être en mesure de vérifier à nouveau les modifications sur localhost: 3000

Oof, c'était un peu plus compliqué que je ne l'imaginais.
J'ai peut-être foiré, cependant. 😅 N'hésitez pas à m'envoyer un message n'importe où si vous rencontrez des problèmes.

Merci pour l'information. J'examinerai les pages GitHub en tant que
alternative possible.

Le 24/01/2017 23h12, Eric Leung a écrit:
>

@mjanusauskas https://github.com/mjanusauskas nous suggérons Codepen pour
l'éditeur de texte intégré et le rendu rapide. Cependant, je ne pense pas
nous le limitons à Codepen. Pour terminer votre projet, tout ce dont vous avez besoin
submit est une URL vers votre projet opérationnel. Alors n'hésitez pas à utiliser
quel que soit le service d'hébergement pour rendre vos projets. Une alternative est de
utilisez les pages GitHub https://pages.github.com/.

Note pour les contributeurs souhaitant aider, voici une ressource qui peut
aider à atténuer ce problème http://bgrins.github.io/codemirror-accessible/

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-275020850 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/APDp4lJ8-omlWG3Xbt5soRKVVFYaKYMJks5rVtm1gaJpZM4LdzaT .

Oui, je serais heureux de vous aider avec les tests et / QA.

Le 25/01/2017 à 06h39, Timo a écrit:
>

J'ai examiné cela un peu. Il semble que TeachAccess utilise le
composant éditeur d'exerslide
https://github.com/facebookincubator/exerslide/blob/master/packages/exerslide/components/Editor.js .
D'après ce que je peux dire, ce qu'il fait, c'est copier tout le contenu dans
la zone de texte.

Quelque chose d'autre que j'ai rencontré en travaillant sur # 12828
https://github.com/freeCodeCamp/freeCodeCamp/issues/12828 est
Option inputStyle de CodeMirror
https://codemirror.net/doc/manual.html#option_inputStyle . Ce
nous permet de changer l'éditeur pour utiliser contentEditable.
Je pensais que le navigateur prend en charge le contenu
http://caniuse.com/#search=contentEd ne devrait pas être un problème, mais je
ont trouvé ce commentaire sur leur discours
https://discuss.codemirror.net/t/inputstyle-contenteditable-we-may-hope-for-browser-spell-checking/608/2 ,
qui indique qu'il est bogué dans les anciens navigateurs. Ils disent que c'est tout
la valeur par défaut sur mobile, cependant, et cela fonctionne bien pour nous
Là. Je pense que nous devrions être bien en utilisant cette option (ils l'ont depuis
deux ans maintenant).
La seule différence que j'ai pu constater lors de mon test rapide est que
le curseur change de couleur en fonction de la coloration syntaxique.
Je ne suis pas un utilisateur expert du lecteur d'écran, mais d'après ce que je peux dire
fonctionne bien avec NVDA.

Dois-je soumettre ceci en tant que PR?

@mjanusauskas https://github.com/mjanusauskas @zersiax
https://github.com/zersiax Avez-vous des conseils sur les choses que je devrais
tester? Seriez-vous prêt à aider avec l'assurance qualité?

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-275097352 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/APDp4oqMSgwyJUBVxfaYDkwWaP23NDqMks5rV0JzgaJpZM4LdzaT .

+1. Pour le moment, il serait utile de mettre une instruction cachée que seuls les lecteurs d'écran peuvent lire et qui indique comment traiter ce problème (copier dans un autre éditeur, modifier là-bas, recopier.)

Combien de temps pensons-nous que cela prendra? Vous pouvez ajouter une classe .sr uniquement à un
span qui contient ce texte, mais si nous le laissons là-dedans trop longtemps
quelqu'un quelque part va l'oublier et ce sera juste assis
là parce que vous ne voyez pas vraiment ce message :)

J'ai récemment rencontré ce même problème sur CodePen.com et EdX.org

EdX semble avoir mis en place une solution accessible et j'inclus
leurs commentaires ici:

Nous utilisons un éditeur de code open source appelé CodeMirror
(https://codemirror.net/). Nous avons dû y apporter quelques modifications pour
le faire fonctionner dans edX Platform. Certaines de ces modifications comprenaient
certaines améliorations d'accessibilité afin que l'utilisateur puisse ne pas avoir
expérience sur d'autres sites qui utilisent CodeMirror. Parce que nous devions
personnalisez-le pour edX, nous n'avons pas pu pousser nos modifications en amont.
Cependant, CodeMirror travaille activement pour résoudre ces problèmes, selon
à leur référentiel Github Suivi des problèmes. Un autre changement personnalisé que nous avons fait
à notre fork de CodeMirror est l'inclusion d'un lecteur d'écran et d'un clavier
instructions spécifiques à l'utilisateur qui précèdent l'éditeur dans l'ordre TAB. le
l'utilisateur doit être conscient qu'il peut appuyer deux fois sur la touche ESC, puis sur TAB
pour déplacer le focus au-delà de l'éditeur. Ceci est nécessaire car dans un code
éditeur, il est très courant pour un utilisateur de vouloir insérer une séquence TAB,
et PAS déplacer le focus clavier actuel, ce que fait la touche TAB
par défaut.

Le 31 janvier 2017 à 16 h 01, Florian Beijers a écrit:

Combien de temps pensons-nous que cela prendra? Vous pouvez ajouter une classe .sr uniquement à un
span qui contient ce texte, mais si nous le laissons là-dedans trop longtemps
quelqu'un quelque part va l'oublier et ce sera juste assis
là parce que vous ne voyez pas vraiment ce message :)

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-276506570 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/APDp4h-s2_aSFUDNSIRXnc8v7bmlNqhnks5rX69UgaJpZM4LdzaT .

Voici un autre exemple de solution fonctionnelle à ce problème critique:

https://github.com/jsbin/jsbin/issues/936

Le 31 janvier 2017 à 16 h 01, Florian Beijers a écrit:

Combien de temps pensons-nous que cela prendra? Vous pouvez ajouter une classe .sr uniquement à un
span qui contient ce texte, mais si nous le laissons là-dedans trop longtemps
quelqu'un quelque part va l'oublier et ce sera juste assis
là parce que vous ne voyez pas vraiment ce message :)

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-276506570 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/APDp4h-s2_aSFUDNSIRXnc8v7bmlNqhnks5rX69UgaJpZM4LdzaT .

salut

_Envoyé depuis mon Samsung SM-A520F à l'aide de FastHub _

_Envoyé depuis mon Samsung SM-A520F à l'aide de FastHub _

Salut,
Je pense que je peux suivre ces instructions maintenant que le site est configuré localement. Je suis sûr que je dois suivre la partie qui explique comment synchroniser ce référentiel avec le mien. Est-ce correct? Et si je fais quelque chose de mal, je ne sais pas comment le faire marche arrière. Un peu anxieux. :)

Je viens de voir que c'est le vrai problème principal. Étant donné que j'ai quatre lecteurs d'écran, en supposant que je puisse suivre les instructions pour obtenir ceci sur ma machine, je serai heureux de le tester.

Pour réduire la courbe d'apprentissage si vous souhaitez obtenir un lecteur d'écran avec lequel jouer, veuillez voir ci-dessous. Et cela n'est pas du tout considéré comme offensant, mais quelqu'un avec un site n'utilisera pas un lecteur d'écran rapidement du premier coup, ni même beaucoup après cela, car les concepts vous sont si étrangers. Je serais plus qu'heureux de tester tout problème d'accessibilité impliquant autre chose que la couleur. mentionnez-moi simplement ou envoyez-moi un e-mail. Si je vois le message, je gagnerai du temps.

Pour le contraste des couleurs, recherchez un outil appelé Analyseur de contraste des couleurs et consultez le site http://www.webaim.org pour des articles sur son utilisation.

Sur PC, la meilleure combinaison de lecteur d'écran et de navigateur sera NVDA et Firefox, dernière version stable. En effet, NVDA est un lecteur d'écran qui dépend le plus de l'API d'accessibilité, et Firefox est le navigateur PC qui expose la mise en œuvre la plus pure de l'API d'accessibilité. C'est le court de cette explication.

Consultez http://www.nvda-project.org pour télécharger et configurer NVDA.

Une fois que vous l'avez configuré, pour une utilisation plus simple, accédez à la boîte de dialogue Clavier et définissez la disposition de l'ordinateur portable, puis accédez à la boîte de dialogue du mode Parcourir et désactivez la case à cocher «Utiliser la disposition de l'écran».

Une fois que vous avez tout pris en charge, vous n'avez plus besoin d'écouter NVDA parler pour faire des tests avec lui en tant que personne voyante. Démarrez-le, ouvrez NVDA, choisissez Outils, puis Speech Viewer. Garez cette fenêtre de manière à pouvoir voir le texte qu'elle contient et le contenu de votre navigateur. Taillez la fenêtre comme vous le souhaitez, puis, lorsque vous accédez au Web, utilisez principalement les touches fléchées haut et bas pour lire ligne par ligne comme si vous parcouriez un document Bloc-notes. Regardez très attentivement la fenêtre de la visionneuse vocale et vous y verrez la mise à jour du texte. Le texte dans la visionneuse vocale correspond à ce que NVDA dirait, s'il parlait.

Toutes ces connaissances ne seront toujours qu'intéressantes, mais ne vous seront pas utiles, car honnêtement, vous ne savez toujours pas ce qui devrait se passer, donc je serais toujours heureux de tester les correctifs d'accessibilité que j'apprends ici.

Bien sûr, c'est pour des raisons égoïstes, car je veux être la première personne aveugle à passer par FCC, puis je veux utiliser ces connaissances pour aider à l'accessibilité pour d'autres développeurs aveugles, et voir plus d'entre eux devenir des développeurs Web et aider les personnes souffrant de tous types de handicaps. Et qui sait, je peux même obtenir un meilleur emploi ou gagner de l'argent en dehors de mon travail quotidien.

@jhomme Merci pour les détails sur les lecteurs d'écran que vous utilisez.

Lorsque j'utilise les Fangs sur FireFox et que je visite cette URL: https://www.freecodecamp.org/challenges/inform-with-the-paragraph-element

la sortie du lecteur d'écran est:

La page a un cadre, quatre en-têtes et vingt-cinq liensInformez-vous avec la barre verticale de l'élément de paragraphe freeCodeCamp dash Internet ExplorerLinkGraphiclearn à coder javascript à freeCodeCamp logoListe de sept élémentsbulletLink MapbulletbulletLink ForumbulletLink ContributebulletLink AboutbulletLink DonatebulletLink Se connecterList endHeading level quatre éléments Informer avec l'élément de paragraphe p élément préféré pour le texte de paragraphe de la taille d'un tiret normal sur les sites Web. P est l'abréviation de quote-part de paragraphe. Vous pouvez créer un élément ap comme ce deux-points moins p supérieur Je suis une balise ap! moins slash p plus grand Créez un élément ap sous votre élément htwo, et donnez-lui le texte quote Hello Paragraph quote. Exécuter des tests à gauche paren ctrl plus entrer à droite paren Réinitialiser votre codeLink Obtenir un indice Demandez de l'aide sur le forumLink Connectez-vous pour enregistrer votre progression Créer un élément ap. Votre élément p doit avoir le texte quote Hello Paragraph quote. Assurez-vous que votre élément p a une balise de fermeture. EditEdit quatre un deux moins perfectionner plus Hello World moins slash affiner plus grand trois moins htwo plus grand CatPhotoApp moins slash htwo plus grand quatre Heading level one Hello WorldHeading niveau deux CatPhotoAppLinkLinkLink

Si je comprends bien, voici le contenu de l'éditeur de code tel que rendu par le lecteur d'écran:

un deux moins peaufiner plus Hello World moins slash affiner plus grand trois moins ht deux plus grand CatPhotoApp moins slash ht deux plus grand quatre

Cela ne semble donc pas être un problème pour le lecteur d'écran Fangs. Vivez-vous cela avec les quatre lecteurs d'écran ou seulement certains d'entre eux?

Au fait, j'applaudis votre ambition de devenir la première personne aveugle à passer par freeCodeCamp! Nous ferons ce que nous pouvons pour vous aider à faire de cet objectif une réalité.

salut Quincy,

Je vis cela avec JAWS et NVDA sur PC, voix off sur Mac. Je ne rencontre pas cela avec VoiceOver sur IOS. Je ne comprends pas pourquoi. Jusqu'à présent, je n'ai essayé aucun autre lecteur d'écran. Je pourrais essayer Narrator et TalkbBack.

Le 23 août 2017 à 00 h 01, Quincy Larson [email protected] a écrit:

@jhomme Merci pour les détails sur les lecteurs d'écran que vous utilisez.

Lorsque j'utilise les Fangs sur FireFox et que je visite cette URL: https://www.freecodecamp.org/challenges/inform-with-the-paragraph-element

la sortie du lecteur d'écran est:

La page a un cadre, quatre en-têtes et vingt-cinq liensInformez-vous avec la barre verticale de l'élément de paragraphe freeCodeCamp dash Internet ExplorerLinkGraphiclearn à coder javascript à freeCodeCamp logoListe de sept élémentsbulletLink MapbulletbulletLink ForumbulletLink ContributebulletLink AboutbulletLink DonatebulletLink Se connecterList endHeading level quatre éléments Informer avec l'élément de paragraphe p élément préféré pour le texte de paragraphe de la taille d'un tiret normal sur les sites Web. P est l'abréviation de quote-part de paragraphe. Vous pouvez créer un élément ap comme ce deux-points moins p supérieur Je suis une balise ap! moins slash p plus grand Créez un élément ap sous votre élément htwo, et donnez-lui le texte quote Hello Paragraph quote. Exécuter des tests à gauche paren ctrl plus entrer à droite paren Réinitialiser votre codeLink Obtenir un indice Demandez de l'aide sur le forumLink Connectez-vous pour enregistrer votre progression Créer un élément ap. Votre élément p doit avoir le texte quote Hello Paragraph quote. Assurez-vous que votre élément p a une balise de fermeture. EditEdit quatre un deux moins perfectionner plus Hello World moins slash affiner plus grand trois moins htwo plus grand CatPhotoApp moins slash htwo plus grand quatre Heading level one Hello WorldHeading niveau deux CatPhotoAppLinkLinkLink

Si je comprends bien, voici le contenu de l'éditeur de code tel que rendu par le lecteur d'écran:

un deux moins peaufiner plus Hello World moins slash affiner plus grand trois moins ht deux plus grand CatPhotoApp moins slash ht deux plus grand quatre

Cela ne semble donc pas être un problème pour le lecteur d'écran Fangs. Vivez-vous cela avec les quatre lecteurs d'écran ou seulement certains d'entre eux?

Au fait, j'applaudis votre ambition de devenir la première personne aveugle à passer par freeCodeCamp! Nous ferons ce que nous pouvons pour vous aider à faire de cet objectif une réalité.

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub ou désactivez le fil de discussion.

@jhomme Pour une raison quelconque, je ne trouve pas le commentaire où vous expliquez ce que vous rencontrez. Quel semble être l'officier, problème?

Salut Florian,
Divers lecteurs d'écran ne parlent pas lors d'une tentative de navigation ou de saisie
dans l'éditeur sur le site. Ils disent simplement le mot vide. Ils parlent,
cependant, lors de la sélection de texte.

Jim

Le 23/08/17, Florian Beijers [email protected] a écrit:

@jhomme Pour une raison quelconque, je ne trouve pas le commentaire où vous expliquez ce que c'est
est-ce que vous rencontrez. Quel semble être l'officier, problème?

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail ou affichez-le sur GitHub:
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment -324309958

-

Jim Homme
http://www.jimhommewebdev.com
Twitter: @jimhomme
Facebook: http://www.facebook.com/jimhomme
LinkedIn: https://www.linkedin.com/in/jimhomme

Ahh yup, cela semble être encore un problème. Comme vous pouvez le voir dans ce fil, cela a à voir avec CodeMirror qui n'est pas accessible. Pour le moment, le moyen le plus simple de le contourner est de copier-coller le code dans un éditeur comme NotePad ++ ou EdSharp si vous devez: P, puis effectuez vos modifications, puis collez-le dans l'éditeur fcc. Fastidieux, mais ça marche je suppose :)

Je viens de trouver un éditeur de code HTML open source entièrement accessible. L'actuel pourrait-il être remplacé par celui-ci? https://pode.herokuapp.com/ Pour les défis CodePen, comme CodePen n'est pas accessible, pourrait-il y avoir des instructions alternatives pour que les utilisateurs de technologies d'assistance utilisent ce site Web à la place?

Salut,
Veuillez voir le post ci-dessous et celui auquel il mène. CodePen est faisable et s'améliore. Avec des retours constructifs, ils iront mieux.

https://blog.codepen.io/2016/07/14/blind-accessibility-testers-society-guide-codepen/

Le 27 décembre 2017, à 17 h 17, inscriptioelectronicaaustralia [email protected] a écrit:

Je viens de trouver un éditeur de code HTML open source entièrement accessible. L'actuel pourrait-il être remplacé par celui-ci? https://pode.herokuapp.com/ Pour les défis CodePen, comme CodePen n'est pas accessible, pourrait-il y avoir des instructions alternatives pour que les utilisateurs de technologies d'assistance utilisent ce site Web à la place?

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub ou désactivez le fil de discussion.

@zersiax Merci d'avoir

@inscriptioelectronicaaustralia Nous prendrons bientôt en charge la construction des projets directement sur freeCodeCamp, de sorte que l'interface relativement inaccessible de CodePen ne sera pas tellement un problème. Nous avons juste besoin de résoudre les problèmes avec CodeMirror, qui est une bibliothèque open source à laquelle nous pouvons potentiellement contribuer.

Quincy, c'est bien que les projets puissent bientôt être construits sur Free Code Camp.

Je viens de regarder les fils Code Mirror GitHub à ce sujet, et ils pensent que cela demande beaucoup de travail pour que cela fonctionne avec les lecteurs d'écran, donc si les personnes contribuant à ce fil ou eux peuvent résoudre le problème conduira à un situation gagnant-gagnant non seulement pour nous, mais aussi pour les autres sites Web qui utilisent Code Mirror.

En regardant la situation hypothétiquement, y a-t-il de nombreuses fonctionnalités manquantes de l'outil Pode que j'ai référencé ci-dessus qui affecteraient Free Code Camp s'il devait être implémenté en remplacement de Code Mirror?

Salut,
Exprimant ma profonde gratitude pour les gens qui se penchent sur cette question. Je suis en train de terminer JavaScript en ce moment et j'ai hâte de pouvoir écrire du vrai code qui aide les gens, en particulier FreeCodeCamp.

Jim

De: inscriptioelectronicaaustralia [mailto: [email protected]]
Envoyé: jeudi 28 décembre 2017 02:08 AM
À: freeCodeCamp / freeCodeCamp [email protected]
Cc: Jim Homme [email protected] ; Mentionnez [email protected]
Sujet: Re: [freeCodeCamp / freeCodeCamp] Le contenu de l'éditeur ne peut pas être lu par les lecteurs d'écran (# 12431)

Quincy, c'est bien que les projets puissent bientôt être construits sur Free Code Camp.

Je viens de regarder les fils Code Mirror GitHub à ce sujet, et ils pensent que cela demande beaucoup de travail pour que cela fonctionne avec les lecteurs d'écran, donc si les personnes contribuant à ce fil ou eux peuvent résoudre le problème conduira à un situation gagnant-gagnant non seulement pour nous, mais aussi pour les autres sites Web qui utilisent Code Mirror.

En regardant la situation hypothétiquement, y a-t-il de nombreuses fonctionnalités manquantes de l'outil Pode que j'ai référencé ci-dessus qui affecteraient Free Code Camp s'il devait être implémenté en remplacement de Code Mirror?

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, visualisez-le sur GitHub https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-354240665 , ou désactivez le fil https://github.com/notifications/unsubscribe-auth/AdDz24NBYQr6hKSp_HtzaMzAkzAkzP5TzAkzAkzAkzAkkzAkzAkzAkzAkkkz

@inscriptioelectronicaaustralia CodeMirror est un projet largement utilisé avec des tonnes de fonctionnalités que nous utilisons. Je suis sceptique que Pode puisse faire tout ce que fait CodeMirror. Je pense que la meilleure option est pour nous de patcher CodeMirror.

Bien que je sois d'accord pour dire que patcher CodeMirror est le plus, appelons-le un moyen efficace de résoudre le problème, nous devons rester quelque peu réalistes.
Ce problème existe depuis toute cette année, il y a un an depuis quelques semaines, et je gémis et grogne à propos de ce problème depuis au moins deux, voire trois ans maintenant. Et c'est effectivement un problème; chaque fois que je décide d'essayer à nouveau FCC, je suis découragé par l'énervement d'avoir à contourner ces problèmes. La facilité, le faible seuil d'entrée et la simplicité du codage et de la mise à jour de votre aperçu en direct dans le navigateur lorsque vous codez ne s'appliquent tout simplement pas aux personnes utilisant des lecteurs d'écran à l'heure actuelle, ce qui est en grande partie ce qui rend le freecodecamp efficace et, oserais-je dire, charmant.
CodeMirror s'est tiré une balle dans le pied en se concentrant principalement sur le rendu graphique du code de manière performante, abandonnant presque complètement l'opération DOM standard d'autrefois. Si vous regardez autour de vous, même WordPress souffre de ce problème et ils n'ont pas encore trouvé de moyen approprié de contourner ce problème; il les a en fait empêchés d'implémenter codeMirror en tant qu'éditeur WordPress par défaut de WP et si cet éditeur est effectivement implémenté par défaut, un opt-out pour les administrateurs WordPress malvoyants devra être mis en œuvre pour ne pas complètement briser l'expérience d'administration de ces personnes. CodeMirror ne sera probablement pas corrigé de si tôt.
En regardant rapidement Pode, il semble être principalement un éditeur pour HTML et ne se rapproche malheureusement pas de la fonctionnalité de CodeMirror, donc malheureusement je ne pense pas que ce soit faisable.
Il n'y a pas de solution simple à ce problème, et l'application de correctifs est encore moins une bonne idée en regardant ce problème: https://github.com/codemirror/CodeMirror/issues/4604
La seule mesure provisoire à laquelle je puisse penser est d'avoir un moyen de rendre le contenu CM dans une zone de texte normale et de refléter les modifications apportées à cette zone de texte dans CM, peut-être lorsqu'un keydown de tab est détecté ou lorsque ctrl + entrée est préconfiguré pour exécuter du code. Jusqu'à ce que CodeMirror soit corrigé (ce qui est incertain en regardant le problème référencé ci-dessus mais peu probable compte tenu de l'historique des performances) ou rejeté pour un autre éditeur aux fonctionnalités similaires, je ne pense pas qu'il y ait beaucoup plus à faire à court terme.

Quincy, je comprends que CodeMirror est clairement la solution supérieure (je pense que Pode a été conçu pour être extrêmement simple car il était destiné uniquement aux débutants), et il serait idéal de le rendre accessible si cela est possible. La raison pour laquelle j'ai demandé quelles fonctionnalités Pode manque est que, une fois que le texte des champs d'édition CodeMirror peut être lu par les lecteurs d'écran, si CodeMirror utilise d'autres fonctionnalités visuelles pour aider au codage, celles-ci devraient également être rendues accessibles si possible.
Je réfléchissais à d'autres moyens de résoudre ce problème et je pensais que quelqu'un pourrait créer des scripts pour le lecteur d'écran JAWS pour Windows, et / ou si possible un module complémentaire pour le lecteur d'écran NVDA (VoiceOver pour macOS ne permet pas les scripts Je pense), que lorsque l'utilisateur entrait dans un champ de texte CodeMirror, le texte qui s'y trouvait déjà était copié dans un tampon de texte JAWS ou NVDA, qui pourrait ensuite être édité, et renvoyé à l'éditeur avec une frappe. Idéalement, ce champ de texte "spécial" donnerait accès à toutes les autres fonctionnalités importantes offertes par CodeMirror. JAWS utilise un langage de script propriétaire qui a la capacité de créer des scripts spécifiques à un domaine, et NVDA utilise Python pour créer des modules complémentaires, mais je ne suis pas sûr que des scripts spécifiques au domaine puissent être créés pour ce lecteur d'écran.

@inscriptioelectronicaaustralia @zersiax @jhomme Cela ressemble à la lecture de https://github.com/codemirror/CodeMirror/issues/4604#issuecomment -349920743 que @marijnh envisage de passer au contenu modifiable, ce qui devrait rendre CodeMirror beaucoup plus utilisable. J'ai commenté la question en demandant si nous pouvions faire quelque chose pour aider.

Dans le pire des cas, nous pourrions être en mesure de créer un "mode d'accessibilité" qui permet aux campeurs de passer de CodeMirror pour Pode dans les paramètres, pensant que ce serait une quantité de travail indéterminée.

Attendons de voir ce que @marijnh a à dire.

J'ai lu la réponse de marijnh, et il semble qu'il faudra peut-être un certain temps avant que nous obtenions l'accessibilité. Une chose à prendre également en considération est que malheureusement, même lorsque les gens disent «quelques mois», c'est rarement le cas pour l'accessibilité car elle est trop souvent très peu prioritaire. Je ne dis pas que c'est ce que pensent les développeurs de CodeMirror, mais c'est une tendance mondiale très inquiétante. J'ai vu des exemples où les gens disent "quelques mois", et cela se transforme en quelques mois de plus ... puis quelques autres ... et je pense que vous voyez l'image.
Comme il est toujours possible d'utiliser l'éditeur de code tel quel, je pense que l'attente de quelques mois est probablement la meilleure approche, mais si nous arrivons à juin et que rien n'a changé, peut-être qu'il vaut la peine d'envisager une autre solution. Que pensent les autres?

J'ai vu des exemples où les gens disent "quelques mois", et cela se transforme en quelques mois de plus ... puis quelques autres ...

Personne n'a rien promis dans quelques mois, sauf que les travaux commenceraient sur une nouvelle approche, qui prendra certainement un certain temps à construire.

Salut @marijnh

Merci d'avoir envisagé la re-archi de CodeMirror et nous comprenons sincèrement les efforts, tout étant un effort open source.

Étant nous-mêmes une organisation à but non lucratif, veuillez nous le faire savoir, si vous avez besoin d'une assistance de codage (pro-bono) de la part de nos développeurs communautaires dans cet effort, nous sommes là pour vous aider dans cet effort, de toutes les manières possibles.

La connaissance éprouvée du projet CM (et de ses contributeurs) est inestimable et nous nous engageons donc à vous aider dans cet effort, si vous nous guidez avec des détails sur le problème connecté au repo CodeMirror.

Salut @inscriptioelectronicaaustralia

... mais si nous arrivons à juin et que rien n'a changé, peut-être qu'il vaut la peine d'envisager une autre solution.

Nous comprenons et partageons sincèrement la frustration, et nous sommes prêts à consacrer des efforts à toute solution possible, mais à mon humble avis, aider CM à devenir meilleur à tout moment est la bonne chose à faire.

Je pense que c'est un effort bien dépensé, car nous aiderons non seulement la communauté freeCodeCamp, mais partout où CM est utilisé pour le plus grand bien de tous partout ailleurs également.

Cela dit,

L' analyse

En regardant rapidement Pode, il semble être principalement un éditeur pour HTML et ne se rapproche malheureusement pas de la fonctionnalité de CodeMirror, donc malheureusement je ne pense pas que ce soit faisable.

La seule mesure provisoire à laquelle je puisse penser est d'avoir un moyen de rendre le contenu CM dans une zone de texte normale et de refléter les modifications apportées à cette zone de texte dans CM, peut-être lorsqu'un keydown de tab est détecté ou lorsque ctrl + entrée est préconfiguré pour exécuter du code. Jusqu'à ce que CodeMirror soit corrigé (ce qui est incertain en regardant le problème référencé ci-dessus mais peu probable compte tenu de l'historique des performances) ou rejeté pour un autre éditeur aux fonctionnalités similaires, je ne pense pas qu'il y ait beaucoup plus à faire à court terme.

Nous devrions commencer à envisager la mise en œuvre d'une solution provisoire, pendant que nous vérifions avec l'équipe CM comment pouvons-nous leur apporter une aide concrète.

si vous avez besoin d'aide pour le codage

Le type de contribution le plus utile serait que les utilisateurs de lecteurs d'écran et / ou les experts en accessibilité de votre communauté aident à tester notre nouveau prototype, une fois que nous l'avons, afin que les problèmes puissent être détectés et résolus dès le début. Nous ferons une annonce lorsque nous aurons quelque chose à montrer. Si vous voulez être sûr d'être averti, vous pouvez m'envoyer un e-mail avec les coordonnées.

@svinkle J'apprécierais votre contribution sur ce problème a11y.

Est-ce que le stop-gap suggère quelque chose qui pourrait fonctionner jusqu'à ce que le problème content-editable soit résolu en amont?

La seule mesure provisoire à laquelle je puisse penser est d'avoir un moyen de rendre le contenu CM dans une zone de texte normale et de refléter les modifications apportées à cette zone de texte dans CM, peut-être lorsqu'un keydown de tab est détecté ou lorsque ctrl + entrée est préconfiguré pour exécuter du code. Jusqu'à ce que CodeMirror soit corrigé (ce qui est incertain en regardant le problème référencé ci-dessus mais peu probable compte tenu de l'historique des performances) ou rejeté pour un autre éditeur aux fonctionnalités similaires, je ne pense pas qu'il y ait beaucoup plus à faire à court terme.

Si je comprends bien l'approche, le contenu de l'éditeur CM se chargera dans un textarea et le textarea sera utilisé pour éditer le contenu. Ensuite, lors de la mise à jour / de la sauvegarde, le contenu textarea serait reflété dans l'éditeur CM.

L'éditeur CM serait-il masqué? Je suppose qu'il n'y aurait que le textarea visible, sinon avoir deux zones d'édition serait déroutant.

Salut @QuincyLarson et toutes les personnes impliquées,

Merci beaucoup pour les retours et les considérations, dans la recherche d'une solution.

Il y a une autre considération que nous avons abordée et que je viens de réaliser avec quelques discussions avec @BerkeleyTrue sur un sujet séparé sur CM , avant de procéder à l' un des patchs de singe avec une autre zone de texte. 😓

Sur la version bêta (notre nouveau front-end de réaction), nous ne dépendons pas directement de CodeMirror, mais d'un composant de réaction react-codemirror qui est un wrapper léger au-dessus de CM. Il en est ainsi, car nous en avons besoin pour fonctionner avec notre plate-forme bêta.

Nous devrons peut-être mettre à jour cela vers un composant différent dans le futur, mais cela dit qu'aucun de ces composants en discussion n'a le même support que dans le CM parent sur lequel enveloppent leurs fonctionnalités.

Donc, un singe-patch n'est peut-être pas trivial.

@raisedadead Merci d'avoir signalé cela. Nous attendrons que CodeMirror fasse sa mise à jour d'accessibilité, puis évaluerons le processus de patching de singe à partir de là.

Nous sommes heureux d'annoncer que nous sommes passés à l'éditeur de Monaco sur notre plateforme d'apprentissage. Il a tout intégré.

Nous adorons CodeMirror et merci à @marijnh pour le travail formidable que vous et l'équipe avez fait. Il a été l'éditeur de facto pendant toutes ces années. Nous aimerions toujours l'utiliser dans de futurs projets, car c'est tellement léger et simple.

Merci @zersiax , @mjanusauskas , @inscriptioelectronicaaustralia et tout le monde pour leur