웹 접근성을 고려한 탭-콘텐츠 마크업 짜기

 
공공기관 프로젝트에 많이 투입되다보니 이런 구조는 정말 매번 짜는 것 같아요
그런데 구축을 하면서 접근성 작업도 함께 해야하는 프로젝트를 맡게 돼서 정말 마크업의 중요성을 뼈저리게 느꼈답니당

ul li로 짜고 JS로 고치면 되겠지 하며 자만에 빠져 있다가 JS에서 너무 골치가 아파서 이제 마크업을 잘 해놓으면 고생이 덜하다는 것을 깨달았습니다..
역시 사수님의 의견은 새겨 들어야 한다는 것.. 리스펙
 
모든 영역들은 focus가 논리적인 흐름, 순서대로 이동해야 하는데요 ..
 
마크업을 잘못하면 나중에 고생을 합니당 그래서 이제는 마크업부터 제대로 하려고 합니다? 하하
리더님께서 자주 쓰시는 방법인데 정말 꿀팁이예요.. 
 
꿀팁 함께 써보아요.. 
줍줍
 
 

 
 
이렇게 하면 JS 없이도 대부분의 포커스 이동이 CSS로 해결됩니다.
뭘 했냐면용 
 
<button> 태그와 게시판 콘텐츠 <div>, 그리고 자세히 보기 <a> 태그를 보여지는 순서 그대로 마크업하고,
.board-list는 flex 하고 flex-wrap !
.board-item을 order로 999 이런 식으로 해서 아래로 놓아줍니다
이렇게 하고 자세히 보기 버튼은 absolute로 띄워주면 돼요
 

🔹 CSS만으로 자연스러운 키보드 이동

• order 속성으로 콘텐츠 순서 조절 → 포커스가 탭 → 콘텐츠 → 자세히 보기 버튼 순서로 이동해요.
• JavaScript 없이 CSS만으로 접근성을 유지 → 별도 스크립트 없이도 키보드 네비게이션이 가능해요.

 

🔹 결론

 
✅ 포커스 이동이 직관적으로 가능
✅ JS 없이도 키보드 접근성이 해결됨
✅ 유지보수가 편리하고 직관적인 UI 구현 가능
✅ 탭 전환을 위한 최소한의 jQuery 적용
 
 
예시만 보여주느라 스타일이 구려도 이해 부탁드려요 - !
 
 

실제 적용 사례 탭-콘텐츠 구조 예시 이미지