안녕하세요!
오늘은 접근성을 고려한 마크업 중 role="presentation" 속성에 대해 소개해보려고 해요.
퍼블리싱을 하다 보면, 보조기기(스크린리더 등)에 의미 없이 읽히는 요소들을 마주치게 됩니다.
이럴 때 적절히 role="presentation" 속성을 활용하면, 접근성을 해치지 않으면서 마크업을 깔끔하게 유지할 수 있어요.
role="presentation"이 뭐예요?
이 속성은 요소를 순수 시각적 목적으로만 썼을 때,
보조기기가 이 요소를 무시하게 만들어주는 역할을 해요.
"이건 의미 있는 구조가 아니라 디자인용이에요!"라고 선언하는 거죠.
언제 쓰면 좋을까요?
단순 장식용 아이콘
아이콘 자체는 클릭 대상이 아니고, 텍스트에 이미 의미가 담겨 있다면
스크린리더에 굳이 읽히지 않도록 해주는 게 좋아요.
의미 없는 테이블 레이아웃
순수하게 레이아웃용으로만 테이블을 쓸 경우,
스크린리더가 "표가 있습니다"라고 안내하지 않도록 할 수 있어요.
(단, 이런 테이블 사용은 점점 지양되는 추세긴 해요!)
데코레이션 요소를 위한 div
단순한 선(divider)이나 배경 요소처럼
시각적인 구분만 있는 구조에 의미를 부여하지 않기 위해 사용돼요.
그럼, role="presentation"과 aria-hidden="true"는 어떻게 다를까요?
둘 다 보조기기 사용자에게 정보를 숨기는 역할을 하긴 하지만, 방식과 목적이 조금 달라요.
role="presentation"은 요소의 구조 자체를 무시해달라는 의미예요.
예를 들어, 테이블이나 리스트처럼 의미 있는 구조로 인식되는 태그에 이 속성을 주면,
스크린리더가 그걸 "테이블입니다", "리스트입니다"처럼 인식하지 않도록 해줘요.
즉, 구조가 있어도 "이건 그냥 시각적인 장식일 뿐이에요"라고 말해주는 거죠.
반면에 aria-hidden="true"는 그냥 아예 읽히지 않게 숨겨버리는 역할을 해요.
구조든, 내용이든, 어떤 요소든지 간에 시각적으로는 보여도
스크린리더에게는 존재하지 않는 것처럼 처리됩니다.
그래서 정리하자면,
**아이콘처럼 의미 없는 SVG나 decorative 요소엔 role="presentation을 주는 게 자연스럽고,
완전히 숨기고 싶은 요소엔 aria-hidden="true"가 더 적합해요.
가끔은 둘을 함께 쓰기도 하지만, 꼭 필요하지 않다면 하나만 써도 충분한 경우가 많아요.
결국 중요한 건, 그 요소가 사용자에게 전달하고자 하는 의미가 있는가 없는가를 먼저 따져보는 거랍니다.
비슷하지만, aria-hidden은 더 강력하게 숨김 처리하는 느낌이에요.
그래서 의미 없는 아이콘엔 role="presentation"
완전히 숨기고 싶은 요소엔 aria-hidden="true" 를 쓰는 게 일반적이에요.
주의할 점도 있어요!
모든 상황에 무조건 적용하는 건 위험해요. 아이콘이 버튼의 유일한 설명인 경우라면 오히려 접근성을 해칠 수 있어요.
스크린리더가 이 속성을 어떻게 해석할지는 브라우저나 환경에 따라 다를 수 있어요. 그래서 테스트도 중요합니다.
실무에서는 aria-hidden과 role="presentation"을 중복해서 쓰기도 하지만, 꼭 필요하지 않다면 하나만으로 충분한 경우도 많아요.
정리해볼게요!
role="presentation"은
구조는 있지만 의미는 없는 요소를 스크린리더가 무시하도록 만들고,
불필요한 정보로부터 사용자 경험을 지켜주는 속성이에요.
퍼블리셔가 만든 구조가 모든 사용자에게 어떻게 읽히는지 한 번 더 고민해보는 것,
그게 바로 접근성을 높이는 시작이에요!
앞으로 마크업할 때
“이건 진짜 의미 있는 구조일까?”를 한 번쯤 떠올려보면 좋겠죠?
HASY도 계속해서 그런 고민과 함께 작업 중이에요.
지금까지 HASY였습니다, 감사합니다!
