인터넷 사이트를 회원가입하거나, 검색을 하는 과정에서 Tab키를 눌러보면 순서대로 focus되는 효과를 본 적이 있었습니다. 이러한 효과는 키보드 타이핑을 하다가 마우스로 여러번 손이 가지 않아도 되서 편리했었다.
또 Tab키로 이동되는 순서가 순차적이지 못하고 움직인다면 마우스로 손이가는 불편함이 다시 생길 것이다.
이동을 원할하게 해서 사용자에게 편리함을 주기 위해서 tabindex속성을 사용하게 된다.
Tab키로 이동하기, focus 순서속성
회원가입 페이지를 만들면서 tabindex를 적용하는 공부를 했었으며,
사용 방법에 대한 글은 이미지는 다르게 코드가 잘 보이고 잘 이해되게 작성한 코드입니다.
tabindex
tabindex 속성은 키보드 접근성에 근접한 속성어입니다.
(키보드 접근성은 사용자가 키보드를 통해서 웹 페이지의 정보에 접근하는 것을 말합니다.)
Tab 키를 사용해서 포커스 되는 요소로 이동하거나, Tab 키가 다시 눌려지면 다음으로 이동되는 요소들의 순서를 정할 수 있으며, 요소에 포커스 되지 않게 적용할 수도 있습니다.
사용방법
tabindex="-1"
tabindex ="-1" tab키를 아무리 눌러도 focus 되지 않습니다.
(사용자가 키보드로 접근할 때 불편할 수도 있는 요소에 적용해 주면 될 거 같습니다.)
tabindex="0"
tabinbex="0"은 tabindex를 아무리 많이 넣어도 항상 맨 뒤의 순서에 focus 됩니다.
Tab 키가 눌렸을때 focus 되는 순서를 번호로 입력해 주면 됩니다.
(확인 버튼이나 취소 버튼 앞의 요소들의 tabindex가 변동이 될 수도 있으니 미리 0으로 적용하면 수정하는데도 편할 거 같습니다.)
tabindex="1~32768"
1~32768까지의 수를 속성값으로 사용할 수 있으며, 순서대로 focus 되게 됩니다.
<body>
<a href="###" tabindex="0">맨 마지막 focus</a>
<input type="text" name="name" tabindex="1" placeholder="첫번째 focus">
<input type="text" name="gender" tabindex="-1" placegoler="focus 되지 않음">
<div tabindex="3">
세번째 focus
</div>
<a href="###" tabindex="2">두번째 focus</a>
</body>
사용자가 웹 페이지를 사용하면서 편리함을 제공하는게 목적인 기능인만큼
너무 속성이 많이 사용되거나, 불필요한 곳에 사용되지는 않는지 주의하면서 사용하는 게 좋겠습니다.
tabindex 속성은 input과 button태그에도 사용이 가능합니다. button태그에도 tabindex속성을 사용해서..
Tab 키로 이동을 했다면 엔터키로 버튼을 클릭할 수 있는 기능도 함께 사용하면 사용자에게 더 편리함을 줄 수 있을거 같아서
전에 작성했었던 글을..껴본다..
엔터키로 검색 / 메소드 호출하기 / onkeypress , onkeydown
검색을 검색버튼 없이, 엔터키를 사용하여 아래의 메소드를 호출하는 방법이다. 버튼을 클릭했을때 onclick속성에 script의 메소드를 호출하는것이 아닌, 해당키를 눌렀을때 호출하기 검색창인 inpu
record-than-remember.tistory.com
tip!
Tab키를 누르면 tabindex의 순서대로 이동하지만
shift+tab 키를 누르면 tabindex의 순서의 반대로 이동할 수 있습니다.
내용이 부실해서 찾아보다가 얻어낸 팁;
오쌤...아주 자세히 설명해주고 계신다..
[HTML5강좌] 19강 tabindex태그속성 - 오쌤의 니가스터디
1. 초점이동이란? - 키보드 접근성이란 스크린 리더 사용자가 키보드를 통해 웹 페이지의 정보에 접근하는 것을 의미한다. - 특히, 초점이동이란 [tab]키를 누르면 좌측상단부터 초점받는 요소로
ossam5.tistory.com
다음번에는 회원가입 CSS글을 공부해보려고합니당..
'Web Programming > HTML' 카테고리의 다른 글
| input 속성 readonly, disabled 차이점 (0) | 2022.03.14 |
|---|---|
| HTML 특수문자 / 띄어쓰기,공백, 따옴표 등등등 (0) | 2021.06.30 |
| HTML /회원가입 화면 만들기/ h2 , label , input , button 사용하기 / input type 속성 / label의 필요성 (0) | 2021.04.26 |
