웹 접근성을 위한 의미 없는 요소 숨기기

디자인이나 레이아웃을 위해 의미 없는 요소를 넣어야 하는 경우가 있다.

이런 장식용 요소는 스크린 리더에 읽히지 않도록 하기 위해 숨겨줘야 하는데, 적절히 숨기는 방법은 다음과 같다.

1. aria-hidden="true"

시각적으로는 보이지만, 스크린 리더에서 읽히지 않아야 하는 경우 area-hidden 속성을 사용한다.

단 aria-hidden="true"가 적용된 요소 안에 포커스 가능한 요소(ex: link, button)등이 들어가서는 안된다.

2. role="presentation"

장식용 이미지 등을 넣는 경우, role="presentation"을 사용해서

스크린 리더가 무시할 수 있도록 한다.

3. CSS 가상요소 사용하기

장식적 요소인 경우, 가능하면 css 가상 선택자인 ::before, ::after를 사용해서 구현하면

DOM요소에 포함되지 않으므로 스크린 리더에서 무시된다.

이렇게 하면 디자인 적용을 위해 무의미한 마크업 등을 추가하더라도,

스크린 리더에는 읽히지 않도록 하여 스크린 리더 사용자에게 불필요한 혼란을 주는 경우를 막을 수 있다.