\ cc @ FreeCodeCamp / moderators

うん、これを持ってきてくれてありがとう、私たちはウェブサイトをよりアクセスしやすくするためのアイデアに非常にオープンであり、スクリーンリーダーをサポートすることはこれの重要な部分です。

実装に関する提案をコミュニティに公開します。

NVDAスクリーンリーダーのリード開発者からのコメント：

2017年1月8日午後5時11分、mrugeshmohapatraは次のように書いています。
>>

うん、これを持ってきてくれてありがとう、私たちはアイデアに非常にオープンです
ウェブサイトをよりアクセシブルにし、スクリーンリーダーをサポートすることは
これの重要な部分。

実装に関する提案をコミュニティに公開します。

—
スレッドを作成したため、これを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271187374 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/APDp4ufBLExQL0QJK2q17hvMavLGwSBwks5rQW0kgaJpZM4LdzaT 。

NVDAスクリーンリーダーのリード開発者からのコメント：

これは、使用されているコードエディタのアクセシビリティの問題が原因です。
これらのコードエディタは、非標準的な方法でコンテンツを描画することを選択します。
HTML contentEditableを使用するのではなく（これが標準的な方法です）
編集可能なコンテンツ）。 残念ながら、サポートするためにできることは何もありません
この; この問題はエディターで修正する必要があります。
—

2017年1月8日午後5時11分、mrugeshmohapatraは次のように書いています。
>>

うん、これを持ってきてくれてありがとう、私たちはアイデアに非常にオープンです
ウェブサイトをよりアクセシブルにし、スクリーンリーダーをサポートすることは
これの重要な部分。

実装に関する提案をコミュニティに公開します。

—
スレッドを作成したため、これを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271187374 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/APDp4ufBLExQL0QJK2q17hvMavLGwSBwks5rQW0kgaJpZM4LdzaT 。

@mjanusauskasねえマシュー！ これが問題レポートを作成するためのオープンソースである場合は、リポジトリを指定してください。

アクセスできないエディタが使用されているかどうかは正確にはわかりません。

2017年1月9日午前0時49分、mrugeshmohapatraは次のように書いています。
>>

@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を使用してい

@raisedadeadこれはおそらくオープンソースリーダーの場合ですhttps://github.com/nvaccess/nvda

ああ、@ erictleungに感謝します！

さて、特にCodeMirrorに関連するリポジトリに問題は見られません。 両方のリポジトリで問題を開き、これについて支援を求める必要があると思いますか？

/ cc @ FreeCodeCamp / moderators

NVDAのリード開発者から共有した以前のコメントは
私が彼らのレポで開いた問題。 彼らの立場は何もないということです
非標準のアプローチにより、スクリーンリーダーで実行できます
使用されており、アクセシビリティの問題はエディタで対処する必要があります。

2017年1月9日12:18 PMに、mrugeshmohapatraは次のように書いています。
>>

わかりました。CodeMirrorに関連するリポジトリに問題はありません。
具体的には。 両方で問題を開いて、私たちは行くべきだと思います
レポ、これについての支援を求めていますか？

/ cc @ FreeCodeCamp / moderators
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

あなたができることは何でもありがとう。 できるようになりたいです
アクセシビリティの問題が発生したら、Free CodeCampに参加します
解決しました。

2017年1月9日12:41 PMに、mrugeshmohapatraは次のように書いています。
>>

問題番号、リンクなどについて教えていただけますか、理解したいと思います
何を実装する必要がありますか？ 何が何であるかについての明確な技術的アイデアなし
間違って、エディターでは、説得するのは難しいでしょう
修正のためのエディターのメンテナー。

申し訳ありませんが、これ以上の情報がなければ、これを進めるのは難しいです、
できるだけ多くのアクセシビリティをサポートしたいと考えています。

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271367297 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/APDp4rtyeVvew2edXgWaxr1eICnDpdKxks5rQn9wgaJpZM4LdzaT 。

いくつかのグーグルが私をこれに導きました： http ：
一見の価値があるかもしれません

どのエディターが使用されているのか、またはそれが役立つかどうかはわかりませんが、
htmlおよびcssコースとコードテストの使用経験
www.w3schools.comは、スクリーンリーダーユーザーとして非常にアクセスし

2017年1月9日12:55 PMに、ディランは次のように書いています。
>>

いくつかのグーグルが私をこれに導きました：
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どうもありがとう、マシュー。

私たちはこれを優先して最善の能力で調査しています...少し遅れる可能性がありますが、できるだけ早く修正を考え出すように努めます...その間、wikiをチェックすることを歓迎しますhttps://forum.freecodecamp.comのフォーラムの記事とビデオシリーズで学習を続けて

/ cc @QuincyLarson

@dhcodesがリンクしている試しました。 おそらくそれはパフォーマンスが低いですが、そこにロードされた約1万行のJavaScriptファイルで作業しているときに速度の低下は見られませんでした。 1つのCodeMirrorテキスト領域にあると想像できる最大のプロジェクトはおそらく1,000行になるので、速度の低下はそれほど悪いことではないと思います。

とはいえ、私はデスクトップを使用しています。

おそらく、CodeMirrorAccessibleの使用を切り替えるボタンを設定に含めることができるかどうかを確認する必要がありますか？

CC @BerkeleyTrue @zersiax

この種のものを完全に作る方法の非常に良い例
アクセシブルはで見つけることができます
https://teachaccess.github.io/tutorial/#/3

13:58時月、2017年1月9日には、クインシー・ラーソン[email protected]
書きました：

@dhcodesというCodeMirrorAccessibleデモを試しました
https://github.com/dhcodesにリンクされています。 おそらくそれは
パフォーマンスは低下しますが、作業中に速度低下は見られませんでした
彼らがそこにロードした約1万行のJavaScriptファイル。 最大
単一のCodeMirrorテキスト領域にあると想像できるプロジェクトは
たぶん1,000行なので、速度低下はそれほど悪いことではないと思います。

とはいえ、私はデスクトップを使用しています。

おそらく、設定にボタンを含めることができるかどうかを確認する必要があります
CodeMirrorAccessibleの使用を切り替えますか？

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エディターに貼り付ける>
参加する。
明らかに、スクリーンリーダーユーザーにとっては非常に貧弱で非効率的なエクスペリエンスです。

4：19 PMの日、2017年1月22日には、フロリアンBeijers [email protected]
書きました：

私はそのリソースが好きです、それは実際の例を示しています...それは使用しますか
contentEditable内部で？

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-274364439 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/APDp4hHGQh0qVNCHAFDmlUzwq8u8DPIPks5rU9X5gaJpZM4LdzaT
。

前述の面倒な回避策を使用してHTML、CSSを完成させた後
とブートストラップの課題私は次のことを見つけることに失望しました
基本的なトリビュートWebページを構築するという課題はCodePenを使用します。

CodePenには、同様の主要なアクセシビリティの問題があるようです。
編集者。 スクリーンリーダーのユーザーにとっては非常に苛立たしいことです。

2017年1月22日16：19、FlorianBeijersは次のように書いています。
>>

私はそのリソースが好きです、それは実際の例を示しています...それは使用しますか
contentEditable内部で？

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-274364439 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/APDp4hHGQh0qVNCHAFDmlUzwq8u8DPIPks5rU9X5gaJpZM4LdzaT 。

@mjanusauskas統合されたテキストエディタとクイックレンダリングにはhttps://pages.github.com/を使用すること

助けたい貢献者への注意、この問題を軽減するのに役立つかもしれないリソースがここにありますhttp://bgrins.github.io/codemirror-accessible/

これを少し調べました。 TeachAccessはexerslideのエディターコンポーネントを使用しているよう

＃ 12828の作業中に遭遇した他の何かは、
contentEditableのブラウザサポートは問題にならないはずだと思いましたが、古いブラウザではバグがあると述べている彼らの談話で
クイックテストで見つけた唯一の違いは、構文の強調表示に基づいてカーソルの色が変わることです。
私はスクリーンリーダーの専門家ではありませんが、NVDAで問題なく動作することがわかります。

これをPRとして提出する必要がありますか？

@mjanusauskas @zersiax私がテストすべきことについて何かアドバイスはありますか？ QAを手伝っていただけませんか？

これがどのように機能するかについて別の例が必要な場合は、このようなシステムに必要な多くのことを実行するオンラインのOrionIDEに出くわしました。 私はそのオープンソースを疑っています

@QuincyLarsonええ、これを実行しているサンドボックスへのリンクを送ってください。 ぐるぐる回します。

@zersiaxこんにちは！ freeCodeCampのサンドボックスバージョンをデプロイする方法がわかりません。 たぶんクインシーがあなたのためにそれを手に入れることができるか、私はそれをローカルにインストールすることを通してあなたを案内させていただきます。

どちらも機能します:)ノード環境を実行しています。
でもほこりを払ってください:)

@zersiax Localはおそらく断食された解決策です👍これはセットアップガイドの短縮版です（完全なガイドはCONTRIBUTING.mdです）：

1. Nodev6とMongoDBv3がインストールされていることを確認してください
2. freeCodeCampのクローンを作成します
3. このすべてを通してMongoDBが実行されていることを確認してください
4. freeCodeCampcl内で次のコマンドを実行します。

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

1. これで、ローカルインスタンスがlocalhost:3000で実行されているはずです。
2. 変更を確認するには、gulpを停止して実行します。

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

1. gulpを再度開始すると、 localhost：3000で変更を再度確認できるはずです

ああ、それは私が想像していたよりも少し複雑でした。
しかし、私は台無しにしたかもしれません。 😅問題が発生した場合は、どこでも私にメッセージを送ってください。

情報ありがとうございました。 GitHubPagesを
可能な代替案。

2017年1月24日午後11時12分、EricLeungは次のように書いています。
>>

@mjanusauskas https://github.com/mjanusauskasCodepenをお勧めし
統合されたテキストエディタとクイックレンダリング。 しかし、私は思いません
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 。

はい、テストやQAのお手伝いをさせていただきます。

2017年1月25日午前6時39分、Timoは次のように書いています。
>>

これを少し調べました。 TeachAccessが使用しているようです
exerslideのエディターコンポーネント
https://github.com/facebookincubator/exerslide/blob/master/packages/exerslide/components/Editor.js 。
私が言えることから、それがしていることはすべてのコンテンツをにコピーすることです
textarea。

＃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 、
これは、古いブラウザではバグがあると述べています。 彼らはそれだけだと述べています
ただし、モバイルのデフォルトであり、正常に機能しています。
そこ。 私たちはこのオプションを使用して大丈夫だと思います（彼らはそれを持っていました
今から2年）。
クイックテストで見つけられた唯一の違いは、
カーソルは、構文の強調表示に基づいて色が変わります。
私はスクリーンリーダーのエキスパートユーザーではありませんが、これからわか​​ることは
NVDAで正常に動作します。

これをPRとして提出する必要がありますか？

@mjanusauskas https://github.com/mjanusauskas @zersiax
https://github.com/zersiax私がすべきことについて何かヒントはありますか
テスト？ QAを手伝っていただけませんか？

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-275097352 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/APDp4oqMSgwyJUBVxfaYDkwWaP23NDqMks5rV0JzgaJpZM4LdzaT 。

+1。 とりあえず、この問題に対処する方法（別のエディターにコピーし、そこで編集し、コピーして戻す）を示す、スクリーンリーダーのみが読み取ることができる非表示の命令を配置すると便利です。

これにはどれくらい時間がかかると思いますか？ .srのみのクラスをに追加できます
そのテキストを含むスパンですが、あまりにも長い間そこに置いておくと
誰かがそれを忘れて、ただ座っているだけです
あなたたちが実際にそのメッセージを見ていませんのでそこに:)

私は最近、CodePen.comとEdX.orgの両方でこの同じ問題に遭遇しました

EdXにはアクセシブルなソリューションがあるようで、私は
ここに彼らのコメント：

CodeMirrorと呼ばれるオープンソースのコードエディタを使用しています
（https://codemirror.net/）。 私たちはそれにいくつかの変更を加える必要がありました
edXプラットフォーム内で機能するようにします。 それらの変更のいくつかが含まれています
ユーザーが同じものを持っていないかもしれないようにいくつかのアクセシビリティの改善
CodeMirrorを使用する他のサイトでの経験。 私たちがしなければならなかったので
edX用にカスタマイズすると、変更をアップストリームにプッシュできませんでした。
ただし、CodeMirrorは、これらの問題の修正に積極的に取り組んでいます。
githubリポジトリのIssueTrackerに移動します。 私たちが行った別のカスタム変更
CodeMirrorのフォークには、スクリーンリーダーとキーボードが含まれています
TAB順でエディターの前にあるユーザー固有の指示。 ザ・
ユーザーは、ESCキーを2回押してから、TABキーを押すことができることに注意する必要があります。
エディターを超えてフォーカスを移動します。 コードではこれが必要です
エディター、ユーザーがTABシーケンスを挿入したいのは非常に一般的です。
現在のキーボードフォーカスを移動しないでください。これはTabキーの機能です。
デフォルトでは。

2017年1月31日午後4時1分、FlorianBeijersは次のように書いています。

これにはどれくらい時間がかかると思いますか？ .srのみのクラスをに追加できます
そのテキストを含むスパンですが、あまりにも長い間そこに置いておくと
誰かがそれを忘れて、ただ座っているだけです
あなたたちが実際にそのメッセージを見ていませんのでそこに:)

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、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

2017年1月31日午後4時1分、FlorianBeijersは次のように書いています。

これにはどれくらい時間がかかると思いますか？ .srのみのクラスをに追加できます
そのテキストを含むスパンですが、あまりにも長い間そこに置いておくと
誰かがそれを忘れて、ただ座っているだけです
あなたたちが実際にそのメッセージを見ていませんのでそこに:)

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-276506570 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/APDp4h-s2_aSFUDNSIRXnc8v7bmlNqhnks5rX69UgaJpZM4LdzaT 。

こんにちは

使用して私のサムスンSM-A520Fから_Sent FastHubを_

使用して私のサムスンSM-A520Fから_Sent FastHubを_

こんにちは、
サイトをローカルに設定したので、これらの指示に従うことができると思います。 このリポジトリを自分のものと同期する方法を説明している部分に従う必要があると確信しています。 これは正しいです？ そして、私が何か間違ったことをした場合、それを取り消す方法がわかりません。 少し気になる。 :)

これが実際の主要な問題であることがわかりました。 私は4つのスクリーンリーダーを持っているので、指示に従ってこれを自分のマシンにインストールできると仮定して、これをテストできます。

試してみるスクリーンリーダーの入手に興味がある場合は、学習曲線を短縮するには、以下を参照してください。 そして、これは決して不快なことではありませんが、サイトを持っている人は、最初の試行で、またはその後も、概念が非常に異質であるため、スクリーンリーダーをすぐに使用することはありません。 色以外のアクセシビリティの問題をテストできれば幸いです。 私に言及するか、私にメールしてください。 メッセージを見たら時間を作ります。

色のコントラストについては、Color Contrast Analyzerというツールを探し、その使用方法に関する記事についてはhttp://www.webaim.orgを参照して

PCでは、スクリーンリーダーとブラウザの最適な組み合わせは、最新の安定バージョンであるNVDAとFirefoxになります。 これは、NVDAがアクセシビリティAPIに最も依存するスクリーンリーダーであり、FirefoxがアクセシビリティAPIの最も純粋な実装を公開するPCブラウザであるためです。 それはその説明の不足です。

NVDAをダウンロードして設定するには、 http：//www.nvda-project.orgを参照して

セットアップが完了したら、最も簡単に使用できるように、[キーボード]ダイアログに移動してラップトップのレイアウトを設定し、[参照モード]ダイアログに移動して[画面レイアウトを使用する]チェックボックスをオフにします。

すべての面倒を見ると、目の見える人としてテストを行うためにNVDAの話を聞く必要がなくなります。 起動し、NVDAを開き、[ツール]、[音声ビューア]の順に選択します。 そのウィンドウをパークして、ウィンドウ内のテキストとブラウザのコンテンツを表示できるようにします。 必要に応じてウィンドウのサイズを変更し、Webにアクセスするときに、ほとんどの場合、上下の矢印キーを使用して、メモ帳のドキュメントを矢印で囲んでいるかのように1行ずつ読み取ります。 スピーチビューアウィンドウを注意深く見ると、そこでテキストが更新されます。 スピーチビューアのテキストは、NVDAが話している場合に言う内容と一致します。

正直なところ、あなたはまだ何が起こるべきかわからないので、この知識のすべてはまだ興味深いだけですが、あなたには役に立ちません。それで、私がここで学んだアクセシビリティ修正をテストしたいと思います。

もちろん、これは利己的な理由によるものです。私はFCCを完全に通過する最初の視覚障害者になりたいので、その知識を使用して他の視覚障害者のアクセシビリティを支援し、より多くの視覚障害者がWeb開発者になることを確認したいと思います。 、およびあらゆる種類の障害を持つ人々を支援します。 そして、誰が知っているか、私はより良い仕事を得たり、私の日常の仕事の外でお金を稼ぐかもしれません。

@jhommeご使用のスクリーンリーダーの詳細をありがとうございます。

FireFoxでFangsを使用し、次のURLにアクセスする場合： https ：

スクリーンリーダーの出力は次のとおりです。

ページには1つのフレーム、4つの見出し、25のリンクがあります。段落要素の垂直バーで通知します。freeCodeCampダッシュインターネットExplorerLinkGraphiclearnでjavascriptをfreeCodeCampロゴでコーディングします。 Webサイトの通常のダッシュサイズの段落テキストに適した要素。 Pはquoteparagraphquoteの略です。 このコロンのようなap要素を作成できます。私はapタグです。 less slash p great htwo要素の下にap要素を作成し、テキスト引用符Hello Paragraphquoteを付けます。 テストを実行します左のparenctrlと右のparenを入力しますcodeLinkをリセットしますヒントを取得しますforumLinkでヘルプを求めますサインインして進行状況を保存できるようにしますap要素を作成します。 p要素には、テキスト引用符Hello Paragraphquoteが必要です。 p要素に終了タグがあることを確認してください。 EditEdit 4 1 2 less hone great Hello World less slash hone great 3 less htwo great CatPhotoApp less slash htwo great 4 Heading level 1 Hello WorldHeading level 2 CatPhotoAppLinkLinkLink

これを正しく理解している場合、これはスクリーンリーダーによってレンダリングされたコードエディターの内容です。

1 2少ない研ぎ澄まされたHelloWorld少ないスラッシュ磨き上げられた3少ないhtwo大きいCatPhotoApp少ないスラッシュhtwo大きい4

したがって、これはFangsスクリーンリーダーの問題ではないようです。 4つのスクリーンリーダーすべてでこれを経験していますか、それとも一部だけでこれを経験していますか？

ちなみに、freeCodeCampを最後までやり通した最初の盲人になるというあなたの野心を称賛します！ 私たちはあなたがその目標を実現するのを助けるためにできることをします。

こんにちはクインシー、

私はこれをPCのJAWSとNVDA、Macのナレーションで経験しています。 iOSのVoiceOverではこれは発生していません。 理由がわかりません。 これまでのところ、他のスクリーンリーダーは試していません。 ナレーターとTalkbBackを試すことができました。

2017年8月23日には、12：01 AMで、クインシーラーソン[email protected]は書きました：

@jhommeご使用のスクリーンリーダーの詳細をありがとうございます。

FireFoxでFangsを使用し、次のURLにアクセスする場合： https ：

スクリーンリーダーの出力は次のとおりです。

ページには1つのフレーム、4つの見出し、25のリンクがあります。段落要素の垂直バーで通知します。freeCodeCampダッシュインターネットExplorerLinkGraphiclearnでjavascriptをfreeCodeCampロゴでコーディングします。 Webサイトの通常のダッシュサイズの段落テキストに適した要素。 Pはquoteparagraphquoteの略です。 このコロンのようなap要素を作成できます。私はapタグです。 less slash p great htwo要素の下にap要素を作成し、テキスト引用符Hello Paragraphquoteを付けます。 テストを実行します左のparenctrlと右のparenを入力しますcodeLinkをリセットしますヒントを取得しますforumLinkでヘルプを求めますサインインして進行状況を保存できるようにしますap要素を作成します。 p要素には、テキスト引用符Hello Paragraphquoteが必要です。 p要素に終了タグがあることを確認してください。 EditEdit 4 1 2 less hone great Hello World less slash hone great 3 less htwo great CatPhotoApp less slash htwo great 4 Heading level 1 Hello WorldHeading level 2 CatPhotoAppLinkLinkLink

これを正しく理解している場合、これはスクリーンリーダーによってレンダリングされたコードエディターの内容です。

1 2少ない研ぎ澄まされたHelloWorld少ないスラッシュ磨き上げられた3少ないhtwo大きいCatPhotoApp少ないスラッシュhtwo大きい4

したがって、これはFangsスクリーンリーダーの問題ではないようです。 4つのスクリーンリーダーすべてでこれを経験していますか、それとも一部だけでこれを経験していますか？

ちなみに、freeCodeCampを最後までやり通した最初の盲人になるというあなたの野心を称賛します！ 私たちはあなたがその目標を実現するのを助けるためにできることをします。

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信するか、GitHubで表示するか、スレッドをミュートしてください。

@jhommeどういうわけか、あなたが直面していることを説明するコメントが見つかりません。 役員、問題は何だと思われますか？

こんにちはフロリアン、
ナビゲートまたは入力しようとすると、さまざまなスクリーンイーダーが話しません
サイトのエディターで。 彼らはただ単語を空白と言います。 彼らは話します、
ただし、テキストを選択する場合。

ジム

2017年8月23日、FlorianBeijersの[email protected]は次のように書いています。

@jhommeどういうわけか、あなたがそれを説明しているコメントが見つかりません
あなたは遭遇していますか？ 役員、問題は何だと思われますか？

-
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信するか、GitHubで表示してください。
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment -324309958

-

ジムオム
http://www.jimhommewebdev.com
Twitter：@jimhomme
Facebook： http ：
LinkedIn： https ：

ああ、それはまだ問題のようです。 このスレッドでわかるように、CodeMirrorにアクセスできないことが関係しています。 今のところそれを回避する最も簡単な方法は、必要に応じてコードをコピーしてNotePad ++やEdSharpなどのエディターに貼り付け、編集を行ってからfccエディターに貼り付けることです。 面倒ですが、うまくいくと思います:)

完全にアクセス可能なオープンソースのHTMLコードエディタを見つけました。 現在のものをこれに置き換えることができますか？ https://pode.herokuapp.com/ CodePenの課題については、CodePenにアクセスできないため、支援技術のユーザーが代わりにこのWebサイトを使用するための代替手順がありますか？

こんにちは、
以下の投稿とそれにつながる投稿をご覧ください。 CodePenは実行可能であり、改善されています。 建設的なフィードバックがあれば、彼らはより良くなるでしょう。

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

2017年12月27日には、17:17で、inscriptioelectronicaaustralia [email protected]書きました：

完全にアクセス可能なオープンソースのHTMLコードエディタを見つけました。 現在のものをこれに置き換えることができますか？ https://pode.herokuapp.com/ CodePenの課題については、CodePenにアクセスできないため、支援技術のユーザーが代わりにこのWebサイトを使用するための代替手順がありますか？

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信するか、GitHubで表示するか、スレッドをミュートしてください。

@zersiaxチャイムをしてくれてありがとう。これはCodeMirrorのアクセシビリティの問題だと聞いてうれしいですが、それはパッチを当てる方法を見つける必要があることを意味します。

@inscriptioelectronicaaustralia間もなく、freeCodeCampでのプロジェクトの構築をサポートする予定なので、CodePenの比較的アクセスしにくいインターフェイスはそれほど問題にはなりません。 貢献できる可能性のあるオープンソースライブラリであるCodeMirrorの問題を修正する必要があります。

クインシー、プロジェクトがまもなくFree CodeCampで構築できるようになるのは良いことです。

これに関連するCodeMirror GitHubスレッドを見たところ、スクリーンリーダーでこれを機能させるのは大変な作業だと彼らは考えているので、このスレッドに貢献している人や問題を解決できる人が問題を解決できるかどうかは、私たちだけでなく、コードミラーを使用する他のWebサイトにとってもWin-Winの状況です。

仮定的に状況を見ると、コードミラーの代わりとして実装された場合にFree Code Campに影響を与える、上記で参照したPodeツールから欠落している機能がたくさんありますか？

こんにちは、
これを調査している人々に私の心からの感謝を表明します。 私は今、実際にJavaScriptを完成させる方向に進んでおり、人々、特にFreeCodeCampに役立つ実際のコードを書くことができるのを待ちきれません。

ジム

差出人：inscriptioelectronicaaustralia [mailto：[email protected]]
送信日：2017年12月28日木曜日2:08 AM
宛先：freeCodeCamp / freeCodeCamp [email protected]
Cc：ジムオム[email protected] ; 言及@ noreply.github.com
件名：Re：[freeCodeCamp / freeCodeCamp]エディターの内容をスクリーンリーダーで確認できません（＃12431）

クインシー、プロジェクトがまもなくFree CodeCampで構築できるようになるのは良いことです。

これに関連するCodeMirror GitHubスレッドを見たところ、スクリーンリーダーでこれを機能させるのは大変な作業だと彼らは考えているので、このスレッドに貢献している人や問題を解決できる人が問題を解決できるかどうかは、私たちだけでなく、コードミラーを使用する他のWebサイトにとってもWin-Winの状況です。

仮定的に状況を見ると、コードミラーの代わりとして実装された場合にFree Code Campに影響を与える、上記で参照したPodeツールから欠落している機能がたくさんありますか？

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信するか、GitHub https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-354240665で表示するか、スレッドhttps://github.com/notifications/unsubscribe-auth/AdDz24NBYQr6hKSp_HsEnOryzgzIkA24ks5tEz5

@inscriptioelectronicaaustralia CodeMirrorは、

CodeMirrorにパッチを適用することが最も効果的であることに同意しますが、問題を解決する方法としては、ある程度現実的である必要があります。
この問題は今年中ずっと存在していて、数週間前のバーです。私はこの問題について少なくとも2年間、場合によっては3年間、泣き言を言ってきました。 そしてそれは確かに問題です。 FCCを再試行することを決定するたびに、これらの問題を回避しなければならないというまったくの煩わしさに気が進まなくなります。 コーディングの容易さ、低いエントリしきい値、およびコーディングとブラウザでのライブプレビューの更新の表示の単純さは、現在スクリーンリーダーを使用しているユーザーには当てはまりません。これが、freecodecampを効果的にする多くの理由です。魅力的です。
CodeMirrorは、主にパフォーマンスの高い方法でコードをグラフィカルにレンダリングすることに重点を置き、従来の標準のDOM操作をほぼ完全に放棄することで、足を踏み入れました。 周りを見渡せば、WordPressでさえこの問題に苦しんでおり、これを回避する適切な方法をまだ見つけていません。 実際、WPのデフォルトのWordPressエディターとしてcodeMirrorを実装することはできません。そのエディターが実際にデフォルトとして実装されている場合は、視覚障害のあるWordPress管理者のオプトアウトを実装して、それらのユーザーの管理エクスペリエンスを完全に壊さないようにする必要があります。 CodeMirrorがすぐに修正される可能性はほとんどありません。
Podeをざっと見てみると、主にHTMLのエディターのようで、残念ながらCodeMirrorの機能に近づいていないので、残念ながら実現可能ではないと思います。
この問題に対する簡単な解決策はありません。この問題を見ると、パッチ適用はあまり良い考えではありません： https ：
私が考えることができる唯一の一時的な対策は、CMコンテンツを通常のテキスト領域にレンダリングし、そのテキスト領域に加えられた編集をCMに反映する方法を用意することです。おそらく、タブのキーダウンが検出されたとき、またはctrl + enterがコードを実行するためのpreseed。 CodeMirrorが修正されるか（上記の問題を見ると不確かですが、実績がない可能性があります）、または別の同様の機能を備えたエディターのために破棄されるまで、急な通知でできることはこれ以上ないと思います。

クインシー、私はCodeMirrorが明らかに優れたソリューションであることを理解しています（Podeは初心者向けであるため、非常にシンプルに作られていると思います）。可能であれば、アクセスできるようにするのが理想的です。 Podeに欠けている機能を尋ねた理由は、CodeMirror編集フィールドのテキストがスクリーンリーダーで読み取れるようになったら、CodeMirrorがコーディングを支援するために他の視覚的機能を使用する場合、可能であればこれらも最終的にアクセス可能にする必要があるためです。
この問題に取り組む他の方法を考えていましたが、誰かがJAWS for Windowsスクリーンリーダー用のスクリプトを作成したり、可能であれば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の開発者の考えだと言っているわけではありませんが、これは非常に不安な世界的な傾向です。 人々が「数ヶ月」と言う例を見てきましたが、それはさらに数ヶ月になります...そしてさらに数ヶ月...そしてあなたは写真を手に入れると思います。
コードエディタをそのまま使用することも可能ですので、数ヶ月待つのが一番いいと思いますが、6月になって何も変わらないのであれば、別の解決策を検討する価値があるかもしれません。 他の人はどう思いますか？

人々が「数ヶ月」と言う例を見てきましたが、それはさらに数ヶ月になります...そしてさらに数ヶ月...

新しいアプローチの作業が_開始_されることを除いて、数か月以内に何も約束しませんでした。これは間違いなく構築に時間がかかります。

こんにちは@marijnh

CodeMirrorの再構築を検討していただき、ありがとうございます。すべてがオープンソースの取り組みであるという取り組みを心から理解しています。

私たち自身が非営利団体であるため、この取り組みでコミュニティ開発者からのコーディング支援（無料奉仕）が必要な場合は、できる限りの方法でこの取り組みを支援します。

CMプロジェクト（およびその貢献者）に関する戦闘でテストされた知識は非常に貴重であるため、CodeMirrorリポジトリにログオンした問題の詳細についてご案内いただければ、この取り組みを支援することに専念しています。

こんにちは@inscriptioelectronicaaustralia

...しかし、6月になって何も変わっていない場合は、別の解決策を検討することを検討する価値があります。

私たちはフラストレーションを心から理解し、共有し、可能な解決策に全力を注ぐ準備ができていますが、CMがa11yでより良くなるのを助けるIMHOは良いことです。

freeCodeCampコミュニティを支援するだけでなく、CMが使用されている場所ならどこでも、他の場所でもa11yの利益を高めるために、これは十分に費やされた努力だと思います。

そうは言っても、

上記の@zersiax分析は、コードベースの現在の状態を目的として正しいものです。

Podeをざっと見てみると、主にHTMLのエディターのようで、残念ながらCodeMirrorの機能に近づいていないので、残念ながら実現可能ではないと思います。

私が考えることができる唯一の一時的な対策は、CMコンテンツを通常のテキスト領域にレンダリングし、そのテキスト領域に加えられた編集をCMに反映する方法を用意することです。おそらく、タブのキーダウンが検出されたとき、またはctrl + enterがコードを実行するためのpreseed。 CodeMirrorが修正されるか（上記の問題を見ると不確かですが、実績がない可能性があります）、または別の同様の機能を備えたエディターのために破棄されるまで、急な通知でできることはこれ以上ないと思います。

暫定的なソリューションの実装を検討する必要がありますが、CMチームに具体的な支援を提供する方法を確認します。

コーディング支援が必要な場合

最も有用なタイプの貢献は、スクリーンリーダーのユーザーやコミュニティのアクセシビリティの専門家が、新しいプロトタイプを入手したら、それをテストして、問題を早期に発見して対処できるようにすることです。 何か見せたいことがあればお知らせします。通知を確実に受け取りたい場合は、連絡先データを記載したメールを送ってください。

@svinkleこのa11yの問題についてご

ストップギャップは、 content-editable問題がアップストリームで解決されるまで機能する可能性のあるものを提案していますか？

私が考えることができる唯一の一時的な対策は、CMコンテンツを通常のテキスト領域にレンダリングし、そのテキスト領域に加えられた編集をCMに反映する方法を用意することです。おそらく、タブのキーダウンが検出されたとき、またはctrl + enterがコードを実行するためのpreseed。 CodeMirrorが修正されるか（上記の問題を見ると不確かですが、実績がない可能性があります）、または別の同様の機能を備えたエディターのために破棄されるまで、急な通知でできることはこれ以上ないと思います。

このアプローチを正しく理解していれば、CMエディターのコンテンツはtextarea読み込まれ、 textareaはコンテンツの編集に使用されます。 次に、更新/保存時に、 textareaコンテンツがCMエディターに反映されます。

CMエディターは非表示になりますか？ 表示できるのはtextareaだけだと思います。そうしないと、2つの編集領域があると混乱します。

こんにちは@QuincyLarsonと関係者全員、

解決策を見つける際のフィードバックと考慮事項に感謝します。

別のテキスト領域でモンキーパッチを適用する前に、 CMに関する別のトピックについて@BerkeleyTrueとの話し合いでた、もう1つの考慮事項があります。 😓

ベータ版（新しいreactフロントエンド）では、CodeMirrorに直接依存していませんが、CMの上部にある軽量ラッパーであるreactコンポーネントreact-codemirror依存しています。 これは、ベータプラットフォームで動作するために必要なためです。

将来的には別のコンポーネントに更新する必要があるかもしれませんが、議論されているこれらのコンポーネントのいずれも、機能をラップする親CMと同じa11yサポートを持っていません。

したがって、モンキーパッチは簡単ではないかもしれません。

@raisedadeadこれを指摘してくれてありがとう。 CodeMirrorがアクセシビリティの更新を行うのを待ってから、そこからモンキーパッチのプロセスを評価します。

学習プラットフォームでMonacoエディターに切り替えたことをお知らせします。 a11yが組み込まれています。

私たちは絶対にCodeMirrorあなたとチームが行っていることを素晴らしい仕事のため@marijnhのおかげで大好きです。 それはこれらすべての年の間事実上の編集者でした。 とても軽くてシンプルなので、今後のプロジェクトでも使いたいと思っています。

@ zersiax 、 @ mjanusauskas 、 @ inscriptioelectronicaaustralia 、そしてプラットフォームにアクセスしやすくしてくれたEveryoneに感謝します。