Focus
-
[Tabtrap] Modal에서 focus 다루기 :: 마이구미HTML, CSS 2020. 5. 30. 18:21
이 글은 Tabtrap 이라는 테크닉을 다룬다. 정해진 용어는 딱히 없는 것 같지만 Tabtrap 이라고도 불린다. 크게는 모달에서 사용할 수 있고, 다른 요소의 영역에서도 충분히 활용할 수 있다. 사용자 경험 측면에서도 향상될 수 있는 테크닉이다. 웹 개발에 있어서, 모달(Modal) 여부는 대부분 존재한다. 그렇다면, 모달의 무엇인가? 모달은 팝업과 비교하면 쉽게 이해할 수 있다. 모달은 어느 시점에 사용자가 특정 컨텐츠에 집중해야할 경우에 필요로한다. 즉, 모달은 사라질 때까지 사용자는 그 영역에만 집중할 수 있어야한다. 마치 window 객체에서 제공해주는 alert, confirm 메소드처럼 완료 처리를 하기 전까지는 아무것도 할 수 없는 것처럼말이다. 반대로 팝업은 존재하더라도, 사용자는 다른..
-
웹 접근성 tabindex 속성 :: 마이구미HTML, CSS 2016. 8. 18. 18:17
이번 글은 tabindex 속성에 대한 웹 접근성에 대해 알아볼 것이다.참고 자료 - http://nuli.navercorp.com/sharing/blog/post/1132726tabindex 를 활용한 하나의 테크닉 - https://mygumi.tistory.com/372 tabindex 속성은 키보드 접근성에 근접한 속성이다. 키보드 접근성이란, 말 그대로 스크린 리더 사용자가 키보드를 통해 웹 페이지의 정보에 접근하는 것이다. 스크린 리더를 쓰지 않더라도, 흔히 우리도 주로 탭이나 엔터를 통해 사용하고 있다. 자 그렇다면, tabindex 란 무엇일까? 어떤 엘리먼트에 키보드 포커스를 주는 가장 흔한 방법으로 사용된다. 크게 3가지 속성값을 이용할 수 있다. 0 값 - tabindex="0" 양수..