Colin's Blog
[javascript] Draft.js를 사용한 텍스트 에디터의 스크린 리더(Screen reader) 지원하기

일부 사용자들은 시각적으로 콘텐츠를 인식하지 못하므로, 스크린 리더를 사용하여 웹사이트의 정보에 접근합니다. 따라서, 웹 애플리케이션에서 Draft.js를 사용하는 경우, 스크린 리더 사용자들이 텍스트 에디터를 올바르게 인식하고 사용할 수 있도록 지원해야 합니다. 이 문서에서는 Draft.js를 사용한 텍스트 에디터에서 스크린 리더를 지원하는 방법에 대해 알아보겠습니다.

1. aria-label과 aria-describedby 사용하기

aria-label과 aria-describedby 속성을 사용하여 텍스트 에디터를 스크린 리더에게 설명해줄 수 있습니다. 이를 통해 에디터의 역할과 기능을 알려주는 정보를 제공할 수 있습니다.


import React, { useRef, useEffect } from 'react'
import { Editor, EditorState } from 'draft-js'

const MyEditor = () => {
  const editorRef = useRef(null)
  const [editorState, setEditorState] = useState(EditorState.createEmpty())

  useEffect(() => {
    const editorNode = editorRef.current
    editorNode.setAttribute('role', 'textbox')
    editorNode.setAttribute('aria-multiline', 'true')
    editorNode.setAttribute('aria-label', '텍스트 입력 영역')
    editorNode.setAttribute('aria-describedby', 'editor-description')
  }, [])

  return (
    <div>
      <div id="editor-description" style={{ display: 'none' }}>
        텍스트를 입력하거나 편집할 수 있는 영역입니다.
      </div>
      <Editor
        ref={editorRef}
        editorState={editorState}
        onChange={setEditorState}
      />
    </div>
  )
}

위 예제에서는 aria-label 속성을 사용하여 텍스트 입력 영역 정보를 전달하고, aria-describedby 속성을 사용하여 설명을 제공하는 영역을 연결했습니다. 이렇게 설정하면 스크린 리더는 텍스트 에디터를 적절하게 인식하고 사용자에게 정보를 전달할 수 있습니다.

2. 접근성 기능 추가하기

Draft.js 에디터는 기본적으로 스크린 리더와의 상호 작용을 지원하지 않습니다. 따라서, 스크린 리더 사용자들이 텍스트 에디터를 올바르게 이용할 수 있도록 몇 가지 접근성 기능을 추가해야 합니다.

2.1. 포커스 관리

키보드를 통해 텍스트 입력 시작 시, 커서 위치 등에 대한 정보를 스크린 리더에게 전달해야 합니다. onFocus 이벤트 핸들러를 사용하여 포커스 관련 정보를 스크린 리더에게 알려줄 수 있습니다.

const handleFocus = () => {
  // 포커스 관련 정보를 스크린 리더에게 전달
}

// ...

<Editor
  ref={editorRef}
  editorState={editorState}
  onChange={setEditorState}
  onFocus={handleFocus}
/>

2.2. 수정 가능한 영역 표시

스크린 리더는 사용자들에게 에디터의 내용을 수정 가능한 텍스트로 인식할 수 있도록 접근성 인터페이스를 제공해야 합니다. 이를 위해 스타일 속성을 변경하거나, CSS로 “수정 가능한 텍스트”로 표시하는 등의 방법을 사용할 수 있습니다.

const handleFocus = () => {
  const editorNode = editorRef.current
  editorNode.setAttribute('aria-readonly', 'false')
  editorNode.style.pointerEvents = 'auto'
}

2.3. 단축키 설명

텍스트 에디터의 단축키를 스크린 리더 사용자에게 설명해줄 수 있습니다. 이를 위해 단축키 관련 설명을 제공하는 역할을 하는 설명 영역을 생성하고, 단축키 조합에 대한 설명을 포함시킬 수 있습니다.


<div id="keyboard-shortcuts" style={{ display: 'none' }}>
  Ctrl + B: 텍스트를 굵게 표시합니다.
  Ctrl + I: 텍스트를 이탤릭체로 표시합니다.
  // ...
</div>

위와 같이 단축키 관련 설명을 제공하는 역할을 하는 요소를 생성합니다. 이렇게 설정하면 스크린 리더 사용자들은 기능 단축키에 대한 정보를 얻을 수 있습니다.

3. 테스트와 접근성 평가

텍스트 에디터의 스크린 리더 접근성을 평가하기 위해서는 실제 사용자들과의 테스트가 필요합니다. 테스트를 통해 사용자들이 텍스트 에디터를 원활하게 사용할 수 있는지 확인하고, 문제점이 있을 경우 수정할 수 있습니다. 스크린 리더 사용자와의 협력은 한 단계 더 나은 웹 애플리케이션을 구축하는 데 큰 영향을 줄 수 있습니다.

참고 자료

© 2018 Colin. All rights reserved.