\ cc @ FreeCodeCamp / moderadores

Sim, muito obrigado por trazer isso à tona, estamos muito abertos à ideia de tornar o site mais acessível e apoiar leitores de tela é uma parte importante disso.

Abertura à comunidade para sugestões de implementações.

Comentário do desenvolvedor líder do leitor de tela NVDA:

Em 08/01/2017 17:11, mrugesh mohapatra escreveu:
>

Sim, muito obrigado por trazer isso à tona, estamos muito abertos a ideias para
tornar o site mais acessível e oferecer suporte a leitores de tela é um
parte importante disso.

Abertura à comunidade para sugestões de implementações.

-
Você está recebendo isto porque é o autor do tópico.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271187374 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/APDp4ufBLExQL0QJK2q17hvMavLGwSBwks5rQW0kgaJpZM4LdzaT .

Comentário do desenvolvedor líder do leitor de tela NVDA:

Isso se deve a problemas de acessibilidade no editor de código que está sendo usado.
Esses editores de código optam por desenhar seu conteúdo de uma forma não padronizada,
em vez de usar HTML contentEditable (que é a maneira padrão de fazer
conteúdo editável). Infelizmente, não há nada que possamos fazer para apoiar
esta; o problema precisa ser corrigido no editor.
-

Em 08/01/2017 17:11, mrugesh mohapatra escreveu:
>

Sim, muito obrigado por trazer isso à tona, estamos muito abertos a ideias para
tornar o site mais acessível e oferecer suporte a leitores de tela é um
parte importante disso.

Abertura à comunidade para sugestões de implementações.

-
Você está recebendo isto porque é o autor do tópico.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271187374 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/APDp4ufBLExQL0QJK2q17hvMavLGwSBwks5rQW0kgaJpZM4LdzaT .

@mjanusauskas Ei Mathew! Se importaria de nos indicar o repo se for um código aberto para gerar um relatório de problema?

Não tenho certeza de qual editor inacessível está sendo usado.

Em 09/01/2017, às 12h49, mrugesh mohapatra escreveu:
>

@mjanusauskas https://github.com/mjanusauskas Ei Mathew! Mente
nos apontando para o repo se for um código aberto para gerar um relatório de problema?

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271220175 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/APDp4iUWcvbQSZedazsn7H3_sOnWCuB7ks5rQdh_gaJpZM4LdzaT .

Bem, usamos https://github.com/codemirror/CodeMirror para o editor, mas gostaríamos de saber se você também poderia nos ajudar com o repo para NVDA, o leitor de tela de código aberto para verificar com eles também.

@raisedadead provavelmente é para o leitor de código aberto https://github.com/nvaccess/nvda

Ah, obrigado @erictleung!

Ok, não vejo nenhum problema com o repo relacionado especificamente ao CodeMirror. Acho que devemos ir por aí, abrindo questões nos dois repositórios, buscando ajuda nisso?

/ cc @ FreeCodeCamp / moderators

O comentário anterior que compartilhei do desenvolvedor líder do NVDA veio do
problema que abri em seu repo. A posição deles é que não há nada
que pode ser feito no leitor de tela devido à abordagem não padrão
em uso e que a questão da acessibilidade deve ser abordada no editor.

Em 09/01/2017, às 12h18, mrugesh mohapatra escreveu:
>

Ok, não vejo nenhum problema com o repo relacionado ao CodeMirror
especificamente. Acho que devemos prosseguir, abrindo questões em ambos
repos, buscando ajuda nisso?

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

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271361131 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/APDp4oyVgtLfIsZKxB51xxN08OxRhHhXks5rQnoFgaJpZM4LdzaT .

Você pode nos ajudar com o problema nº, link, etc., adoraríamos entender o que precisa ser implementado? Sem uma ideia técnica clara do que está errado, no editor, seria difícil convencer os mantenedores do editor para uma correção.

Desculpas, mas sem mais informações, é difícil continuar com isso, visto que adoraríamos oferecer o máximo de acessibilidade possível.

O problema que relatei aos desenvolvedores do leitor de tela NVDA é:

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

Obrigado por tudo o que você é capaz de fazer. Eu adoraria ser capaz de
participar do Free Code Camp assim que o problema de acessibilidade for
resolvido.

Em 09/01/2017, 12:41, mrugesh mohapatra escreveu:
>

Você pode nos ajudar com o problema não, link, etc., adoraríamos entender
o que precisa ser implementado? Sem uma ideia técnica clara do que é
errado, no editor, seria difícil convencer o
mantenedores do editor para uma correção.

Desculpe, mas sem mais informações, é difícil continuar com isso,
visto que adoraríamos oferecer o máximo de acessibilidade possível.

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271367297 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/APDp4rtyeVvew2edXgWaxr1eICnDpdKxks5rQn9wgaJpZM4LdzaT .

Algumas pesquisas no Google me levaram a isso: http://bgrins.github.io/codemirror-accessible/
Pode valer a pena dar uma olhada

Não tenho certeza de qual editor está sendo usado ou se é útil, mas o
experiência usando os cursos html e css e testes de código em
www.w3schools.com era bastante acessível como um usuário de leitor de tela.

Em 09/01/2017, às 12h55, Dylan escreveu:
>

Algumas pesquisas no Google me levaram a isto:
http://bgrins.github.io/codemirror-accessible/
Pode valer a pena dar uma olhada

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271371504 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/APDp4p-8xX-xTVF0bqGhOkpAinPMDwNaks5rQoKagaJpZM4LdzaT .

@mjanusauskas Muito obrigado, Mathew.

Estamos investigando isso com prioridade e o melhor de nossas habilidades ... podemos nos atrasar um pouco, mas tenha certeza de que tentaremos encontrar alguma correção assim que pudermos ... entretanto, convidamos você a verificar o wiki artigos em nosso fórum em https://forum.freecodecamp.com e a série de vídeos para continuar com o aprendizado.

/ cc @QuincyLarson

Acabei de experimentar o demo CodeMirror Accessible vinculado a @dhcodes . Supostamente, é um desempenho inferior, embora eu não tenha percebido nenhuma lentidão ao trabalhar com o arquivo JavaScript de ~ 10k linhas que eles carregaram lá. Os maiores projetos que posso imaginar que tenhamos em uma única área de texto do CodeMirror teriam talvez 1.000 linhas, então não acho que a lentidão seja tão ruim.

Dito isso, estou em um desktop.

Talvez devêssemos ver se podemos ter um botão nas configurações que alterna o uso de CodeMirror Accessible?

CC @BerkeleyTrue @zersiax

Um bom exemplo de como esse tipo de coisa pode ser feito completamente
acessível pode ser encontrado em
https://teachaccess.github.io/tutorial/#/3

Na segunda-feira, 9 de janeiro de 2017 às 13h58, Quincy Larson [email protected]
escrevi:

Acabei de experimentar a demonstração CodeMirror Accessible que @dhcodes
https://github.com/dhcodes vinculados a. Supostamente é
desempenho inferior, embora eu não tenha percebido nenhuma lentidão ao trabalhar com
o arquivo JavaScript de ~ 10k linhas que eles carregaram lá. O maior
projetos que eu posso imaginar que tivéssemos em uma única área de texto CodeMirror seria
talvez 1.000 linhas, então não acho que a desaceleração seja tão ruim.

Dito isso, estou em um desktop.

Talvez devêssemos ver se podemos ter um botão nas configurações que
alterna o uso de CodeMirror Accessible?

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

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271390191 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/APDp4nMFLf9Ou0z2oNBFLPZdcxZwxMoOks5rQpFPgaJpZM4LdzaT
.

Eu gosto desse recurso, ele mostra um exemplo de trabalho ... ele usa contentEditable nos bastidores?

Suspeito que sim, mas não tenho certeza.
Atualmente, o trabalho bastante tedioso que estou usando para cada desafio é
para selecionar todo o conteúdo no editor CodeMirror> colar no Bloco de Notas ++>
faça as edições necessárias> Selecione tudo e copie> Colar no editor CodeMirror>
enviar.
Obviamente, uma experiência muito pobre e ineficiente para usuários de leitores de tela.

No domingo, 22 de janeiro de 2017 às 16h19, Florian Beijers [email protected]
escrevi:

Eu gosto desse recurso, ele mostra um exemplo de trabalho ... ele usa
contentEditable sob o capô?

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-274364439 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/APDp4hHGQh0qVNCHAFDmlUzwq8u8DPIPks5rU9X5gaJpZM4LdzaT
.

Depois de usar a solução tediosa mencionada para completar o HTML, CSS
e desafios de Bootstrap, fiquei desapontado ao descobrir que o próximo
desafio de construir uma página de tributo básica usa CodePen.

CodePen parece ter grandes problemas de acessibilidade semelhantes com seu
editor. Muito frustrante para um usuário de leitor de tela.

Em 22/01/2017 às 16h19, Florian Beijers escreveu:
>

Eu gosto desse recurso, ele mostra um exemplo de trabalho ... ele usa
contentEditable sob o capô?

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-274364439 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/APDp4hHGQh0qVNCHAFDmlUzwq8u8DPIPks5rU9X5gaJpZM4LdzaT .

@mjanusauskas , sugerimos Codepen para o editor de texto integrado e renderização rápida. No entanto, não acho que o limitemos apenas ao Codepen. Para terminar seu projeto, tudo que você precisa enviar é uma URL para seu projeto instalado e funcionando. Portanto, sinta-se à vontade para usar qualquer serviço de hospedagem para renderizar seus projetos. Uma alternativa é usar as páginas do GitHub https://pages.github.com/.

Observação para colaboradores que desejam ajudar, aqui está um recurso que pode ajudar a aliviar esse problema http://bgrins.github.io/codemirror-accessible/

Eu examinei isso um pouco. Parece que o TeachAccess está usando o componente editor do exerslide . Pelo que posso dizer, o que está fazendo é copiar todo o conteúdo para a textarea.

Outra coisa que encontrei enquanto trabalhava no # 12828 é a opção inputStyle do CodeMirror . Isso nos permite mudar o editor para usar contentEditable.
Achei que o suporte do navegador para contentEditable não deveria ser um problema, mas encontrei este comentário no discurso deles , que afirma que é bugado em navegadores antigos. Eles afirmam que esse é o padrão no celular, no entanto, e está funcionando bem para nós lá. Acho que devemos usar essa opção (eles já a têm há dois anos).
A única diferença que fui capaz de detectar em meu teste rápido é que o cursor muda de cor com base no realce de sintaxe.
Não sou um usuário especialista em leitores de tela, mas pelo que posso dizer, isso funciona bem com o NVDA.

Devo enviar isso como um PR?

@mjanusauskas @zersiax Você tem alguma dica sobre coisas que devo testar? Você estaria disposto a ajudar com o controle de qualidade?

Se alguém precisar de outro exemplo de como isso deve funcionar, acabei de me deparar com o IDE Orion online que faz muito do que eu gostaria de um sistema como este. Eu duvido que seja código aberto

@QuincyLarson sim, envie-me um link para uma caixa de areia onde você está executando? Vou dar um giro.

@zersiax Hi! Não tenho certeza de como implantar uma versão sandbox do freeCodeCamp. Talvez Quincy consiga um para você, ou eu ficaria feliz em orientá-lo na instalação local.

Qualquer um funciona :) Eu tenho um ambiente de nó em execução, eu precisaria
tire a poeira :)

@zersiax Local é provavelmente a solução mais rápida 👍 Aqui está a versão resumida do guia de configuração (o guia completo é CONTRIBUTING.md ):

1. Certifique-se de que o Node v6 e o ​​MongoDB v3 estejam instalados
2. Clone freeCodeCamp
3. Certifique-se de que o MongoDB esteja sendo executado em tudo isso
4. Execute os seguintes comandos dentro do freeCodeCamp cl:

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

1. Sua instância local agora deve estar executando em localhost:3000
2. Para verificar minhas alterações, pare de engolir e corra:

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

1. Inicie o gulp novamente e você poderá verificar as alterações novamente em localhost: 3000

Uau, isso foi um pouco mais complicado do que eu imaginava.
Eu posso ter estragado tudo, no entanto. 😅 Sinta-se à vontade para me enviar uma mensagem em qualquer lugar se tiver problemas.

Obrigado pela informação. Vou investigar as páginas do GitHub como um
alternativa possível.

Em 24/01/2017 às 23:12, Eric Leung escreveu:
>

@mjanusauskas https://github.com/mjanusauskas sugerimos Codepen para
o editor de texto integrado e a renderização rápida. No entanto, eu não acho
nós o limitamos apenas a Codepen. Para terminar seu projeto, tudo que você precisa
submit é uma URL para o seu projeto instalado e funcionando. Então fique à vontade para usar
qualquer serviço de hospedagem para renderizar seus projetos. Uma alternativa é
use as páginas do GitHub https://pages.github.com/.

Observação para contribuidores que desejam ajudar, aqui está um recurso que pode
ajude a aliviar esse problema http://bgrins.github.io/codemirror-accessible/

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-275020850 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/APDp4lJ8-omlWG3Xbt5soRKVVFYaKYMJks5rVtm1gaJpZM4LdzaT .

Sim, ficaria feliz em ajudar com os testes e / QA.

Em 25/01/2017 6h39, Timo escreveu:
>

Eu examinei isso um pouco. Parece que o TeachAccess está usando o
componente editor do exerslide
https://github.com/facebookincubator/exerslide/blob/master/packages/exerslide/components/Editor.js .
Pelo que eu posso dizer, o que está fazendo é copiar todo o conteúdo para
a área de texto.

Outra coisa que encontrei enquanto trabalhava no # 12828
https://github.com/freeCodeCamp/freeCodeCamp/issues/12828 é
Opção inputStyle do CodeMirror
https://codemirror.net/doc/manual.html#option_inputStyle . este
nos permite mudar o editor para usar contentEditable.
Achei que o suporte do navegador para contentEditable
http://caniuse.com/#search=contentEd não deve ser um problema, mas eu
encontrei este comentário em seu discurso
https://discuss.codemirror.net/t/inputstyle-contenteditable-we-may-hope-for-browser-spell-checking/608/2 ,
que afirma que é bugado em navegadores antigos. Eles afirmam que é isso
o padrão no celular, no entanto, está funcionando bem para nós
há. Acho que devemos ficar bem usando esta opção (eles têm isso por
dois anos agora).
A única diferença que consegui detectar no meu teste rápido é que
o cursor muda de cor com base no realce de sintaxe.
Não sou um usuário especialista em leitores de tela, mas pelo que posso dizer
funciona bem com o NVDA.

Devo enviar isso como um PR?

@mjanusauskas https://github.com/mjanusauskas @zersiax
https://github.com/zersiax Você tem alguma dica sobre o que devo
teste? Você estaria disposto a ajudar com o controle de qualidade?

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-275097352 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/APDp4oqMSgwyJUBVxfaYDkwWaP23NDqMks5rV0JzgaJpZM4LdzaT .

+1. Por enquanto, ajudaria colocar uma instrução oculta que apenas os leitores de tela podem ler, informando como lidar com esse problema (copiar para outro editor, editar lá, copiar de volta).

Quanto tempo esperamos que isso leve? Você pode adicionar uma classe apenas .sr a um
intervalo que contém esse texto, mas se o deixarmos lá por muito tempo
alguém em algum lugar vai esquecer disso e será só sentar
lá porque vocês não estão realmente vendo essa mensagem :)

Recentemente, encontrei o mesmo problema em CodePen.com e EdX.org

A EdX parece ter uma solução acessível e estou incluindo
seus comentários aqui:

Usamos um editor de código aberto chamado CodeMirror
(https://codemirror.net/). Tivemos que fazer algumas modificações para
fazê-lo funcionar na plataforma edX. Algumas dessas modificações incluíram
algumas melhorias de acessibilidade para que o usuário não tenha o mesmo
experiência em outros sites que usam CodeMirror. Porque nós tivemos que
personalizá-lo para edX, não fomos capazes de enviar nossas alterações para o upstream.
No entanto, CodeMirror está trabalhando ativamente para corrigir esses problemas, de acordo
ao rastreador de problemas do repositório github. Outra mudança personalizada que fizemos
para nosso fork do CodeMirror é a inclusão de leitor de tela e teclado
instruções específicas do usuário que precedem o editor na ordem TAB. o
o usuário precisa estar ciente de que pode pressionar a tecla ESC duas vezes e, em seguida, TAB
para mover o foco além do editor. Isso é necessário porque em um código
editor, é muito comum um usuário querer inserir uma sequência TAB,
e NÃO mover o foco atual do teclado, que é o que a tecla TAB faz
por padrão.

Em 31/01/2017 às 16:01, Florian Beijers escreveu:

Quanto tempo esperamos que isso leve? Você pode adicionar uma classe apenas .sr a um
intervalo que contém esse texto, mas se o deixarmos lá por muito tempo
alguém em algum lugar vai esquecer disso e será só sentar
lá porque vocês não estão realmente vendo essa mensagem :)

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-276506570 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/APDp4h-s2_aSFUDNSIRXnc8v7bmlNqhnks5rX69UgaJpZM4LdzaT .

Aqui está outro exemplo de uma solução de trabalho para este problema crítico:

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

Em 31/01/2017 às 16:01, Florian Beijers escreveu:

Quanto tempo esperamos que isso leve? Você pode adicionar uma classe apenas .sr a um
intervalo que contém esse texto, mas se o deixarmos lá por muito tempo
alguém em algum lugar vai esquecer disso e será só sentar
lá porque vocês não estão realmente vendo essa mensagem :)

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-276506570 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/APDp4h-s2_aSFUDNSIRXnc8v7bmlNqhnks5rX69UgaJpZM4LdzaT .

Oi

_ Enviado de meu Samsung SM-A520F usando FastHub _

_ Enviado de meu Samsung SM-A520F usando FastHub _

Oi,
Acho que posso seguir essas instruções agora que tenho o site configurado localmente. Tenho certeza de que preciso seguir a parte que diz como sincronizar este repositório com o meu. Isso está correto? E se eu fizer algo errado, não tenho certeza de como retroceder. Um pouco ansioso. :)

Acabei de ver que este é o verdadeiro problema principal. Como tenho quatro leitores de tela, presumindo que posso seguir as instruções para fazer isso em minha máquina, terei o maior prazer em testá-lo.

Para diminuir a curva de aprendizado se você estiver interessado em obter um leitor de tela para brincar, veja abaixo. E isso não é ofensivo de forma alguma, mas alguém com site não vai usar um leitor de tela rapidamente na primeira tentativa, ou mesmo muito depois disso, porque os conceitos são muito estranhos para você. Eu ficaria mais do que feliz em testar quaisquer problemas de acessibilidade envolvendo qualquer outra coisa além da cor. apenas me mencione ou envie um e-mail. Se eu vir a mensagem, vou arranjar tempo.

Para o contraste de cores, procure uma ferramenta chamada Analisador de contraste de cores e consulte http://www.webaim.org para artigos sobre como usá-la.

No PC, a melhor combinação de leitor de tela e navegador será NVDA e Firefox, a última versão estável. Isso ocorre porque o NVDA é um leitor de tela que mais depende da API de acessibilidade, e o Firefox é o navegador do PC que expõe a implementação mais pura da API de acessibilidade. Esse é o resumo dessa ecxplanation.

Consulte http://www.nvda-project.org para baixar e configurar o NVDA.

Depois de configurá-lo, para um uso mais fácil, vá para a caixa de diálogo Teclado e defina o layout do laptop, vá para a caixa de diálogo Modo de navegação e desative a caixa de seleção "Usar layout da tela".

Depois de ter cuidado de tudo isso, você não precisa mais ouvir o discurso do NVDA para fazer testes com ele como uma pessoa com visão. Inicie, abra o NVDA, escolha Ferramentas e, em seguida, Visualizador de fala. Estacione essa janela para que você possa ver o texto nela e o conteúdo em seu navegador. Dimensione a janela conforme desejado e, em seguida, quando for para a web, use principalmente as teclas de seta para cima e para baixo para ler linha por linha como se estivesse navegando em um documento do Bloco de notas. Observe a janela do visualizador de fala com muito cuidado e você verá a atualização do texto lá. O texto no visualizador de fala corresponde ao que o NVDA diria, se estivesse falando.

Todo esse conhecimento ainda será interessante, mas não útil para você, porque, honestamente, você ainda não sabe o que deve acontecer, então eu ficaria feliz em testar quaisquer correções de acessibilidade que eu aprender aqui.

Claro, isso é por razões egoístas, porque eu quero ser a primeira pessoa cega a passar por todo o FCC, então eu quero usar esse conhecimento para ajudar na acessibilidade para outros deselopers cegos e ver mais deles se tornando desenvolvedores web e ajudar pessoas com todos os tipos de deficiência. E quem sabe, posso até conseguir um emprego melhor ou ganhar dinheiro fora do meu trabalho diário.

@jhomme Obrigado pelos detalhes sobre os leitores de tela que você usa.

Quando eu uso o Fangs no FireFox e visito este URL: https://www.freecodecamp.org/challenges/inform-with-the-paragraph-element

a saída do leitor de tela é:

A página tem um quadro, quatro cabeçalhos e vinte e cinco linksInformar-se com a barra vertical Elemento de parágrafo freeCodeCamp dash Internet ExplorerLinkGraphiclaprender a codificar javascript em freeCodeCamp logoLista de sete itensbulletLink MapbulletbulletLink ForumbulletLink ContributebulletLink AboutbulletLinkEmprenda a codificar javascript em freeCodeCamp logoLista de sete itensbulletLink MapbulletbulletLink ForumbulletLink ContributebulletLink AboutbulletLink Os elementos de sinalização de finalização são os quatro elementos do elemento de ParágrafoLink. elemento preferido para texto de parágrafo de tamanho normal de traço em sites. P é a abreviatura de citação de parágrafo de citação. Você pode criar um elemento ap como este dois pontos menos p maior Eu sou um tag ap! menos barra p maior Crie um elemento ap abaixo de seu elemento htwo e forneça a citação de texto Hello Paragraph quote. Execute os testes à esquerda ctrl ctrl mais insira o parente direito Redefina seu codeLink Obtenha uma dica Peça ajuda no forumLink Faça login para salvar seu progresso Crie um elemento ap. Seu elemento p deve ter a citação de texto Hello Paragraph quote. Certifique-se de que seu elemento p tenha uma tag de fechamento. EditEdit quatro um dois menos afiar maior Hello World menos barra afiar maior três menos htwo maior CatPhotoApp menos barra htwo maior quatro Heading level um Hello WorldHeading nível dois CatPhotoAppLinkLinkLink

Se estou entendendo isso corretamente, este é o conteúdo do editor de código conforme renderizado pelo leitor de tela:

um dois menos afiar maior Olá mundo menos barra afiar maior três menos htwo maior CatPhotoApp menos barra htwo maior quatro

Portanto, isso não parece ser um problema para o leitor de tela Fangs. Você está experimentando isso com todos os quatro leitores de tela ou apenas com alguns deles?

A propósito, aplaudo sua ambição de se tornar a primeira pessoa cega a percorrer todo o caminho através do freeCodeCamp! Faremos o que pudermos para ajudá-lo a tornar essa meta uma realidade.

oi Quincy,

Estou experimentando isso com JAWS e NVDA no PC, narração no Mac. Não estou tendo isso com o VoiceOver no IOS. Não entendo por quê. Até agora, não experimentei nenhum outro leitor de tela. Eu poderia tentar o Narrator e o TalkbBack.

Em 23 de agosto de 2017, às 12:01, Quincy Larson [email protected] escreveu:

@jhomme Obrigado pelos detalhes sobre os leitores de tela que você usa.

Quando eu uso o Fangs no FireFox e visito este URL: https://www.freecodecamp.org/challenges/inform-with-the-paragraph-element

a saída do leitor de tela é:

A página tem um quadro, quatro cabeçalhos e vinte e cinco linksInformar-se com a barra vertical Elemento de parágrafo freeCodeCamp dash Internet ExplorerLinkGraphiclaprender a codificar javascript em freeCodeCamp logoLista de sete itensbulletLink MapbulletbulletLink ForumbulletLink ContributebulletLink AboutbulletLinkEmprenda a codificar javascript em freeCodeCamp logoLista de sete itensbulletLink MapbulletbulletLink ForumbulletLink ContributebulletLink AboutbulletLink Os elementos de sinalização de finalização são os quatro elementos do elemento de ParágrafoLink. elemento preferido para texto de parágrafo de tamanho normal de traço em sites. P é a abreviatura de citação de parágrafo de citação. Você pode criar um elemento ap como este dois pontos menos p maior Eu sou um tag ap! menos barra p maior Crie um elemento ap abaixo de seu elemento htwo e forneça a citação de texto Hello Paragraph quote. Execute os testes à esquerda ctrl ctrl mais insira o parente direito Redefina seu codeLink Obtenha uma dica Peça ajuda no forumLink Faça login para salvar seu progresso Crie um elemento ap. Seu elemento p deve ter a citação de texto Hello Paragraph quote. Certifique-se de que seu elemento p tenha uma tag de fechamento. EditEdit quatro um dois menos afiar maior Hello World menos barra afiar maior três menos htwo maior CatPhotoApp menos barra htwo maior quatro Heading level um Hello WorldHeading nível dois CatPhotoAppLinkLinkLink

Se estou entendendo isso corretamente, este é o conteúdo do editor de código conforme renderizado pelo leitor de tela:

um dois menos afiar maior Olá mundo menos barra afiar maior três menos htwo maior CatPhotoApp menos barra htwo maior quatro

Portanto, isso não parece ser um problema para o leitor de tela Fangs. Você está experimentando isso com todos os quatro leitores de tela ou apenas com alguns deles?

A propósito, aplaudo sua ambição de se tornar a primeira pessoa cega a percorrer todo o caminho através do freeCodeCamp! Faremos o que pudermos para ajudá-lo a tornar essa meta uma realidade.

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub ou ignore a conversa.

@jhomme Por algum motivo, não consigo encontrar o comentário em que você explica o que está encontrando. O que parece ser o policial, problema?

Oi Florian,
Vários líderes de tela não falam ao tentar navegar ou digitar
no editor do site. Eles apenas dizem a palavra em branco. Eles falam,
entretanto, ao selecionar o texto.

Jim

Em 23/08/17, Florian Beijers [email protected] escreveu:

@jhomme Por algum motivo, não consigo encontrar o comentário onde você explica o que é
é que você está encontrando. O que parece ser o policial, problema?

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente ou visualize-o no 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 sim, isso parece ainda ser um problema. Como você pode ver neste tópico, isso tem a ver com o CodeMirror não estar acessível. A maneira mais fácil de contornar isso agora é copiar e colar o código em um editor como o NotePad ++ ou EdSharp se você precisar: P, fazer suas edições e colá-lo de volta no editor FCC. Tedioso, mas acho que funciona :)

Acabei de encontrar um editor de código HTML de código aberto totalmente acessível. O atual poderia ser substituído por este? https://pode.herokuapp.com/ Para os desafios do CodePen, como o CodePen não é acessível, poderia haver instruções alternativas para os usuários de tecnologia assistiva usarem este site?

Oi,
Por favor, veja a postagem abaixo e aquela para a qual ela leva. CodePen é factível e está melhorando. Com feedback construtivo, eles serão melhores.

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

Em 27 de dezembro de 2017, às 17:17, inscriptioelectronicaaustralia [email protected] escreveu:

Acabei de encontrar um editor de código HTML de código aberto totalmente acessível. O atual poderia ser substituído por este? https://pode.herokuapp.com/ Para os desafios do CodePen, como o CodePen não é acessível, poderia haver instruções alternativas para os usuários de tecnologia assistiva usarem este site?

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub ou ignore a conversa.

@zersiax Obrigado por

@inscriptioelectronicaaustralia Em breve apoiaremos a construção de projetos diretamente no freeCodeCamp, de forma que a interface relativamente inacessível do CodePen não será um grande problema. Precisamos apenas corrigir os problemas com CodeMirror, que é uma biblioteca de código aberto com a qual podemos contribuir.

Quincy, é bom que em breve os projetos possam ser construídos no Free Code Camp.

Acabei de olhar para os threads do GitHub do Code Mirror relacionados a isso, e eles acham que é muito trabalhoso fazer isso funcionar com leitores de tela, portanto, se as pessoas que contribuem com este thread ou eles podem resolver o problema, levará a um situação ganha-ganha não apenas para nós, mas também para os outros sites que usam o Code Mirror.

Olhando para a situação hipoteticamente, há muitos recursos ausentes na ferramenta Pode que mencionei acima que afetariam o Free Code Camp se fosse implementado como um substituto para o Code Mirror?

Oi,
Expressar meus pecados é um agradecimento às pessoas que estão investigando isso. Estou caminhando para realmente terminar o JavaScript agora, e mal posso esperar para ser capaz de escrever código real que ajude as pessoas, especialmente o FreeCodeCamp.

Jim

De: inscriptioelectronicaaustralia [mailto: [email protected]]
Enviado: quinta-feira, 28 de dezembro de 2017 2:08
Para: freeCodeCamp / freeCodeCamp [email protected]
Cc: Jim Homme [email protected] ; Mencione mençã[email protected]
Assunto: Re: [freeCodeCamp / freeCodeCamp] O conteúdo do editor não pode ser revisado por leitores de tela (# 12431)

Quincy, é bom que em breve os projetos possam ser construídos no Free Code Camp.

Acabei de olhar para os threads do GitHub do Code Mirror relacionados a isso, e eles acham que é muito trabalhoso fazer isso funcionar com leitores de tela, portanto, se as pessoas que contribuem com este thread ou eles podem resolver o problema, levará a um situação ganha-ganha não apenas para nós, mas também para os outros sites que usam o Code Mirror.

Olhando para a situação hipoteticamente, há muitos recursos ausentes na ferramenta Pode que mencionei acima que afetariam o Free Code Camp se fosse implementado como um substituto para o Code Mirror?

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-354240665 ou desative o tópico https://github.com/notifications/unsubscribe-auth/AdDz24NBYQr6hKSp_HsEnOryzgzIk5JdzTZTZgzIk .

@inscriptioelectronicaaustralia CodeMirror é um projeto amplamente usado com muitos recursos que usamos. Estou cético de que Pode poderia fazer tudo o que CodeMirror faz. Acho que a melhor opção é corrigirmos o CodeMirror.

Embora eu concorde que aplicar patches no CodeMirror é o mais, vamos chamá-lo de maneira eficaz de resolver o problema, temos que ser um pouco realistas.
Este problema existiu durante todo este ano, é um bar de um ano atrás há algumas semanas, e eu tenho reclamado e rosnado sobre este problema pelo menos dois, talvez até três anos agora. E é realmente um problema; Cada vez que decido dar uma chance ao FCC novamente, fico desanimada com o simples aborrecimento de ter que contornar esses problemas. A facilidade, o baixo limite de entrada e a simplicidade de codificar e ver sua atualização de visualização ao vivo no navegador enquanto você codifica simplesmente não se aplicam a pessoas que usam leitores de tela no momento, o que é muito do que torna o freecodecamp eficaz e, ouso dizer, encantador.
CodeMirror deu um tiro no próprio pé ao se concentrar principalmente em renderizar o código graficamente de uma forma performante, abandonando quase completamente a operação DOM padrão de outrora. Se você olhar em volta, até o WordPress está sofrendo desse problema e eles ainda não encontraram uma maneira adequada de contornar isso; na verdade, ele os impediu de implementar codeMirror como o editor WordPress padrão do WP e se esse editor for realmente implementado como padrão, um opt-out para administradores WordPress deficientes visuais precisará ser implementado para não quebrar completamente a experiência de administrador para essas pessoas. Não é provável que CodeMirror seja consertado tão cedo.
Olhando rapidamente para Pode, parece ser principalmente um editor de HTML e infelizmente não chega perto da funcionalidade do CodeMirror, então, infelizmente, não acho que seja viável.
Não há uma solução simples para esse problema, e aplicar patches é ainda menos uma boa ideia olhando para este problema: https://github.com/codemirror/CodeMirror/issues/4604
A única medida provisória em que posso pensar é ter alguma maneira de renderizar o conteúdo do CM para uma área de texto normal e refletir as edições feitas nessa área de texto no CM, talvez quando um pressionamento de tecla de guia está sendo detectado ou quando ctrl + enter é preseed para executar o código. Até que CodeMirror seja consertado (o que é incerto ao olhar para o problema mencionado acima, mas improvável dado o histórico) ou descartado por outro editor com características semelhantes, não acho que haja muito mais que possa ser feito em curto prazo.

Quincy, eu entendo que CodeMirror é claramente a solução superior (eu acho que Pode foi feito para ser extremamente simples, pois foi planejado apenas para iniciantes), e seria ideal torná-lo acessível se isso for possível. A razão pela qual eu perguntei quais recursos Pode está faltando é que, uma vez que o texto nos campos de edição do CodeMirror podem ser lidos por leitores de tela, se o CodeMirror usa quaisquer outros recursos visuais para auxiliar na codificação, estes também deveriam eventualmente ser tornados acessíveis se possível.
Eu estava pensando em outras maneiras de resolver esse problema e pensei que alguém poderia fazer alguns scripts para o leitor de tela JAWS para Windows e / ou se possível um add-on para o leitor de tela NVDA (VoiceOver para macOS não permite script Eu acho), que quando o usuário entrava em um campo de texto CodeMirror, o texto que já estava lá seria copiado para um buffer de texto JAWS ou NVDA, que poderia então ser editado, e com um pressionamento de tecla enviado de volta ao editor. Idealmente, este campo de texto "especial" daria acesso a quaisquer outros recursos importantes que o CodeMirror oferece. O JAWS usa uma linguagem de script proprietária que tem a capacidade de criar scripts específicos de domínio, e o NVDA usa Python para fazer add-ons, mas não tenho certeza se os específicos de domínio podem ser feitos para esse leitor de tela.

@inscriptioelectronicaaustralia @zersiax @jhomme Parece com a leitura de https://github.com/codemirror/CodeMirror/issues/4604#issuecomment -349920743 que @marijnh está planejando mover para o conteúdo editável, o que deve tornar o CodeMirror significativamente mais utilizável. Comentei sobre o problema perguntando se há algo que possamos fazer para ajudar.

Na pior das hipóteses, podemos ser capazes de construir um "modo de acessibilidade" que permite aos campistas trocarem do CodeMirror por Pode nas configurações, embora isso seja uma quantidade indeterminada de trabalho.

Vamos esperar para ver o que @marijnh tem a dizer.

Eu li a resposta de marijnh e parece que vai demorar um pouco até obtermos acessibilidade. Uma coisa a ter também em consideração é que, infelizmente, mesmo quando as pessoas dizem "alguns meses", isso raramente acontece no caso da acessibilidade, visto que frequentemente tem uma prioridade muito baixa. Não estou dizendo que isso seja o que os desenvolvedores do CodeMirror pensam, mas é uma tendência mundial muito perturbadora. Já vi exemplos em que as pessoas dizem "alguns meses" e isso se transforma em mais alguns meses ... depois mais alguns ... e acho que você entendeu.
Como ainda é possível usar o editor de código como está, acho que esperar alguns meses é provavelmente a melhor abordagem, mas se chegarmos a junho e nada tiver mudado, talvez valha a pena considerar outra solução. O que os outros pensam?

Já vi exemplos em que as pessoas dizem "alguns meses" e isso se transforma em mais alguns meses ... depois mais alguns ...

Ninguém prometeu nada em alguns meses, exceto que o trabalho _iniciaria_ em uma nova abordagem, que definitivamente demorará um pouco para ser construída.

Oi @marijnh

Obrigado por considerar o re-archi do CodeMirror e sinceramente entendemos os esforços com tudo sendo um esforço de código aberto.

Sendo uma organização sem fins lucrativos, por favor, deixe-nos saber, se você precisar de qualquer ajuda de codificação (pro-bono) de nossos desenvolvedores de comunidade neste esforço, estamos ao redor para ajudá-lo neste esforço, de qualquer maneira que pudermos.

O conhecimento testado em batalha do projeto CM (e seus colaboradores) é inestimável e, portanto, estamos dedicados a ajudar neste esforço, caso você nos oriente com detalhes sobre o problema registrado no repositório CodeMirror.

Olá @inscriptioelectronicaaustralia

... mas se chegarmos a junho e nada mudou, talvez valha a pena considerar outra solução.

Entendemos sinceramente e compartilhamos a frustração e estamos preparados para dedicar esforços em qualquer solução possível, mas a IMHO, ajudando CM a se tornar melhor a11y, é a coisa boa a se fazer.

Acho que é um esforço bem gasto, já que não estaremos ajudando apenas a comunidade do freeCodeCamp, mas em qualquer lugar que o CM esteja em uso para o bem de todos em todos os outros lugares também.

Dito isto,

A análise do

Olhando rapidamente para Pode, parece ser principalmente um editor de HTML e infelizmente não chega perto da funcionalidade do CodeMirror, então, infelizmente, não acho que seja viável.

A única medida provisória em que posso pensar é ter alguma maneira de renderizar o conteúdo do CM para uma área de texto normal e refletir as edições feitas nessa área de texto no CM, talvez quando um pressionamento de tecla de guia está sendo detectado ou quando ctrl + enter é preseed para executar o código. Até que CodeMirror seja consertado (o que é incerto ao olhar para o problema mencionado acima, mas improvável dado o histórico) ou descartado por outro editor com características semelhantes, não acho que haja muito mais que possa ser feito em curto prazo.

Devemos começar a olhar para a implementação de uma solução provisória, enquanto verificamos com a equipe de CM como podemos ser de ajuda concreta para eles.

se você precisar de qualquer ajuda de codificação

O tipo de contribuição mais útil seria para usuários de leitores de tela e / ou especialistas em acessibilidade de sua comunidade para ajudar a testar nosso novo protótipo, assim que o tivermos, para que os problemas possam ser identificados e resolvidos o quanto antes. Faremos um anúncio quando tivermos algo para mostrar — se você quiser ter certeza de ser notificado, pode me enviar um e-mail com os dados de contato.

@svinkle Eu gostaria de

O paliativo sugerido é algo que pode funcionar até que o problema content-editable seja resolvido no upstream?

A única medida provisória em que posso pensar é ter alguma maneira de renderizar o conteúdo do CM para uma área de texto normal e refletir as edições feitas nessa área de texto no CM, talvez quando um pressionamento de tecla de guia está sendo detectado ou quando ctrl + enter é preseed para executar o código. Até que CodeMirror seja consertado (o que é incerto ao olhar para o problema mencionado acima, mas improvável dado o histórico) ou descartado por outro editor com características semelhantes, não acho que haja muito mais que possa ser feito em curto prazo.

Se eu entendi a abordagem corretamente, o conteúdo do editor de CM seria carregado em textarea e textarea seria usado para editar o conteúdo. Então, ao atualizar / salvar, o conteúdo textarea será refletido no editor de CM.

O editor de CM ficaria oculto? Suponho que haveria apenas textarea visíveis, caso contrário, seria confuso ter duas áreas de edição.

Olá @QuincyLarson e todos os envolvidos,

Muito obrigado pelos feedbacks e considerações, em encontrar uma solução.

Há mais uma consideração que abordamos, que acabei de perceber com algumas discussões com @BerkeleyTrue sobre um tópico separado em CM , antes de prosseguirmos com qualquer patch de macacos com outra textarea. 😓

No beta (nosso novo front-end de reação) não dependemos do CodeMirror diretamente, mas de um componente de reação react-codemirror que é um invólucro leve em cima do CM. Isso é verdade, porque precisamos que funcione com nossa plataforma beta.

Podemos ter que atualizá-lo para um componente diferente em algum momento no futuro, mas isso diz que nenhum dos componentes em discussão tem o suporte a11y igual ao do CM pai no qual envolve sua funcionalidade.

Portanto, um patch de macaco pode não ser trivial.

@raisedadead Obrigado por apontar isso. Vamos esperar que o CodeMirror faça sua atualização de acessibilidade e, em seguida, avaliaremos o processo de patching do macaco a partir daí.

Estamos felizes em anunciar que mudamos para o editor Monaco em nossa plataforma de aprendizagem. Ele tem um 11y integrado.

Nós absolutamente amamos o CodeMirror e agradecemos a @marijnh pelo trabalho incrível que você e sua equipe fizeram. Tem sido o editor de fato por todos esses anos. Ainda adoraríamos usá-lo em projetos futuros, porque é muito leve e simples.

Obrigado @zersiax , @mjanusauskas , @inscriptioelectronicaaustralia e Todos por