# 스크린 리더로 Discourse 사용

**URL:** https://meta.discourse.org/t/discourse-with-a-screen-reader/178105
**Category:** UX
**Tags:** accessibility, screen-reader
**Created:** [2월 2, 2021, 1:17오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105 "2021-02-02T13:17:53Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [5월 22, 2021, 7:58오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/26 "2021-05-22T19:58:22Z")

</div>

네, 제안해 주셔서 감사합니다! 쉽게 바꿀 수 있는 부분이 보인다면 구체적으로 알려 주실 수 있나요? 우리가 진행 중인 접근성 관련 변경 사항 중 상당수는 애플리케이션 구조를 재설계해야 하지만, 손쉽게 해결할 수 있는 작은 작업이라면 언제든 환영합니다.

---

<div class="post-metadata">

### Author: ![nolan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nolan/32/208102_2.png) [@nolan](https://meta.discourse.org/u/nolan)
#### Post date: [5월 23, 2021, 7:07오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/27 "2021-05-23T19:07:04Z")

</div>

특별한 순서 없이 나열한 목록입니다. 단, 첫 번째 항목은 예외입니다:

1. 포커스를 잡지 않는 모달 창이 있습니다. 이 문제는 제가 이 글을 쓰게 된 직접적인 계기였습니다. 이 스레드에 스크린 리더 사용 피드백을 남기려고 오는 사람은 누구나 이 문제를 겪게 될 것이며, 이는 기초 및 중급 스크린 리더 사용자들이 사실상 배제되는 결과를 낳습니다. 다행히 제 포럼에서는 이 문제를 겪지 않았고, 여기에서만 겪고 있습니다. 이 모달을 끄거나, 모달이 표시되게 하는 조건을 비활성화할 방법이 있는지 궁금합니다. 현재 이 모달과 상호작용하는 유일한 방법은 왜 키보드 명령이 작동하지 않는지 궁금해하며, 웹 애플리케이션이 어떻게 동작하는지 충분히 알아야 모달을 찾아야 한다는 사실을 깨닫는 것입니다. 그리고 찾은 후에는 모달과 상호작용하여 포커스를 올바른 컨트롤로 이동시켜야 합니다. 그런데 이조차 항상 신뢰할 수 있는 것은 아니라, 이 주제에 답글을 쓰면서 겪은 고충에서 알 수 있습니다.
2. 주제를 클릭하면 키보드 포커스가 최신 게시물로 자동으로 이동하지 않습니다. 여기서 어떤 일이 일어나야 하는지 정확히 모르기 때문에, 이 기능을 수행하기 위해 다른 링크가 필요한 것인지도 모르겠습니다. 이로 인해 새로운 게시물을 따라가는 것이 어렵고, 여전히 수동으로 처리해야 합니다.
3. 키보드를 사용하여 사이트 관리 영역에 접근하는 명확한 방법이 없습니다. /admin URL이 작동할 것 같다고 추측해야 했으며, 다행히 실제로 작동했습니다.
4. 포럼 게시물에 ARIA 랜드마크가 있으면 유용할 것입니다. 기본적으로 각 게시물을 `<article/>` 요소처럼 만들고, 상단 컨트롤에는 `<heading/>`, 하단에는 `<footer/>`를 사용하는 것입니다. 현재 게시물을 빠르게 이동하는 데 유용한 방법이 없으므로, 이를 통해 랜드마크 기반의 더 빠른 탐색이 가능해집니다. 현재는 NVDA를 통해 이를 어느 정도 수행할 수 있지만, 그렇게 하면 Like 버튼 등 다른 버튼이 포함된 요소에 떨어지게 됩니다. 실제 랜드마크 요소가 작동하지 않는다면 `role=` 속성이 작동할 것입니다.
5. ‘주제 작업’ 버튼을 클릭하면 나타나는 메뉴를 키보드로 닫을 방법이 없습니다.
6. 목록 위젯은 접근성 측면에서 상당한 문제입니다. 방금 NVDA를 사용하여 게시물을 이동해 보았습니다. 방법은 다음과 같습니다:
7. 제목/카테고리 편집 버튼을 클릭했습니다. 정확히 무엇이었는지 기억나지 않습니다. 다시 말하지만, 화면을 축소하여 버튼을 다시 표시할 수 없기 때문입니다.
8. 카테고리 콤보박스를 찾았습니다.
9. 스페이스바로 활성화했습니다.
10. NVDA 객체 탐색을 사용하여 선택된 콤보박스 항목으로 확대했습니다. 이 과정은 전혀 직관적이지 않았습니다.
11. 그 항목 안에는 목록이 있습니다. 이 목록과 상호작용했습니다.
12. 그 목록 안에는 검색 필드와 또 다른 목록이 있습니다. 그 다른 목록과 상호작용했습니다.
13. 그런 다음 NVDA 객체 탐색을 사용하여 여러 카테고리 설명을 통과하여 원하는 카테고리를 찾았습니다. 마우스를 해당 위치로 이동시켰습니다.
14. NVDA를 사용하여 마우스를 클릭했습니다.
15. 라벨이 없는 저장 버튼을 찾아 클릭해야 하는 또 다른 단계가 있다고 의심하지만, 확신할 수 없으며, 다음에 이 작업을 해야 할 때 이를 기억할 것이라고는 절대 생각하지 않습니다. ☹  
상상할 수 있듯이, 이 과정은 직관적이지 않으며, 제가 이것을 발견한 이유는 a) 아마도 중급 NVDA 사용자이기 때문이고 b) 웹 개발 등 다른 일을 하기 때문이며 c) Discourse가 일을 처리하는 방식을 어느 정도 익혔기 때문입니다.
16. 버튼으로 식별되지 않지만 무언가를 수행하는 것으로 보이는 라벨이 없는 그래픽이 여러 개 있습니다. 관리 화면의 저장 버튼이 그런 예시라고 생각합니다. 사용자가 의존하는 라이브 사이트에서 라벨이 없는 버튼을 무작정 클릭하는 것은 약간 망설여집니다. 이런 일은 언젠가 고통스러운 결과로 돌아올 가능성이 큽니다. 🙂

약 한 달 정도 더 시도해 보고, 그래도 안 되면 서버에 PHPBB나 더 접근성이 좋은 것을 설치해서 그걸로 진행할 것입니다. 죄송합니다. 이러한 문제로 인해 커뮤니티를 시도조차 하지 않는 많은 분들이 있기 때문입니다. 그리고 깨진 모달이 제가 부딪힌 최초의 장애물이었기 때문에, 저는 아마도 시각장애인으로서 너무 자주 하는 것처럼 기술적으로는 열등하지만 접근성이 더 나은 옵션을 선택해야 할 것입니다. ☹ 불평하려는 것이 아니라, 커뮤니티를 위한 선택지가 접근성은 좋지만 커뮤니티 규모가 작고 개발이 적은 옵션들, 접근성 문제가 심각한 훌륭한 옵션, 그리고 메일링 리스트로만 구성되어 있다는 점이 아쉽습니다.

참고로, 저는 고용 가능한 시니어 개발자입니다. 솔직히 말하면, Discourse가 인터넷의 상당 부분을 차지하고 있기 때문에, 우리와 같은 장애를 가진 사람들이 선의의 비장애인 동료들이 프로젝트에 Discourse를 설정할 때 이러한 접근성 문제를 억지로 감내해야 하는 상황이 반복되고 있습니다. 왜 그런지 이해합니다. 저도 우리 커뮤니티에 Discourse를 사용하고 싶고, 여러분이 관리하기 놀랍도록 쉬운 제품을 만들었기 때문입니다. 하지만 현재 깨진 문제를 수정하고 모든 새 기능이 장애를 가진 사람들이 사용할 수 있도록 보장하는 접근성 리더가 없다면, 꼭 이야기합시다. 여러분은 절실히 필요합니다. 🙂 제가 여기에서 Discourse를 시도한 이유는 이 스레드를 보고 주요 접근성 변경이 임박했다고 생각했기 때문입니다. 하지만 일반적으로 저는 키보드와 스크린 리더로 사용이 얼마나 어려운지, 그리고 접근성 문제로 인해 시각장애인들이 동등하게 참여할 수 없는 또 다른 인터넷 커뮤니티를 만들고 싶지 않기 때문에, 제가 의견을 낼 수 있을 때마다 Discourse 사용을 적극적으로劝阻합니다. 저는 그것을 바꾸고 싶고, 그 변화를 만드는 데 일부를 하고 싶습니다. 하지만 제가 아니라면, 누군가를 고용해 주세요. 많은 문제가 수년 동안 지속되어 왔고, 상당한 변화가 없었기 때문입니다.

감사합니다.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [5월 23, 2021, 7:37오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/28 "2021-05-23T19:37:57Z")

</div>

와! 상세하고 철저한 피드백을 주셔서 감사합니다!

> [@nolan](#):
>
> 포커스를 잡지 않는 모달이 있습니다. 이 게시물을 쓰게 된 계기도 바로 그 문제였죠. 스크린리더 사용에 대한 피드백을 남기려고 이 스레드에 오는 사람들은 이 문제 중 하나에 반드시 부딪히게 됩니다.

죄송합니다, 이해가 잘 안 됩니다. 토픽을 방문할 때 나타나는 모달에 대해 인지하고 있지 않습니다. 토픽에 답변을 작성할 때 사용하는 에디터/컴포저를 말씀하시는 건가요? 지금 제가 이걸 타이핑하고 있는 바로 그 에디터요? 아니면 토픽 내 어디에서든 답변 버튼을 누른 후 나타나는 에디터를 말씀하시는 건가요?

이것이 첫 번째이자 가장 시급한 문제이므로, 이해하고 싶습니다. 지난날에 시각장애인 사용자분들이 있었고, 그들의 피드백을 반영해 조치를 취한 적이 있으므로(예를 들어 여기:

> [@Accessibility concerns re email, Lynx, JAWS](https://meta.discourse.org/t/accessibility-concerns-re-email-lynx-jaws/35675/15):
>
> We have in the past worked with 2 blind users to improve things (@MarcoZehe and @ndarilek ) see: We received advice from @stevefaulkner an expert in the field and acted on it. We will continue to improve Discourse based on feedback. As it stands the biggest pain point, which is a devil to solve is Email parsing. At the moment our parser requires the response is “at the top” if it is inlined or anything non-traditional stuff gets rejected. That tripped @MarcoZehe last time when he tried to …

그리고 여기

> [@Accessibility audit and shepherd for making improvements](https://meta.discourse.org/t/accessibility-audit-and-shepherd-for-making-improvements/66620/13):
>
> Hi I am the bloke from the LEDE and the OpenWRT forums. I am blind and use a screen reader called NVDA to access the internet. I will help out where I can but I don’t know much about html5 or what ever language Discourse is in, but I will try to explain how things effect me as a screen reader user. The thing I don’t like about Discourse the most is that I cant jump through the posts with my keyboard. To give you the best idea of how that would work for me I will have to compare the OpenWRT foru…

) 가장 중요한 문제부터 단계별로 하나씩 시작해 보는 게 어떨까요? 최근에 회귀(regression)가 생긴 건지 궁금합니다. 말씀하시는 이 "모달"이 무엇인지 이해하고 싶습니다.

(그리고, 키보드 단축키 목록을 확인하시려고 ? 키를 눌러 보셨나요? "키보드로 관리자 영역에 어떻게 접근하는지"를 조사하다가 방금 알아낸 것이 있는데, = 키를 누르면 햄버거 메뉴로 갈 수 있지만, 그 안의 어떤 항목도 선택되지 않습니다. @sam 님, 이 부분은 반드시 수정해야 합니다.)

---

<div class="post-metadata">

### Author: ![nolan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nolan/32/208102_2.png) [@nolan](https://meta.discourse.org/u/nolan)
#### Post date: [5월 23, 2021, 9:59오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/29 "2021-05-23T21:59:01Z")

</div>

안녕하세요, @ndarilek입니다. 🙂 여기 계정에 또 하나 있는 것 같습니다. 지금 두 개의 계정이 있다는 사실을 몰랐네요. 아마 그래서 2월에 가입하려고 했을 때 이메일 주소가 작동하지 않았던 것 같습니다. 가입 시 마주한 모달에 대해 처음 작성된 게시글의 인용문을 여기에 올립니다. 참고로 해당 게시글에는 몇 가지 문제가 나열되어 있으며, 그중 일부는 제가 여기에 나열한 문제와 중복일 가능성이 높습니다. 제 불만의 일부는 이 문제들을 반복적으로 제기하고 있는데도 a) 접수되는지, b) 필요한 정보를 충분히 확보했는지 확인할 수 있는 곳이 어디인지 알 수 없다는 점입니다. 특히 이 모달은 a) 스크린 리더 사용자에게 찾기 어렵고 b) 모든 입력이 페이지에 도달하는 것을 차단하여 링크나 버튼을 클릭해도 갑자기 Discourse가 아무 반응도 하지 않기 때문에 매우 큰 문제입니다. 어쨌든, 인용문입니다–인용 구문을 정확히 모르겠네요:

• 제 사이트와 관련은 없지만, 여기의 모달 기반 가입 경험에 몇 가지 어려움이 있었습니다. 이메일로 가입을 시도했지만, 거의 17년간 사용해 왔고 제 사이트에서는 정상적으로 작동했던 .info 이메일 주소가 이 인스턴스에 의해 거부되었습니다. 그 후 Google로 가입을 진행했는데, 로그인 후 돌아왔을 때 표시된 모달이 몇 가지 문제를 일으켰습니다:  
◦ 키보드 포커스를 가져오지 않아서, 제가 직접 찾아서 조작해야 했습니다.  
◦ 그걸 하려고 하는 동안, 무한 스크롤되는 주제 목록이 새 주제를 계속 추가하면서 포커스가 실제 대화상자에 도달하는 것을 더 어렵게 만들었습니다. 정확히 어떻게 주제보다 빠르게 움직였는지 기억이 나지 않습니다–아직 커피를 마시지 못했거든요–하지만 여기 있습니다. 🙂

감사합니다. 도움이 되길 바랍니다.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [5월 23, 2021, 10:56오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/30 "2021-05-23T22:56:42Z")

</div>

네, 말씀하신 내용을 충분히 이해했습니다. 다만 이 부분이 정확히 무엇을 의미하는지 아직 파악 중입니다:

> [@nolan](#):
>
> 포커스를 가져가지 않는 모달들이 있습니다. 이것이 제가 이 글을 처음 작성하게 된 계기였습니다. 이 스레드로 스크린리더 사용 피드백을 남기려고 오는 사람은 누구나 이 문제 중 하나에 부딪히게 될 것입니다.

혹시 _에디터_, 즉 Discourse에서 편집에 사용되는 오버레이 패널을 말씀하시는 건가요? 아마도 그렇게 생각하실 것 같습니다. 이것은 실제로 모달이 아니라, 브라우저 하단에 고정되어 Discourse 사이트 내 이동 시 함께 따라다니는 오버레이 패널입니다. 원하시는 대로 에디터를 작은 요약 라인 하나로 접거나 전체 화면으로 확장할 수 있으며, 이 모든 과정에서 Discourse의 주제들을 계속 읽을 수 있습니다 – 심지어 완전히 다른 주제로 이동하는 동안에도 답글을 작성할 수 있습니다. 이는 Discourse의 "가능한 한 많은 읽기를 장려한다"는 테마에 부합하는 것으로, 오버레이 패널이 브라우저 창 하단에 고정되어 있어 에디터가 읽기 경험을 방해하지 않습니다.

에디터 하단 왼쪽에는 두 개의 주요 동작 버튼이 있습니다:

- 답글(Reply) – 에디터 오버레이 패널을 닫고 주제에 답글을 제출합니다 (원본 주제에서 다른 주제로 이동했다면 해당 주제에 제출)
- 취소(Cancel) – 에디터 오버레이 패널을 닫고 진행 중인 답글을 초안으로 저장하거나 초안을 폐기합니다

에디터에는 몇 가지 다른 기능 영역도 있습니다:

- 에디터 상단 가장자리에 있는 "그랩 바"로 오버레이 패널 높이를 조절하여 위아래로 조정할 수 있습니다.
- 왼쪽 상단의 “에디터 유형” 버튼으로 답글, 개인 메시지, 원본 게시글을 참조하는 새 주제 작성으로 전환할 수 있습니다.
- 오른쪽 상단의 “전체 화면으로 확장” 글리프 버튼
- 오른쪽 상단의 “접기” 글리프 버튼
- 오른쪽 하단의 “미리보기 숨기기” 글리프 버튼. 이 버튼을 두 번 누르면 미리보기가 다시 표시됩니다.

**답글 버튼을 누를 때 에디터가 반드시 포커스를 가져가야 합니다.** 예를 들어 "이 게시글에 답글 작성을 시작합니다"라고 할 때 말입니다. 제 테스트에서는 데스크톱, 노트북, 태블릿, 휴대폰 모두에서 실제로 포커스를 가져갑니다. 주제에 있는 답글 버튼이나 개별 게시글의 답글 버튼을 누르면 키보드 입력으로 전환되고 포커스가 잡힙니다.

이 작업을 처리하는 데 시간이 좀 걸릴 수 있어 죄송합니다. 우리는 이 작업을 수행하기를 원하지만, 막대한 양의 업무와 제한된 엔지니어링 시간, 그리고 우리에게 해로운 영향을 미치고 있는 전 세계적 팬데믹, 그리고 팀 중 일부가 코로나19에 감염된 상황 때문에 그렇습니다. 죄송합니다. 가장 중요한 문제들을 골라주시면 우선적으로 해결하는 데 최선을 다하겠습니다.

(다시 읽어보니, 혹시 계정 가입 프로세스를 말씀하시는 건가요? 2.7 릴리스에서 가입 다이얼로그를 강화하면서 접근성 측면에서 회귀가 발생했을 수도 있습니다?)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [5월 24, 2021, 2:02오전 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/31 "2021-05-24T02:02:56Z")

</div>

> [@riking](#):
>
> 불행히도, 임시 저장본을 어떻게 할 것인지(폐기/저장/취소)를 묻는 모달이 표시되었고, 모달의 포커스 캡처가 깨진 것 같습니다…

아하! _드디어_ 실제로 이해하고 재현할 수 있는 문제가 나왔네요. @sam 여기서 무슨 일이 일어나는지 파악했습니다. 편집기로 들어가서 텍스트를 조금 입력해 임시 저장이 필요하게 만든 후… tab 키를 두 번 눌러 취소 버튼에 포커스가 오게 하고, enter 키를 누릅니다. **이 다이얼로그가 이제 포커스를 가져야 하지만, 그렇지 않습니다** — tab 키를 누르면 다른 요소로 이동합니다. 이 문제를 수정하고 백포트해야 합니다.

---

<div class="post-metadata">

### Author: ![celtichawk](https://avatars.discourse-cdn.com/v4/letter/c/eb9ed0/32.png) [@celtichawk](https://meta.discourse.org/u/celtichawk)
#### Post date: [5월 24, 2021, 3:02오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/32 "2021-05-24T15:02:38Z")

</div>

이 주제에 대한 제 생각을 말씀드리겠습니다.

솔직히 저도 좀 망설여집니다. 저는 Linux를 사용 중이고, 기본 내장 스크린 리더인 Orca를 쓰고 있는데, 제 환경에서는 테이블 내비게이션 기능이 상당히 부족합니다.

제 주요 문제는 크게 두 가지입니다.

첫째, 스레드 내에서 제 현재 위치를 알 수 없습니다. 개별 게시물을 추적할 쉬운 방법이 없기 때문입니다. 스레드의 다음 게시물로 바로 이동할 수 없고, 대신 새 게시물에 도달하기까지 답글 달기/북마크/링크 공유/등등의 모든 요소를 스크롤로 넘어가야 합니다.

레이아웃은, 적어도 제 경우엔, 버튼과 링크가 여기저기 난무하는 혼란 그 자체입니다. 만약 제목(헤딩)이 있었다면, 예를 들어 상단 바는 헤딩 1, 주제 내 첫 게시물은 헤딩 2, 그 후의 각 게시물은 헤딩 3처럼 구성된다면, 공유 링크나 게시물 좋아요, 북마크 같은 잡다한 요소에 발목 잡히지 않고 스크린 리더 사용자가 게시물에서 게시물로 빠르게 이동할 수 있으므로 그 정도라면 감당할 수 있을 것입니다.

"아, 이 설정, 저 설정, 저 설정, 이 설정, 저 설정을 하세요"라고 말씀하시기 전에 미리 말씀드리지만, 아닙니다. 제 시스템에서 Discourse를 사용 가능하게 만들기 위해 설정을 이리저리 조정해야 할 필요는 없습니다.

Discourse가 논리적으로는 정말 훌륭한 일을 해냈습니다.

하지만 왜 주제에 도달하기 위해 버튼 수천 개를 헤쳐 나가야 하고, 링크 수천 개를 통과해야만 하는 걸까요? 네, 조금 과장했습니다. 하지만 제 말을 들어봐 주세요.

이건 의견의 차이일 수 있습니다. 하지만. 저는 대부분의 요소에 헤딩이 있는 PHP 기반 포럼에 익숙합니다. 그래서 질문드리고 싶은데, 헤딩의 부재는 의도적인 디자인 선택인 건가요, 아니면 접근성을 개선하기 위해 작업할 수 있는 부분이인가요?

Windows, Mac, Linux 스크린 리더로 테스트해 보시기를 제안합니다. 후자 두 플랫폼의 경우 기본 내장 스크린 리더, 그리고 NVDA(NVaccess.org에서 찾을 수 있음)와 JAWS(소프트웨어 자체는 유료이고 Mac만큼 비싸지만, Discourse를 평가하기 위해 무료 데모 버전을 사용할 수 있음), 그리고 Windows의 기본 내장 내레이터(Narrator)도 포함해서요.

휴대폰 내비게이션은? 현재 테스트할 휴대폰이身边에 없으므로 이 부분은 생략하겠습니다. 모든 스크린 리더가 테이블을 동일하게 처리하지는 않습니다. 예를 들어, 이 주제에서 Orca(제 경우)는 스레드를 테이블로 표시하지 않고, 'new activity’로 시작하는 항목만 테이블로 표시하며, 주제와 답글은 완전히 건너뜁니다. 헤딩 기준으로 이동하면, 주제의 맨 처음(스크린 리더 사용자에게 일반적인 내비게이션 방식)으로 간 후, 마지막 게시물 이후의 추천 주제 목록으로 바로 점프하는데, 이 목록은 헤딩 레벨 3으로 표시되어 있습니다.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [5월 24, 2021, 10:19오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/33 "2021-05-24T22:19:44Z")

</div>

보고해 주셔서 다시 한번 감사드립니다 @nolan… 첫 번째 문제를 먼저 다뤄보겠습니다. 대부분의 모달에서 포커스를 잡지 못하고 있는 것 같습니다. 이는 가능한 한 빨리(가장 이상적으로는 이번 주에!) 수정해야 할 큰 회귀 문제(regression)인 것 같습니다!

> [@nolan](#):
>
> 약 한 달 정도 더 시간을 주겠습니다. 그 후 서버에 PHPBB나 좀 더 접근성이 좋은 다른 것을 설치해서 그것으로 진행하겠습니다. 죄송합니다. 이러한 문제들 때문에 커뮤니티에 도전해 보지도 않는 사람들이 너무 많기 때문입니다. 게다가 깨진 모달은 제가 처음 마주친 속도 저하 요인(speedbump)이었기 때문에, 저는 아마도 시각장애인으로서 너무 자주 하는 것처럼 기술적으로는 열세이지만 접근성은 더 좋은 옵션을 선택해야 할 것 같습니다.

이 부분은 충분히 이해합니다. 그리고 접근성 문제를 해결하기 위해 노력하고 있다고 말씀드릴 수는 있지만… 현재 목록을 한 달 안에 완료하기는 어려울 것입니다.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [5월 24, 2021, 10:30오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/34 "2021-05-24T22:30:56Z")

</div>

대화의 거대한 회귀 버그 때문에 정말 죄송합니다 @nolan! 직접 확인해 보기 전까지는 그 정도가 얼마나 심각한지 몰랐어요. 릴리스를 보류해야 했는데, 정말 심각해요!

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [5월 25, 2021, 7:51오전 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/35 "2021-05-25T07:51:46Z")

</div>

> [@celtichawk](#):
>
> Windows, Mac, Linux 스크린리더로 테스트해 보시는 것을 권합니다.

감사합니다! 오늘 NVDA를 설치했고, 여러분이 겪고 계신 문제들을 서서히 파악해 나가고 있습니다.

기본 키 바인딩을 사용하여 Discourse를 합리적으로 작동하게 하려는 욕구를 충분히 이해합니다. 또한 탐색에 대한 좌절감도 훨씬 더 잘 이해하게 되었습니다.

phpBB의 트릭들을 볼 수 있습니다. NVDA는 그 부분에서 매우 제한적이며 선택할 수 있는 단축키도 많지 않습니다.

제목(Heading) 트릭은 Discourse에서는 작동하기 어려울 것입니다. 사용자가 게시물에 사용자 정의 헤더를 입력할 수 있기 때문입니다. 예를 들어:

## heading 2

### heading 3

#### heading 4

“다음 기사” 버튼은 없으며, 우리가 가진 최선은 "다음 영역"입니다. 영역 지원은 JAWS와 비교할 때 다소 불안정합니다. 이미 `article` 요소를 가지고 있었지만 NVDA는 이를 존중하지 않았습니다.

주제를 탐색할 때 사람들이 훨씬 덜 길을 잃도록 돕기 위해 이 PR을 만들었습니다:

> <https://github.com/discourse/discourse/pull/13130>
>
> NVDA does not detect HTML5 articles as regions. This explicitly sets a
> region wi…th an aria-label denoting post numbers making it much easier to
> know where you are in a topic.
> 
> Note role: article which is more semantically correct is not respected by
> NVDA d/D shortcut, hence the much more generic "region" role.

아직도 구조가 이상적이지 않다고 느낍니다. 예를 들어, 게시물 내비게이션의 중첩된 `double-button` 때문에 아래쪽 버튼을 누르면 갇히는 현상이 발생합니다.

@eviltrout 님은 다양한 다이얼로그의 포커스 문제를 조사하고 있으며, NVDA로 이중 테스트를 진행하여 우리의 수정 사항이 효과를 거두는지 확인해야 할 것입니다.

브라우저 모드를 종료하면 상당히 광범위한 키보드 단축키를 사용할 수 있지만, 그 어두운 구석으로 들어가는 것을 꺼려하는 마음을 이해합니다. 문제는 “편집” 모드에 들어가면 실제로 콘텐츠를 읽기 위해 그 모드를 빠져나와야 한다는 점입니다.

예를 들어:

j → 컴퓨터가 "방문한 기사 링크"라고 읽음  
nvda+space  
down → 컴퓨터가 "링크 benno"라고 읽음  
down → 컴퓨터가 "3월 15일"이라고 읽음  
down → 컴퓨터가 게시물 읽기 시작

제 수정 사항 이후로는 상당한 개선이 있을 것입니다.

"방문한 기사 링크"라고 말하는 대신, 컴퓨터가 "게시물 #6 영역 기사 링크 방문됨"이라고 읽기 시작할 것입니다.

여기서의 개선은 점진적일 것입니다. 하지만 모든 피드백에 진심으로 감사드립니다. 우리는 배우고 있으며, 시각장애인 커뮤니티가 Discourse를 더 즐겁게 사용할 수 있도록 최선을 다할 것입니다.

모달은 일반적인 가시 떼(혼네츠 네스트)와 같습니다. 모달이 열려 있는 상태에서 어떤 이유로든 페이지로 다시 탐색하게 되면 매우 혼란스러워질 수 있습니다. 모달이 열려 있는 동안 NVDA에 "이 모든 요소들은 더 이상 존재하지 않는다"라고 신호를 보내는 방법이 있는지 궁금합니다. 모달이 열려 있을 때 DOM에서 요소를 제거할 수 있지만, 그렇게 하면 오히려 더 큰 혼란을 야기할 수도 있습니다.

---

<div class="post-metadata">

### Author: ![celtichawk](https://avatars.discourse-cdn.com/v4/letter/c/eb9ed0/32.png) [@celtichawk](https://meta.discourse.org/u/celtichawk)
#### Post date: [5월 25, 2021, 12:01오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/36 "2021-05-25T12:01:56Z")

</div>

오카(Orca, 제가 사용하는 리눅스의 스크린 리더)의 경우 컨트롤은 다르지만 기능적으로는 거의 동일합니다. 다음 랜드마크로 건너뛸 수는 있지만, 이 기능이 버그가 있어 실제로 특정 요소에 멈추는 경우가 있습니다. 다른 포럼 소프트웨어를 사용해 왔는데, 이러한 키보드 단축키는 어디에서 찾을 수 있을까요? 맥(Mac)은 사용할 수 없지만, 리눅스에서는 예를 들어 게시물의 다음 랜드마크로 이동할 수 있습니다. 예를 들어 이 주제에서 ‘좋아요’ 버튼에서 ‘좋아요’ 버튼으로 이동하는 방식은 다음과 같습니다:

주제 클릭

첫 번째 게시물로 이동

M 키를 눌러 랜드마크에 도달한 후 아래로 이동

주제의 끝까지 위 단계를 반복

이것이 브라우저에 따라 달라질 수 있는데, 현재까지는 기본 Firefox 외에는 테스트해 보지 않아 정확히 알 수 없습니다.

수정: 아, 방금 바로 마주친 문제입니다. Mozilla Firefox에서 내 프로필을 확인하려 했는데, 상단의 프로필/알림 링크를 선택하자 다시 탐색 모드(browse mode)로 갈 때까지 키보드 입력이 잠겼습니다. 이것이 다이얼로그 문제의 일부인지 모르겠습니다. 페이지가 제가 스레드를 읽으려는 것처럼 작동했기 때문입니다. 링크에는 'expanded’라고 표시되어 있었기 때문에 화살표 키나 마우스로 탐색할 수 있는 드롭다운 메뉴라고 생각했지만, 아무런 반응이 없었습니다.

---

<div class="post-metadata">

### Author: ![nolan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nolan/32/208102_2.png) [@nolan](https://meta.discourse.org/u/nolan)
#### Post date: [5월 25, 2021, 12:19오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/37 "2021-05-25T12:19:23Z")

</div>

NVDA가 아티클(article)을 리전(region)으로 인식하지 않는다는 지적은 좋은 지적입니다. 어제 아티클 표시 기능을 활성화하기 전까지는 아티클 태그가 사용되고 있다는 사실조차 인지하지 못했었습니다. 다만, 이는 감지 알고리즘에 영향을 미치지 않는 것으로 보입니다. 오늘 이 문제에 대해 NVDA 이슈를 등록하고 결과를 지켜보겠습니다.

또한, 메시지에 헤더가 삽입될 수 있다는 점은 이해하고 있습니다. 헤더 내비게이션의 목표는 이를 상쇄하는 것이 아니라, 게시글에 추가 헤더가 _포함되지 않는_ 99.99% 이상의 경우를 돕기 위한 것입니다. 🙂 어제 개발 환경을 설정했고, `.post-topic`의 일부 요소에 ARIA 역할을 적용하여 접근성을 개선하는 방안을 조사할 예정입니다.

모달은 정말 까다로운 부분이죠. [여기](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html)에는 도움이 될 수 있는 실용적인 가이드가 있습니다. 핵심은 1) `aria-modal` 속성을 사용하여 모달이 표시되어야 하며 나머지는 숨겨져야 함을 나타내고, 2) 키보드 포커스를 첫 번째 포커스 가능한 요소로 이동시키며, 3) 모달이 닫힐 때 플로우를 시작한 버튼으로 포커스를 되돌리는 것입니다. 도움이 되기를 바랍니다.

---

<div class="post-metadata">

### Author: ![nolan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nolan/32/208102_2.png) [@nolan](https://meta.discourse.org/u/nolan)
#### Post date: [5월 25, 2021, 12:30오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/38 "2021-05-25T12:30:41Z")

</div>

좋은 지적입니다. 또다시 까탈스럽게 굴어서 죄송합니다. 저는 일을 처리하기 위해 매일 디스코드, 엘리먼트, 깃허브, 기테아, 그리고 이제는 디스코스로 컨텍스트를 전환하고 있습니다. 각각의 플랫폼마다 각자의 마찰 지점이 있긴 하지만, 지금은 특히 디스코스의 문제들이 저에게 크게 부담되고 있습니다. 예를 들어, 이전 포럼에서 극도로 문제적인 사용자로 알려진 사람이 가입했고, 화면 리더를 고급으로 설정한 공동 관리자가 정지 기간 드롭다운 메뉴를 탐색하는 데 30분을 허비하기도 했거든요. 다행히 저는 드롭다운 메뉴에 익숙해서 그가 문제를 일으키기 전에 계정을 정지시켰지만, 관리 팀이 온보딩에 너무 많은 시간을 쓰지 않도록 이 문제를 제대로 해결해야 합니다. 🙂

모달 문제를 해결해 주셔서 정말 감사합니다. 정말 고맙습니다. 오늘 하루를 들여 주제 표시가 더 접근성 있게 개선될 수 있는지 살펴보겠습니다. 다음으로 큰 문제는 접근성이 없는 드롭다운 컴포넌트라고 생각합니다. 사용자를 정지할 수 없을 뿐만 아니라, 최근에는 자신의 주제를 이동하지 못하는 회원도 있었습니다. [여기](https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html)는 도움이 될 수 있는 접근성 있는 리스트박스 예시입니다. 이러한 컴포넌트는 여기저기 너무 많이 퍼져 있어서, 이것들을 고치면 많은 부분에서 긍정적인 효과를 볼 수 있을 것입니다.

다시 한번 감사합니다.

---

<div class="post-metadata">

### Author: ![nolan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nolan/32/208102_2.png) [@nolan](https://meta.discourse.org/u/nolan)
#### Post date: [5월 25, 2021, 4:34오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/39 "2021-05-25T16:34:00Z")

</div>

아티클 외에 지역(region)을 추가로 생성하는 것은 약간 더冗長(verbosely)하므로, 그렇게 하는 것이 좋은지 확신이 서지 않습니다.

NVDA가 다음/이전 랜드마크로 이동할 수 있도록 아티클을 지역으로 추적하도록 하는 것을 제안하는 [이 이슈](https://github.com/nvaccess/nvda/issues/12462)를 열었습니다. 이 이슈가 중장기적으로 문제를 해결해 주기를 바랍니다.

그동안, 게시글 메타데이터 필드에 비시각적 2단계 헤딩 역할을 추가하는 [이 PR](https://github.com/discourse/discourse/pull/13143)을 열었습니다. 이 패치를 테스트 인스턴스에 적용하면, 헤더가 없는 상태에서도 h/H 키로 게시글 사이를 이동할 수 있습니다. 물론 게시글 자체에 헤더가 포함된 경우 이 방식은 한계가 있지만, 스크린리더 사용자로서 우리는 이러한 혼합 콘텐츠에 익숙하다고 생각합니다. 그리고 NVDA가 아티클을 랜드마크로 취급하기까지, 다음 게시글로 빠르게 건너뛸 수 있는 방법이 있는 것이 여분 지역(filler region)을 도입하는 것보다 낫다고 봅니다.

---

<div class="post-metadata">

### Author: ![celtichawk](https://avatars.discourse-cdn.com/v4/letter/c/eb9ed0/32.png) [@celtichawk](https://meta.discourse.org/u/celtichawk)
#### Post date: [5월 25, 2021, 6:42오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/40 "2021-05-25T18:42:30Z")

</div>

샘, 게시글 제목 문제를 우회하기 위해 비시각적 구분선을 넣는 아이디어가 가치 있을 것 같아. 예를 들어, 게시글 안에 제목을 넣을 수 있으므로, 플랫폼 간 호환성이 있으면서도 보이지 않으면서 게시글 경계를 표시하는 데 사용할 수 있는 무언가가 있는지 궁금해. 네 글을 읽다가 이런 생각이 들었거든.

현재 리눅스에서 Orca를 사용하면 1번 키를 눌러 1번 제목(즉, 스레드 시작 부분)으로 이동하고, M키(다음 랜드마크)를 사용해 게시글 사이를 이동할 수 있어. 좀 번거롭긴 하지만, 충분히 가능해. 그래서 게시글 번호(예: 게시글 #1, #2 등)를 랜드마크로 표시하는 것이, 게시글 안에 넣을 수도 있는 헤더를 사용하는 것보다 기술적·사용성 측면에서 더 나은 방법인지 궁금해. 게시글 아래 버튼들이 랜드마크라면, 게시글 번호도 랜드마크로 사용할 수 없을까? 내 생각엔 게시글 아래 버튼들과 함께, 또는 그 대신 게시글 번호를 랜드마크로 설정하는 것이 더 합리적일 것 같아. 그 버튼들은 포럼 관리자가 원하면 숨길 수 있거든(그 버튼들을 ‘더 보기…’ 메뉴 아래로 옮긴 사례를 하나 알고 있어).

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [5월 25, 2021, 9:58오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/41 "2021-05-25T21:58:05Z")

</div>

@nolan에게 또 한 번 사과드립니다. 이번에는 정말 엉망으로 처리했네요. 최소한 릴리스 전에 키보드를 테스트하는 것조차 제대로 하지 않았다는 사실은 참으로 부끄러운 기준 미달입니다. 이 문제는 전적으로 저희 책임이며, 정말로 실수를 저질렀습니다. 여기서 저희가 얼마나 엉망으로 대응했는지 솔직히 부끄럽습니다. 아무리 대충 확인해 봐도 취소 다이얼로그가 키보드에서 완전히 깨져 있다는 것을 알 수 있었을 텐데, 그런 거대한 버그를 그대로 포함해 릴리스를 진행했습니다. 🤦‍♂️

저희는 프로세스를 재평가하여 다음 사항을 반드시 반영하도록 하겠습니다.

1. 키보드는 최소한 기대하는 대로 작동해야 합니다. **모든 기능이 마우스(🖱)를 연결하지 않은 상태로 테스트**되어 올바른 탭 순서와 포커스가 갖춰져 있는지 확인합니다.

2. NVDA를 사용할 때 Discourse의 핵심 활동이 직관적이고 단순해야 합니다.

이러한 문제에도 불구하고 저희를 믿어주시고, 저희를 엄격하게 감시해 주신 점에 감사드립니다. 저희는 프로세스 일부를 재구성하여, _최소한_ 항상 기능적이고 합리적인 ⌨ 키보드 내비게이션을 보장하도록 하겠습니다. NVDA 변경 사항 및 최적화 중 가장 손쉽게 해결할 수 있는 부분(lowest hanging fruit)이 무엇인지 결정하는 데에는 여러분의 도움이 필요합니다.

---

<div class="post-metadata">

### Author: ![nolan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nolan/32/208102_2.png) [@nolan](https://meta.discourse.org/u/nolan)
#### Post date: [5월 25, 2021, 10:05오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/42 "2021-05-25T22:05:18Z")

</div>

정말 감사해요, 관리자 팀과 저도 깊이 감사드립니다! 🙂

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [5월 25, 2021, 10:38오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/43 "2021-05-25T22:38:27Z")

</div>

@Nolan, 그러면 지역 변경은 되돌리고 헤더 변경만 적용하길 원하시나요? 아니면 두 가지를 모두 진행할까요?

시도해 보는 것은 괜찮습니다. 게시글 번호를 알리는 것이 일종의 "방향 감각"을 주는 데 도움이 된다고 생각했거든요. 그렇지 않으면 현재 100번째 게시글인지 3번째 게시글인지 구별하기가 매우 어렵습니다. 이를 통해 사용자는 자신의 위치를 더 잘 파악할 수 있습니다.

@celtichawk 헤더 억제에 대해서는 Nolan의 의견에 동의하는 것 같습니다. 게시글에서 헤더가 등장하는 경우는 매우 드물기 때문에, 헤더가 방해가 되는 경우도 드물 것입니다.

우리는 어디에도 사용할 수 있는 `1번째 게시글` 앵커가 없습니다. 유일한 앵커는 게시글 메타데이터, 게시글 본문, 그리고 게시글 버튼입니다. 메타데이터에는 게시글 번호가 아니라 사용자 이름, 수정 상태, 수정 시간이 포함되어 있습니다. Nolan은 게시글 메타데이터를 앵커로 사용하는 실험을 하고 있었습니다.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [5월 25, 2021, 11:15오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/44 "2021-05-25T23:15:04Z")

</div>

주제 목록 내비게이션이 헤더가 없어서 얼마나 불편한지 방금 깨달았습니다.

@nolan / @awesomerobot, 주제 목록의 주제 제목은 H2로 해야 할까요, H3로 해야 할까요? 그게 아니면 주제 목록의 주제에 `role="heading"`을 추가하는 것도 충분히 가능합니다.

현재 NVDA를 사용하여 주제 목록에서 주제 사이를 어떻게 탐색하고 계신가요?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [5월 25, 2021, 11:53오후 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/45 "2021-05-25T23:53:07Z")

</div>

방금 “토픽 작업” 영역을 추가했습니다. 예를 들어, 관리자 옵션, 공유, 북마크, 신고, 답변, 추적 상태 등이 해당됩니다.

> <https://github.com/discourse/discourse/pull/13152>
>
> This makes it much easier to reply to topics / bookmark topics and so on
> 
> Previo…usly topic buttons had no region

매우 작은 변경 사항이지만, 토픽에 답변하는 것을 훨씬 쉽게 만들어 줄 것입니다.

또한 토픽 추적 상태(추적 중/감시 중 등) 변경 기능이 스크린 리더에서 완전히 작동하지 않는다는 점도 발견했습니다. @j.jaffeux와 가능한 수정 사항을 논의할 예정입니다.

[이전 페이지](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105.md?page=1)

[다음 페이지](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105.md?page=3)
