cc @ FreeCodeCamp / 중재자

이 문제를 제기 해 주셔서 감사합니다. 웹 사이트에 더 쉽게 접근 할 수 있도록하고 스크린 리더를 지원하는 것이 중요한 부분입니다.

구현에 대한 제안을 커뮤니티에 공개합니다.

NVDA 스크린 리더 리드 개발자의 의견 :

2017 년 8 월 8 일 오후 5시 11 분에 mrugesh mohapatra는 다음과 같이 썼습니다.
>

이 문제를 제기 해주셔서 감사합니다.
웹 사이트의 접근성을 높이고 스크린 리더를 지원하는 것은
이것의 중요한 부분.

구현에 대한 제안을 커뮤니티에 공개합니다.

—
스레드를 작성했기 때문에 수신 한 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271187374 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/APDp4ufBLExQL0QJK2q17hvMavLGwSBwks5rQW0kgaJpZM4LdzaT .

NVDA 스크린 리더 리드 개발자의 의견 :

이는 사용중인 코드 편집기의 접근성 문제 때문입니다.
이 코드 편집기는 비표준 방식으로 콘텐츠를 그리기로 선택합니다.
HTML contentEditable을 사용하지 않고
편집 가능한 콘텐츠). 안타깝게도 Google에서 지원할 수있는 방법이 없습니다.
이; 편집기에서 문제를 수정해야합니다.
—

2017 년 8 월 8 일 오후 5시 11 분에 mrugesh mohapatra는 다음과 같이 썼습니다.
>

이 문제를 제기 해주셔서 감사합니다.
웹 사이트의 접근성을 높이고 스크린 리더를 지원하는 것은
이것의 중요한 부분.

구현에 대한 제안을 커뮤니티에 공개합니다.

—
스레드를 작성했기 때문에 수신 한 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271187374 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/APDp4ufBLExQL0QJK2q17hvMavLGwSBwks5rQW0kgaJpZM4LdzaT .

@mjanusauskas 안녕하세요 Mathew! 문제 보고서를 제기하기위한 오픈 소스 인 경우 저장소를 알려주시겠습니까?

액세스 할 수없는 편집기가 정확히 어떤 것인지 잘 모르겠습니다.

2017 년 1 월 9 일 오전 12:49에 mrugesh mohapatra가 다음과 같이 썼습니다.
>

@mjanusauskas https://github.com/mjanusauskas 안녕하세요 Mathew! 마음
이것이 문제 보고서를 제기하기위한 오픈 소스 인 경우 저장소를 알려주시겠습니까?

—
당신이 언급 되었기 때문에 이것을 받고 있습니다.
이 이메일에 직접 답장하고 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 수석 개발자가 공유 한 이전 의견은
나는 그들의 저장소에서 열었던 문제. 그들의 입장은 아무것도 없다는 것입니다
비표준 접근 방식으로 인해 스크린 리더에서 수행 할 수있는
사용 중이며 접근성 문제는 편집기에서 해결해야합니다.

2017 년 1 월 9 일 오후 12:18에 mrugesh mohapatra는 다음과 같이 썼습니다.
>

알겠습니다. CodeMirror와 관련된 리포지토리에 문제가 없습니다.
구체적으로 특별히. 두 가지 모두에서 문제를 시작해야합니다.
repos, 이것에 대한 도움을 찾고 있습니까?

/ 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

할 수있는 일에 감사드립니다. 나는 할 수 있고 싶다
접근성 문제가 발생하면 Free Code Camp에 참여
해결되었습니다.

2017 년 1 월 9 일 오후 12:41에 mrugesh mohapatra는 다음과 같이 썼습니다.
>

문제 번호, 링크 등으로 우리를 도울 수 있습니까? 우리는 이해하고 싶습니다.
무엇을 구현해야합니까? 명확한 기술적 아이디어없이
잘못된 것입니다. 편집자에서 설득하기 어려울 것입니다.
수정을 위해 편집기의 관리자.

죄송하지만 추가 정보가 없으면 진행하기가 어렵습니다.
가능한 한 많은 접근성을 지원하고 싶습니다.

—
당신이 언급 되었기 때문에 이것을 받고 있습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12431#issuecomment-271367297 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/APDp4rtyeVvew2edXgWaxr1eICnDpdKxks5rQn9wgaJpZM4LdzaT .

일부 인터넷 검색으로 인해 http://bgrins.github.io/codemirror-accessible/
볼만한 가치가있을 수 있습니다.

어떤 편집기를 사용하고 있는지, 도움이되는지 잘 모르겠지만
html 및 css 과정과 코드 테스트 사용 경험
www.w3schools.com 은 스크린 리더 사용자로서 상당히 액세스 할 수있었습니다.

2017 년 1 월 9 일 오후 12:55에 Dylan은 다음과 같이 썼습니다.
>

일부 인터넷 검색으로 인해 다음이 발생했습니다.
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 감사합니다, 매튜.

우리는 우선 순위와 최선의 능력에 대해 조사하고 있습니다 ... 약간 지연 될 수 있지만 가능한 한 빨리 수정하려고 노력할 것입니다 ... 그동안 위키를 확인하는 것을 환영합니다 https://forum.freecodecamp.com 의 포럼 기사와 비디오 시리즈를 통해 학습을 계속할 수 있습니다.

/ cc @QuincyLarson

방금 @dhcodes가 연결된 CodeMirror Accessible 데모를 시도했습니다. 아마도 저 성능이라고 생각하지만 그들이 거기에로드 한 ~ 10k 줄 JavaScript 파일로 작업 할 때 속도 저하를 느끼지 못했습니다. 하나의 CodeMirror 텍스트 영역에서 상상할 수있는 가장 큰 프로젝트는 약 1,000 줄이 될 것이므로 속도 저하가 그렇게 나쁘다고 생각하지 않습니다.

이것은 내가 데스크탑에 있다고 말했습니다.

CodeMirror Accessible의 사용을 토글하는 설정에 버튼이 있는지 확인해야할까요?

CC @BerkeleyTrue @zersiax

이런 종류의 물건이 어떻게 완전히 만들어 질 수 있는지에 대한 아주 좋은 예
액세스 할 수 있습니다.
https://teachaccess.github.io/tutorial/#/3

2017 년 1 월 9 일 월요일 오후 1:58, Quincy Larson [email protected]
썼다 :

방금 @dhcodes CodeMirror Accessible 데모를 시도했습니다.
https://github.com/dhcodes 링크 됨. 아마도 그것은
낮은 성능, 작업 할 때 속도 저하를 느끼지 못했지만
그들이 거기에로드 한 ~ 10k 줄 JavaScript 파일. 가장 큰
하나의 CodeMirror 텍스트 영역에 있다고 상상할 수있는 프로젝트는
아마 1,000 줄 정도 될 것입니다. 그래서 속도 저하가 그렇게 나쁘다고 생각하지 않습니다.

이것은 내가 데스크탑에 있다고 말했습니다.

설정에 버튼이 있는지 확인해야합니다.
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 년 2 월 2 일 오후 4:19에 Florian Beijers는 다음과 같이 썼습니다.
>

나는 그 자원을 좋아한다. 그것은 작동하는 예를 보여준다.
내부에서 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에서 작업하는 동안 만난 다른 것은 CodeMirror의 inputStyle 옵션 입니다. 이를 통해 에디터가 contentEditable을 사용하도록 전환 할 수 있습니다.
contentEditable에 대한 브라우저 지원 이 문제가되어서는 안된다고 생각했지만 그들의 담론에서이 댓글을 찾았습니다. 그들은 그것이 모바일에서 기본값이라고 말하고 있지만 우리에게는 잘 작동하고 있습니다. 나는 우리가이 옵션을 사용해도 좋다고 생각한다 (그들은 지금까지 2 년 동안 사용하고있다).
빠른 테스트에서 확인할 수 있었던 유일한 차이점은 구문 강조 표시에 따라 커서의 색상이 변경된다는 것입니다.
나는 전문 스크린 리더 사용자는 아니지만 NVDA에서 잘 작동한다고 말할 수 있습니다.

PR로 제출해야합니까?

@mjanusauskas @zersiax 내가 테스트해야 할 것에 대한 팁이 있습니까? QA에 도움을 주시겠습니까?

누군가 이것이 어떻게 작동해야하는지에 대한 또 다른 예가 필요하다면 나는 이와 같은 시스템에서 원하는 많은 것을 수행하는 온라인 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, 내가 생각했던 것보다 조금 더 복잡했습니다.
그래도 내가 엉망이 된 것 같습니다. 😅 문제가 발생하면 언제든지 저에게 메시지를 보내주십시오.

정보 주셔서 감사합니다. GitHub 페이지를
가능한 대안.

2017 년 1 월 24 일 오후 11:12에 Eric Leung은 다음과 같이 썼습니다.
>

@mjanusauskas https://github.com/mjanusauskas 우리는 Codepen을 제안합니다.
통합 된 텍스트 편집기 및 빠른 렌더링. 그러나 나는 생각하지 않는다
Codepen으로 제한합니다. 프로젝트를 완료하기 위해 필요한 모든 것
submit은 프로젝트를 시작하고 실행하는 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
내가 말할 수있는 것은 모든 콘텐츠를
텍스트 영역.

작업하는 동안 만난 다른 것 # 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 저장소 이슈 트래커에. 우리가 만든 또 다른 사용자 지정 변경
CodeMirror 포크에는 스크린 리더와 키보드가 포함되어 있습니다.
TAB 순서로 편집기 앞에 오는 사용자 별 지침. 그만큼
사용자는 ESC 키를 두 번 누른 다음 TAB을 누를 수 있음을 알아야합니다.
편집기 밖으로 초점을 이동합니다. 이것은 코드에서 필요하기 때문에
사용자가 TAB 시퀀스를 삽입하는 것은 매우 일반적입니다.
TAB 키가하는 일인 현재 키보드 포커스를 이동하지 않습니다.
기본적으로.

2017 년 1 월 31 일 오후 4:01에 Florian Beijers는 다음과 같이 썼습니다.

얼마나 걸릴까요? .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:01에 Florian Beijers는 다음과 같이 썼습니다.

얼마나 걸릴까요? .sr 전용 클래스를
해당 텍스트를 포함하는 범위이지만 너무 오래두면
누군가 어딘가에 그것을 잊어 버리고 그냥 앉아있을 것입니다
여러분이 실제로 그 메시지를 보지 못하기 때문에 거기에 :)

—
당신이 언급 되었기 때문에 이것을 받고 있습니다.
이 이메일에 직접 답장하고 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에서 보냄 _

안녕하세요,
이제 사이트를 로컬로 설정 했으므로이 지침을 따를 수 있다고 생각합니다. 이 저장소를 내 저장소와 동기화하는 방법을 알려주는 부분을 따라야한다고 확신합니다. 이 올바른지? 그리고 내가 뭔가 잘못하면 어떻게 되돌릴 지 모르겠습니다. 조금 불안합니다. :)

이것이 실제 주요 문제임을 확인했습니다. 4 개의 스크린 리더가 있기 때문에 지침에 따라 내 컴퓨터에서 가져올 수 있다고 가정하면 기꺼이 테스트 할 수 있습니다.

스크린 리더를 구하는 데 관심이있는 경우 학습 곡선을 줄이려면 아래를 참조하십시오. 그리고 이것은 어떤 식 으로든 불쾌감을주는 것이 아닙니다.하지만 사이트를 가진 누군가는 첫 번째 시도에서 또는 그 이후에도 화면 판독기를 빨리 사용하지 않을 것입니다. 왜냐하면 개념이 너무 낯설 기 때문입니다. 색상 이외의 문제와 관련된 모든 접근성 문제를 테스트 해 드리겠습니다. 저를 언급하거나 이메일을 보내주세요. 메시지가 보이면 시간을 내겠습니다.

색 대비에 대해서는 Color Contrast Analyzer라는 도구를 찾고 사용 방법에 대한 기사는 http://www.webaim.org 를 참조

PC에서 최고의 스크린 리더와 브라우저 조합은 최신 안정 버전 인 NVDA와 Firefox가 될 것입니다. NVDA는 접근성 API에 가장 많이 의존하는 스크린 리더이고 Firefox는 접근성 API의 가장 순수한 구현을 노출하는 PC 브라우저이기 때문입니다. 그것은 ecxplanation의 부족입니다.

NVDA를 다운로드하고 설정하려면 http://www.nvda-project.org 를 참조

설정이 완료되면 가장 쉽게 사용할 수 있도록 키보드 대화 상자로 이동하여 랩톱 레이아웃을 설정 한 다음 탐색 모드 대화 상자로 이동하여 "화면 레이아웃 사용"확인란을 끕니다.

모든 것을 처리 한 후에는 시력이 좋은 사람으로 테스트를 수행하기 위해 더 이상 NVDA의 말을들을 필요가 없습니다. 시작하고 NVDA를 열고 도구, 음성 뷰어를 차례로 선택합니다. 그 창에있는 텍스트와 브라우저의 내용을 볼 수 있도록 그 창을 주차하십시오. 원하는대로 창 크기를 조정 한 다음 웹으로 이동할 때 대부분 위쪽 및 아래쪽 화살표 키를 사용하여 메모장 문서를 화살표로 표시하는 것처럼 한 줄씩 읽습니다. 음성 뷰어 창을주의 깊게 살펴보면 텍스트 업데이트가 표시됩니다. 음성 뷰어의 텍스트는 NVDA가 말하는 내용과 일치합니다.

이 모든 지식은 여전히 ​​흥미로울 뿐이지 만 도움이되지는 않습니다. 솔직히 어떤 일이 발생해야하는지 아직 모르기 때문에 여기서 배운 접근성 수정 사항을 테스트 해 드리겠습니다.

물론 이것은 이기적인 이유입니다. 왜냐하면 저는 FCC를 통과하는 최초의 맹인이되고 싶기 때문입니다. 그런 다음 그 지식을 사용하여 다른 맹인 중개자를위한 접근성을 지원하고 더 많은 사람들이 웹 개발자가되는 것을보고 싶습니다. , 모든 유형의 장애를 가진 사람들을 돕습니다. 그리고 누가 알겠습니까? 더 나은 직업을 얻거나 직장 밖에서 돈을 벌 수도 있습니다.

@jhomme 사용하는 스크린 리더에 대해 자세히

FireFox에서 Fangs를 사용하고 다음 URL을 방문 할 때 : https://www.freecodecamp.org/challenges/inform-with-the-paragraph-element

화면 판독기 출력은 다음과 같습니다.

페이지에는 프레임 1 개, 제목 4 개 및 링크 25 개가 있습니다. 단락 요소로 알림 세로 막대 freeCodeCamp 대시 Internet ExplorerLinkGraphicfreeCodeCamp에서 자바 스크립트 코딩 배우기 logo7 개 항목 목록 bulletLink MapbulletbulletLink ForumbulletLink ContributebulletLink AboutbulletLink DonatebulletLink Sign inList endHeading level 4 Inform with the Paragraph Element p 요소는 다음과 같습니다. 웹 사이트의 일반 대시 크기 단락 텍스트에 선호되는 요소입니다. P는 인용 단락 인용의 약자입니다. 이 콜론 덜 p 더 큰 I 'm ap 태그와 같은 ap 요소를 만들 수 있습니다! 덜 슬래시 p 더 크게 htwo 요소 아래에 ap 요소를 만들고 텍스트 인용문 Hello Paragraph quote를 제공하십시오. 테스트 실행 왼쪽 괄호 ctrl + 오른쪽 괄호 입력 코드 재설정 Link 힌트 받기 forumLink에서 도움 요청 진행 상황을 저장할 수 있도록 로그인 ap 요소 만들기. p 요소에는 텍스트 quote Hello Paragraph quote가 있어야합니다. p 요소에 닫는 태그가 있는지 확인하십시오. EditEdit four 1 2 덜 연마 됨 더 크게 Hello World 덜 슬래시 hone 더 크게 3 덜 htwo 더 크게 CatPhotoApp 덜 슬래시 htwo 더 크게 4 제목 수준 1 Hello WorldHeading 수준 2 CatPhotoAppLinkLinkLink

이 내용을 올바르게 이해하고 있다면 화면 판독기가 렌더링 한 코드 편집기의 내용입니다.

1 2 덜 연마 됨 더 크게 Hello World 덜 슬래시 숫돌 더 크게 3 덜 htwo 더 크게 CatPhotoApp 덜 슬래시 htwo 더 크게 4

따라서 이것은 Fangs 스크린 리더에게는 문제가되지 않는 것 같습니다. 4 개의 스크린 리더 모두에서이 문제를 경험하고 있습니까? 아니면 그중 일부에서만 경험하고 있습니까?

그건 그렇고, 나는 freeCodeCamp를 통해 모든 길을 갈 첫 번째 시각 장애인이 되려는 당신의 야망에 박수를 보냅니다! 우리는 당신이 그 목표를 실현할 수 있도록 우리가 할 수있는 일을 할 것입니다.

안녕 퀸시,

PC의 JAWS 및 NVDA, Mac의 음성 해설에서 이것을 경험하고 있습니다. IOS의 VoiceOver에서이 문제가 발생하지 않습니다. 이유를 모르겠습니다. 지금까지 다른 스크린 리더를 사용해 본 적이 없습니다. 내레이터와 TalkbBack을 사용해 볼 수 있습니다.

2017 년 8 월 23 일 오전 12시 1 분에 Quincy Larson [email protected]이 다음과 같이 썼습니다.

@jhomme 사용하는 스크린 리더에 대해 자세히

FireFox에서 Fangs를 사용하고 다음 URL을 방문 할 때 : https://www.freecodecamp.org/challenges/inform-with-the-paragraph-element

화면 판독기 출력은 다음과 같습니다.

페이지에는 프레임 1 개, 제목 4 개 및 링크 25 개가 있습니다. 단락 요소로 알림 세로 막대 freeCodeCamp 대시 Internet ExplorerLinkGraphicfreeCodeCamp에서 자바 스크립트 코딩 배우기 logo7 개 항목 목록 bulletLink MapbulletbulletLink ForumbulletLink ContributebulletLink AboutbulletLink DonatebulletLink Sign inList endHeading level 4 Inform with the Paragraph Element p 요소는 다음과 같습니다. 웹 사이트의 일반 대시 크기 단락 텍스트에 선호되는 요소입니다. P는 인용 단락 인용의 약자입니다. 이 콜론 덜 p 더 큰 I 'm ap 태그와 같은 ap 요소를 만들 수 있습니다! 덜 슬래시 p 더 크게 htwo 요소 아래에 ap 요소를 만들고 텍스트 인용문 Hello Paragraph quote를 제공하십시오. 테스트 실행 왼쪽 괄호 ctrl + 오른쪽 괄호 입력 코드 재설정 Link 힌트 받기 forumLink에서 도움 요청 진행 상황을 저장할 수 있도록 로그인 ap 요소 만들기. p 요소에는 텍스트 quote Hello Paragraph quote가 있어야합니다. p 요소에 닫는 태그가 있는지 확인하십시오. EditEdit four 1 2 덜 연마 됨 더 크게 Hello World 덜 슬래시 hone 더 크게 3 덜 htwo 더 크게 CatPhotoApp 덜 슬래시 htwo 더 크게 4 제목 수준 1 Hello WorldHeading 수준 2 CatPhotoAppLinkLinkLink

이 내용을 올바르게 이해하고 있다면 화면 판독기가 렌더링 한 코드 편집기의 내용입니다.

1 2 덜 연마 됨 더 크게 Hello World 덜 슬래시 숫돌 더 크게 3 덜 htwo 더 크게 CatPhotoApp 덜 슬래시 htwo 더 크게 4

따라서 이것은 Fangs 스크린 리더에게는 문제가되지 않는 것 같습니다. 4 개의 스크린 리더 모두에서이 문제를 경험하고 있습니까? 아니면 그중 일부에서만 경험하고 있습니까?

그건 그렇고, 나는 freeCodeCamp를 통해 모든 길을 갈 첫 번째 시각 장애인이 되려는 당신의 야망에 박수를 보냅니다! 우리는 당신이 그 목표를 실현할 수 있도록 우리가 할 수있는 일을 할 것입니다.

—
당신이 언급 되었기 때문에 이것을 받고 있습니다.
이 이메일에 직접 답장하거나 GitHub에서 보거나 스레드를 음소거하십시오.

@jhomme 어떤 이유로 당신이 만나는 것이 무엇인지 설명하는 주석을 찾을 수 없습니다. 장교가 뭐가 문제 야?

안녕하세요 Florian,
다양한 화면 리더가 탐색이나 입력을 시도 할 때 말하지 않습니다.
사이트의 편집기에서. 그들은 단지 공백이라는 단어를 말합니다. 그들은 말합니다.
하지만 텍스트를 선택할 때.

짐

8/23/17에 Florian Beijers [email protected] 은 다음과 같이 썼습니다.

@jhomme 어떤 이유에서인지 설명하는 주석을 찾을 수 없습니다.
당신은 만나고 있습니다. 장교가 뭐가 문제 야?

-
당신이 언급 되었기 때문에 이것을 받고 있습니다.
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment -324309958

-

짐 옴므
http://www.jimhommewebdev.com
트위터 : @jimhomme
페이스 북 : http://www.facebook.com/jimhomme
링크드 인 : https://www.linkedin.com/in/jimhomme

Ahh yup, 그것은 여전히 ​​문제인 것 같습니다. 이 스레드에서 볼 수 있듯이 CodeMirror에 액세스 할 수없는 것과 관련이 있습니다. 이 문제를 해결하는 가장 쉬운 방법은 다음을 수행해야하는 경우 NotePad ++ 또는 EdSharp와 같은 편집기에 코드를 복사하여 붙여 넣은 다음 편집 한 다음 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로 문제를 해결하기 만하면됩니다.

Quincy, 프로젝트가 곧 Free Code Camp에서 구축 될 수있게되어 다행입니다.

나는 이것과 관련된 코드 미러 GitHub 스레드를 방금 살펴 보았고, 그들은 스크린 리더로이 작업을 만드는 것이 많은 작업이라고 생각합니다. 우리뿐만 아니라 Code Mirror를 사용하는 다른 웹 사이트도 윈-윈 상황입니다.

가설 적으로 상황을 살펴보면 위에서 언급 한 Pode 도구의 누락 된 기능이 Code Mirror의 대체물로 구현되는 경우 Free Code Camp에 영향을 미칠 수 있습니까?

안녕하세요,
이것을 조사하는 사람들에게 진심으로 감사를 표합니다. 나는 지금 실제로 JavaScript를 완성하는쪽으로 나아가고 있으며, 사람들, 특히 FreeCodeCamp를 돕는 실제 코드를 작성할 수 있기를 기다릴 수 없습니다.

짐

보낸 사람 : inscriptioelectronicaaustralia [mailto : [email protected]]
전송 : 2017 년 12 월 28 일 목요일 오전 2:08
받는 사람 : freeCodeCamp / freeCodeCamp [email protected]
참조 : Jim Homme [email protected] ; [email protected]
제목 : Re : [freeCodeCamp / freeCodeCamp] 편집기의 내용을 스크린 리더로 검토 할 수 없음 (# 12431)

Quincy, 프로젝트가 곧 Free Code Camp에서 구축 될 수있게되어 다행입니다.

나는 이것과 관련된 코드 미러 GitHub 스레드를 방금 살펴 보았고, 그들은 스크린 리더로이 작업을 만드는 것이 많은 작업이라고 생각합니다. 우리뿐만 아니라 Code Mirror를 사용하는 다른 웹 사이트도 윈-윈 상황입니다.

가설 적으로 상황을 살펴보면 위에서 언급 한 Pode 도구의 누락 된 기능이 Code Mirror의 대체물로 구현되는 경우 Free Code Camp에 영향을 미칠 수 있습니까?

—
당신이 언급 되었기 때문에 이것을 받고 있습니다.
직접이 이메일에 회신는 GitHub의에서 볼 https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-354240665 , 또는 스레드 음소거 https://github.com/notifications/unsubscribe-auth/AdDz24NBYQr6hKSp_HsEnOryzgzIkA24ks5tEz5PgaJpZM4LdzaT을 .

@inscriptioelectronicaaustralia CodeMirror는 우리가 사용하는 수많은 기능이 포함 된 널리 사용되는 프로젝트입니다. 나는 Pode가 CodeMirror가하는 모든 일을 할 수 있다고 의심합니다. 최선의 선택은 CodeMirror를 패치하는 것입니다.

CodeMirror를 패치하는 것이 가장 효과적이라는 데 동의하지만 문제를 해결하는 효과적인 방법이라고합시다. 우리는 다소 현실적으로 유지해야합니다.
이 문제는 올해 내내 존재했고 몇 주 동안은 한 살짜리 술집이었습니다. 저는이 문제에 대해 적어도 2 년, 어쩌면 3 년 동안 징징 거리고 으르렁 거 렸습니다. 그리고 그것은 참으로 문제입니다. FCC를 다시 시도하기로 결정할 때마다 이러한 문제를 해결해야하는 엄청난 성가심에 미루어집니다. 쉽고, 낮은 진입 임계 값과 코딩의 단순성, 코딩 할 때 브라우저에서 실시간 미리보기 업데이트를 보는 것은 현재 스크린 리더를 사용하는 사람들에게는 적용되지 않습니다. 이는 freecodecamp를 효과적으로 만드는 많은 요소입니다. 매력적인.
CodeMirror는 주로 그래픽 방식으로 코드를 그래픽 방식으로 렌더링하는 데 초점을 맞추고 있으며 이전의 표준 DOM 작업을 거의 완전히 포기했습니다. 주위를 둘러 보면 워드 프레스조차도이 문제를 겪고 있으며 아직이 문제를 해결할 적절한 방법을 찾지 못했습니다. 실제로 WP의 기본 WordPress 편집기로 codeMirror를 구현하지 못하게했으며 해당 편집기가 실제로 기본으로 구현 된 경우 시각 장애가있는 WordPress 관리자에 대한 옵트 아웃을 구현하여 해당 사용자의 관리자 경험을 완전히 중단하지 않도록해야합니다. CodeMirror는 조만간 수정되지 않을 것입니다.
Pode를 빠르게 살펴보면 주로 HTML 용 편집기 인 것 같고 안타깝게도 CodeMirror의 기능에 가까워지지 않았기 때문에 슬프게도 가능하다고 생각하지 않습니다.
이 문제에 대한 간단한 해결책은 없으며 패치는이 문제를 살펴 보는 것보다 훨씬 더 좋은 방법이 아닙니다 : https://github.com/codemirror/CodeMirror/issues/4604
제가 생각할 수있는 유일한 임시 방편은 CM 콘텐츠를 일반 텍스트 영역으로 렌더링하고 CM의 해당 텍스트 영역에 대한 편집 내용을 반영하는 방법입니다. 아마도 탭의 키 다운이 감지되거나 ctrl + enter가 감지 될 때 코드 실행을 미리 설정합니다. CodeMirror가 수정되거나 (위에 언급 된 문제를 살펴보면 불확실하지만 실적을 볼 수는 없을 것임) 유사한 기능을 갖춘 다른 편집기를 위해 폐기 될 때까지 짧은 시간 내에 수행 할 수있는 작업이 더 많지 않을 것이라고 생각합니다.

Quincy, 저는 CodeMirror가 분명히 우수한 솔루션이라는 것을 알고 있습니다 (Pode는 초보자를위한 것이기 때문에 매우 간단하게 만들어 졌다고 생각합니다). 가능하다면 접근 가능하도록 만드는 것이 이상적 일 것입니다. Pode에 부족한 기능이 무엇인지 물은 이유는 CodeMirror가 코딩을 지원하기 위해 다른 시각적 기능을 사용하는 경우 CodeMirror 편집 필드의 텍스트를 스크린 리더로 읽을 수있게 되었기 때문입니다.
이 문제를 해결하기위한 다른 방법을 생각하고 있었는데, 누군가가 Windows 스크린 리더 용 JAWS 용 스크립트 및 / 또는 가능한 경우 NVDA 스크린 리더 용 애드온을 만들 수 있다고 생각했습니다 (macOS 용 VoiceOver는 스크립팅을 허용하지 않습니다) 사용자가 CodeMirror 텍스트 필드를 입력하면 이미 거기에 있던 텍스트가 JAWS 또는 NVDA 텍스트 버퍼로 복사되어 편집 할 수 있으며 키 입력을 통해 편집기로 다시 전송됩니다. 이상적으로이 "특별한"텍스트 필드는 CodeMirror가 제공하는 다른 중요한 기능에 대한 액세스를 제공합니다. JAWS는 도메인 별 스크립트를 만들 수있는 독점적 인 스크립팅 언어를 사용하고 NVDA는 애드온을 만들기 위해 Python을 사용하지만 해당 스크린 리더에 대해 도메인 별 스크립트를 만들 수 있는지 확실하지 않습니다.

@inscriptioelectronicaaustralia @zersiax @jhomme https://github.com/codemirror/CodeMirror/issues/4604#issuecomment -349920743을 읽었을 때 @marijnh 가 콘텐츠를 편집 가능한 상태로 이동할 계획

최악의 시나리오는 캠프 참가자가 설정에서 CodeMirror for Pode에서 전환 할 수있는 "접근성 모드"를 구축 할 수 있다는 것입니다.

@marijnh 가 무슨 말을하는지 기다려 보겠습니다.

marijnh의 답변을 읽었는데 접근성을 얻을 때까지 시간이 좀 걸릴 것 같습니다. 또한 고려해야 할 한 가지는 불행히도 사람들이 "몇 달"이라고 말할 때도 접근성이 매우 낮은 우선 순위를 갖기 때문에 거의 발생하지 않는다는 것입니다. 이것이 CodeMirror의 개발자들이 생각하는 것이라고 말하는 것은 아니지만, 전 세계적으로 매우 혼란스러운 추세입니다. 나는 사람들이 "몇 달"이라고 말했을 때의 예를 보았습니다. 그리고 그것은 몇 달 더 ... 그리고 몇 달 더 ... 그리고 나는 당신이 그림을 얻는다고 생각합니다.
코드 편집기를 그대로 사용할 수 있으므로 몇 달을 기다리는 것이 가장 좋은 방법이라고 생각합니다.하지만 6 월에 이르렀는데 아무것도 변경되지 않았다면 다른 솔루션을 살펴 보는 것도 고려해 볼 가치가 있습니다. 다른 사람들은 어떻게 생각합니까?

나는 사람들이 "몇 달"이라고 말했을 때 몇 달 더 ...

작업이 새로운 접근 방식으로 _ 시작되는 것을 제외하고는 아무도 몇 달 동안 아무것도 약속하지 않았습니다.

안녕하세요 @marijnh

CodeMirror의 re-archi를 고려해 주셔서 감사 드리며 모든 것이 오픈 소스 노력 인 노력을 진심으로 이해합니다.

비영리 단체이기 때문에 커뮤니티 개발자의 코딩 지원 (pro-bono)이 필요하다면 저희가 할 수있는 모든 방법으로 이러한 노력을 도와 드리겠습니다.

CM 프로젝트 (및 기여자)에 대한 전투 테스트 지식은 매우 중요하므로 CodeMirror 리포지토리에 기록 된 문제에 대한 세부 사항을 안내해 주시면 이러한 노력을 돕기 위해 최선을 다하고 있습니다.

안녕하세요 @inscriptioelectronicaaustralia

...하지만 우리가 6 월에 이르렀는데 아무것도 바뀌지 않았다면 아마도 다른 솔루션을 고려해 볼 가치가있을 것입니다.

우리는 불만을 진심으로 이해하고 공유하며 가능한 모든 솔루션에 최선을 다할 준비가되어 있지만 CM이 a11y에서 더 나아질 수 있도록 도와주는 IMHO가 좋은 일입니다.

우리는 freeCodeCamp 커뮤니티를 도울뿐만 아니라 CM이 다른 곳에서도 a11y를 더 잘 활용하는 데 도움이 될 것이기 때문에 많은 노력을 기울였습니다.

즉,

위의 @zersiax 분석은 현재 코드 기반 상태의 목적에 맞습니다.

Pode를 빠르게 살펴보면 주로 HTML 용 편집기 인 것 같고 안타깝게도 CodeMirror의 기능에 가까워지지 않았기 때문에 슬프게도 가능하다고 생각하지 않습니다.

제가 생각할 수있는 유일한 임시 방편은 CM 콘텐츠를 일반 텍스트 영역으로 렌더링하고 CM의 해당 텍스트 영역에 대한 편집 내용을 반영하는 방법입니다. 아마도 탭의 키 다운이 감지되거나 ctrl + enter가 감지 될 때 코드 실행을 미리 설정합니다. CodeMirror가 수정되거나 (위에 언급 된 문제를 살펴보면 불확실하지만 실적을 볼 수는 없을 것임) 유사한 기능을 갖춘 다른 편집기를 위해 폐기 될 때까지 짧은 시간 내에 수행 할 수있는 작업이 더 많지 않을 것이라고 생각합니다.

중간 솔루션 구현을 살펴보고 CM 팀과 함께 구체적인 도움을받을 수 있는지 확인해야합니다.

코딩 지원이 필요한 경우

가장 유용한 기여 유형은 화면 판독기 사용자 및 / 또는 커뮤니티의 접근성 전문가가 새 프로토 타입을 테스트 한 후 문제를 조기에 발견하고 해결할 수 있도록 지원하는 것입니다. 표시 할 내용이 있으면 공지하겠습니다. 알림을 받고 싶은 경우 연락처 데이터가 포함 된 이메일을 저에게 보낼 수 있습니다.

@svinkle 이 a11y 문제에 대한 귀하의 의견에 감사드립니다.

content-editable 문제가 업스트림으로 해결 될 때까지 중단 간격이 작동 할 수있는 것을 제안합니까?

제가 생각할 수있는 유일한 임시 방편은 CM 콘텐츠를 일반 텍스트 영역으로 렌더링하고 CM의 해당 텍스트 영역에 대한 편집 내용을 반영하는 방법입니다. 아마도 탭의 키 다운이 감지되거나 ctrl + enter가 감지 될 때 코드 실행을 미리 설정합니다. CodeMirror가 수정되거나 (위에 언급 된 문제를 살펴보면 불확실하지만 실적을 볼 수는 없을 것임) 유사한 기능을 갖춘 다른 편집기를 위해 폐기 될 때까지 짧은 시간 내에 수행 할 수있는 작업이 더 많지 않을 것이라고 생각합니다.

접근 방식을 올바르게 이해하면 CM 편집기 콘텐츠가 textarea 로드되고 textarea 가 콘텐츠를 편집하는 데 사용됩니다. 그런 다음 업데이트 / 저장시 textarea 콘텐츠가 CM 편집기에 반영됩니다.

CM 편집기가 보이지 않게 숨겨져 있습니까? textarea 볼 수 있다고 가정합니다. 그렇지 않으면 두 개의 편집 영역이 있으면 혼란 스러울 것입니다.

@QuincyLarson 및 관련 모든 분들께,

해결책을 찾는 데있어 피드백과 고려 사항에 감사드립니다.

다른 텍스트 영역으로 원숭이 패치를 진행하기 전에 CM 에 @BerkeleyTrue 와 몇 가지 논의를 통해

베타 (새로운 리 액트 프런트 엔드)에서는 CodeMirror에 직접 의존하지 않고 CM 상단의 경량 래퍼 인 리 액트 컴포넌트 react-codemirror 에 의존합니다. 이는 베타 플랫폼과 함께 작동하기 위해 필요하기 때문입니다.

향후 언젠가 다른 구성 요소로 업데이트해야 할 수도 있지만 논의중인 구성 요소 중 어느 것도 기능을 래핑하는 상위 CM에서와 동일한 a11y 지원이 없다고 말했습니다.

따라서 원숭이 패치는 사소하지 않을 수 있습니다.

@raisedadead 이것을 지적 해 주셔서 감사합니다. CodeMirror가 접근성 업데이트를 수행 할 때까지 기다린 다음 거기에서 원숭이 패치 프로세스를 평가합니다.

학습 플랫폼에서 Monaco 편집기로 전환했음을 발표하게되어 기쁩니다. 그것은 a11y가 내장되어 있습니다.

우리는 CodeMirror를 절대적으로 사랑하며 귀하와 팀이 수행 한 멋진 작업에 대해 @marijnh 에게 감사드립니다. 지난 몇 년 동안 사실상 편집자였습니다. 매우 가볍고 간단하기 때문에 앞으로의 프로젝트에서 여전히 사용하고 싶습니다.

@zersiax , @mjanusauskas , @inscriptioelectronicaaustralia 및 모든 사람이 참여해 주셔서 감사합니다.