전문가 상담

HOME > 지식마당 > 온라인 자문서비스 > 전문가 상담
10236에 대한 추가 질문 사항입니다.
10236에 대한 추가 질문 사항입니다.
작성일 2017-03-20 오후 1:32:47 작성자 김봉주
첨부파일
[질문]

1)
tooltip을 커스터마이징하여 제공하려고 합니다.
이때, native title 속성도 같이 사용하게 되면 title의 기본 tooltip이 제공되어 커스터마이징 한 툴팁과 중첩되어 보이는 현상이 있습니다.

그렇기 때문에, 커스터마이징한 tooltip이 뜰때만 동적으로 native title을 제거하여 문제를 해결 하여도
접근성에 문제가 없는지 알고 싶습니다. (스크린 리더기가 title을 읽기에 문제 없는지)

ex)
커스터마이징 툴팁 생성 전 : <input id="age" title="툴팁입니다."/><span style="display:none;">커스터마이징 툴팁</span>
커스터마이징 툴팁 생성 후 : <input id="age"/><span style="display:block;>커스터마이징 툴팁</span>
이미지(before_tooltip.png, after_tooltip.png) 첨부하였습니다. 참고해주시면 감사하겠습니다.

2) 2개의 테이블이 있을때 첫번째 table의 thead의 th에 id를 지정하고 두번째 table의 tbody의 td에 headers 를 사용했을때
접근성에 문제가 없는건가요? 스크린 리더기가 올바르게 읽을수 있나요? table.img 첨부 파일 참조




[답변]

[답변]
안녕하세요. 추가 문의하신 부분에 대하여 답변을 드립니다.

1) Tooltip을 커스터마이징 한다면 title 속성 사용하지 않고 사용하는 것을 권장하여 드립니다.
스크린리더에서 title을 읽지 않도록 설정이 가능하므로, 중요한 정보라면 숨김텍스트로 정보를 제공하는 것이 바람직하며, title 속성이 삭제되었다가 다시 삽입된다면 스크린리더 사용자들은 왜 그런지 그 이유를 알 수 없기 때문입니다.
Tooltip을 커스터마이징 할 때, 키보드 포커스나 마우스 오버시에 보여질 수 있도록 제공하고, 포커스가 나가면 사라지도록 구현하는 것을 추천 드립니다.
만약, 툴팁이 보이지 않은 상황에서도 툴팁의 내용을 안내해야 한다면, display:none으로 사용하지 않고, top:-1000과 같은 값으로 화면에 보이지만 않게 해야 합니다.

ex)
커스터마이징 툴팁 생성 전 : <input id="age"/><span style="position:absolute;top:-10000px">커스터마이징 툴팁</span>
커스터마이징 툴팁 생성 후 : <input id="age"/><span style=" position:absolute;top:0px">;>커스터마이징 툴팁</span>

2) Id와 headers 속성은 같은 테이블 내에서만 유효합니다.
수정방안을 말씀드렸던 대로 두번째 테이블 <th>에 id를 삽입하고 <td>에 headers를 사용하여 연결해야 합니다.
그리고 두번째의 <th>을 화면 상에 보이지 않도록 css로 처리하고, 화면에 보여야 하는 첫번째의 테이블은 레이아웃 테이블이나 <div>로 구현하고, 스크린리더에서 읽지 않도록 aria-hidden=”true”을 삽입하면 해결 가능합니다.

전문가상담 목록
번호 분류 제목 작성자 작성일
10245 개발 10236에 대한 추가 질문 사항입니다. 서민수 2017-03-13
10248 개발  전문가 답변10236에 대한 추가 질문 사항입니다. 김봉주 2017-03-20

웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.

(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)

팀 버너스 리 경 - 웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)

위로가기