접근 가능한 텍스트 편집기를 만드는 10가지 팁

텍스트 편집기 기능이 풍부한 프로그램을 만들고 있다면, 화면 리더가 가능한 한 접근할 수 있도록 해야 한다.
듣기에는 어렵지 않기 때문에, 다음은 접근할 수 있는 풍부한 텍스트 편집기를 구축하는 10가지 조언입니다.대부분의 요점은 사용자가 사용하는 모든 종류의 라이브러리에 적용되지만, 그 중 일부 요점은 반응에 특정되어 있습니다.js.

1. 실제 화면 판독기로 테스트

만약 화면 리더를 사용한 적이 없다면, 프로그램이나 any 화면 리더가 있는 with 프로그램rich text editor에서 시험적으로 사용하십시오.나는 네가 돌아와서 다 읽지 않았더라도 이 박문은 매우 성공적이라고 생각한다.

OSX에 내장된 운영 체제: VoiceOver.

Windows 사용자에게는 nvda(무료)도 가장 광범위하게 사용된다.

의 또 다른 유행하는 화면 리더는 JAWS(무료가 아니다)이다.

만약 당신이 사용자를 위해 처신한다면 아래의 모든 건의는 더욱 뚜렷해질 것이다.

2. 키보드 트랩 방지

기본 키보드 동작을 덮어쓰거나 탭을 통해 텍스트를 축소하는 기능은 웹 기반의 풍부한 텍스트 편집기와 IDE에서 흔히 볼 수 있는 모드입니다.
그러나 화면 판독기 사용자는 프로그램, 브라우저, 운영체제를 탐색하기 위해 키보드에 전적으로 의존한다.만약 응용 프로그램이 기본 키보드 기능을 막았다면, 이것은 사람을 낙담하게 하고 극복하기 어려울 것이다.이러한 기능을 구현하려면 브라우저나 운영 체제에서 이미 사용한 바로 가기 키와 충돌하는지 확인합니다.

3. 모든 상호 작용 요소는 탭 및/또는 화살표 키를 통해 액세스해야 합니다.

대부분의 풍부한 텍스트 편집 프로그램은 메뉴와 도구막대를 사용하는데, 이것은 동적 위치나 고정되어 있다.
요소가 키보드를 통해 접근할 수 있도록 초점을 맞춰야 한다.기본적으로 button, input, select 또는 textarea 등 DOM 요소는 초점을 맞출 수 있다.만약 사용한 요소가 상호작용으로 간주되지 않는다면 (예: div, 화면 판독기가 이 요소와 어떻게 상호작용하는지 알 수 있도록 tabindex 와 role 속성을 추가해야 한다.
키보드만 사용하는 사용자(시력에 문제가 있는 사용자에게는 마우스가 기본적으로 무용지물)가 이 UI 요소들을 탐색하는 데 얼마나 많은 작업을 해야 하는지 생각해 보자.DOM에서 요소의 위치와 그 사이에 다른 상호 작용 요소가 얼마나 있는지에 따라 달라집니다.
만약 부동 도구 모음이 있는 편집기 (예를 들어medium,tab키를 통해 접근할 수 없습니다. 한마디 하자면) 를 구축하고 있다면, 키보드만 있는 사용자가 이 단추와 도구 모음 구성 요소 사이를 어떻게 내비게이션하는지 주의하십시오.
복잡한 용례 (하위 메뉴나 단추 그룹이 있다면, 프로그래밍 방식으로 초점을 이동하는 것을 고려해야 합니다. more info on this here

4. 이미지에 alt 텍스트를 사용하고 구성 가능

편집기에서 이미지를 렌더링하려면 이미지에 포함된 내용을 화면 판독기에 표시하는 것이 좋습니다.
그러나 사용자가 제출한 내용에 대해 의미 있는alt 텍스트를 자동으로 생성하는 것은 너무 어렵다. 이것이 바로 사용자가alt 속성을 설정할 수 있도록 고려해야 하는 이유이다.이것은 중간 크기다.일반 도메인 이름 형식:
use an alt attribute

5. 태그 아이콘 버튼

대부분의 풍부한 텍스트 편집기는 텍스트 형식과 레이아웃을 설정하기 위해 자주 사용하는 아이콘을 사용합니다.

이러한 아이콘은 텍스트 의미가 없으므로 화면 판독기에 다음과 같은 방식으로 할당해야 합니다.

<button aria-label="Bold" onClick={makeTextBold}>
  <MyIcon>
</button>

의미aria-label 요소가 사용되지 않으면 지정 button attribute(탭화 가능) 및 (화면 판독기에 버튼임을 알려줌)해야 합니다. 다음을 참조하십시오.

<span
  aria-label="Bold"
  role="button"
  tabindex="0"
  onClick={makeTextBold}
>
  <MyIcon>
</span>

tabindex 속성 6. a11y 받침대가 달린 들보를 사용

응용 프로그램의 접근성을 더욱 쉽게 파악하기 위해linter는 큰 역할을 발휘할 수 있다.
react 사용자에게 웹 응용 프로그램에 접근할 수 있는 속성이 부족한지 알려 줍니다.나는 이 단체의 가치를 과장할 수 없다.
나는 자동으로 린터를 실행하는 것을 권장합니다. (CI의 일부로 사용하거나 git 갈고리를 사용합니다.)

a11y jsx eslint 플러그인 7. 액세스 가능한 어셈블리 라이브러리 사용

이미 설정된 구성 요소 라이브러리를 사용하면 좋은 접근 가능한 기선에 도달할 수 있습니다. , Reach.ui와 material ui는 모두 좋은 접근성 기본값을 가진react 라이브러리입니다.

맥박 8. 공동 편집이 필요한지 주의 깊게 고려

리치 텍스트 편집기에 공동 편집 기능이 있는 경우 사용자 문서의 컨텐트가 편집하는 동안 변경될 수 있습니다.화면 판독기가 업데이트되었음을 알려야 하지만, 너무 시끄럽거나 주의력을 분산시켜서는 안 된다. 이것은 균형을 잡기 어려운 행동일 수도 있다.
기존의 해결 방안은 없지만 좋은 참고는 다른 사용자가 편집한 목록을 제공한다는 것이다.
이런 기능의 실현, 테스트와 유지 보수 비용은 아마도 매우 높기로 유명할 것이다.나의 건의는 협업을 노선도에 추가하기 전에 정말 협업을 제품의 일부로 해야 하는지 자세히 고려해 달라는 것이다.

구글의'실시간 편집'기능 9. iFrame의 제목 속성 사용

현재, iframes를 통해 내용을 삽입하는 것은 풍부한 텍스트 편집기의 주요 임무이다.화면 판독기가 이 내용에 접근할 수 있도록 하려면 을 사용하여 iframe에 포함된 내용을 설명해야 합니다.

제목 속성 10. 항상 텍스트 상자 역할 사용

대부분의 프레임워크 , draft.js와 slate.js 및 기타 프레임워크)는 기본적으로 이런 상황을 나타낼 수 있지만, 자세히 검사해 보면 항상 좋다!contentEditable 속성을 사용하는 모든 풍부한 텍스트 편집기(거의 모든 풍부한 텍스트 편집기는 이렇다)는 입력과 편집 명령에 응답한다는 것을 화면 리더에게 알려 주는 prosemirror를 사용해야 한다.
읽어 주셔서 감사합니다. 이 글은 "textbox" role입니다. 더 많은 유사한 내용이 필요하시면 마음대로 보세요.