레이블과 타이틀, 새창

웹표준/접근성 2015.08.21 09:44

원본 : https://www.wah.or.kr:444/Participation/consultingView.asp?cType=&seq=9207&page=1?cType=&FindTxt=타이틀&cMail=

[질문]

안녕하세요.

1) 레이블 제공에 대해 문의드립니다.
입력서식에는 레이블을 제공하도록 되어 있는데 타이틀을 제공하는 것과 비교한다면 사용자 입장에서 어떤 차이가 있는지 알고 싶습니다.
접근성 보조도구로 입력서식에 접근하면 똑같이 읽어주는 것 같습니다.

2) 새 창에 대해 target을 blank로 지정해 놓으면 접근성 보조도구에서 정상적으로 새창이라고 리딩해 주는 것으로 알고 있습니다. 지침에 따라 title 속성을 써서 새 창 알림 정보를 제공하면 중복해서 읽어주게 되는데요..그래도 입력해 주는 것이 좋다면 어떤 면에서 도움이 되는지 알고 싶습니다.

감사합니다.




[답변]

안녕하세요.

1) 레이블 제공 방법에 대해 안내해 드립니다.

입력서식을 이해할 수 있는 1:1 대응하는 레이블을 제공하여야 합니다.
문의 주신 것처럼 <label>요소를 연결하여 제공하는 방법과 title 속성을 이용하여 제공하는 방법이 있습니다.

레이블을 연결할 텍스트가 있다면 <label>요소로 제공하는 것이 권장됩니다.
<label> 요소를 제공하지 않은 경우에는 체크박스나 라디오버튼을 직접 클릭해야만, 텍스트와 입력서식이 1:1로 연결하면 <label>요소내 텍스트를 클릭하면 입력서식도 체크됩니다.
이는 정밀하게 선택이 어려운 사용자에게 많은 도움이 됩니다. 이러한 경우 <label>요소로 제공하는 것이 바람직합니다.

우편번호나, 전화번호처럼 여러개의 입력서식을 받아야 하는 경우처럼 레이블으로 연결할만한 텍스트가 화면상에 제공되지 않거나, 시각적으로 보이지 않는 경우 처럼 레이블이 1:1으로 대응하기 어려운 경우에는 title 속성을 이용하여 제공하는 것이 바람직합니다.

국내에서 가장 많이 사용되는 센스리더의 경우, <label> 요소나 title 속성 중 하나만 제공되면 편집창 접근시 레이블을 읽어줍니다. 단, <label> 요소와 title 속성을 같이 사용한 경우, <label>요소이 우선권을 같습니다.

<label> 요소와 title 속성을 용도나 상황에 맞게 고려하여 레이블을 제공하는 것이 권장됩니다.

2) 새창 열림 미리 알림 방법에 대해 안내해 드립니다.

새창 페이지를 제공할 때는 target="_blank" 속성을 제공하는 것이 바람직합니다.
_blank로 제공하면 센스리더를 포함한 대부분의 스크린리더는 새창을 미리 알려줍니다.
예) 센스리더
(링크텍스트) 새창 링크, (이미지 alt) 새창 그래픽 링크

window.open 메소드를 이용하여 새창을 여는 방법과 같이 스크립트를 통해 새창 페이지를 여는 경우, title 속성으로 새창을 미리 알리는 방법이 권장되고 있습니다. 이는 스크립트로 열리는 경우, 새창여부를 알 수 없기 때문입니다.

title 속성으로 새창을 알리는 경우, 스크린리더에 따라 옵션을 켜야만 듣게되거나, 읽어주지 않을 수 있습니다.
그러므로 특별한 경우가 아니라면 target속성을 통해 새창을 미리 알수 있도록 합니다. 즉, target 속성으로 제공하는 것이 보조기기 환경과 관계없이 새창임을 구분할수 있으므로 사용자 입장에서 더 도움이됩니다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

1) 기본은 label 과 폼 요소 연결, 레이블에 여러개의 폼요소가 연결되거나 시각적으로 보이지 않을 경우 title 사용

2) 새창은 기본적으로 target="_blank" 로 사용. window.open 시 title을 사용하나 이는 기기에 따라 옵션 설정이 있을수 있으므로 비권장

 

 

신고

'웹표준/접근성' 카테고리의 다른 글

레이블과 타이틀, 새창  (0) 2015.08.21
접근성 툴  (0) 2015.07.07
접근성 모음  (0) 2012.10.09
웹접근성 디자인  (0) 2012.06.20
디자인 명도대비 체크  (0) 2012.06.20
시각장애인 스크린리더 테스트  (0) 2011.06.15
Trackback 1 : Comment 0

css 무료 벡터 아이콘

CSS 2015.07.22 08:56

http://fontawesome.io/


상업적 사용 프리

신고

'CSS' 카테고리의 다른 글

css calc 함수  (0) 2016.06.08
css 무료 벡터 아이콘  (0) 2015.07.22
ie9 이하 버전의 제한  (0) 2014.02.26
One-Time Expression 한번만 실행시키자.  (0) 2012.07.27
대체 텍스트기법  (0) 2012.06.27
하단 풋터고정  (0) 2012.06.07
Trackback 1 : Comment 0

jquery 플러그인

jQuery 2015.07.14 20:25
http://www.tendency.co.kr/new/TLab/tlab_view.asp?sbdtype=0000300007&bno=13#quick main

http://wooreeweb.com/lecture/archives/140

http://bxslider.com/

신고

'jQuery' 카테고리의 다른 글

jquery 플러그인  (0) 2015.07.14
0527 duration  (0) 2014.05.27
배너2  (0) 2014.05.15
이미지 배너  (0) 2014.05.13
div 안에 있는 엘리먼트 합 구하기  (0) 2013.02.03
신현석님 Jquery AIP 정리  (1) 2012.08.29
Trackback 1 : Comment 0

티스토리 툴바