[웹접근성] a 태그의 title

Jinjoo Park🍊·2021년 2월 23일
3

웹접근성

목록 보기
1/1

a 태그에서 title 속성이 필수인지 궁금해서 알아보았다.

발견한 문제점

사용자 에이전트와 보조 기술이 title 속성을 완전히 지원하지 않는다.
일부 그래픽 사용자 에이전트(ex. 브라우저)에서는 마우스 오버 시에 툴팁이 표시되긴 하지만, 표시되는 시간이 짧다.(대략 5초 후에 사라짐) 직접 테스트 해보니 익스플로러11에서 5초 정도 표시되고, 그외 크롬/파이어폭스/엣지/웨일 브라우저는 시간 제한 없이 마우스가 오버되어있는 동안 영구적으로 표시되었다.
또한 키보드만을 이용해서 내용에 접근할 수 없으며, 보조 기술(ex. 스크린리더기 등..)에서도 지원 방식이 서로 다르거나, 지원하지 않는다고 한다.

방법 제안

  • 그래서 title 속성에는 링크를 보충할 수 있는 설명만을 담고, 링크에 대한 중요한 내용은 본문이나 a 태그 안에 포함될 수 있도록 해야 한다.
  • 제공되는 텍스트와 내용이 중복되지 않도록 해야 한다.
  • a 태그 안에 이미지가 사용된다면, 이미지의 alt 태그와 내용이 중복되어서도 안된다.
  • 웹접근성 연구소의 전문가 답변처럼, '더보기' 텍스트에 링크된 페이지의 제목을 담는다던지, W3C 문서의 예제1와 같은 용도로만 title 속성을 사용하는 것이 바람직해보인다.

그 외

W3C 예제2(새 창 열림 안내)는 웹접근성 연구소 답변에 따르면 target="_blank" 속성에서 이미 기계적으로 알 수 있는 정보이므로 불필요하다고 한다. 기계적으로 알 수 있다는 것이 어떤 것인지 분명하지는 않은데, 아마 스크린리더기가 title 속성을 지원한다면 내용이 중복으로 안내될 것이라는 얘기 같다.
그리고 지원이 제한적인 title 속성을 사용해서 웹접근성에 대한 지원을 마치기보다, 아래의 참고 포스트처럼 링크를 서술적으로 만드는 기법을 사용하는 것이 중요해 보인다.

참고 포스트: 시각 장애인을 위한 디자인 - 스크린 리더

profile
2021년 9월부터 Frontend 개발자로 일하고 있습니다. :)

2개의 댓글

comment-user-thumbnail
2021년 4월 19일

좋은 글 감사합니다.

답글 달기
comment-user-thumbnail
2021년 4월 22일

감사합니다~

답글 달기