팀 여러분, 안녕하세요!
이것은 그냥 잠깐 보고 드리는 내용입니다. 다른 스레드에서 좋아요 버튼에 접근성 라벨이 없는 경우가 있다는 걸 알게 되었습니다. 아직 패턴을 찾지는 못했지만, 게시물이 이미 하나 이상의 좋아요를 받았는지, 아니면 아직 아무도 좋아요를 안 눌렀는지에 따라 컨트롤이 분할되어 표시되는 것과 관련이 있을 수 있습니다. 그렇게 되면 버튼이 두 개로 나뉘어 보이는데, 하나에는 개수가 표시되고, 다른 하나는 라벨이 없습니다.
마르코 드림
아, 이건 우리가 메타에서 Discourse Reactions 플러그인을 테스트하고 있기 때문인 것 같습니다 (Notice: testing Discourse Reactions here on meta for 1 week!). 이 부분을 수정해야겠네요! 보고해 주셔서 감사합니다.
@Ahmed_Gagan 참고로, 이 내용을 꼭 확인해 보세요.
다양한 케이스로 시도해 보았지만 해당 문제를 재현하지 못했습니다. 라벨은 항상 표시되었지만, 처음에는 일부 지연이 발생하며 이는 title 속성의 일반적인 동작입니다.
좋아요 버튼에 제공되는 툴팁에 문제가 있는 것으로 추정됩니다. 같은 맥락에서 이야기하고 계신가요?
제가 말씀드리는 것은 게시물을 '좋아요’하기 위해 누르는 버튼에 대해 스크린 리더가 읽어주는 내용입니다. 혹은 다른 반응(리액션)을 추가할 수 있는 기능이 있을 수도 있지만, 제 스크린 리더는 그에 대해 전혀 알려주지 않습니다. 제가 라벨을 받는 유일한 요소는 현재 좋아요 수가 1개 이상일 때 표시되는 요소뿐입니다. 0개라면 해당 컨트롤이 존재하지 않습니다. 그러나 ‘좋아요’ 반응을 추가하기 위해 제가 눌러야 하는 버튼은 Windows, Mac, iOS의 스크린 리더에서 모두 라벨이 없습니다.
저는 시각 장애가 있어 마우스를 사용하지 않습니다. 그리고 title 속성은 일반적으로 터치 상호작용에서도 문제가 되는데, 마우스 호버를 트리거할 쉬운 방법이 보통 없기 때문입니다.
이 정보가 도움이 되길 바랍니다…
정확히 말씀드리자면, 저는 #discourse-reactions-actions-916340 > div > div.discourse-reactions-reaction-button.my-likes > button 버튼에 대해 말씀하는 것입니다. 이 버튼에는 title이나 aria-label이 없고, 내부에는 aria-hidden으로 설정된 SVG만 있습니다. 그리고 설령 그렇지 않더라도, 그 SVG와 자식 요소에는 스크린 리더가 사용할 수 있는 정보가 전혀 없습니다. 따라서 해결책은 다음과 같습니다:
#discourse-reactions-counter-916340에는 실제로 누가 어떤 반응으로 반응했는지에 대한 더 나은 정보가 제공되어야 합니다. 비시각 장애 사용자가 그 숫자를 클릭하면 어딘가에 팝업이 나타나는지 저는 잘 모르겠습니다. 하지만 그것도 스크린 리더 및 키보드 사용자에게 접근 가능하도록 만들어야 합니다.현재로서는 적어도 저에게는 위젯이 ‘좋아요’ 반응만 허용하는 것 같습니다.
여러 번의 게시물에 대해 죄송합니다. 하지만 원인을 찾아가는 과정이 때로는 이렇게 세밀할 수 있음을 보여줍니다. 제 것이 아닌 게시물들의 title 속성은 현재 실제 ‘좋아요’ 버튼의 부모 div에 있습니다. 그러나 스크린 리더가 이를 인식하려면 title이 버튼 자체에 있어야 합니다. 스크린 리더는 아무 요소의 title도 인식하지 않습니다. 지난 25년간 title 속성이 너무 많이 오용되어 왔기 때문에, 일반적인 일반화는 불가능합니다. 따라서 title 속성을 <button> 자식 요소로 이동시키면 스크린 리더가 적절히 인식할 것입니다.
제목이 필요한 정확한 지점을 알려주셔서 감사합니다, @MarcoZehe.
여러분의 문제를 해결하기 위해 PR을 추가했습니다.
@MarcoZehe PR이 병합되었습니다. 최신 플러그인을 받아서 사용해 보세요.
감사합니다! 이 인스턴스가 플러그인의 최신 코드를 가져올 때까지 기다리겠습니다. 저는 자체 Discourse 인스턴스를 운영하지 않기 때문에 플러그인을 가져올 곳이 없습니다. 빠른 수정에 감사드립니다!
마르코, 정말 감사합니다.
방금 여기에서 리액션을 다시 배포했습니다(약 15분 내에 활성화될 것입니다).
문제가 해결된 것 같는지 알려주세요.
Sam님, 해당 문제가 확실히 해결된 것 같습니다. 감사합니다!
테스트해 주셔서 정말 감사합니다, 마르코!