이러한 동작이 내 Windows 기기에서 매우 일관되게 나타나기 때문에 이상합니다.
Chrome Canary (Google Chrome 버전 111.0.5536.0)에서 테스트해 보았습니다.
다음과 같이 시도해 보세요.
다음 주소로 이동하세요: https://meta.discourse.org/
토픽 목록에서 다음 토픽을 찾으세요:
Does Discourse offer anything similar to WordPress custom taxonomy?
해당 행의 마지막 열로 이동하세요. 텍스트가 있는 곳입니다:
현재 내 덴마크어 설정에서는 '3t’로 표시됩니다.
Enter 키를 누르면 해당 토픽의 마지막 답변으로 포커스가 이동해야 하지만, 실제로는 그렇지 않습니다.
Enter 키를 눌러도 아무 일이 일어나지 않습니다. 보통 페이지가 업데이트되지 않기 때문에 화면 낭독기가 아무 동작도 하지 않습니다.
그러나 행을 읽으면 여전히 페이지의 첫 번째 줄에 있으며, 스레드에 마지막으로 게시된 토픽의 예상 헤딩이 아닙니다.
NVDA는 포커스를 약간 이동시키지만, 토픽 자체 안으로조차 이동하지 않습니다. 이 문제를 게시한 시점까지 두 화면 낭독기 모두 예상대로 작동했습니다.
Firefox Nightly 버전 110.0a1로 변경했을 때
위 예시에서 '3t’를 누르면 해당 토픽의 최신 게시글로 이동하며, 포커스가 예상대로 배치됩니다.
구체적으로 말씀드리면, 제가 사용하던 자체 호스팅 인스턴스 여러 곳에서 한동안 잘 작동하다가, 현재 고용주가 사용하는 사이트들에서 실패하고 있습니다. 특히 https://community.fly.io 와, 위에서 언급한 내용으로 쉽게 추측할 수 있는 내부 호스팅 포럼인 특정 discourse.team 사이트에서 문제가 발생합니다. 두 사이트 모두 동일한 버전의 Discourse를 사용하는 것으로 보입니다.
저희는 Discourse에서 많은 작업을 수행하고 있기 때문에 이는 큰 불편을 초래하고 있습니다. 시각 장애를 가진 직원으로서 내부 토론과 커뮤니티 멤버들과의 지원 대화에서 제 위치를 자주 잃어버리게 됩니다. 이전에 읽었던 게시물로 돌아가기 위해 원래 있던 위치를 찾기까지 20~30초가 소요됩니다.
소음을 일으켜서 죄송합니다. 조금 더 알아본 결과, 이 문제는 Firefox에서는 동작하지만 Chrome에서는 동작하지 않습니다. 회사에서는 업무용으로 Chrome 사용을 의무화하고 있어서, Firefox를 사용하는 다른 환경에서는 문제가 없었지만 Chrome에서는 문제가 발생한 것입니다.
생각했던 것만큼 큰 회귀 문제가 아니라서 다행이지만, Chrome에서도 이 기능이 정상적으로 동작하면 좋겠습니다. NVDA를 사용 중이며, Chrome에는 확장 프로그램이 설치되어 있지 않은 상태입니다.
확인해 보았더니, 포커스 문제가 가끔 스레드 내 특정 주제로 이동하는 것 같고, 지금은 작동하는 듯하지만 항상 그런 것은 아닙니다. 그러다 보니 어딘가에서 회귀(regression)로 보이는 문제가 떠올랐습니다.
토픽의 각 게시물 아래에는 여러 버튼이 있습니다.
예를 들어, ‘좋아요’ 버튼인데, 단순히 '좋아요’를 누를 수 있는 옵션이 아니라 "이 게시물을 좋아합니다"라고 표시됩니다.
그리고 "게시물 번호 XX에 답장하기"라는 텍스트가 있는데, 이 텍스트가 번역되지 않았습니다. 즉, 답장 부분의 문자열이 덴마크어 번역에서 'reply’로 남아 있습니다. 그래서 여기에는 관련이 있는 두 가지 문제가 있습니다.
늦어서 죄송합니다, Nolan. 방금 NVDA(Assistiv Labs라는 온라인 서비스를 통해)로 테스트해 봤는데, 제 환경에서는 Firefox와 Chrome 모두에서 잘 동작하는 것 같습니다. 뒤로 이동하는 단축키를 사용할 때, 이전에 열었던 게시물에 포커스가 맞춰져 있음을 확인할 수 있었습니다.
말씀하신 대로 이 수정이 이미 일찍 배포되었다면, 제 문제는 해결되지 않았습니다. 오늘 Chrome과 Edge에서 JAWS와 NVDA를 모두 사용하여 설명하신 대로 테스트해 보았습니다. 화면 낭독기마다 포커스가 정확히 어디에 위치하는지가 다르지만, 주제 내의 최신 게시물에 포커스가 있어야 할 위치에 올바르게 위치하지 않습니다.
Claus
저의 테스트 결과, Windows 환경에서 Chrome과 NVDA를 함께 사용할 경우 포커스가 토론의 마지막 답변에 떨어집니다. 포커스된 요소가 화면에 표시되지 않는 이유는 포커스를 전환하기 위해 숨겨진 요소를 사용하고 있기 때문인데, 토론으로 이동한 후 Tab 키를 누르면 항상 게시글 작성자의 요소에 포커스가 맞춰집니다.
Chrome에서 비슷한 작업을 하면 아무것도 말해지지 않습니다. 포커스가 시각적으로 올바르게 이동하는 것 같지만, 어떤 이유에서인지 음성 출력이 되지 않습니다.
이것은 Chrome과 Firefox의 접근성 구현 방식의 차이일 수 있습니다. 두 브라우저 모두에서 '뒤로’를 누르면 포커스가 활성 게시물에 올바르게 이동하며 그 내용이 음성으로 출력됩니다. 하지만 Chrome에서 게시물을 로드한 후 h 키를 몇 번 눌러 뒤쪽의 다른 주제로 이동하고, '뒤로’를 누른 다음 다시 해당 게시물을 클릭하면, h 키를 누를 때 마지막 읽은 위치가 아니라 첫 번째 보이는 게시물로 이동하는 것 같습니다. 이 현상은 여러 Discourse 호스팅 포럼에서도 동일하게 나타납니다.
이것은 타이밍 문제처럼 느껴집니다. 접근성 관련 코드가 포커스를 시도하는 요소가 DOM에 존재합니까? 포커스 설정 전에 약 50ms 정도의 짧은 setTimeout을 추가하는 것이 해결책이 될 수 있을까요? 일반적으로 저는 이런 유형의 문제에 이렇게 접근하지만, 제 추측이 틀렸을 수도 있습니다.