[웹접근성] web focus 포커싱 (tabindex)

웹접근성 web focus (tabindex)

 

🔎 포커싱이란? 기본적으로 마우스가 없어도 키보드의 tab키를 이용하면 input에 값을 입력하거나 버튼영역에 접근할 수 있는 것을 의미한다.

🔎 기본으로 포커싱을 지정해주는 요소

• <a>
• <input>
• <button>
• <select>

🔎 tabindex : 기본적으로 요소들의 포커스를 설정할 수 있다.

✅ tab키를 이용하여 순차적으로 포커스 이동을 할 수 있으며, shift+tab키는 역순으로 이동할 수 있다.

---

 

📌 포커싱 되지 않는 element를 포커싱 시키기

//html
<div tabindex="1"></div>

//react
<div tabindex={1}></div>

📌  tabindex="0"

• div, h1, h2, p 태그는 포커싱이 되지 않는다.
• tabindex=“0” 속성값을 추가하면 포커싱이 가능해짐

<div tabindex="0">포커스 초점이 잡힌다</div>

 

📌 tabindex="-1"

• 기존에 포커싱 되는 element를 포커싱 시키지 않기

<button tabindex="-1">포커스 초점이 잡히지 않는다</button>

 

📌 포커싱의 순서를 변경하기

• 마크업이 순차적으로 잘 적용되어있는 경우, 대게 콘텐츠의 논리적인 흐름에 따라서 focus가 이동한다.
• 프로젝트 상의 특이사항이 생길 경우 tabindex등을 사용하여 focus 순서를 제어할 수 있다.
• 하지만 마크업 흐름에서 많이 벗어나는 포커스 순서는 혼란을 야기할 수 있기 때문에 주의가 필요함.

<div tabindex="3">4번째로 포커싱</div>
<div tabindex="0">1번째로 포커싱</div>
<div tabindex="1">2번째로 포커싱</div>
<div tabindex="2">3번째로 포커싱</div>
<div tabindex="4">5번째로 포커싱</div>

 

 

---

✅ 모달과 같이 동적으로 생성된 경우에는 강제적으로 focus처리를 해 주어야 한다.
✅ 웹은 처음 로드 될 때 DOM을 일괄적으로 읽은 후 처리 되기 때문에 동적 생성된 콘텐츠는 인식하지 못한다.

//tabindex 속성 추가
$('.modal').css('display', 'block').attr('tabindex'. '0').focus();

✅ 모달이 닫히면서 포커스 이동이 생길 때는 강제로 주었던 tabindex의 속성을 다시 제거해 주어야한다.

//tabindex 속성 삭제
$('.modal').css('display', 'none').removeAttr('tabindex');

✅ 퍼블리싱의 경우 포커스 순서는 화면에 보이는 순서와 동일해야 한다 (콘텐츠의 선형 구조)