Freecodecamp: 屏幕阅读器无法审阅编辑器的内容

创建于 2017-01-08  ·  61评论  ·  资料来源: freeCodeCamp/freeCodeCamp

挑战向HTML元素问好
用户代理是: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2976.0 Safari/537.36
请描述如何重现此问题,并在可能的情况下包括指向屏幕截图的链接。

我的代码:


        <h1>Hello</h1>

尝试了免费的开源屏幕阅读器NVDA以及用于Windows的商业JAWS。
两种屏幕阅读器都无法通过字符,单词等在编辑器中查看文本。
如果按CTRL + a选择文本,则屏幕阅读器将能够读取文本。
对于盲人和视力障碍的屏幕阅读器用户而言,目前这是非常无法使用的。

最有用的评论

刚看到这是实际的主要问题。 由于我有四个屏幕阅读器,因此假设可以按照说明将其安装到计算机上,我将很乐意对其进行测试。

如果您有兴趣购买一个屏幕阅读器,以减少学习时间,请参见下文。 但这绝不是冒犯性的,但有站点的人不会在第一次尝试中或之后甚至很快使用屏幕阅读器,因为这些概念对您来说太陌生了。 我非常乐意测试涉及颜色以外的任何可访问性问题。 只需提及我或给我发电子邮件。 如果我看到消息,我会花时间。

要获得色彩对比,请寻找一个称为“色彩对比分析器”的工具,有关如何使用它的文章,请参见http://www.webaim.org

在PC上,最好的屏幕阅读器和浏览器组合是NVDA和Firefox,这是最新的稳定版本。 这是因为NVDA是最依赖可访问性API的屏幕阅读器,而Firefox是可访问性API最纯正的实现的PC浏览器。 那是那部分的不足。

访问http://www.nvda-project.org下载并设置NVDA。

设置好最简单的用法后,进入“键盘”对话框并设置笔记本电脑的布局,然后进入“浏览模式”对话框并关闭“使用屏幕布局”复选框。

完成所有这些工作后,您就不再需要以NVDA说话的身份来进行测试。 启动它,打开NVDA,选择“工具”,然后选择“语音查看器”。 停放该窗口,以便您可以在其中查看文本和浏览器中的内容。 根据需要调整窗口大小,然后在上网时,主要使用上下箭头键逐行阅读,就像在记事本文档中浏览箭头一样。 仔细观察语音查看器窗口,您将看到那里的文本更新。 语音查看器中的文本与NVDA所说的内容相符(如果正在说话)。

所有这些知识仍然只会很有趣,但对您没有帮助,因为说实话,您仍然不知道应该怎么做,因此我仍然很乐意测试在此了解的所有可访问性修补程序。

当然,这是出于自私的原因,因为我想成为第一个完全通过FCC的盲人,然后我想利用这些知识来帮助其他盲人开发者,并希望他们中的更多人成为Web开发人员,并帮助所有类型的残疾人。 谁知道,我什至可以找到一份更好的工作,或者在我的日常工作之外赚钱。

所有61条评论

\ cc @ FreeCodeCamp /主持人

是的,非常感谢您提出此建议,我们非常愿意让网站更易于访问,并且支持屏幕阅读器是其中的重要组成部分。

向社区开放,以获取有关实施的建议。

NVDA屏幕阅读器主要开发人员的评论:

在1/8/2017 5:11 PM,mrugesh mohapatra写道:
>

是的,非常感谢您提出这个建议,我们非常愿意
使网站更易于访问,并且支持屏幕阅读器是
重要的部分。

向社区开放,以获取有关实施的建议。

-
您收到此消息是因为您创建了线程。
直接回复此电子邮件,在GitHub上查看
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271187374
或使线程静音
https://github.com/notifications/unsubscribe-auth/APDp4ufBLExQL0QJK2q17hvMavLGwSBwks5rQW0kgaJpZM4LdzaT

NVDA屏幕阅读器主要开发人员的评论:

这是由于所使用的代码编辑器中的可访问性问题引起的。
这些代码编辑者选择以非标准方式绘制其内容,
而不是使用HTML contentEditable(这是标准方法
可编辑的内容)。 不幸的是,我们无能为力
这个; 该问题需要在编辑器中修复。
-

在1/8/2017 5:11 PM,mrugesh mohapatra写道:
>

是的,非常感谢您提出这个建议,我们非常愿意
使网站更易于访问,并且支持屏幕阅读器是
重要的部分。

向社区开放,以获取有关实施的建议。

-
您收到此消息是因为您创建了线程。
直接回复此电子邮件,在GitHub上查看
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271187374
或使线程静音
https://github.com/notifications/unsubscribe-auth/APDp4ufBLExQL0QJK2q17hvMavLGwSBwks5rQW0kgaJpZM4LdzaT

@mjanusauskas嘿,马修! 介意将我们指向该回购协议(如果这是用于提出问题报告的开源代码)?

我不确定使用的是哪个无法访问的编辑器。

在1/9/2017 12:49 AM,mrugesh mohapatra写道:
>

@mjanusauskas https://github.com/mjanusauskas嗨,马修! 心神
是否将我们指向回购协议(如果这是开源的问题报告)?

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件,在GitHub上查看
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271220175
或使线程静音
https://github.com/notifications/unsubscribe-auth/APDp4iUWcvbQSZedazsn7H3_sOnWCuB7ks5rQdh_gaJpZM4LdzaT

好吧,我们使用https://github.com/codemirror/CodeMirror作为编辑器,但是我们想知道您是否还可以帮助我们为NVDA(开放源屏幕阅读器)进行回购,以便与他们进行检查?

@raisedadead这可能是开放源代码阅读器的地方https://github.com/nvaccess/nvda

啊,谢谢@erictleung!

好的,我看不到与CodeMirror特别相关的回购的任何问题。 我想我们应该继续研究,在两个仓库中打开问题,就此寻求帮助?

/ cc @ FreeCodeCamp /主持人

我与NVDA首席开发人员分享的先前评论来自
我在他们的仓库中打开的问题。 他们的立场是什么都没有
由于采用非标准方法,因此可以在屏幕阅读器中完成
正在使用,并且必须在编辑器中解决可访问性问题。

在1/9/2017下午12:18,mrugesh mohapatra写道:
>

好的,我看不到与CodeMirror相关的回购的任何问题
特别。 我想我们应该去解决这两个问题
回购,寻求协助?

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

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件,在GitHub上查看
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271361131
或使线程静音
https://github.com/notifications/unsubscribe-auth/APDp4oyVgtLfIsZKxB51xxN08OxRhHhXks5rQnoFgaJpZM4LdzaT

您是否可以帮助我们解决问题编号,链接等问题,我们希望了解需要实施的内容? 如果没有明确的技术问题出在哪里,在编辑器中,很难说服编辑器的维护者进行修复。

抱歉,但没有更多信息,鉴于我们愿意尽可能地支持可访问性,因此很难进行此操作。

我报告给NVDA屏幕阅读器开发人员的问题是:

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

谢谢您所做的一切。 我很希望能够
一旦可访问性问题解决后,请参加免费代码营
解决。

在1/9/2017 12:41 PM,mrugesh mohapatra写道:
>

您能帮助我们解决问题编号,链接等问题吗,我们很想了解
需要执行什么? 没有明确的技术思路
错误,在编辑器中,很难说服
编辑的维护者。

抱歉,但没有更多信息,很难进行此操作,
鉴于我们希望尽可能地支持可访问性。

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件,在GitHub上查看
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271367297
或使线程静音
https://github.com/notifications/unsubscribe-auth/APDp4rtyeVvew2edXgWaxr1eICnDpdKxks5rQn9wgaJpZM4LdzaT

一些谷歌搜索使我想到了这一点: http :
也许值得一瞧

我不确定正在使用什么编辑器,或者它是否有用,但是
有使用html和CSS课程以及代码测试的经验
作为屏幕阅读器用户, www.w3schools.com非常易于访问。

在1/9/2017下午12:55,迪伦写道:
>

一些谷歌搜索使我想到了这一点:
http://bgrins.github.io/codemirror-accessible/
也许值得一瞧

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件,在GitHub上查看
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271371504
或使线程静音
https://github.com/notifications/unsubscribe-auth/APDp4p-8xX-xTVF0bqGhOkpAinPMDwNaks5rQoKagaJpZM4LdzaT

@mjanusauskas非常感谢Mathew。

我们正在优先考虑此事并尽我们最大的能力...我们可能会有所延迟,但是请放心,我们将尽快尝试解决问题...同时,我们欢迎您查看Wiki。有关我们论坛上https://forum.freecodecamp.com上的文章以及该视频系列的内容,请继续学习。

/ cc @QuincyLarson

我刚刚尝试了@dhcodes链接到的CodeMirror Accessible演示。 据说它的性能较低,尽管在处理它们加载到其中的〜10k行JavaScript文件时,我没有发现任何减速。 我可以想象我们在一个CodeMirror文本区域中拥有的最大项目可能是1,000行,因此我认为速度下降并没有那么糟糕。

就是说,我在台式机上。

也许我们应该看看我们是否可以在设置中有一个按钮来切换对CodeMirror Accessible的使用?

CC @伯克利·@zersiax

一个很好的例子,说明如何完全制作出这种类型的东西
可在以下位置找到可访问性
https://teachaccess.github.io/tutorial/#/3

在2017年1月9日星期一1:58 PM,Quincy Larson通知单@ github.com
写道:

我刚刚尝试了@dhcodes的CodeMirror Accessible演示
https://github.com/dhcodes链接到。 应该是
性能较低,尽管我在使用时没有发现任何减速
他们已在其中加载的〜10k行JavaScript文件。 最大的
我可以想象我们在单个CodeMirror文本区域中拥有的项目是
也许有1000行,所以我认为减速并不是那么糟糕。

就是说,我在台式机上。

也许我们应该看看在设置中是否可以有一个按钮
切换使用CodeMirror Accessible?

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

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件,在GitHub上查看
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271390191
或使线程静音
https://github.com/notifications/unsubscribe-auth/APDp4nMFLf9Ou0z2oNBFLPZdcxZwxMoOks5rQpFPgaJpZM4LdzaT

我喜欢该资源,它确实显示了一个有效的示例...它在后台使用contentEditable吗?

我怀疑是这样,但不确定。
目前,我在应对每个挑战时都比较乏味的工作是
在CodeMirror编辑器中选择所有内容>粘贴到NotePad ++>
进行必要的编辑>全选并复制>粘贴到CodeMirror编辑器中>
提交。
对于屏幕阅读器用户而言,显然是非常糟糕且效率低下的体验。

2017年1月22日星期日,下午4:19,Florian Beijers [email protected]
写道:

我喜欢该资源,它确实显示了一个有效的示例...是否使用了
contentEditable在后台?

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件,在GitHub上查看
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-274364439
或使线程静音
https://github.com/notifications/unsubscribe-auth/APDp4hHGQh0qVNCHAFDmlUzwq8u8DPIPks5rU9X5gaJpZM4LdzaT

在使用上述繁琐的工作来完成HTML,CSS之后
和Bootstrap挑战我很失望地发现下一个
使用CodePen构建基本的致敬网页的挑战。

CodePen似乎也存在类似的主要可访问性问题
编辑。 屏幕阅读器用户非常沮丧。

在2017/1/22下午4:19,Florian Beijers写道:
>

我喜欢该资源,它确实显示了一个有效的示例...是否使用了
contentEditable在后台?

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件,在GitHub上查看
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-274364439
或使线程静音
https://github.com/notifications/unsubscribe-auth/APDp4hHGQh0qVNCHAFDmlUzwq8u8DPIPks5rU9X5gaJpZM4LdzaT

@mjanusauskas,我们建议将Codepen用于集成的文本编辑器和快速渲染。 但是,我不认为我们将其仅限于Codepen。 要完成您的项目,您只需提交一个指向您的项目并正在运行的URL。 因此,随时使用任何托管服务来呈现您的项目。 一种替代方法是使用GitHub页面https://pages.github.com/。

对于希望提供帮助的贡献者,请注意以下资源,该资源可帮助缓解此问题http://bgrins.github.io/codemirror-accessible/

我调查了一下。 似乎TeachAccess正在使用exerslide的编辑器组件。 据我所知,它的作用是将所有内容复制到文本区域。

我在#12828上工作时遇到的其他问题是CodeMirror的inputStyle选项。 这使我们可以切换编辑器以使用contentEditable。
我以为浏览器对contentEditable的支持应该不是问题,但是我确实在他们的话语中找到了
我可以在快速测试中发现的唯一区别是,光标会根据语法突出显示来更改颜色。
我不是屏幕阅读器的专业用户,但是据我所知,这对于NVDA来说可以正常工作。

我应该将此作为PR提交吗?

@mjanusauskas @zersiax您对我应该测试的东西有任何提示吗? 您愿意协助质量检查吗?

如果有人需要有关如何工作的另一个示例,我偶然发现了在线Orion IDE,它可以完成很多我想要的类似系统的工作。 我怀疑它的开源

@QuincyLarson是的,给我发送指向您运行此程序的沙箱的链接吗? 我会旋转的。

@zersiax嗨! 我不确定如何部署freeCodeCamp的沙盒版本。 也许Quincy可以帮您解决一个问题,或者我很乐意指导您完成本地安装。

无论哪种工作:)我确实有一个正在运行的节点环境,我需要
虽然把它除尘:)

@zersiax Local可能是禁食的解决方案👍这是安装指南的简化版本(完整指南为CONTRIBUTING.md ):

  1. 确保已安装Node v6和MongoDB v3
  2. 克隆freeCodeCamp
  3. 确保MongoDB在所有这些过程中都在运行
  4. 在freeCodeCamp cl中运行以下命令:
npm install
npm install -g gulp
cp sample.env .env
npm run only-once
gulp
  1. 您的本地实例现在应该在localhost:3000
  2. 要检查我的更改,请停止吞咽并运行:
git remote add systimotic https://github.com/systimotic/FreeCodeCamp.git
git fetch systimotic
git checkout --track systimotic/fix/accessible-editor
  1. 再次启动gulp,您应该能够在localhost:3000处再次签出更改

Oof,这比我想象的要复杂一些。
我可能已经搞砸了。 if如果您遇到任何问题,随时可以在任何地方给我发消息。

感谢您的信息。 我将调查GitHub Pages
可能的选择。

在1/24/2017 11:12 PM,Eric Leung写道:
>

@mjanusauskas https://github.com/mjanusauskas,我们建议使用Codepen
集成的文本编辑器和快速渲染。 但是,我不认为
我们将其限制为仅Codepen。 要完成您的项目,您需要做的所有事情
提交是项目启动并运行的URL。 因此随时使用
任何托管服务来渲染您的项目。 另一种方法是
使用GitHub页面https://pages.github.com/。

对于希望提供帮助的贡献者,请注意以下资源
帮助缓解此问题http://bgrins.github.io/codemirror-accessible/

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件,在GitHub上查看
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-275020850
或使线程静音
https://github.com/notifications/unsubscribe-auth/APDp4lJ8-omlWG3Xbt5soRKVVFYaKYMJks5rVtm1gaJpZM4LdzaT

是的,我很乐意为您提供测试和/质量检查方面的帮助。

在2017年1月25日上午6:39,蒂莫写道:
>

我调查了一下。 看来TeachAccess正在使用
exerslide的编辑器组件
https://github.com/facebookincubator/exerslide/blob/master/packages/exerslide/components/Editor.js
据我所知,这是将所有内容复制到
文本区域。

我在工作时碰到的其他东西#12828
https://github.com/freeCodeCamp/freeCodeCamp/issues/12828
CodeMirror的inputStyle选项
https://codemirror.net/doc/manual.html#option_inputStyle 。 这个
允许我们切换编辑器以使用contentEditable。
我认为浏览器对contentEditable的支持
http://caniuse.com/#search=contentEd应该不是问题,但我
确实在他们的话语中找到了此评论
https://discuss.codemirror.net/t/inputstyle-contenteditable-we-may-hope-for-browser-spell-checking/608/2
指出在旧版浏览器中存在错误。 他们确实声明就是这样
手机上的默认设置,但对我们来说一直很好
那里。 我认为我们可以使用此选项(他们已经将它用于
两年)。
我能够在快速测试中发现的唯一区别是
光标会根据语法高亮更改颜色。
我不是专业的屏幕阅读器用户,但据我所知
与NVDA配合良好。

我应该将此作为PR提交吗?

@mjanusauskas https://github.com/mjanusauskas @zersiax
https://github.com/zersiax您对我应该做的事情有任何建议吗
测试? 您愿意协助质量检查吗?

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件,在GitHub上查看
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-275097352
或使线程静音
https://github.com/notifications/unsubscribe-auth/APDp4oqMSgwyJUBVxfaYDkwWaP23NDqMks5rV0JzgaJpZM4LdzaT

+1。 目前,这将有助于放置一个仅屏幕阅读器可以读取的隐藏指令,该指令指出了如何解决此问题(复制到另一个编辑器,在此处编辑,然后复制回来)。

我们预计需要多长时间? 您可以将.sr-only类添加到
包含该文本的跨度,但是如果我们在其中放置太长时间
某个地方的人会忘记它,它只会坐在
在那里,因为你们实际上没有看到该消息:)

我最近在CodePen.com和EdX.org都遇到了相同的问题

EdX似乎有一个可访问的解决方案,我将
他们在这里的评论:

我们使用称为CodeMirror的开源代码编辑器
(https://codemirror.net/)。 我们必须对其进行一些修改以
使它在edX Platform中工作。 其中包括一些修改
一些可访问性改进,因此用户可能没有相同的
在使用CodeMirror的其他网站上的经验。 因为我们必须
为edX定制它,我们无法将更改推向上游。
但是,CodeMirror正在积极致力于解决这些问题,
到他们的github仓库Issue Tracker。 我们进行的另一项自定义更改
我们对CodeMirror的支持包括屏幕阅读器和键盘
按TAB顺序在编辑器之前的用户特定说明。 的
用户需要知道他们可以按两次ESC键,然后按TAB键
将焦点移到编辑器之外。 这是必需的,因为在代码中
编辑器,对于用户来说,插入TAB序列非常普遍,
并且不要移动当前的键盘焦点,这就是TAB键的作用
默认。

在1/31/2017 4:01 PM,Florian Beijers写道:

我们预计需要多长时间? 您可以将.sr-only类添加到
包含该文本的跨度,但是如果我们在其中放置太长时间
某个地方的人会忘记它,它只会坐在
在那里,因为你们实际上没有看到该消息:)

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件,在GitHub上查看
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-276506570
或使线程静音
https://github.com/notifications/unsubscribe-auth/APDp4h-s2_aSFUDNSIRXnc8v7bmlNqhnks5rX69UgaJpZM4LdzaT

这是解决此关键问题的另一个可行解决方案的示例:

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

在1/31/2017 4:01 PM,Florian Beijers写道:

我们预计需要多长时间? 您可以将.sr-only类添加到
包含该文本的跨度,但是如果我们在其中放置太长时间
某个地方的人会忘记它,它只会坐在
在那里,因为你们实际上没有看到该消息:)

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件,在GitHub上查看
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-276506570
或使线程静音
https://github.com/notifications/unsubscribe-auth/APDp4h-s2_aSFUDNSIRXnc8v7bmlNqhnks5rX69UgaJpZM4LdzaT

你好

_使用FastHub从我的Samsung SM-A520F

_使用FastHub从我的Samsung SM-A520F

你好
我现在可以在本地设置站点,因此可以按照这些说明进行操作。 我很确定我需要遵循介绍如何与我的存储库同步的部分。 这个对吗? 如果我做错了什么,我不确定如何解决。 有点着急。 :)

刚看到这是实际的主要问题。 由于我有四个屏幕阅读器,因此假设可以按照说明将其安装到计算机上,我将很乐意对其进行测试。

如果您有兴趣购买一个屏幕阅读器,以减少学习时间,请参见下文。 但这绝不是冒犯性的,但有站点的人不会在第一次尝试中或之后甚至很快使用屏幕阅读器,因为这些概念对您来说太陌生了。 我非常乐意测试涉及颜色以外的任何可访问性问题。 只需提及我或给我发电子邮件。 如果我看到消息,我会花时间。

要获得色彩对比,请寻找一个称为“色彩对比分析器”的工具,有关如何使用它的文章,请参见http://www.webaim.org

在PC上,最好的屏幕阅读器和浏览器组合是NVDA和Firefox,这是最新的稳定版本。 这是因为NVDA是最依赖可访问性API的屏幕阅读器,而Firefox是可访问性API最纯正的实现的PC浏览器。 那是那部分的不足。

访问http://www.nvda-project.org下载并设置NVDA。

设置好最简单的用法后,进入“键盘”对话框并设置笔记本电脑的布局,然后进入“浏览模式”对话框并关闭“使用屏幕布局”复选框。

完成所有这些工作后,您就不再需要以NVDA说话的身份来进行测试。 启动它,打开NVDA,选择“工具”,然后选择“语音查看器”。 停放该窗口,以便您可以在其中查看文本和浏览器中的内容。 根据需要调整窗口大小,然后在上网时,主要使用上下箭头键逐行阅读,就像在记事本文档中浏览箭头一样。 仔细观察语音查看器窗口,您将看到那里的文本更新。 语音查看器中的文本与NVDA所说的内容相符(如果正在说话)。

所有这些知识仍然只会很有趣,但对您没有帮助,因为说实话,您仍然不知道应该怎么做,因此我仍然很乐意测试在此了解的所有可访问性修补程序。

当然,这是出于自私的原因,因为我想成为第一个完全通过FCC的盲人,然后我想利用这些知识来帮助其他盲人开发者,并希望他们中的更多人成为Web开发人员,并帮助所有类型的残疾人。 谁知道,我什至可以找到一份更好的工作,或者在我的日常工作之外赚钱。

@jhomme感谢您使用的屏幕阅读器的详细信息。

当我在FireFox上使用Fangs时,请访问以下URL: https :

屏幕阅读器的输出为:

页面具有一帧,四个标题和二十五个链接使用Paragraph Element竖线通知freeCodeCamp破折号Internet ExplorerLinkGraphicle学会在freeCodeCamp徽标上编写JavaScript代码七项列表bulletLink MapbulletbulletLink ForumbulletLink ContributebulletLink AboutbulletLink DonatebulletLink登录列表末尾标题四级与Paragraph Element p元素一起通知网站上普通破折号段落文字的首选元素。 P是引号段引号的缩写。 您可以像这样的冒号少p更大创建ap元素,我是ap标签! 少得多的斜线p更大在htwo元素下面创建ap元素,并给其文本引用Hello Paragraph quote。 运行测试,请左键ctrl加右键。重置代码链接获取提示在论坛上寻求帮助链接以保存进度创建ap元素。 您的p元素应使用文本引号Hello Paragraph quote。 确保您的p元素具有结束标记。 EditEdit少四分一少磨削更大的Hello World少斜杠磨削更大的少三削htwo更大的CatPhotoApp少削斜线htwo大四标题一级Hello WorldHeading二级CatPhotoAppLinkLinkLink

如果我正确理解这一点,那么这就是屏幕阅读器呈现的代码编辑器的内容:

一个少两个磨削器,更大的Hello World少一个斜杠磨削器,一个更大的三个磨削器,一个更少的htwo的磨削器,更大的CatPhotoApp应用程序,一个更少的斜率,两个磨削的器皿,更大的四个磨刀器

因此,对于Fangs屏幕阅读器来说,这似乎不是问题。 您是使用四个屏幕阅读器中的全部还是其中一部分来体验此操作?

顺便说一句,我为您成为第一个完全通过freeCodeCamp的盲人的雄心而喝彩! 我们将尽力帮助您实现该目标。

嗨,昆西,

我在PC上使用JAWS和NVDA,在Mac上使用画外音来体验这一点。 我在iOS上的VoiceOver上没有遇到这种情况。 我不明白为什么。 到目前为止,我还没有尝试过任何其他屏幕阅读器。 我可以尝试使用讲述人和TalkbBack。

2017年8月23日,上午12:01,Quincy Larson [email protected]写道:

@jhomme感谢您使用的屏幕阅读器的详细信息。

当我在FireFox上使用Fangs时,请访问以下URL: https :

屏幕阅读器的输出为:

页面具有一帧,四个标题和二十五个链接使用Paragraph Element竖线通知freeCodeCamp破折号Internet ExplorerLinkGraphicle学会在freeCodeCamp徽标上编写JavaScript代码七项列表bulletLink MapbulletbulletLink ForumbulletLink ContributebulletLink AboutbulletLink DonatebulletLink登录列表末尾标题四级与Paragraph Element p元素一起通知网站上普通破折号段落文字的首选元素。 P是引号段引号的缩写。 您可以像这样的冒号少p更大创建ap元素,我是ap标签! 少得多的斜线p更大在htwo元素下面创建ap元素,并给其文本引用Hello Paragraph quote。 运行测试,请左键ctrl加右键。重置代码链接获取提示在论坛上寻求帮助链接以保存进度创建ap元素。 您的p元素应使用文本引号Hello Paragraph quote。 确保您的p元素具有结束标记。 EditEdit少四分一少磨削更大的Hello World少斜杠磨削更大的少三削htwo更大的CatPhotoApp少削斜线htwo大四标题一级Hello WorldHeading二级CatPhotoAppLinkLinkLink

如果我正确理解这一点,那么这就是屏幕阅读器呈现的代码编辑器的内容:

一个少两个磨削器,更大的Hello World少一个斜杠磨削器,一个更大的三个磨削器,一个更少的htwo的磨削器,更大的CatPhotoApp应用程序,一个更少的斜率,两个磨削的器皿,更大的四个磨刀器

因此,对于Fangs屏幕阅读器来说,这似乎不是问题。 您是使用四个屏幕阅读器中的全部还是其中一部分来体验此操作?

顺便说一句,我为您成为第一个完全通过freeCodeCamp的盲人的雄心而喝彩! 我们将尽力帮助您实现该目标。

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件,在GitHub上查看,或使该线程静音。

@jhomme出于某种原因,我无法在您解释遇到的内容的地方找到评论。 似乎是军官,有问题吗?

嗨弗洛里安,
尝试导航或键入时,各种屏幕提示都不说话
在网站上的编辑器中。 他们只是说空白。 他们说,
但是,在选择文本时。

吉姆

17年8月23日,Florian Beijers [email protected]写道:

@jhomme由于某种原因,我无法在您解释它的地方找到评论
你在遇到吗? 似乎是军官,有问题吗?

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件或在GitHub上查看:
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment -324309958

-

吉姆·霍姆(Jim Homme)
http://www.jimhommewebdev.com
推特:@jimhomme
面子书: http :
领英(LinkedIn): https :

是的,这似乎仍然是个问题。 如您在该线程中看到的,这与无法访问CodeMirror有关。 目前解决此问题的最简单方法是将代码复制粘贴到诸如NotePad ++或EdSharp之类的编辑器中(如果必须使用:P),然后进行编辑,然后将其粘贴回fcc编辑器中。 乏味,但我猜它是可行的:)

我刚刚找到了可以完全访问的开源HTML代码编辑器。 可以用这个替换当前的吗? https://pode.herokuapp.com/对于CodePen的挑战,由于无法访问CodePen,辅助技术的用户可以使用替代方法来替代本网站吗?

你好
请参阅下面的帖子及其链接。 CodePen是可行的并且正在改进。 有了建设性的反馈,他们会更好。

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

2017年12月27日下午5:17,inscriptioelectronicaaustralia [email protected]写道:

我刚刚找到了可以完全访问的开源HTML代码编辑器。 可以用这个替换当前的吗? https://pode.herokuapp.com/对于CodePen的挑战,由于无法访问CodePen,辅助技术的用户可以使用替代方法来替代本网站吗?

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件,在GitHub上查看,或使该线程静音。

@zersiax感谢您的配合。我很高兴听到这仅仅是CodeMirror的可访问性问题,但这意味着我们需要找出一种修补此问题的方法。

@inscriptioelectronicaaustralia我们很快将支持在freeCodeCamp上直接构建项目,因此CodePen相对不可访问的界面不会有太大问题。 我们只需要使用CodeMirror来解决问题,CodeMirror是我们可能会贡献的开源库。

昆西,很高兴能很快在Free Code Camp上构建项目。

我刚刚查看了与此相关的Code Mirror GitHub线程,他们认为与屏幕阅读器配合使用需要大量工作,因此,对此线程做出贡献的人们还是他们可以解决问题,将导致双赢局面不仅适用于我们自己,也适用于其他使用Code Mirror的网站。

假设地看待这种情况,如果我将其用作代码镜像的替代品,那么我上面引用的Pode工具是否有许多缺失的功能会影响Free Code Camp?

你好
对那些对此表示关注的人表示我的真诚感谢。 我现在正朝着真正完成JavaScript的方向迈进,迫不及待地希望能够编写对人们有帮助的真实代码,尤其是FreeCodeCamp。

吉姆

来自:inscriptioelectronicaaustralia [mailto:[email protected]]
发送:2017年12月28日星期四凌晨2:08
发送至:freeCodeCamp / freeCodeCamp [email protected]
抄送:Jim Homme [email protected] ; 提及提及@ noreply.github.com
主题:回复:[freeCodeCamp / freeCodeCamp]屏幕阅读器无法检查编辑器的内容(#12431)

昆西,很高兴能很快在Free Code Camp上构建项目。

我刚刚查看了与此相关的Code Mirror GitHub线程,他们认为与屏幕阅读器配合使用需要大量工作,因此,对此线程做出贡献的人们还是他们可以解决问题,将导致双赢局面不仅适用于我们自己,也适用于其他使用Code Mirror的网站。

假设地看待这种情况,如果我将其用作代码镜像的替代品,那么我上面引用的Pode工具是否有许多缺失的功能会影响Free Code Camp?

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件,在GitHub https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-354240665上查看,或忽略线程https://github.com/notifications/unsubscribe-auth/AdDz24NBYQr6hKSp_HsEnOryzgzIkA24ks5tEz5PgaJdZ

@inscriptioelectronicaaustralia CodeMirror是一个广泛使用的项目,具有我们使用的大量功能。 我对Pode是否可以执行CodeMirror所做的一切表示怀疑。 我认为最好的选择是让我们修补CodeMirror。

尽管我确实同意修补CodeMirror是最有效的方法,但我们还是称其为解决问题的有效方法,但我们还是必须保持现实。
这个问题已经存在了整整一年,已经有一年历史了,已经有几个星期了,而且我至少在这个问题上抱怨了两年,甚至三年了。 这确实是一个问题; 每当我决定再次尝试FCC时,我都会因不得不解决这些问题而感到厌烦。 简便易行,入门门槛低,编码简单以及在编写代码时在浏览器中查看实时预览更新仅不适用于当前使用屏幕阅读器的人,这在很多方面使freecodecamp有效,我敢说,迷人。
CodeMirror通过专注于主要以图形方式以高性能方式呈现代码,几乎完全放弃了以前的标准DOM操作,而立足于脚下。 如果您四处看看,甚至WordPress都在遭受这个问题的困扰,他们还没有找到解决此问题的合适方法。 实际上,这已阻止他们将codeMirror作为WP的默认WordPress编辑器实现,并且如果该编辑器确实是默认实现的,则需要实施针对视力不佳的WordPress管理员的选择,以不完全破坏这些人的管理经验。 CodeMirror不太可能很快得到修复。
快速浏览Pode,它似乎主要是HTML的编辑器,但是不幸的是,它与CodeMirror的功能并不接近,因此遗憾的是,我认为这是不可行的。
没有简单的解决方案可以解决此问题,而修补程序甚至不是一个好主意: https :
我能想到的唯一的权宜之计是采用某种方式将CM内容呈现为常规textarea,并在CM中反映对该textarea所做的编辑,也许是在检测到选项卡的keydown或ctrl + enter时预先运行代码。 直到CodeMirror得以解决(不确定上面提到的问题,但鉴于跟踪记录不太可能)或被另一个功能相似的编辑器丢弃之前,我认为在短时间内无法做更多的事情。

昆西,我知道CodeMirror显然是更好的解决方案(我认为Pode的设计非常简单,因为它只适合初学者使用),并且如果可能的话,使它易于访问是理想的。 我问Pode缺少什么功能的原因是,一旦屏幕阅读器可以读取CodeMirror编辑字段中的文本,如果CodeMirror使用任何其他视觉功能来辅助编码,则最终应尽可能使这些功能可用。
我正在考虑解决此问题的其他方法,并且我认为有人可以为Windows屏幕阅读器的JAWS编写一些脚本,和/或尽可能为NVDA屏幕阅读器添加一个插件(VoiceOver for macOS不允许编写脚本我认为)是,当用户输入CodeMirror文本字段时,已经在其中的文本将被复制到JAWS或NVDA文本缓冲区中,然后可以对其进行编辑,并将击键发送回编辑器。 理想情况下,此“特殊”文本字段将允许访问CodeMirror提供的任何其他重要功能。 JAWS使用一种专有的脚本语言,该语言确实具有制作特定于域的脚本的能力,而NVDA使用Python来制作附加组件,但是我不确定是否可以为该屏幕阅读器制作特定于域的脚本。

@inscriptioelectronicaaustralia @zersiax @jhomme听起来像是从阅读https://github.com/codemirror/CodeMirror/issues/4604#issuecomment -349920743得知@marijnh计划转向可编辑的内容,这将使CodeMirror的可用性大大提高。 我对这个问题发表了评论,询问我们是否可以做些什么来帮助您。

在最坏的情况下,我们可能能够建立一个“可访问性模式”,使营员可以在设置中从CodeMirror for Pode切换,认为这将是大量工作。

让我们拭目以待,看看@marijnh怎么说。

我读了marijnh的回复,似乎要等到我们获得可访问性时,才需要一段时间。 还需要考虑的一件事是,即使人们说“几个月”,可访问性也很少出现这种情况,因为可访问性常常被置于非常低的优先级。 我并不是说CodeMirror的开发人员就是这么想的,但这是一个非常令人不安的全球趋势。 我看到了一些例子,当人们说“几个月”时,结果又变成了几个月……然后又变成了几个月……我想您已经明白了。
由于仍然可以按原样使用代码编辑器,我认为等待几个月可能是最好的方法,但是如果到了六月,并且没有任何变化,那么也许值得考虑使用另一种解决方案。 别人怎么看?

我看到了一些例子,当人们说“几个月”时,结果又变成了几个月……然后又变成了……。

几个月内没有人承诺任何事情,只是要开始一种新方法的工作,这肯定会花费一些时间。

@marijnh

感谢您考虑CodeMirror的重新架构,我们真诚地理解这些工作,所有工作都是开源工作。

作为自己的非营利组织,请让我们知道,如果您在这项工作中需要社区开发人员提供任何编码帮助(无偿),我们将竭尽所能为您提供帮助。

经过实践检验的CM项目(及其贡献者)知识非常宝贵,因此,如果您通过CodeMirror存储库中记录的问题的具体细节指导我们,我们将竭诚为您提供帮助。

@inscriptioelectronicaaustralia

...但是,如果我们到了六月,并且没有任何改变,那么也许值得考虑考虑另一种解决方案。

我们真诚地理解并分享挫败感,并准备为任何可能的解决方案付出努力,但是恕我直言,帮助CM取得更好的进步是一件好事。

我认为这是一项值得花费的工作,因为我们不仅将帮助freeCodeCamp社区,而且将在任何使用CM的地方都为其他地方带来更大的利益。

那就是

上面的@zersiax分析对于我们代码库的当前状态而言是正确的:

快速浏览Pode,它似乎主要是HTML的编辑器,但是不幸的是,它与CodeMirror的功能并不接近,因此遗憾的是,我认为这是不可行的。

我能想到的唯一的权宜之计是采用某种方式将CM内容呈现为常规textarea,并在CM中反映对该textarea所做的编辑,也许是在检测到选项卡的keydown或ctrl + enter时预先运行代码。 直到CodeMirror得以解决(不确定上面提到的问题,但鉴于跟踪记录不太可能)或被另一个功能相似的编辑器丢弃之前,我认为在短时间内无法做更多的事情。

我们应该开始考虑实施临时解决方案,同时与CM团队核对如何为他们提供具体帮助。

如果您需要任何编码帮助

最有用的贡献类型是让您的社区的屏幕阅读器用户和/或可访问性专家在获得新原型后帮助测试我们的新原型,从而可以尽早发现并解决问题。 当我们有东西要显示时,我们会进行公告-如果您想确保收到通知,可以给我发送一封包含联系方式的电子邮件。

@svinkle ,感谢您在此问题上的投入。

在上游解决content-editable问题之前,是否建议采取权宜之计?

我能想到的唯一的权宜之计是采用某种方式将CM内容呈现为常规textarea,并在CM中反映对该textarea所做的编辑,也许是在检测到选项卡的keydown或ctrl + enter时预先运行代码。 直到CodeMirror得以解决(不确定上面提到的问题,但鉴于跟踪记录不太可能)或被另一个功能相似的编辑器丢弃之前,我认为在短时间内无法做更多的事情。

如果我正确理解该方法,则CM编辑器的内容会加载到textarea ,而textarea将用于编辑内容。 然后在更新/保存时, textarea内容将反映在CM编辑器中。

CM编辑器会隐藏吗? 我假设只有textarea可见,否则有两个编辑区域会造成混乱。

@QuincyLarson大家好,

非常感谢您在提供解决方案时的反馈和考虑。

我碰巧遇到了一个考虑因素,而我刚好在与@BerkeleyTrue讨论了有关CM的另一个主题时才意识到这着手进行其他文本区域的猴子修补。 😓

在beta版(我们新的React前端)上,我们不直接依赖CodeMirror,而是依赖React组件react-codemirror ,它是CM上的轻量级包装。 之所以如此,是因为我们需要它与我们的Beta平台一起使用。

我们可能会在将来的某个时候将其更新为其他组件,但是这表明所讨论的所有组件都没有与包含其功能的父级CM相同的支持。

因此,猴子补丁可能并不容易。

@raisedadead感谢您指出这一点。 我们将等待CodeMirror进行可访问性更新,然后从那里评估猴子修补的过程。

我们很高兴地宣布,我们已在学习平台上切换到摩纳哥编辑器。 它有一个内置的。

我们绝对喜欢CodeMirror,并感谢@marijnh您和团队所做的

感谢@zersiax@mjanusauskas@inscriptioelectronicaaustralia和每个人都参与其中并使其更易于访问。

此页面是否有帮助?
0 / 5 - 0 等级