[HTML] href 속성이 없는 a태그의 웹접근성 문제

HTML5

HTML에서 어떤 요소를 클릭했을 때 동작을 수행하는 방법은 두가지 경우가 있다.

 

1. 버튼 태그를 쓰는 경우

2. a태크를 쓰는 경우

 

위 두가지 경우 모두 태그 요소에 클릭 이벤트를 바인딩해 원하는 동작을 수행하게 하면 된다. 하지만 여기서 문제점이 

발생하는데 겉으로 보기에는 잘 동작하기에 전혀 이상이 없어 보이지만

이런 태그에서는 가장 중요한 치명적인 문제점이 생겨난다.

 

💬 Answer

🌏 웹 접근성

👉 웹 접근성이란 ?

웹 접근성은 한국정보회진흥원 웹 접근성 연구소의 정의 어떠한 사용자(장애인, 노인 등). 어떠한 기술환경에서도

사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보를 접근할 수 있도록 보장해주는 것.

 

2021.06.10일 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹사이트에서 제공하는 정보들을 비장에인과

동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항 입니다.

 

즉, 장애인이나 고령자 분들도 똑같이 우리처럼 웹을 이용할 수 있게 보장하게 해주는 것을 웹 접근성이라 합니다.

 

👉 웹 접근성 준수 고려사항

• 시각: 다양한 형태에 시각 장애 (실명, 색각, 저시력 등)
• 이동성: 근육 속도 저하, 근육 제어 손실등등 손을 쓰기 어렵거나 쓰는 것이 불가능한 상태
• 청각: 영상, 음성 콘텐츠에 자막, 원고, 수화등의 대체수단 부제로 인한 인식 불가 상태
• 인지: 정신지체 및 발달 장애, 학습장애 등등

👉 도움을 주는 도구

• 스크린 리더
• 화면 확대 도구
• 음성 인식
• 키보드 오버레이

🌏 웹 접근성 문제점

👉 웹 접근성의 문제점이란 ?

웹 접근성을 고려했을 때 생기는 문제는, 사용자가 마우스를 사용하지 않고, 키보드만으로 모든 메뉴에 접근 가능해야 하지만 href속성이 없는 a 태그는 TAB키로 포커스가 생기지 않는다는 문제다.

 

이 문제를 해결하는 방법은 두가지가 있다.

• a 태그에 href 속성을 넣어준다.
• a 태그를 button 태그로 바꿔준다.

가장 간단한 방법으로 기존에 사용하던 a 태그에 href 속성을 href="#"같이 넣어 주면 포커스가 이동된다.

하지만 여기서 하나의 문제가 더 발생하는데 TAB 키로 포커스가 이동 되지만 동작을 수행하기 위해 ENTER키를 입력

해도 동작을 하지않는 문제가 발생한다.

 

결국 가장 좋은 방법은 굳이 특정 장소를 이동할 필요 없이 단순 동작에 대한 것은 a태그 보다는 button 태그를 이용하는 것이 가장 편리하다.