웹 접근성 앵커 태그 A에 onfocus hover 시각화 (점선 테두리)가 나타나지 않을 때 해결법. 초점을 인지할 수 없는 링크 및 서식 개수

웹 접근성 심사를 받다 보면, 전혀 예기치 못했던 부분에서 감점을 받게 되는 경우가 종종 있다.

팀작업이나, 예전에 다른 사업자가 작업했던 부분에서 너무나 도 기초적인 부분을 체크하지 못했던 경우에 종종 문제가 생긴다.

직접 했던 프로젝트라면 웹 접근성의 기본과 기초에 맞춰서 작업을 했을 테니 기본적으로 갖추었어야 할 부분인데, 남이 했던 것인데

"설마 이런 것도 틀리겠어?"

라고 생각하는 부분에서 문제는 발생한다.

다행히 위와 같이 초점을 인지할 수 없는 링크 및 서식 개수의 문제에 있어서 초점을 시각적으로 인지할 수 없는 링크의 경우 의도적으로 시각화를 날려 버린 경우가 아니라면, X가 아닌 △을 받긴 한다.

하지만 모든 심사관이△를 준다는 보장은 없다.

그리고 의도적으로 onfocus=blur();로 초점을 날려 버리면 100% FAIL이 뜨니 주의해야 한다.

위의 경우에는 의도성은 없었지만, 전 사업자가 html의 기초도 모르고 작업을 했거나, 알았더라도, 특별한 의도가 있었는지는 모르겠지만 앵커 태그 A 태그 하위에 <div> 태그를 사용했다.

<div> 태그는 면 속성이고, <a> 태그는 라인 속성이다.

즉, 1차원인 inline 태그 안에 2차원 속성인 block을 사용했다.

이렇게 배치 해 버리면 앵커 태그 측에서는 높이, 폭에 대한 정보 값을 같지 못하지만, div태그 내에서는 높이와 폭이 있는 면적의 개체가 생성되어서 보인다.

하지만 a태그 자체는 높이도 폭도 없기 때문에 시각화가 되어서 점선 테두리가 생겨도 사용자의 눈에 보이지 않게 된다.

위의 문서를 정확하게 태깅을 하려면 A태그 하부에 div를 쓰지 않았어야 한다.

하지만 아마도 전 사업자의 퍼블리셔가 A태그에서 ellipsis로 말줄임을 처리하는 방법을 몰랐기 때문에 Div를 사용한 것으로 추측된다.

어차피 저렇게 돼버리면 A태그에 display:block이나 display:inline-block 속성을 줘야 한다.

display:block과 display:inline-block 속성을 사용하면 굳이 a태그 아래에 div를 쓰지 않고도 말줄임이 가능할 뿐 아니라 시각화에 방해될 일도 없다.

어찌 되었건 간에 위와 같이 태깅이 사이트 전반에 광범위하게 적용되어 있어서, 수정하기가 귀찮다면 CSS에서 위의 a태그에 display:block이나 display:inline-block를 부여해 주면 점선 테두리가 보여서 시각화가 완성된다.

가장 간단하게 수정하는 방법이긴 하다.

물론 A태그 안에 div를 사용한 표준 위반은 피할 수 없지만, 접근성 심사만을 염두에 둔다면 FAIL을 면할 수 있는 방법이다.