\ cc @ FreeCodeCamp / moderators

Sí, muchas gracias por mencionar este tema, estamos muy abiertos a la idea de hacer que el sitio web sea más accesible y admitir lectores de pantalla es una parte importante de esto.

Apertura a la comunidad para sugerencias sobre implementaciones.

Comentario del desarrollador principal del lector de pantalla NVDA:

El 8/1/2017 5:11 p.m., mrugesh mohapatra escribió:
>

Sí, muchas gracias por mencionar este tema, estamos muy abiertos a la idea de
Hacer que el sitio web sea más accesible y admitir lectores de pantalla es una
parte importante de esto.

Apertura a la comunidad para sugerencias sobre implementaciones.

-
Recibes esto porque eres el autor del hilo.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271187374 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/APDp4ufBLExQL0QJK2q17hvMavLGwSBwks5rQW0kgaJpZM4LdzaT .

Comentario del desarrollador principal del lector de pantalla NVDA:

Esto se debe a problemas de accesibilidad en el editor de código que se está utilizando.
Estos editores de código eligen dibujar su contenido de una manera no estándar,
en lugar de utilizar HTML contentEditable (que es la forma estándar de hacer
contenido editable). Desafortunadamente, no podemos hacer nada para ayudar
esta; el problema debe solucionarse en el editor.
-

El 8/1/2017 5:11 p.m., mrugesh mohapatra escribió:
>

Sí, muchas gracias por mencionar este tema, estamos muy abiertos a la idea de
Hacer que el sitio web sea más accesible y admitir lectores de pantalla es una
parte importante de esto.

Apertura a la comunidad para sugerencias sobre implementaciones.

-
Recibes esto porque eres el autor del hilo.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271187374 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/APDp4ufBLExQL0QJK2q17hvMavLGwSBwks5rQW0kgaJpZM4LdzaT .

@mjanusauskas ¡Hola, Mathew! ¿Le importaría señalarnos el repositorio si es de código abierto para generar un informe de problemas?

No estoy seguro exactamente de qué editor inaccesible se está utilizando.

El 9/1/2017 12:49 a.m., mrugesh mohapatra escribió:
>

@mjanusauskas https://github.com/mjanusauskas ¡Hola, Mathew! Mente
¿Nos indica el repositorio si es de código abierto para generar un informe de problemas?

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271220175 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/APDp4iUWcvbQSZedazsn7H3_sOnWCuB7ks5rQdh_gaJpZM4LdzaT .

Bueno, usamos https://github.com/codemirror/CodeMirror para el editor, pero nos gustaría saber si también podría ayudarnos con el repositorio de NVDA, el lector de pantalla de código abierto para verificar con ellos también.

@raisedadead esto es probablemente para el lector de código abierto https://github.com/nvaccess/nvda

¡Ah, gracias @erictleung!

De acuerdo, no veo ningún problema con el repositorio que se relacione específicamente con CodeMirror. Supongo que deberíamos continuar, abriendo problemas en ambos repositorios, buscando ayuda en esto.

/ cc @ FreeCodeCamp / moderators

El comentario anterior que compartí del desarrollador líder de NVDA provino del
problema que abrí en su repositorio. Su posición es que no hay nada
que se puede hacer en el lector de pantalla debido al enfoque no estándar
que se esté utilizando y que el problema de accesibilidad debe tratarse en el editor.

El 9/1/2017 12:18 p.m., mrugesh mohapatra escribió:
>

De acuerdo, no veo ningún problema con el repositorio relacionado con CodeMirror
específicamente. Supongo que deberíamos continuar, abriendo problemas en ambos
repos, buscando ayuda en esto?

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

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271361131 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/APDp4oyVgtLfIsZKxB51xxN08OxRhHhXks5rQnoFgaJpZM4LdzaT .

¿Puede ayudarnos con el número de problema, el enlace, etc., nos encantaría saber qué se debe implementar? Sin una idea técnica clara de lo que está mal, en el editor, sería difícil convencer a los encargados del editor de una solución.

Disculpas, pero sin más información, es difícil continuar con esto, dado que nos encantaría respaldar la mayor accesibilidad posible.

El problema que informé a los desarrolladores de lectores de pantalla de NVDA es:

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

Gracias por todo lo que pueda hacer. Me encantaría poder
participar en Free Code Camp una vez que se haya solucionado el problema de accesibilidad
resuelto.

El 9/1/2017 12:41 p.m., mrugesh mohapatra escribió:
>

¿Puede ayudarnos con el número de problema, enlace, etc., nos encantaría entender
¿Qué se necesita implementar? Sin una idea técnica clara de lo que
mal, en el editor, sería difícil convencer al
mantenedores del editor para una corrección.

Disculpas, pero sin más información, es difícil continuar con esto,
dado que nos encantaría apoyar la mayor accesibilidad posible.

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271367297 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/APDp4rtyeVvew2edXgWaxr1eICnDpdKxks5rQn9wgaJpZM4LdzaT .

Algunas búsquedas en Google me llevaron a esto: http://bgrins.github.io/codemirror-accessible/
Vale la pena echarle un vistazo

No estoy seguro de qué editor se está utilizando, o si es útil, pero el
experiencia usando los cursos html y css y pruebas de código en
www.w3schools.com era bastante accesible como usuario de lector de pantalla.

El 9/1/2017 12:55 p.m., Dylan escribió:
>

Algunas búsquedas en Google me llevaron a esto:
http://bgrins.github.io/codemirror-accessible/
Vale la pena echarle un vistazo

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271371504 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/APDp4p-8xX-xTVF0bqGhOkpAinPMDwNaks5rQoKagaJpZM4LdzaT .

@mjanusauskas Muchas gracias, Mathew.

Estamos investigando esto con prioridad y lo mejor de nuestras capacidades ... es posible que nos demoremos un poco, pero tenga la seguridad de que intentaremos encontrar una solución tan pronto como podamos ... mientras tanto, le invitamos a visitar la wiki. artículos en nuestro foro en https://forum.freecodecamp.com y la serie de videos para continuar con el aprendizaje.

/ cc @QuincyLarson

Acabo de probar la demostración accesible de CodeMirror a la que

Dicho esto, estoy en un escritorio.

¿Quizás deberíamos ver si podemos tener un botón en la configuración que alterna el uso de CodeMirror Accessible?

CC @BerkeleyTrue @zersiax

Un muy buen ejemplo de cómo este tipo de cosas se pueden hacer completamente.
accesible se puede encontrar en
https://teachaccess.github.io/tutorial/#/3

El lunes 9 de enero de 2017 a la 1:58 p.m., Quincy Larson [email protected]
escribió:

Acabo de probar la demostración accesible de CodeMirror que @dhcodes
https://github.com/dhcodes vinculado a. Supuestamente es
de menor rendimiento, aunque no noté ninguna desaceleración al trabajar con
el archivo JavaScript de ~ 10k líneas que habían cargado allí. El más largo
proyectos que puedo imaginar que tengamos en una sola área de texto de CodeMirror serían
tal vez 1,000 líneas, así que no creo que la desaceleración sea tan mala.

Dicho esto, estoy en un escritorio.

Quizás deberíamos ver si podemos tener un botón en la configuración que
alterna el uso de CodeMirror Accessible?

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

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271390191 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/APDp4nMFLf9Ou0z2oNBFLPZdcxZwxMoOks5rQpFPgaJpZM4LdzaT
.

Me gusta ese recurso, muestra un ejemplo funcional ... ¿usa contentEditable bajo el capó?

Lo sospecho, pero no estoy seguro.
Actualmente, el trabajo bastante tedioso que estoy usando para cada desafío es
para seleccionar todo el contenido en el editor CodeMirror> pegar en NotePad ++>
realizar las ediciones necesarias> Seleccionar todo y copiar> Pegar en el editor CodeMirror>
enviar.
Obviamente, una experiencia muy pobre e ineficiente para los usuarios de lectores de pantalla.

El domingo 22 de enero de 2017 a las 4:19 p.m., Florian Beijers [email protected]
escribió:

Me gusta ese recurso, muestra un ejemplo de trabajo ... ¿usa
contentEditable bajo el capó?

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-274364439 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/APDp4hHGQh0qVNCHAFDmlUzwq8u8DPIPks5rU9X5gaJpZM4LdzaT
.

Después de usar el tedioso trabajo mencionado para completar el HTML, CSS
y los desafíos de Bootstrap Me decepcionó descubrir que el próximo
El desafío de construir una página web básica de tributo utiliza CodePen.

CodePen parece tener problemas importantes de accesibilidad similares con su
editor. Muy frustrante para un usuario de lector de pantalla.

El 22/1/2017 4:19 p.m., Florian Beijers escribió:
>

Me gusta ese recurso, muestra un ejemplo de trabajo ... ¿usa
contentEditable bajo el capó?

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-274364439 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/APDp4hHGQh0qVNCHAFDmlUzwq8u8DPIPks5rU9X5gaJpZM4LdzaT .

@mjanusauskas sugerimos Codepen para el editor de texto integrado y renderizado rápido. Sin embargo, no creo que lo limitemos solo a Codepen. Para finalizar su proyecto, todo lo que necesita enviar es una URL a su proyecto en funcionamiento. Así que siéntase libre de usar cualquier servicio de alojamiento para renderizar sus proyectos. Una alternativa es usar las páginas de GitHub https://pages.github.com/.

Nota para los colaboradores que deseen ayudar, aquí hay un recurso que puede ayudar a aliviar este problema http://bgrins.github.io/codemirror-accessible/

Investigué un poco esto. Parece que TeachAccess está utilizando el componente editor de exerslide . Por lo que puedo decir, lo que está haciendo es copiar todo el contenido al área de texto.

Otra cosa con la que me encontré mientras trabajaba en # 12828 es la opción inputStyle de CodeMirror . Esto nos permite cambiar el editor para usar contentEditable.
Pensé que la compatibilidad del navegador con contentEditable no debería ser un problema, pero encontré este comentario en su discurso , que indica que tiene errores en los navegadores antiguos. Sin embargo, sí afirman que es el valor predeterminado en dispositivos móviles, y nos ha funcionado bien allí. Creo que deberíamos estar bien usando esta opción (la han tenido durante dos años).
La única diferencia que pude detectar en mi prueba rápida es que el cursor cambia de color según el resaltado de sintaxis.
No soy un usuario experto en lectores de pantalla, pero por lo que puedo decir, esto funciona bien con NVDA.

¿Debo enviar esto como PR?

@mjanusauskas @zersiax ¿Tiene algún consejo sobre las cosas que debería probar? ¿Estaría dispuesto a ayudar con el control de calidad?

Si alguien necesita otro ejemplo sobre cómo debería funcionar, me encontré con el IDE de Orion en línea, que hace mucho de lo que me gustaría de un sistema como este. Aunque dudo que sea de código abierto

@QuincyLarson sí, envíame un enlace a una caja de arena donde tienes esto en ejecución. Le daré una vuelta.

@zersiax ¡Hola! No estoy seguro de cómo implementar una versión sandbox de freeCodeCamp. Quizás Quincy pueda conseguirle uno, o estaré encantado de guiarlo para instalarlo localmente.

Cualquiera de las dos funciona :) Tengo un entorno de nodo en ejecución, necesitaría
quitarle el polvo :)

@zersiax Local es probablemente la solución en ayunas 👍 Aquí está la versión abreviada de la guía de configuración (la guía completa es CONTRIBUTING.md ):

1. Asegúrese de que Node v6 y MongoDB v3 estén instalados
2. Clonar freeCodeCamp
3. Asegúrese de que MongoDB se esté ejecutando durante todo esto
4. Ejecute los siguientes comandos dentro de freeCodeCamp cl:

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

1. Su instancia local ahora debería estar ejecutándose a localhost:3000
2. Para ver mis cambios, deja de tragar y ejecuta:

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

1. Comience a tragar nuevamente y debería poder verificar los cambios nuevamente en localhost: 3000

Uf, eso fue un poco más complicado de lo que imaginaba.
Aunque puede que haya metido la pata. 😅 No dude en enviarme un mensaje en cualquier lugar si tiene algún problema.

Gracias por la información. Investigaré las páginas de GitHub como
posible alternativa.

El 24/1/2017 11:12 p.m., Eric Leung escribió:
>

@mjanusauskas https://github.com/mjanusauskas sugerimos Codepen para
el editor de texto integrado y renderizado rápido. Sin embargo, no creo
lo limitamos a Codepen. Para terminar su proyecto, todo lo que necesita
enviar es una URL a su proyecto en funcionamiento. Así que siéntete libre de usar
cualquier servicio de hosting para realizar sus proyectos. Una alternativa es
use las páginas de GitHub https://pages.github.com/.

Nota para los contribuyentes que deseen ayudar, aquí hay un recurso que puede
ayudar a aliviar este problema http://bgrins.github.io/codemirror-accessible/

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-275020850 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/APDp4lJ8-omlWG3Xbt5soRKVVFYaKYMJks5rVtm1gaJpZM4LdzaT .

Sí, estaría encantado de ayudar con las pruebas y / QA.

El 25/1/2017 6:39 a.m., Timo escribió:
>

Investigué un poco esto. Parece que TeachAccess está usando el
componente editor de exerslide
https://github.com/facebookincubator/exerslide/blob/master/packages/exerslide/components/Editor.js .
Por lo que puedo decir, lo que está haciendo es copiar todo el contenido a
el área de texto.

Algo más con lo que me encontré mientras trabajaba en # 12828
https://github.com/freeCodeCamp/freeCodeCamp/issues/12828 es
Opción inputStyle de CodeMirror
https://codemirror.net/doc/manual.html#option_inputStyle . Esta
nos permite cambiar el editor para usar contentEditable.
Pensé en el soporte del navegador para contenidoEditable
http://caniuse.com/#search=contentEd no debería ser un problema, pero yo
encontré este comentario en su discurso
https://discuss.codemirror.net/t/inputstyle-contenteditable-we-may-hope-for-browser-spell-checking/608/2 ,
que indica que tiene errores en los navegadores antiguos. Ellos dicen que eso es todo
Sin embargo, es el predeterminado en dispositivos móviles y nos ha funcionado bien
allí. Creo que deberíamos estar bien usando esta opción (la han tenido por
dos años ahora).
La única diferencia que he podido detectar en mi prueba rápida es que
el cursor cambia de color según el resaltado de sintaxis.
No soy un usuario experto en lectores de pantalla, pero por lo que puedo decir
funciona bien con NVDA.

¿Debo enviar esto como PR?

@mjanusauskas https://github.com/mjanusauskas @zersiax
https://github.com/zersiax ¿Tiene algún consejo sobre las cosas que debería
¿prueba? ¿Estaría dispuesto a ayudar con el control de calidad?

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-275097352 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/APDp4oqMSgwyJUBVxfaYDkwWaP23NDqMks5rV0JzgaJpZM4LdzaT .

+1. Por el momento, sería útil poner una instrucción oculta que solo los lectores de pantalla puedan leer que indique cómo lidiar con este problema (copiar a otro editor, editar allí, copiar de nuevo).

¿Cuánto tiempo esperamos que lleve esto? Puede agregar una clase solo .sr a una
span que contiene ese texto, pero si lo dejamos allí durante demasiado tiempo
alguien en algún lugar se va a olvidar y será simplemente sentarse
allí porque ustedes en realidad no están viendo ese mensaje :)

Recientemente encontré este mismo problema tanto en CodePen.com como en EdX.org

EdX parece tener una solución accesible y estoy incluyendo
sus comentarios aquí:

Usamos un editor de código fuente abierto llamado CodeMirror
(https://codemirror.net/). Tuvimos que hacerle algunas modificaciones para
Hágalo funcionar dentro de la plataforma edX. Algunas de esas modificaciones incluyeron
algunas mejoras de accesibilidad para que el usuario no tenga las mismas
experiencia en otros sitios que utilizan CodeMirror. Porque teníamos que
personalizarlo para edX, no pudimos impulsar nuestros cambios en sentido ascendente.
Sin embargo, CodeMirror está trabajando activamente para solucionar estos problemas, según
a su rastreador de problemas del repositorio de github. Otro cambio personalizado que hicimos
a nuestra bifurcación de CodeMirror es la inclusión de lector de pantalla y teclado
instrucciones específicas del usuario que preceden al editor en el orden TAB. los
el usuario debe saber que puede presionar la tecla ESC dos veces y luego TAB
para mover el foco más allá del editor. Esto es necesario porque en un código
editor, es muy común que un usuario desee insertar una secuencia TAB,
y NO mover el foco del teclado actual, que es lo que hace la tecla TAB
por defecto.

El 31/1/2017 4:01 p.m., Florian Beijers escribió:

¿Cuánto tiempo esperamos que lleve esto? Puede agregar una clase solo .sr a una
span que contiene ese texto, pero si lo dejamos allí durante demasiado tiempo
alguien en algún lugar se va a olvidar y será simplemente sentarse
allí porque ustedes en realidad no están viendo ese mensaje :)

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-276506570 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/APDp4h-s2_aSFUDNSIRXnc8v7bmlNqhnks5rX69UgaJpZM4LdzaT .

Aquí hay otro ejemplo de una solución funcional a este problema crítico:

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

El 31/1/2017 4:01 p.m., Florian Beijers escribió:

¿Cuánto tiempo esperamos que lleve esto? Puede agregar una clase solo .sr a una
span que contiene ese texto, pero si lo dejamos allí durante demasiado tiempo
alguien en algún lugar se va a olvidar y será simplemente sentarse
allí porque ustedes en realidad no están viendo ese mensaje :)

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-276506570 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/APDp4h-s2_aSFUDNSIRXnc8v7bmlNqhnks5rX69UgaJpZM4LdzaT .

Hola

_Enviado desde mi Samsung SM-A520F usando FastHub _

_Enviado desde mi Samsung SM-A520F usando FastHub _

Hola,
Creo que puedo seguir estas instrucciones ahora que tengo el sitio configurado localmente. Estoy bastante seguro de que necesito seguir la parte que dice cómo sincronizar este repositorio con el mío. ¿Es esto correcto? Y si hago algo mal, no estoy seguro de cómo revertirlo. Un poco ansioso. :)

Acabo de ver que este es el problema principal real. Como tengo cuatro lectores de pantalla, suponiendo que pueda seguir las instrucciones para instalarlo en mi máquina, estaré feliz de probarlo.

Para reducir la curva de aprendizaje si está interesado en obtener un lector de pantalla con el que jugar, consulte a continuación. Y esto no pretende ser ofensivo de ninguna manera, pero alguien con sitio no va a usar un lector de pantalla rápidamente en el primer intento, o incluso mucho después de eso, porque los conceptos son muy extraños para usted. Estaría más que feliz de probar cualquier problema de accesibilidad que involucre cualquier cosa que no sea el color. solo mencióname o envíame un correo electrónico Si veo el mensaje, haré tiempo.

Para el contraste de color, busque una herramienta llamada Analizador de contraste de color y visite http://www.webaim.org para ver artículos sobre cómo usarla.

En PC, la mejor combinación de lector de pantalla y navegador será NVDA y Firefox, la última versión estable. Esto se debe a que NVDA es un lector de pantalla que depende más de la API de accesibilidad, y Firefox es el navegador de PC que expone la implementación más pura de la API de accesibilidad. Eso es lo corto de esa explicación.

Consulta http://www.nvda-project.org para descargar y configurar NVDA.

Una vez que lo haya configurado, para un uso más fácil, vaya al cuadro de diálogo Teclado y configure el diseño de la computadora portátil, luego vaya al cuadro de diálogo del modo Examinar y desactive la casilla de verificación "Usar diseño de pantalla".

Una vez que te hayas ocupado de todo eso, ya no necesitas escuchar a NVDA hablar para hacer pruebas con él como persona vidente. Inícielo, abra NVDA, elija Herramientas, luego Visor de voz. Estacione esa ventana para que pueda ver el texto en ella y el contenido en su navegador. Cambie el tamaño de la ventana como desee y luego, cuando vaya a la web, utilice principalmente las teclas de flecha hacia arriba y hacia abajo para leer línea por línea como si estuviera navegando por un documento del Bloc de notas. Mire la ventana del visor de voz con mucho cuidado y verá que el texto se actualiza allí. El texto del visor de voz coincide con lo que diría NVDA, si estuviera hablando.

Todo este conocimiento seguirá siendo interesante, pero no útil para usted, porque honestamente, todavía no sabe lo que debería suceder, por lo que aún estaría feliz de probar cualquier corrección de accesibilidad que conozca aquí.

Por supuesto, esto es por razones egoístas, porque quiero ser la primera persona ciega en pasar por FCC, luego quiero usar ese conocimiento para ayudar con la accesibilidad a otros deelopers ciegos, y ver a más de ellos convertirse en desarrolladores web. y ayudar a personas con todo tipo de discapacidades. Y quién sabe, puede que incluso consiga un mejor trabajo o gane dinero fuera de mi trabajo diario.

@jhomme Gracias por los detalles sobre los lectores de pantalla que usa.

Cuando uso Fangs en FireFox y visito esta URL: https://www.freecodecamp.org/challenges/inform-with-the-paragraph-element

la salida del lector de pantalla es:

La página tiene un marco, cuatro encabezados y veinticinco enlacesInformar con la barra vertical de elemento de párrafo gratisCodeCamp dash Internet ExplorerEnlaceGraphicleaprender a codificar javascript gratisCodeCamp logoLista de siete elementosbulletLink MapbulletbulletLink ForumbulletLink ContributebulletLink AboutbulletLink DonatebulletElementos de entrada de lista con el nivel de encabezado elemento preferido para texto de párrafo de tamaño de guión normal en sitios web. P es la abreviatura de cita de párrafo. Puede crear un elemento p como este dos puntos menos p mayor ¡Soy una etiqueta ap! menos barra inclinada p mayor Crea un elemento p debajo de tu elemento htwo y dale la cita de texto Hola cita de párrafo. Ejecutar pruebas left paren ctrl plus enter right paren Restablecer su códigoEnlace Obtener una pista Solicitar ayuda en el foroEnlace Iniciar sesión para guardar su progreso Crear elemento ap Su elemento p debe tener la cita de texto Hello Paragraph quote. Asegúrese de que su elemento p tenga una etiqueta de cierre. EditarEditar cuatro uno dos menos perfeccionar mayor Hola mundo menos barra pulir mayor tres menos hdos mayor CatPhotoApp menos barra htwo mayor cuatro Nivel de encabezado uno Hola mundo Nivel de encabezado dos CatPhotoAppLinkLinkLink

Si entiendo esto correctamente, este es el contenido del editor de código tal como lo representa el lector de pantalla:

uno dos menos perfeccionar mayor Hola mundo menos barra pulir mayor tres menos h dos mayor CatPhotoApp menos barra htwo mayor cuatro

Así que esto no parece ser un problema para el lector de pantalla Fangs. ¿Está experimentando esto con los cuatro lectores de pantalla o solo con algunos de ellos?

Por cierto, aplaudo su ambición de convertirse en la primera persona ciega en completar el FreeCodeCamp. Haremos lo que podamos para ayudarlo a hacer realidad ese objetivo.

hola quincy,

Estoy experimentando esto con JAWS y NVDA en PC, voz en off en Mac. No estoy experimentando esto con VoiceOver en IOS. No entiendo por qué. Hasta ahora no he probado ningún otro lector de pantalla. Podría probar Narrator y TalkbBack.

El 23 de agosto de 2017, a las 12:01 a. M., Quincy Larson [email protected] escribió:

@jhomme Gracias por los detalles sobre los lectores de pantalla que usa.

Cuando uso Fangs en FireFox y visito esta URL: https://www.freecodecamp.org/challenges/inform-with-the-paragraph-element

la salida del lector de pantalla es:

La página tiene un marco, cuatro encabezados y veinticinco enlacesInformar con la barra vertical de elemento de párrafo gratisCodeCamp dash Internet ExplorerEnlaceGraphicleaprender a codificar javascript gratisCodeCamp logoLista de siete elementosbulletLink MapbulletbulletLink ForumbulletLink ContributebulletLink AboutbulletLink DonatebulletElementos de entrada de lista con el nivel de encabezado elemento preferido para texto de párrafo de tamaño de guión normal en sitios web. P es la abreviatura de cita de párrafo. Puede crear un elemento p como este dos puntos menos p mayor ¡Soy una etiqueta ap! menos barra inclinada p mayor Crea un elemento p debajo de tu elemento htwo y dale la cita de texto Hola cita de párrafo. Ejecutar pruebas left paren ctrl plus enter right paren Restablecer su códigoEnlace Obtener una pista Solicitar ayuda en el foroEnlace Iniciar sesión para guardar su progreso Crear elemento ap Su elemento p debe tener la cita de texto Hello Paragraph quote. Asegúrese de que su elemento p tenga una etiqueta de cierre. EditarEditar cuatro uno dos menos perfeccionar mayor Hola mundo menos barra pulir mayor tres menos hdos mayor CatPhotoApp menos barra htwo mayor cuatro Nivel de encabezado uno Hola mundo Nivel de encabezado dos CatPhotoAppLinkLinkLink

Si entiendo esto correctamente, este es el contenido del editor de código tal como lo representa el lector de pantalla:

uno dos menos perfeccionar mayor Hola mundo menos barra pulir mayor tres menos h dos mayor CatPhotoApp menos barra htwo mayor cuatro

Así que esto no parece ser un problema para el lector de pantalla Fangs. ¿Está experimentando esto con los cuatro lectores de pantalla o solo con algunos de ellos?

Por cierto, aplaudo su ambición de convertirse en la primera persona ciega en completar el FreeCodeCamp. Haremos lo que podamos para ayudarlo a hacer realidad ese objetivo.

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub o silencia el hilo.

@jhomme Por alguna razón, no puedo encontrar el comentario donde explicas qué es lo que estás encontrando. ¿Cuál es el problema oficial?

Hola Florian,
Varios lectores de pantalla no hablan cuando intentan navegar o escribir
en el editor del sitio. Simplemente dicen la palabra en blanco. Ellos hablan,
sin embargo, al seleccionar texto.

Jim

El 23 de agosto de 2017, Florian Beijers [email protected] escribió:

@jhomme Por alguna razón no puedo encontrar el comentario donde explicas qué
es lo que te estás encontrando. ¿Cuál es el problema oficial?

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente o véalo en GitHub:
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment -324309958

-

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

Ahh sí, eso parece ser un problema. Como puede ver en este hilo, tiene que ver con CodeMirror que no es accesible. La forma más fácil de evitarlo por ahora es copiar y pegar el código en un editor como NotePad ++ o EdSharp si debe: P, luego haga sus ediciones, luego péguelo nuevamente en el editor fcc. Tedioso, pero funciona, supongo :)

Acabo de encontrar un editor de código HTML de código abierto que es totalmente accesible. ¿Podría reemplazarse el actual por este? https://pode.herokuapp.com/ Para los desafíos de CodePen, dado que CodePen no es accesible, ¿podría haber instrucciones alternativas para que los usuarios de tecnología de asistencia usen este sitio web en su lugar?

Hola,
Consulte la publicación a continuación y a la que conduce. CodePen es factible y está mejorando. Con comentarios constructivos, serán mejores.

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

El 27 de diciembre de 2017, a las 5:17 p.m., inscriptioelectronicaaustralia [email protected] escribió:

Acabo de encontrar un editor de código HTML de código abierto que es totalmente accesible. ¿Podría reemplazarse el actual por este? https://pode.herokuapp.com/ Para los desafíos de CodePen, dado que CodePen no es accesible, ¿podría haber instrucciones alternativas para que los usuarios de tecnología de asistencia usen este sitio web en su lugar?

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub o silencia el hilo.

@zersiax Gracias por intervenir. Estoy aliviado de escuchar que esto es solo un problema con la accesibilidad de CodeMirror, pero eso significa que tendremos que encontrar una manera de parchear eso.

@inscriptioelectronicaaustralia Pronto apoyaremos la construcción de proyectos directamente en freeCodeCamp, por lo que la interfaz relativamente inaccesible de CodePen no será un gran problema. Solo tenemos que solucionar los problemas con CodeMirror, que es una biblioteca de código abierto a la que podemos contribuir potencialmente.

Quincy, es bueno que los proyectos pronto se puedan construir en Free Code Camp.

Acabo de ver los subprocesos de Code Mirror GitHub relacionados con esto, y piensan que es mucho trabajo hacer que esto funcione con lectores de pantalla, por lo que si las personas que contribuyen a este hilo o ellos pueden resolver el problema conducirá a un situación de beneficio mutuo no solo para nosotros, sino también para los otros sitios web que utilizan Code Mirror.

Mirando la situación hipotéticamente, ¿faltan muchas características de la herramienta Pode que mencioné anteriormente que afectarían a Free Code Camp si se implementara como reemplazo de Code Mirror?

Hola,
Expresando mi sincero agradecimiento por las personas que están investigando esto. Me estoy moviendo hacia la finalización de JavaScript en este momento, y no puedo esperar para poder escribir código real que ayude a las personas, especialmente FreeCodeCamp.

Jim

De: inscriptioelectronicaaustralia [mailto: [email protected]]
Enviado: jueves 28 de diciembre de 2017 2:08 AM
Para: freeCodeCamp / freeCodeCamp [email protected]
Cc: Jim Homme [email protected] ; Mencione menció[email protected]
Asunto: Re: [freeCodeCamp / freeCodeCamp] Los lectores de pantalla no pueden revisar el contenido del editor (# 12431)

Quincy, es bueno que los proyectos pronto se puedan construir en Free Code Camp.

Acabo de ver los subprocesos de Code Mirror GitHub relacionados con esto, y piensan que es mucho trabajo hacer que esto funcione con lectores de pantalla, por lo que si las personas que contribuyen a este hilo o ellos pueden resolver el problema conducirá a un situación de beneficio mutuo no solo para nosotros, sino también para los otros sitios web que utilizan Code Mirror.

Mirando la situación hipotéticamente, ¿faltan muchas características de la herramienta Pode que mencioné anteriormente que afectarían a Free Code Camp si se implementara como reemplazo de Code Mirror?

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-354240665 , o silencie el hilo https://github.com/notifications/unsubscribe-auth/AdDz24NBYQr6hKSp_HsEnOryzgzpIkA524 .

@inscriptioelectronicaaustralia CodeMirror es un proyecto ampliamente utilizado con toneladas de características que usamos. Soy escéptico de que Pode pueda hacer todo lo que hace CodeMirror. Creo que la mejor opción es que parcheemos CodeMirror.

Aunque estoy de acuerdo en que parchear CodeMirror es la forma más, llamémosla efectiva, de resolver el problema, tenemos que ser algo realistas.
Este problema ha existido durante la totalidad de este año, es un bar de un año desde hace algunas semanas, y he estado lloriqueando y gruñendo sobre este problema durante al menos dos, tal vez incluso tres años. Y es un problema de hecho; Cada vez que decido darle una oportunidad a FCC de nuevo, me desanima la pura molestia de tener que solucionar estos problemas. La facilidad, el bajo umbral de entrada y la simplicidad de codificar y ver la actualización de la vista previa en vivo en el navegador a medida que codifica simplemente no se aplica a las personas que usan lectores de pantalla en la actualidad, que es mucho de lo que hace que freecodecamp sea efectivo y, me atrevo a decir, encantador.
CodeMirror se ha disparado en el pie al centrarse principalmente en renderizar el código de forma gráfica de forma eficiente, abandonando casi por completo la operación DOM estándar de antaño. Si miras a tu alrededor, incluso WordPress está sufriendo este problema y todavía no han encontrado una forma adecuada de solucionarlo; de hecho, les ha impedido implementar codeMirror como el editor de WordPress predeterminado de WP y, si ese editor se implementa como predeterminado, se deberá implementar una opción de exclusión para los administradores de WordPress con discapacidad visual para no romper por completo la experiencia de administración para esas personas. No es probable que CodeMirror se solucione pronto.
Mirando rápidamente a Pode, parece ser principalmente un editor para HTML y desafortunadamente no se acerca a la funcionalidad de CodeMirror, así que lamentablemente no creo que sea factible.
No hay una solución simple para este problema, y ​​la aplicación de parches es aún menos buena idea al considerar este problema: https://github.com/codemirror/CodeMirror/issues/4604
La única medida provisional en la que puedo pensar es tener alguna forma de representar el contenido de CM en un área de texto normal y reflejar las ediciones realizadas en ese área de texto en CM, tal vez cuando se detecta una tecla de tabulación o cuando ctrl + enter preconfigurado para ejecutar código. Hasta que CodeMirror no se solucione (lo cual es incierto al considerar el problema mencionado anteriormente, pero es poco probable dado el historial) o se descarte para otro editor con características similares, no creo que se pueda hacer mucho más con poca antelación.

Quincy, entiendo que CodeMirror es claramente la solución superior (creo que Pode se hizo para ser extremadamente simple, ya que estaba destinado solo para principiantes), y sería ideal hacerlo accesible si eso es posible. La razón por la que pregunté qué características carecen de Pode es que, una vez que los lectores de pantalla pueden leer el texto en los campos de edición de CodeMirror, si CodeMirror usa cualquier otra característica visual para ayudar en la codificación, estas también deberían eventualmente ser accesibles si es posible.
Estaba pensando en otras formas de abordar este problema, y ​​pensé que alguien podría crear algunos scripts para el lector de pantalla JAWS para Windows y / o, si es posible, un complemento para el lector de pantalla NVDA (VoiceOver para macOS no permite scripts Creo), que cuando el usuario ingresó un campo de texto CodeMirror, el texto que ya estaba allí se copiaría en un búfer de texto JAWS o NVDA, que luego podría editarse y con una pulsación de tecla se enviaría de vuelta al editor. Idealmente, este campo de texto "especial" daría acceso a cualquier otra característica importante que ofrece CodeMirror. JAWS usa un lenguaje de scripting patentado que tiene la capacidad de crear scripts específicos de dominio, y NVDA usa Python para hacer complementos, pero no estoy seguro de si se pueden hacer los específicos del dominio para ese lector de pantalla.

@inscriptioelectronicaaustralia @zersiax @jhomme Al leer https://github.com/codemirror/CodeMirror/issues/4604#issuecomment -349920743, parece que @marijnh está planeando cambiar a contenido editable, lo que debería hacer que CodeMirror sea mucho más útil. Comenté sobre el tema preguntando si hay algo que podamos hacer para ayudar.

En el peor de los casos, podríamos construir un "modo de accesibilidad" que permita a los campistas cambiar de CodeMirror para Pode en la configuración, aunque se pensó que sería una cantidad indeterminadamente grande de trabajo.

Esperemos y veamos qué tiene que decir @marijnh .

Leí la respuesta de Marijnh y parece que pasará un tiempo hasta que tengamos accesibilidad. Una cosa que también se debe tener en cuenta es que, lamentablemente, incluso cuando la gente dice "unos meses", rara vez es el caso de la accesibilidad, ya que con demasiada frecuencia recibe una prioridad muy baja. No digo que esto sea lo que piensan los desarrolladores de CodeMirror, pero es una tendencia mundial muy inquietante. He visto ejemplos en los que la gente dice "unos meses", y se convierte en unos meses más ... luego en unos pocos más ... y creo que te haces una idea.
Como todavía es posible usar el editor de código tal como está, creo que esperar unos meses es probablemente el mejor enfoque, pero si llegamos a junio y nada ha cambiado, quizás valga la pena considerar otra solución. ¿Qué piensan los demás?

He visto ejemplos en los que la gente dice "unos meses", y se convierte en unos meses más ... luego en unos pocos más ...

Nadie prometió nada en unos meses, excepto que el trabajo _comenzaría_ en un nuevo enfoque, que definitivamente llevará un tiempo construir.

Hola @marijnh

Gracias por considerar la re-archi de CodeMirror y entendemos sinceramente los esfuerzos con todo siendo un esfuerzo de código abierto.

Siendo nosotros mismos una organización sin fines de lucro, háganos saber, si necesita ayuda de codificación (pro-bono) de nuestros desarrolladores de la comunidad en este esfuerzo, estamos para ayudarlo en este esfuerzo, de cualquier manera que podamos.

El conocimiento probado en batalla del proyecto CM (y sus colaboradores) es invaluable y, por lo tanto, estamos dedicados a ayudar en este esfuerzo, en caso de que nos guíe con detalles sobre el problema registrado en el repositorio de CodeMirror.

Hola @inscriptioelectronicaaustralia

... pero si llegamos a junio y nada ha cambiado, quizás valga la pena considerar otra solución.

Entendemos sinceramente y compartimos la frustración, y estamos preparados para dedicar esfuerzos en cualquier solución posible, pero en mi humilde opinión, ayudar a CM a mejorar en todo momento es lo bueno que podemos hacer.

Creo que es un esfuerzo bien invertido, ya que no solo estaremos ayudando a la comunidad de freeCodeCamp, sino también en cualquier lugar donde se utilice CM para el mayor bien de todos los demás.

Dicho eso

El análisis de

Mirando rápidamente a Pode, parece ser principalmente un editor para HTML y desafortunadamente no se acerca a la funcionalidad de CodeMirror, así que lamentablemente no creo que sea factible.

La única medida provisional en la que puedo pensar es tener alguna forma de representar el contenido de CM en un área de texto normal y reflejar las ediciones realizadas en ese área de texto en CM, tal vez cuando se detecta una tecla de tabulación o cuando ctrl + enter preconfigurado para ejecutar código. Hasta que CodeMirror no se solucione (lo cual es incierto al considerar el problema mencionado anteriormente, pero es poco probable dado el historial) o se descarte para otro editor con características similares, no creo que se pueda hacer mucho más con poca antelación.

Deberíamos comenzar a considerar la implementación de una solución provisional, mientras verificamos con el equipo de CM cómo podemos ser de ayuda concreta para ellos.

si necesita ayuda con la codificación

El tipo de contribución más útil sería que los usuarios de lectores de pantalla y / o expertos en accesibilidad de su comunidad ayuden a probar nuestro nuevo prototipo, una vez que lo tengamos, para que los problemas se puedan detectar y abordar desde el principio. Haremos un anuncio cuando tengamos algo que mostrar; si quieres asegurarte de que estás notificado, puedes enviarme un correo electrónico con los datos de contacto.

@svinkle Agradecería su opinión sobre este tema.

¿Se sugiere la solución provisional algo que podría funcionar hasta que el problema content-editable se resuelva en sentido ascendente?

La única medida provisional en la que puedo pensar es tener alguna forma de representar el contenido de CM en un área de texto normal y reflejar las ediciones realizadas en ese área de texto en CM, tal vez cuando se detecta una tecla de tabulación o cuando ctrl + enter preconfigurado para ejecutar código. Hasta que CodeMirror no se solucione (lo cual es incierto al considerar el problema mencionado anteriormente, pero es poco probable dado el historial) o se descarte para otro editor con características similares, no creo que se pueda hacer mucho más con poca antelación.

Si entiendo el enfoque correctamente, el contenido del editor de CM se cargaría en un textarea y el textarea se usaría para editar el contenido. Luego, al actualizar / guardar, el contenido de textarea se reflejará en el editor de CM.

¿El editor de CM estaría oculto a la vista? Supongo que solo se pueden ver los textarea , de lo contrario tener dos áreas de edición sería confuso.

Hola @QuincyLarson y todos los involucrados,

Muchas gracias por los comentarios y consideraciones para encontrar una solución.

Hay una consideración más que hemos alcanzado y que me di cuenta con algunas discusiones con @BerkeleyTrue sobre un tema separado en CM , antes de continuar con cualquier parche de mono con otra área de texto. 😓

En beta (nuestro nuevo front-end de reacción) no dependemos directamente de CodeMirror, sino de un componente de reacción react-codemirror que es un contenedor ligero sobre CM. Esto es así, porque lo necesitamos para que funcione con nuestra plataforma beta.

Es posible que tengamos que actualizar eso a un componente diferente en el futuro, pero eso dijo que ninguno de esos componentes en discusión tiene el mismo soporte que en el CM principal en el que envuelve su funcionalidad.

Así que un parche de mono puede no ser trivial.

@raisedadead Gracias por señalar esto. Esperaremos a que CodeMirror realice su actualización de accesibilidad, luego evaluaremos el proceso de parcheo de monos desde allí.

Nos complace anunciar que hemos cambiado al editor de Mónaco en nuestra plataforma de aprendizaje. Tiene todo incorporado.

Nos encanta CodeMirror y gracias a @marijnh por el increíble trabajo que han realizado usted y el equipo. Ha sido el editor de facto durante todos estos años. Todavía nos encantaría utilizarlo en proyectos futuros, porque es muy ligero y sencillo.

Gracias @zersiax , @mjanusauskas , @inscriptioelectronicaaustralia y a todos por participar y hacer que la plataforma sea más accesible.