숨김 클래스.

.hide

.visually-hidden

.blind

.offscreen

 

접근성 측면에서 시각장애인을 위한 스크린리더가 읽을 수 있도록 img태그에 alt속성을 꼭 채워주는 것처럼,

✨버튼안에 span,strong과 같은 인라인블록 태그에 설명을 써놓고 대게 위의 클래스명으로 화면에는 보이지 않게 한다.

 

 

스크린리더가 불필요한 아이콘은 읽지못하게 i태그 속성에 aria-hidden을 추가해주는 것도 접근성 측면에 도움이 되는데 지금 이 사진이랑 버튼은 이런거예요! 하고 알려주는 위의 방법과는 사뭇 다르다. 화면상에는 꼭 필요하지만 스크린리더가 읽지 않고 스킵해도 될때 태그에 쓰는 속성이니 말이다. (이미 버튼안에 글쓰기 텍스트와 chevron 아이콘이 있을 때 글쓰기라는 텍스트를 스크린리더가 읽어줄 것이니 chevron 아이콘에 aria-hidden속성을 추가함.)

 

 

그래서 숨김 클래스는 어떻게 두고 쓰냐?

.old-hide{
    position:absolute;
    top:-9999px;
    left:-9999px;
    text-indent:-9999px;
    width:1px;
    height:1px;
}

예전에  텍스트 인덴트로 화면밖으로 밀어버리는 걸 봤는데 앵커태그(<a href="~">)나 html5에서의 대화형 요소들에서 포커스가 document 바깥에서 잡아버리는 문제점이 있다.

 

.new-hide{
    position:absolute;
    overflow:hidden;
    border:0;
    width:1px;
    height:1px;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path:inset(50%);
}

 

 

우선, 콘텐츠를 숨기는 방법 중

display:none과 visibility:hidden , font-size:0, line-height:0, width:0, height:0과 같이 화면에서 영역이 잡히지 않는 속성들이 있습니다.

이런 속성들은 스크린 리더로 읽히지 않기 때문에 웹 접근성에 좋지 않은 속성입니다.

 

position:absolute -> clip 속성이 absolute, fixed 일 경우에만 적용가능

clip -> top, bottom / left, right의 값이 같으면 요소가 숨겨짐

border:0 -> border-style 적용했을경우 대비해 안전하게 0으로 설정

overflow:hidden -> overflow 된 콘텐츠를 숨김

 

 

 

 

 

 

 

 

 

 

참고한 글.

WAI-ARIA에서는 보조기술 사용자를 위해 콘텐츠의 노출 여부를 제어하는 aria-hidden, Modal 및 탭 컨트롤과 같은 복잡한 위젯 제작 시 HTML 요소의 기본 역할을 적절한 ARIA 역할로 대체하기 위한 presentation 및 none 역할이 있습니다. 이번 시간에는 aria-hidden 상태를 사용하여 스크린 리더와 같은 보조기술 사용자에게 콘텐츠를 숨기는 방법과 presentation 역할 및 ARIA 1.1에 도입된 presentation 역할과 동일한 none 역할을 바르게 사용하는 방법에 대해 살펴보겠습니다.

 

aria-hidden

웹페이지 제작자는 웹 페이지의 일부 콘텐츠를 숨길 필요가 있습니다. 대표적으로, 버튼을 클릭했을 때 관련 콘텐츠가 펼쳐지거나, 탭 위젯에서 탭을 활성화하는 등 사용자가 페이지에서 컨트롤과 상호작용한 후 불필요한 콘텐츠 등이 될 수 있습니다. 콘텐츠를 숨기는 대표적인 기술로는 CSS의 display:none, visibility:hidden 등이 있습니다. 이러한 기술은 웹페이지에서 콘텐츠가 보이지 않도록 시각적으로 콘텐츠를 숨길 뿐만 아니라 스크린 리더와 같은 보조기술로도 탐색할 수 없습니다. aria-hidden은 스크린 리더와 같은 보조 기술을 사용하는 사용자를 대상으로 콘텐츠의 탐색을 제한합니다. aria-hidden이 "true"로 설정되면, 스크린 리더로 해당 콘텐츠를 가상 커서로 탐색할 수 없습니다. aria-hidden이 사용될 수 있는 대표적인 사례는 다음과 같은 것이 있습니다:

1. 요소에 장식용으로 간주될 수 있는 콘텐츠가 포함되어 있거나 페이지에 렌더링 된 동등하게 액세스 가능한 콘텐츠에 중복되는 요소를 보조기술 사용자에게 노출되지 않도록 설정할 수 있습니다. 이를테면, 시각적으로 렌더링 된 텍스트와 함께 SVG 또는 글꼴 아이콘을 포함하는 링크입니다. 이 상황에서 아이콘은 링크 텍스트와 중복될 수 있으므로 보조기술 사용자에게 아이콘 정보를 숨김으로써 콘텐츠 탐색을 용이하게 할 수 있습니다.
2. Modal 대화상자와 같은 위젯에서 보조기술 사용자가 Modal 본문에만 탐색을 제한하도록 설정할 수 있습니다. aria-hidden을 대화상자 외부 콘텐츠에 설정하고, 키보드 초점을 대화상자 내로 제한하여 Modal 대화상자 본문 내에서만 보조기술 사용자의 탐색을 제한할 수 있습니다.

aria-hidden은 키보드 및 마우스 사용자 등과 같은 모든 사용자를 대상으로 콘텐츠를 숨기는 방법이 아니므로, 사용에 주의해야 합니다. aria-hidden 상태를 다음의 값으로 설정하여 보조기술 사용자의 콘텐츠의 숨김 여부를 결정할 수 있습니다:

• true: 스크린 리더와 같은 보조기술 사용자의 콘텐츠 탐색을 제한합니다. aria-hidden이 "true"로 설정된 콘텐츠는 스크린 리더의 가상 커서에서 탐색되지 않습니다. ul, table과 같이 하위 요소를 포함할 수 있는 요소에 aria-hidden을 "true"로 설정하면 하위 요소까지 숨길 수 있습니다.
• false: 접근성 API가 스크린 리더와 같은 보조기술 사용자에게 숨겨진 콘텐츠를 노출하여 콘텐츠를 탐색할 수 있습니다.

 

주의

aria-hidden을 사용하여 스크린 리더와 같은 보조 기술에 콘텐츠를 숨기는 경우 웹페이지 제작자는 반드시 동일하거나 유사한 의미와 기능이 스크린 리더와 같은 보조 기술로 탐색할 수 있는지 확인해야 합니다. 또한, 링크, 버튼과 같이 초점을 받을 수 있는 요소를 aria-hidden으로 숨긴 경우 키보드 또는 마우스 사용자가 해당 컨트롤에 초점이 제공되어 탐색에 혼란이 있을 수 있으므로 컨트롤에 대한 초점을 제거해야 합니다.

 

aria-modal

이전 섹션에서 Modal 대화 상자 내에서만 콘텐츠 탐색을 제한하기 위해 aria-hidden을 적용하는 방법을 소개했습니다. aria-modal 속성을 사용하면 접근성 API는 스크린 리더와 같은 보조기술에서 Modal 대화상자 내에서만 콘텐츠가 탐색되도록 알립니다. 하지만, 모든 스크린 리더가 aria-modal을 지원하지 않으므로 적용에 주의해야 합니다.

• true: aria-modal 속성을 "true"로 설정하여 스크린 리더와 같은 보조기술 사용자가 대화상자 내에서만 콘텐츠를 탐색할 수 있도록 제한합니다.
• false: aria-modal을 "false"로 설정하여 보조기술이 대화상자 외부의 콘텐츠를 탐색할 수 있도록 설정합니다.

 

presentation 역할

HTML에서의 각 요소는 고유한 역할을 가지고 있습니다. 예를 들어, a 태그는 링크, button 태그는 버튼과 같은 역할 등이 부여되어 있습니다. 이러한 요소의 역할을 브라우저의 접근성 API를 통해 보조기술 사용자에게 전달합니다. 웹페이지를 제작할 때 HTML의 부여된 기본적인 역할로 마크업할 수 있지만, 메시지 목록, 메뉴 모음과 같은 위젯을 제작하거나 HTML에서 지원하지 않는 역할을 ARIA로 제공하고자 할 때 또는 마크업한 요소의 의미를 제거하고 내용만을 보조기술 사용자에게 전달하려 할 때 presentation 역할을 사용할 수 있습니다.

1. HTML을 의미에 맞지 않게 마크업하여(table 레이아웃으로 콘텐츠를 구성하는 등) 보조기술 사용자에게 요소의 의미를 제거하여 콘텐츠의 내용만을 전달하도록 할 수 있습니다. 하지만, 이러한 의미에 맞지 않게 마크업한 콘텐츠의 사용을 지양해야 합니다.
2. 기존에 마크업된 요소에서 불필요한 요소의 의미를 제거하여 스크린 리더와 같은 보조기술 사용자의 탐색을 향상시킬 수 있습니다.
3. table, ul과 같은 하위 요소를 포함할 수 있는 요소에 presentation 역할을 적용 시 주의해야 합니다. ul, table과 같은 요소에 presentation 역할을 잘못 적용하면 테이블 목록과 같은 요소의 의미가 스크린 리더에 전달되지 않아 스크린 리더 사용자의 탐색에 영향이 있을 수 있습니다.
   

 

주의

ARIA 1.1에서는 presentation 역할과 동일한 none 역할을 사용할 수 있으며, presentation 역할이 none 역할로 대체됩니다.  이러한 이유는, presentation 역할을 aria-hidden="true"로 동의어로 잘못 생각하는 사람들이 많음에 따라 역할의 의미를 명확히 전달하기 위해 none이 도입되었습니다. 하지만, 보조기술의 호환성을 위해  role="none presentation" 형식으로 작성하거나 role="presentation"과 같이 사용하는 것이 좋습니다.

aria-presentation역할 및 aria-hidden 사용 시 주의사항

aria-hidden과 presentation 역할의 바른 사용 방법 및 주의할 점을 정리하면 다음과 같습니다:

1. display:none이나 visibility:hidden으로 숨겨진 콘텐츠는 시각적으로 콘텐츠를 숨김으로 화면에 표시되지 않으며, 스크린 리더와 같은 보조기술로도 탐색할 수 없습니다.
2. aria-hidden은 요소의 의미와 내용을 스크린 리더와 같은 보조기술로 노출되지 않지만, none 역할은 요소의 의미만 제거되며 스크린 리더로 요소의 내용을 읽을 수 있습니다.
3. 링크, 버튼과 같이 초점을 받을 수 있는 요소를 aria-hidden으로 숨긴 경우 키보드 또는 마우스 사용자가 해당 컨트롤에 초점이 제공되어 탐색에 혼란이 있을 수 있으므로 컨트롤에 대한 초점을 제거해야 합니다.
   
4. modal 대화상자와 같은 위젯을 구현할 때 대화상자 외부의 콘텐츠에 aria-hidden을 "true"로 설정하여 보조기술 사용자의 탐색을 대화상자 내로 제한할 수 있지만, 키보드 및 마우스 사용자는 대화상자 외부의 콘텐츠 밖의 요소와 상호작용할 수 있으므로 이러한 요소가 초점을 받지 않도록 처리해야 합니다.
   
5. 하위 요소를 포함할 수 있는 요소에 aria-hidden이나 presentation 역할을 잘못 적용하면 요소의 의미가 스크린 리더에 전달되지 않거나 하위 요소 전체를 탐색하지 못할 수 있으므로 적용에 주의해야 합니다.
   
6. modal 대화상자를 좀 더 쉽게 구현하기 위해 aria-hidden이 아닌 aria-modal 속성을 사용할 수 있지만, 보조 기술이 이를 지원하지 않을 수 있으므로 사용에 주의해야 합니다.

이번 아티클에서 사용된 예제 코드는 다음 페이지에서 확인하실 수 있습니다:

• aria-hidden 예제 페이지
• aria-modal 예제 페이지
• presentation 역할 예제 페이지

지금까지 aria-hidden, aria-modal 속성, presentation 역할 및 none 역할을 바르게 사용하는 방법에 대해 살펴보았습니다. 저희는 다음에 더 좋은 콘텐츠로 찾아뵙겠습니다. 감사합니다.