접근성: 앵커 링크에 라벨이 필요합니다

베타 7에서 막 추가된 기능이라, 긴 게시물 내 각 소제목에 대한 링크에 aria-label이 필요하다는 점을 지적하고자 합니다. 현재 구현 방식은 이름만 있는 a 태그와 CSS 클래스 .anchor를 통해 포함되는 배경 이미지 정도만 존재하여, 스크린 리더가 숫자(아마도 게시물 ID일 것입니다)와 제목의 일부만 읽어 줍니다. 명시적으로 “Permalink”(영구 링크) 또는 "Permalink to "(영구 링크: ) 뒤에 소제목 텍스트를 붙이는 형태가 더 좋습니다. 이렇게 하면 스크린 리더 사용자가 페이지의 링크 목록을 열 때 올바르게 이름이 지정된 링크를 확인하게 됩니다.

또한, 앵커를 h 요소 안의 제목 텍스트 뒤에, 앞쪽에 두지 않고 배치할 수 있을까요? 현재 스크린 리더는 제목에서 제목으로 탐색할 때 항상 링크를 먼저 읽어 주는데, 위에서 제안한 대로 라벨에 제목 텍스트가 반복된다면 독서는 상당히 번거로워질 수 있습니다. 스크린 리더 사용자는 주로 제목 구조를 통해 페이지의 개요를 파악하므로(다양한 WebAIM 스크린 리더 사용자 설문 조사 참고), 링크를 제목 텍스트 뒤에 두는 것이 더 좋습니다.

Discourse의 접근성을 항상 개선해 주셔서 감사합니다.

4개의 좋아요

음, 어딘가에서 숫자가 가져오는 것 같아서 좀 이상하네요…

그 aside, 이 제안들은 모두 타당하며 구현하는 데 문제가 없을 것 같습니다. 조언해 주셔서 다시 한번 감사합니다!

1개의 좋아요

링크에 다른 레이블이 없는 경우, 스크린 리더는 href 속성의 내용을 읽어 주므로 사용자가 최소한 링크의 대상이나 URL은 알 수 있습니다.

접근 가능한 앵커 링크에 대한 훌륭한 기술적 심층 분석 기사는 여기에 있습니다: Are your Anchor Links Accessible? | Amber Wilson

2개의 좋아요